/* Phone layout. Loaded last so it settles the earlier stacked media queries. */

/* Single-column grids must be allowed to shrink below their content's min width,
   or the quick-add row pushes Today wider than the screen. */
@media(max-width:900px){.workspace-grid,.workspace-side{grid-template-columns:minmax(0,1fr)}}
@media(min-width:601px) and (max-width:900px){.topbar-date{display:none}.topbar-title{white-space:nowrap}}
@media(max-width:680px){.workspace-side{grid-template-columns:minmax(0,1fr)}}

@media(max-width:600px){
  /* Bottom tab bar */
  .sidebar{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:20;height:calc(64px + env(safe-area-inset-bottom,0px));padding:0 4px env(safe-area-inset-bottom,0px);border-top:1px solid var(--line);border-bottom:0;box-shadow:0 -10px 24px -20px color-mix(in srgb,var(--ink) 55%,transparent)}
  .sidebar .brand,.sidebar .side-label,.sidebar .sidebar-bottom{display:none}
  .sidebar .side-nav{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:0}
  .sidebar .nav-item,.sidebar .nav-item:not(.active),.sidebar .nav-item.active{width:auto;height:56px;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:4px 2px;font-size:12px;line-height:1.1;border-radius:12px}
  .sidebar .nav-item.active{box-shadow:none}
  .sidebar .nav-item svg{width:21px;height:21px}
  .topbar{top:0;height:56px}
  .topbar-right{justify-content:flex-end}
  .content-wrap{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  .dd-menu{z-index:1000}

  /* Tap targets */
  .topbar-add{width:44px;height:44px}
  .day-switch button{min-width:44px;min-height:44px}
  .text-button{min-height:44px;display:inline-flex;align-items:center}
  .mini-calendar-head a{min-height:44px;display:inline-flex;align-items:center;font-size:12px}
  .task-controls select{min-height:44px}

  /* Shorter top of Today: the header strip and date picker already show the date */
  #intro-date{display:none}
  #day-view .intro{padding:20px 0 16px}
  #day-view .intro h1{font-size:30px}
  #day-view .intro-sub{font-size:13px;margin-top:6px}
  #day-view .day-controls{margin-top:16px}
  .overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
  button.overview-card{min-height:112px;padding:12px;display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:2px 8px;text-align:left;border-radius:14px}
  .overview-icon{display:none}
  .overview-card strong{grid-column:1;grid-row:1/3;align-self:center;font-size:27px;line-height:1.1;font-variant-numeric:tabular-nums}
  .overview-label{grid-column:2;grid-row:1;font-size:12px;font-weight:700;color:var(--ink)}
  .overview-card small{display:block;grid-column:2;grid-row:2;font-size:11px;line-height:1.35;color:var(--muted)}
  button.overview-card[data-overview="due"].has-items{background:color-mix(in srgb,var(--danger) 9%,var(--surface));border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
  button.overview-card[data-overview="due"].has-items strong{color:var(--danger)}
  button.overview-card[data-overview="priority"].has-items{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
  button.overview-card[data-overview="priority"].has-items strong{color:var(--accent-strong)}

  /* Quick add: title and Add on one line, date, time and priority on the next */
  .quick-entry{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px 10px;align-items:center;padding:8px 8px 8px 12px}
  .quick-entry>input{min-height:44px}
  .quick-entry>button[type="submit"]{grid-column:3;grid-row:1;min-height:44px;margin:0}
  .quick-schedule{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.1fr);gap:6px;margin:0}
  .quick-entry .date-trigger,.quick-entry .time-trigger{width:auto;min-width:0;min-height:44px}
  .quick-entry .date-trigger-text,.quick-entry .time-trigger-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .quick-schedule .quick-priority,#quick-task-priority:not(#dd-x){width:100%;min-width:0;height:44px;padding-left:9px;padding-right:24px;font-size:12px;background-position:right 7px center}
  .quick-entry .date-trigger svg,.quick-entry .time-trigger svg{display:none}
  .quick-entry .date-trigger,.quick-entry .time-trigger{justify-content:center;padding:0 6px}

  /* Small print */
  .mini-weekdays span{font-size:12px}
  #item-form .dialog-actions{position:sticky;bottom:-1px;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px -27px -27px;padding:12px 27px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--surface)}
  #item-form .dialog-actions button{min-height:44px;padding:9px 6px;white-space:nowrap}
  .dialog-top .icon-button{min-width:44px;min-height:44px}
}

/* Picker-sized controls and readable quick scheduling on narrow screens. */
.topbar-add{min-height:44px}
.quick-entry .date-trigger,.quick-entry .time-trigger,.quick-entry .quick-priority,.quick-entry>button[type="submit"]{min-height:40px;font-size:12px}
@media(max-width:600px){
  .quick-schedule{grid-template-columns:minmax(0,.95fr) minmax(0,1.02fr) minmax(0,1.03fr)}
  .quick-entry .date-trigger,.quick-entry .time-trigger{justify-content:space-between;gap:4px;padding:0 7px}
  .quick-entry .date-trigger svg,.quick-entry .time-trigger svg{display:block;width:14px;height:14px}
  .quick-entry .quick-priority,.quick-entry>button[type="submit"]{min-height:44px}
  .calendar-controls button,.picker-header button,.time-picker-head button,.pbtn-icon,.note-tool{min-width:44px;min-height:44px}
}
@media(max-width:360px){
  .quick-schedule{grid-template-columns:repeat(2,minmax(0,1fr))}
  #quick-task-priority{grid-column:1/-1}
}

@media(max-width:600px){
  #day-view .intro{padding-bottom:13px}
  .overview{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px}
  button.overview-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70px;padding:7px 3px;gap:2px;text-align:center}
  .overview-card .overview-label{font-size:11px;line-height:1.2;text-align:center}
  .overview-card strong{font-size:23px;line-height:1.1}
  .overview-card small{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .overview-hint{display:block;grid-column:1/-1;margin:1px 0 0;color:var(--muted);font-size:11px;line-height:1.35}
  .workspace-section .section-heading{padding-top:16px;padding-bottom:12px}
  .workspace-section .section-heading>div{flex-basis:145px}
  #quick-task.quick-entry{grid-template-columns:minmax(0,1fr) auto;gap:7px 9px;margin-top:12px;margin-bottom:8px;padding:10px}
  #quick-task.quick-entry>input{grid-column:1;grid-row:1;min-height:44px;font-size:16px}
  #quick-task.quick-entry>button[type="submit"]{grid-column:2;grid-row:1;min-width:62px;min-height:44px;margin:0}
  #quick-task .quick-options{grid-column:1/-1;grid-row:2}
  #quick-task .quick-options>summary{min-height:44px}
  #quick-task .quick-schedule{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
  #quick-task .quick-field{min-width:0}
  #quick-task .quick-field>span,#quick-task .quick-field>label{font-size:11px}
  #quick-task .date-trigger,#quick-task .time-trigger,#quick-task .quick-priority{width:100%;min-width:0;min-height:44px;height:44px;padding:0 7px;font-size:12px}
  #quick-task .date-trigger svg,#quick-task .time-trigger svg{display:none}
  .task-meta .status-picker{min-height:44px;height:44px;font-size:12px}
  .mini-day{width:44px;height:44px}
  .day-controls .date-trigger,.day-controls .time-trigger{min-height:44px}
}
@media(max-width:360px){
  #quick-task .quick-schedule{grid-template-columns:repeat(2,minmax(0,1fr))}
  #quick-task .quick-field:last-child{grid-column:1/-1}
  .mini-calendar{padding-left:4px;padding-right:4px}
  .mini-calendar-head{padding-left:10px;padding-right:10px}
  .mini-day{width:39px;height:44px}
  #checklist .section-heading .text-button,#ledger .section-heading .text-button{justify-content:flex-start;text-align:left}
}

@media(max-width:600px){
  .topbar-brand{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:4px}
  .topbar-brand img{display:block;width:34px;height:38px}
  .topbar-brand .brand-logo-dark{display:none}
  :root[data-theme="black"] .topbar-brand .brand-logo{display:none}
  :root[data-theme="black"] .topbar-brand .brand-logo-dark{display:block}
  .topbar-right{width:auto;min-width:0;flex:1}
}