/* Small cover displays and short browser windows. Use available CSS pixels,
   rather than a device name, so folding/resizing updates the layout immediately. */
@media (max-width:600px) and (max-height:600px), (max-width:360px) {
  html {scroll-padding:8px}
  .workspace,html[data-design=beta] .workspace {height:100dvh;min-height:0}
  .document,html[data-design=beta] .document {padding-bottom:env(safe-area-inset-bottom,0px);overflow:hidden}
  .document-head,html[data-design=beta] .document-head {height:auto;min-height:44px;padding:2px 8px;padding-top:max(2px,env(safe-area-inset-top));gap:6px}
  .document-actions,html[data-design=beta] .document-actions {gap:6px;flex-shrink:0}
  .icon-button,html[data-design=beta] .icon-button {width:40px;height:40px;min-width:40px;min-height:40px;flex-shrink:0}
  .breadcrumbs {min-width:0}
  .sidebar,html[data-design=beta] .sidebar {width:min(320px,100vw);top:0;bottom:0;height:100dvh;border-radius:0;overflow:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom,0px)}
  html[data-design=beta] body:not(.sidebar-open) .sidebar .view-tabs {visibility:hidden}
  html[data-design=beta] .sidebar {transition:none;left:calc(-1 * min(320px,100vw))}
  html[data-design=beta] body.sidebar-open .sidebar {left:0}
  .sidebar-head,html[data-design=beta] .sidebar-head {height:44px;min-height:44px;padding:2px 10px;flex-shrink:0}
  .brand,html[data-design=beta] .brand {font-size:19px}
  .view-tabs,html[data-design=beta] .view-tabs {position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 8px 4px;padding:2px;gap:3px;border-radius:10px;box-shadow:none;transform:none;flex-shrink:0}
  .view-tab,html[data-design=beta] .view-tab {min-height:44px;padding:4px;gap:2px;border-radius:8px}
  .sidebar-overlay,html[data-design=beta] .sidebar-overlay {bottom:0}
  .tree-actions,html[data-design=beta] .tree-actions {padding:0 6px;margin:2px 0;gap:2px;flex-shrink:0}
  .tree-actions .divider {margin:0 2px}
  .note-search,html[data-design=beta] .note-search {margin:4px 8px;width:calc(100% - 16px);padding:8px;font-size:16px;flex-shrink:0}
  .tree,html[data-design=beta] .tree {min-height:64px;flex:1 0 auto;padding:0 6px 4px;overflow:visible}
  .tree-row,html[data-design=beta] .tree-row {min-height:40px;padding-top:8px;padding-bottom:8px}
  .sidebar-footer,html[data-design=beta] .sidebar-footer {padding:2px 8px;margin:4px 0 0;min-height:44px;flex-shrink:0;border-radius:0}
  .editor-wrap,html[data-design=beta] .editor-wrap,html[data-design=beta].focus-mode .editor-wrap {padding:6px 10px;gap:0}
  .note-title,html[data-design=beta] .note-title {font-size:20px;padding-bottom:6px;flex-shrink:0}
  .markdown-tools,html[data-design=beta] .markdown-tools {flex-wrap:nowrap;overflow-x:auto;min-height:40px;padding:2px;margin:0 0 4px;flex-shrink:0;gap:2px}
  .markdown-tools button,html[data-design=beta] .markdown-tools button {min-width:40px;min-height:36px;padding:6px;white-space:nowrap;flex-shrink:0}
  #preview-toggle {margin-left:0}
  .tags {min-height:0;max-height:32px;overflow:auto;padding:3px 0 0;flex-shrink:0}
  .empty {padding:8px;gap:10px;overflow:auto}
  .empty-symbol {font-size:40px}
  .agenda-wrap,html[data-design=beta] .agenda-wrap,.files-wrap,html[data-design=beta] .files-wrap {padding:6px 8px 16px;min-height:0}
  .agenda-row,html[data-design=beta] .agenda-row {grid-template-columns:40px minmax(0,1fr) 40px 40px;grid-template-rows:40px 36px 36px;gap:0 2px;min-height:112px;padding:3px 0;margin-bottom:4px}
  .agenda-row .agenda-date {grid-column:2 / 5;grid-row:2;max-width:none;justify-self:stretch}
  .agenda-row .agenda-time {grid-column:2 / 5;grid-row:3;max-width:none;justify-self:stretch}
  .agenda-row input,.agenda-row input[type=date],.agenda-row input[type=time] {font-size:16px;min-height:36px}
  .agenda-row .agenda-text {font-size:16px!important}
  .agenda-row .todo-check {width:36px;height:36px;justify-self:center}
  .agenda-row .icon-button {width:40px;height:40px;opacity:1}
  .agenda-add,html[data-design=beta] .agenda-add {min-width:44px;min-height:44px;margin-top:6px;padding:4px 12px}
  #agenda-calendar,html[data-design=beta] #agenda-calendar {padding:8px 5px 0;margin:0 0 8px;border-radius:12px}
  .calendar-head {flex-wrap:wrap;gap:4px;margin-bottom:8px}
  .calendar-title {flex-direction:row;align-items:baseline;gap:5px}
  .calendar-title>span {font-size:18px}
  .calendar-controls {margin-left:auto;gap:2px}
  .calendar-controls .icon-button {width:40px;height:40px}
  .calendar-today {min-height:40px;padding:5px 8px}
  .calendar-grid {gap:3px;margin-bottom:6px}
  .calendar-grid .calendar-weekday {padding:3px 0;font-size:10px}
  .calendar-day {min-height:40px;padding:2px 0;border-radius:6px}
  .calendar-number {height:20px;width:20px;font-size:11px}
  .calendar-event-count {margin-top:1px;line-height:12px;font-size:8px}
  .calendar-day-summary {min-height:32px;line-height:1.4}
  .files-toolbar,html[data-design=beta] .files-toolbar {padding:2px 4px;margin-bottom:6px;gap:4px}
  .files-tools {gap:2px}
  .files-row,html[data-design=beta] .files-row {padding:2px 4px;min-height:44px;gap:4px}
  .files-name,html[data-design=beta] .files-name {font-size:13px;padding:8px 0;gap:5px}
  .files-size {display:none}
  dialog,html[data-design=beta] dialog {width:calc(100vw - 12px);max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px);margin:auto;padding:12px;border-radius:12px;overflow:auto;overscroll-behavior:contain;scroll-padding:8px}
  dialog h2,html[data-design=beta] dialog h2 {font-size:18px;margin-bottom:10px}
  dialog input,dialog select,html[data-design=beta] dialog input:not([type=checkbox]):not([type=range]),html[data-design=beta] dialog select {font-size:16px;padding:9px;min-width:0;max-width:100%}
  .settings-group {min-width:0;margin-left:0;margin-right:0;padding:8px}
  #settings-dialog label {margin:10px 0}
  .dialog-actions {position:sticky;bottom:-12px;z-index:1;background:var(--card);padding:6px 0;margin-top:10px;flex-wrap:wrap}
  .dialog-actions button,html[data-design=beta] .dialog-actions button {min-height:40px;padding:8px 12px}
  .file-viewer,html[data-design=beta] .file-viewer {height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);padding:0}
  .viewer-head {padding:2px 6px;gap:4px}
  .viewer-body {padding:6px}
  .toast {max-width:calc(100vw - 16px);width:max-content;bottom:max(8px,env(safe-area-inset-bottom));padding:8px 12px;overflow-wrap:anywhere}
  .login-wrap {padding:12px;align-items:start}
  .login-card {width:min(300px,100%);gap:8px;margin:auto}
  .login-brand {margin-bottom:4px;font-size:22px}
  .login-brand .brand-mark {width:30px;height:30px;font-size:23px}
  .login-card input {padding:10px 12px}
  .login-submit {padding:8px 12px;min-height:40px}
  .error {min-height:16px;margin:0}
}