/* APEX MOBILE UX — progressive chunks
   Each chunk is isolated. Delete this file to revert everything. */

/* ---- Chunk 1: top bar ---- */
@media (max-width: 860px){
  #topbar{height:44px !important;min-height:44px !important;padding:0 10px !important;gap:6px !important}
  #topbar .date-chip,#topbar .streak-chip,#topbar .sync-pill,#topbar .icon-btn[data-undo],#topbar #help-btn,#topbar .sb-toggle{display:none !important}
  #page-title{font-size:13.5px !important;font-weight:700 !important;letter-spacing:-.01em !important;flex:1 !important}
  #topbar .top-right{gap:4px !important}
  #topbar .icon-btn{width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important}
  #topbar .icon-btn svg{width:16px !important;height:16px !important}
  #topbar .timer-pill{min-height:28px !important;padding:4px 10px !important;font-size:10.5px !important;gap:4px !important}
  #topbar .timer-pill svg{width:13px !important;height:13px !important}
}
/* ---- Safe area — top (notch) + sides (iPad pencil) ---- */
@media (max-width: 860px){
  #topbar{
    padding-top: env(safe-area-inset-top) !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    height: calc(56px + env(safe-area-inset-top)) !important;
  }
  #sidebar{
    padding-top: calc(24px + env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
  }
  #scratch-drawer{
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
  }
  #scratch-fab{
    right: max(14px, env(safe-area-inset-right)) !important;
  }
  #toast-root{
    left: max(14px, env(safe-area-inset-left)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
  }
  #bottomnav{
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }
}
/* ---- Chunk 2: cards, spacing, buttons ---- */
@media (max-width: 860px){
  #view{padding:10px 12px calc(82px + env(safe-area-inset-bottom)) !important}

  .card,.sess-card,.stat,.hday,.bcol,.task-card,
  .next-hero,.ready-card,.next-action,.dday-banner,
  .home-stat,.contact-card-dash{
    padding:12px 14px !important;
    border-radius:11px !important;
    margin-bottom:10px !important;
  }

  .card-h{margin-bottom:10px !important;gap:8px !important}
  .card-h h2{font-size:14px !important;line-height:1.25 !important}
  .card-h .sub{font-size:10.5px !important}

  .home-section-label{
    margin:14px 0 8px !important;
    padding-bottom:5px !important;
    font-size:9px !important;
    letter-spacing:.22em !important;
  }

  .btn{min-height:40px !important;padding:9px 13px !important;font-size:12.5px !important;border-radius:9px !important}
  .btn.primary,.btn.green,.btn.danger{min-height:44px !important}
  .btn.sm{min-height:34px !important;padding:6px 10px !important;font-size:11.5px !important}
  .btn svg{width:13px !important;height:13px !important}

  .chip,.pill,.exam-tag,.tag-overdue,.tag-today,
  .tag-new,.tag-future,.tb-chip,.rel-pill{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .chips{flex-wrap:wrap !important;gap:6px !important}
  .chips-scroll{margin:0 -12px !important;padding:4px 12px 8px !important;gap:6px !important}
  .chips-scroll .chip{
    flex:0 0 auto !important;
    max-width:none !important;
    min-height:32px !important;
    padding:6px 11px !important;
    font-size:11px !important;
  }

  .hero-head{display:flex !important;flex-wrap:wrap !important;gap:8px !important;margin-bottom:12px !important}
  .hero-head > div:first-child{flex:1 1 100% !important}
  .hero-head h2{font-size:19px !important;line-height:1.15 !important}
  .hero-head .sub{font-size:11.5px !important;margin-top:2px !important}
  .hero-head > .btn{
    flex:1 1 calc(50% - 4px) !important;
    min-width:0 !important;
    min-height:44px !important;
    font-size:12px !important;
    padding:10px 8px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  .hero-head > .btn:only-of-type{flex-basis:100% !important}
}

/* ---- Chunk 3: syllabus toolbar + rows ---- */
@media (max-width: 860px){
  /* Compress the 4-row toolbar into 2 rows */
  .toolbar{padding:0 0 8px !important;margin-bottom:4px !important;position:static !important}
  .toolbar .row{gap:6px !important;flex-wrap:wrap !important}
  .toolbar .search{flex:1 1 100% !important;order:-1 !important}
  .toolbar .search .inp{
    min-height:42px !important;
    font-size:14px !important;
    padding-left:34px !important;
  }
  .toolbar .row > .btn{
    flex:0 1 auto !important;
    min-height:38px !important;
    padding:8px 10px !important;
    font-size:11.5px !important;
  }
  /* Hide "expand all / collapse all" arrows on mobile — they're in the swipe-down gesture anyway */
  .toolbar .row > .btn[data-action="syl-collapse-all"],
  .toolbar .row > .btn[data-action="syl-expand-all"]{display:none !important}
  /* Make the exam + status dropdowns share one row */
  .toolbar .row > select.inp{
    flex:1 1 calc(50% - 3px) !important;
    min-width:0 !important;
    min-height:38px !important;
    font-size:12px !important;
  }
  /* Priority chips scroll horizontally instead of wrapping */
  .toolbar .chips-scroll{
    margin:0 -12px !important;
    padding:2px 12px 6px !important;
    width:calc(100% + 24px) !important;
    max-width:none !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
  }
  .toolbar .chips-scroll > *{flex:0 0 auto !important}

  /* Subject header — tighter, less noisy */
  .subj-head{padding:10px 8px !important;gap:6px !important;flex-wrap:nowrap !important}
  .subj-head .sdot{width:6px !important;height:6px !important}
  .subj-head b{
    font-size:13px !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  .subj-head .cnt{font-size:10.5px !important;flex-shrink:0 !important}
  .subj-head .pbar{display:none !important}
  .subj-head > .tiny{display:none !important}
  .subj-head .chev{width:14px !important;height:14px !important}
  .subj-head .subj-actions{gap:0 !important}
  .subj-head .subj-actions .mini-icon{width:28px !important;height:28px !important}

  /* Topic rows — tighter, exam tags truncate */
  .topic-row{padding:9px 8px !important;gap:4px 8px !important}
  .topic-row > .mini-icon[data-action="toggle-topic"]{
    flex:0 0 22px !important;
    width:22px !important;
    height:22px !important;
    margin-top:2px !important;
  }
  .topic-row > .drag-handle{display:none !important}
  .topic-row .topic-body{
    flex:1 1 calc(100% - 30px) !important;
    max-width:calc(100% - 30px) !important;
    min-width:0 !important;
  }
  .topic-row .name{
    font-size:12.5px !important;
    line-height:1.35 !important;
    white-space:normal !important;
    word-break:break-word !important;
  }
  /* Tags row — max 3 visible, ellipsis overflow */
  .topic-row .tags{
    gap:3px !important;
    margin-top:4px !important;
    max-width:100% !important;
    overflow:hidden !important;
    flex-wrap:nowrap !important;
  }
  .topic-row .tags > *:nth-child(n+4){display:none !important}
  .topic-row .tags > *{
    font-size:9px !important;
    padding:1px 5px !important;
    max-width:70px !important;
    flex:0 0 auto !important;
  }
  /* Controls row below name */
  .topic-row .topic-controls{
    flex:1 1 100% !important;
    margin:6px 0 0 30px !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }
  .topic-row .topic-controls::-webkit-scrollbar{display:none !important}
  .topic-row .topic-controls .mini-sel{
    font-size:10.5px !important;
    padding:4px 20px 4px 8px !important;
    min-height:30px !important;
    flex:0 0 auto !important;
    max-width:none !important;
  }
  .topic-row .topic-controls .mini-sel[data-change="syl-weight"]{display:none !important}
  .topic-row .topic-controls .row-actions{
    flex:0 0 auto !important;
    margin-left:auto !important;
    padding-left:6px !important;
    opacity:1 !important;
    gap:2px !important;
  }
  .topic-row .topic-controls .row-actions .mini-icon{
    width:30px !important;
    height:30px !important;
  }
}

/* ---- Chunk 3b: toolbar selects minimum width ---- */
@media (max-width: 860px){
  .toolbar .row > select.inp{
    flex:1 1 calc(50% - 3px) !important;
    min-width:130px !important;
    width:auto !important;
  }
  .toolbar .row > select.inp option{
    font-size:13px;
  }
}

/* ---- Chunk 4: real toolbar + topic row compression ---- */
@media (max-width: 860px){

  /* TOOLBAR: 2 rows max */
  .toolbar{
    padding:0 0 6px !important;
    margin-bottom:2px !important;
  }
  .toolbar .row{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  .toolbar .search{
    flex:1 1 100% !important;
    order:-1 !important;
  }
  .toolbar .search .inp{
    min-height:40px !important;
    font-size:14px !important;
    padding-left:34px !important;
  }
  /* Hide the rare actions on mobile */
  .toolbar .row > .btn[data-action="syl-collapse-all"],
  .toolbar .row > .btn[data-action="syl-expand-all"],
  .toolbar .row > .btn[data-action="open-bulk-import"]{ display:none !important; }
  .toolbar .row > .btn{
    flex:0 1 auto !important;
    min-height:36px !important;
    padding:7px 10px !important;
    font-size:11px !important;
  }
  .toolbar .row > .btn[data-action="open-add-topic"]{
    margin-left:auto !important;
  }

  /* SELECTS: fix the chevron-only bug */
  .toolbar .chips-scroll{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    max-width:none !important;
    width:100% !important;
  }
  .toolbar .chips-scroll > span{ display:none !important; }
  .toolbar .chips-scroll > select.inp{
    flex:1 1 calc(50% - 3px) !important;
    min-width:0 !important;
    min-height:36px !important;
    font-size:12px !important;
    padding:6px 26px 6px 10px !important;
  }
  .toolbar .chips-scroll .chips{
    flex:1 1 100% !important;
    gap:6px !important;
    margin:0 !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
    padding:2px 0 4px !important;
  }
  .toolbar .chips-scroll .chips::-webkit-scrollbar{ display:none !important; }
  .toolbar .chips-scroll .chip{
    flex:0 0 auto !important;
    min-height:30px !important;
    padding:5px 11px !important;
    font-size:11px !important;
  }

  /* TOPIC ROWS: 2 lines, priority inline with name */
  .topic-row{
    padding:8px 10px !important;
    gap:4px 8px !important;
    border-bottom:1px solid var(--border) !important;
    border-radius:0 !important;
  }
  .topic-row:last-child{ border-bottom:none !important; }

  /* Name + priority — force one line */
  .topic-body > div:first-child{
    flex-wrap:nowrap !important;
    overflow:hidden !important;
    gap:6px !important;
  }
  .topic-body .name{
    flex:1 1 auto !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:13px !important;
    line-height:1.35 !important;
  }
  .topic-body > div:first-child > .pill{
    flex:0 0 auto !important;
    font-size:9.5px !important;
    padding:2px 7px !important;
  }

  /* Tags row — single line, no wrap, fade on overflow */
  .topic-row .tags{
    flex-wrap:nowrap !important;
    overflow:hidden !important;
    max-width:100% !important;
    gap:3px !important;
    margin-top:2px !important;
  }
  .topic-row .tags > *{
    flex:0 0 auto !important;
    font-size:9px !important;
    padding:1px 6px !important;
  }
  .topic-row .tags > *:nth-child(n+5){ display:none !important; }

  /* Progress bar — thinner */
  .topic-body > div:last-child:not(.tags):not(:first-child){
    margin-top:4px !important;
    max-width:100% !important;
  }

  /* Controls row — single line, tight */
  .topic-row .topic-controls{
    margin:4px 0 0 28px !important;
    gap:4px !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
    padding-bottom:2px !important;
  }
  .topic-row .topic-controls::-webkit-scrollbar{ display:none !important; }
  .topic-row .topic-controls .mini-sel{
    min-height:28px !important;
    font-size:10.5px !important;
    padding:3px 20px 3px 8px !important;
  }
  .topic-row .topic-controls .row-actions{
    margin-left:auto !important;
    padding-left:6px !important;
    gap:0 !important;
  }
  .topic-row .topic-controls .row-actions .mini-icon{
    width:28px !important;
    height:28px !important;
  }
  .topic-row > .mini-icon[data-action="toggle-topic"]{
    margin-top:3px !important;
  }

  /* Subject header — cleaner */
  .subj-head{
    padding:10px 10px !important;
    background:color-mix(in srgb,var(--text) 3%,transparent) !important;
  }
}

/* ---- Chunk 6: kill gaps, compress toolbar ---- */
@media (max-width: 860px){

  /* Kill dead space between subject header and first topic */
  .subj-group{ margin-bottom:0 !important; }
  .subj-head{ margin-bottom:0 !important; }
  .subj-body{ padding:0 !important; margin:0 !important; }
  .subj-body > .topic-row:first-child{
    margin-top:0 !important;
    padding-top:8px !important;
  }
  .subj-body > .subj-group:first-child{ margin-top:0 !important; }

  /* Hide the niche actions on mobile */
  .toolbar .row > .btn[data-action="bulk-toggle"]{ display:none !important; }
  .toolbar .row > .btn[data-action="syl-collapse-all"],
  .toolbar .row > .btn[data-action="syl-expand-all"],
  .toolbar .row > .btn[data-action="open-bulk-import"]{ display:none !important; }

  /* Search takes row 1 */
  .toolbar .row > .search{
    order:-10 !important;
    flex:1 1 100% !important;
    margin-bottom:4px !important;
  }
  .toolbar .row > .search .inp{
    min-height:38px !important;
    font-size:13.5px !important;
    border-radius:9px !important;
  }

  /* Row 2: + Subject  + Topic  (2 buttons only) */
  .toolbar .row > .btn[data-action="add-subject"]{
    order:1 !important;
    flex:1 1 calc(50% - 3px) !important;
    min-height:36px !important;
    padding:6px 12px !important;
    font-size:12px !important;
    margin-left:0 !important;
  }
  .toolbar .row > .btn[data-action="open-add-topic"]{
    order:2 !important;
    flex:1 1 calc(50% - 3px) !important;
    min-height:36px !important;
    padding:6px 12px !important;
    font-size:12px !important;
    margin-left:0 !important;
  }

  /* Row 3: selects (2 across) */
  .toolbar .chips-scroll{
    order:3 !important;
    flex:1 1 100% !important;
    margin:0 !important;
    padding:0 !important;
  }
  .toolbar .chips-scroll > span{ display:none !important; }
  .toolbar .chips-scroll > select.inp{
    flex:1 1 calc(50% - 3px) !important;
    min-height:34px !important;
    font-size:11.5px !important;
    padding:5px 24px 5px 10px !important;
    border-radius:8px !important;
  }

  /* Row 4: chips scroll — priority + archived together */
  .toolbar .chips-scroll .chips{
    flex:1 1 100% !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:6px !important;
    margin:2px 0 0 0 !important;
    padding:0 0 4px 0 !important;
    scrollbar-width:none !important;
  }
  .toolbar .chips-scroll .chips::-webkit-scrollbar{ display:none !important; }
  .toolbar .chips-scroll .chip{
    flex:0 0 auto !important;
    min-height:28px !important;
    padding:4px 10px !important;
    font-size:10.5px !important;
  }

  /* Subject header — even tighter */
  .subj-head{
    padding:7px 10px !important;
    min-height:34px !important;
    gap:6px !important;
  }
  .subj-head b{ font-size:12.5px !important; }
  .subj-head .cnt{ font-size:9.5px !important; }
  .subj-head .subj-actions{ gap:0 !important; }
  .subj-head .subj-actions .mini-icon{
    width:24px !important;
    height:24px !important;
  }
  .subj-head .subj-actions .mini-icon svg{
    width:13px !important;
    height:13px !important;
  }
  .subj-head .chev{ width:13px !important; height:13px !important; }

  /* Topics — very tight */
  .topic-row{
    padding:7px 10px !important;
    gap:1px 6px !important;
  }
  .topic-row .tags{ margin-top:0 !important; }
  .topic-row .topic-controls{
    margin:3px 0 0 26px !important;
  }
}

/* ---- Chunk 7: touch targets + small phones ---- */
@media (max-width: 860px){
  /* Row action icons — larger tap targets */
  .topic-row .topic-controls .row-actions .mini-icon{
    width:34px !important;
    height:34px !important;
  }
  .topic-row .topic-controls .row-actions .mini-icon svg{
    width:16px !important;
    height:16px !important;
  }
  .subj-head .subj-actions .mini-icon{
    width:34px !important;
    height:34px !important;
  }
  .subj-head .subj-actions .mini-icon svg{
    width:16px !important;
    height:16px !important;
  }
  /* Toggle arrow — bigger tap area */
  .topic-row > .mini-icon[data-action="toggle-topic"]{
    flex:0 0 28px !important;
    width:28px !important;
    height:28px !important;
  }
  .topic-row > .mini-icon[data-action="toggle-topic"] svg{
    width:14px !important;
    height:14px !important;
  }
}

/* ---- Small phones (iPhone SE, older Androids) ---- */
@media (max-width: 400px){
  #topbar{ padding:0 8px !important; }
  #view{ padding:8px 10px calc(82px + env(safe-area-inset-bottom)) !important; }
  .card,.sess-card,.stat,.hday,.bcol,.task-card,
  .next-hero,.ready-card,.next-action,.dday-banner,
  .home-stat,.contact-card-dash{
    padding:10px 12px !important;
  }
  .card-h h2{ font-size:13px !important; }
  .btn{
    min-height:38px !important;
    padding:8px 11px !important;
    font-size:11.5px !important;
  }
  .btn.primary,.btn.green,.btn.danger{ min-height:42px !important; }
  .chip,.pill{ font-size:10px !important; padding:4px 9px !important; }
  .inp,select.inp,textarea.inp{
    font-size:14px !important;
    padding:9px 11px !important;
    min-height:40px !important;
  }
  .grade-btn{ min-height:42px !important; font-size:11.5px !important; }
  .topic-body .name{ font-size:12px !important; }
  .stat .v{ font-size:20px !important; }
}

/* ---- Chunk 8: safe area consistency ---- */
@media (max-width: 860px){
  /* Modal footer respects home indicator */
  .modal-acts{
    padding-bottom:calc(14px + env(safe-area-inset-bottom)) !important;
  }
  /* Scratch drawer footer */
  #scratch-drawer .sd-foot{
    padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important;
  }
  /* Sheet body */
  .sheet .sh-body{
    padding-bottom:calc(20px + env(safe-area-inset-bottom)) !important;
  }
  /* Bottom nav — already has it, ensure minimum */
  #bottomnav{
    padding-bottom:calc(8px + env(safe-area-inset-bottom)) !important;
  }
}
/* ---- Chunk 9: WCAG 2.5.5 touch-target floor ---- */
@media (max-width: 860px){
  /* Every interactive icon hits at least 44×44 */
  .mini-icon,
  .subj-head .subj-actions .mini-icon,
  .topic-row .topic-controls .row-actions .mini-icon{
    min-width:44px !important;
    min-height:44px !important;
    width:44px !important;
    height:44px !important;
  }
  .icon-btn{
    min-width:44px !important;
    min-height:44px !important;
  }
  /* Grade buttons already covered in index.html, but reinforce here */
  .grade-btn{
    min-height:44px !important;
    min-width:44px !important;
  }
  /* Chip / pill tappables */
  .chip, .pill, .rel-pill{
    min-height:44px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
}
/* ---- Small phones (iPhone SE, older Androids) ---- */
@media (max-width: 480px){
  /* Global typography — slightly tighter, still readable */
  body{font-size:13.5px !important}
  h1{font-size:19px !important}
  h2{font-size:14px !important}

  /* View padding — reclaim horizontal space */
  #view{padding:10px 11px calc(90px + env(safe-area-inset-bottom)) !important}

  /* Cards — tighter internal padding */
  .card, .sess-card, .stat, .hday, .bcol, .task-card,
  .next-hero, .ready-card, .next-action, .dday-banner{
    padding:12px 13px !important;
    border-radius:11px !important;
  }

  /* Buttons — keep 44px touch floor, reduce padding */
  .btn{
    min-height:44px !important;
    padding:10px 12px !important;
    font-size:12px !important;
  }
  .btn.sm{
    min-height:40px !important;
    padding:8px 11px !important;
    font-size:11.5px !important;
  }

  /* Grade row stays 2×2 on the narrowest devices */
  .grade-row{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap:6px !important;
  }
  .grade-btn{
    font-size:12px !important;
    padding:10px 6px !important;
  }

  /* Session meta grid — single column on tiny screens */
  .sess-meta{
    grid-template-columns: 1fr !important;
    gap:8px !important;
    padding:10px !important;
  }
  .sess-meta .fld{
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap:10px !important;
    padding:6px 0 !important;
    border-bottom:1px solid var(--border) !important;
  }
  .sess-meta .fld:last-child{border-bottom:none !important}
  .sess-meta .fld label{
    flex:0 0 auto;
    font-size:10px !important;
  }
  .sess-meta .fld b,
  .sess-meta .fld .inp,
  .sess-meta .fld input{
    flex:1 1 auto;
    text-align:right !important;
    font-size:13px !important;
  }

  /* Bottom nav — 4 tabs fit fine, keep font readable */
  .bn-item{font-size:10px !important;min-height:56px !important}
  .bn-item svg{width:22px !important;height:22px !important}

  /* Top bar — tighten further */
  #topbar{height:52px !important;padding:0 12px !important}
  #page-title{font-size:14px !important}
  #topbar .timer-pill{font-size:11px !important;padding:5px 10px !important;min-height:32px !important}
  #topbar .icon-btn{width:36px !important;height:36px !important;min-width:36px !important}

  /* Chips scroll — larger tap rows */
  .chips-scroll, .chips{padding:4px 12px 10px !important}
  .chip, .pill{font-size:11.5px !important;padding:8px 12px !important}

  /* FAB and toast — sit above the nav comfortably */
  #scratch-fab{
    width:48px !important;height:48px !important;
    bottom:calc(82px + env(safe-area-inset-bottom)) !important;
    right:12px !important;
  }
  #toast-root{
    bottom:calc(86px + env(safe-area-inset-bottom)) !important;
    left:12px !important;right:12px !important;
  }

  /* Modals — bottom-sheet feel, tighter headers */
  .modal{padding:16px 14px 0 !important;border-radius:18px 18px 0 0 !important}
  .modal h3{font-size:16px !important;margin-bottom:12px !important}
  .modal-acts{
    margin:14px -14px 0 !important;
    padding:12px 14px calc(14px + env(safe-area-inset-bottom)) !important;
  }

  /* Hero header buttons — single column on the narrowest */
  .hero-head{
    grid-template-columns: 1fr !important;
  }
  .hero-head > .btn,
  .hero-head > a.btn{
    grid-column: 1 / -1 !important;
  }
}

/* Respect the user's reduced-motion preference globally */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
/* ---- Command palette — mobile close + safe padding ---- */
@media (max-width: 860px){
  .cmd-overlay{
    padding: calc(8vh + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) !important;
    align-items: flex-start !important;
  }
  .cmd-box{
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 14px !important;
    position: relative;
  }
  .cmd-close{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: 9px;
    color: var(--text-3);
    z-index: 2;
    cursor: pointer;
    transition: all .18s ease;
  }
  .cmd-close:hover{
    color: var(--text);
    border-color: var(--accent-2);
    background: color-mix(in srgb, var(--accent-2) 8%, transparent);
  }
  .cmd-input{
    padding: 18px 56px 18px 18px !important;  /* leave room for close */
    font-size: 15px !important;
  }
  .cmd-foot{
    flex-wrap: wrap;
    gap: 12px !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .cmd-foot-esc{display: none !important}  /* hide "esc to close" on touch */
  .cmd-item{
    padding: 14px 14px !important;          /* bigger tap rows */
    min-height: 56px;
  }
  .cmd-row, .cmd-item{min-height: 56px}
}
@media (min-width: 861px){
  .cmd-close{display: none}
}
/* ---- Perf: mute expensive backdrop-filters on mobile ----
   Blurs are the #1 mobile GPU cost. Reduce radius or kill
   them on cards the user interacts with most. */
@media (max-width: 860px){
  [data-theme="apex"] .card,
  [data-theme="apex"] .stat,
  [data-theme="apex"] .sess-card,
  [data-theme="apex"] .task-card,
  [data-theme="apex"] .next-hero,
  [data-theme="apex"] .ready-card,
  [data-theme="apex"] .dday-banner{
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  }
  [data-theme="apex"] #topbar{
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  /* Kill the modal blur entirely — the overlay alone is enough */
  [data-theme="apex"] .overlay,
  [data-theme="apex"] .cmd-overlay{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* ---- Undo button: show on mobile only when there's something to undo ---- */
@media (max-width: 860px){
  #topbar .icon-btn[data-undo]{
    display:grid !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }
  #topbar .icon-btn[data-undo]:not(.on){
    display:none !important;
  }
  #topbar .icon-btn[data-undo].on{
    color:var(--accent-2);
    border-color:var(--accent-2);
    background:color-mix(in srgb,var(--accent-2) 8%,transparent);
  }
}

/* ---- Undo button: show on mobile only when stack has items ---- */
@media (max-width: 860px){
  #topbar .icon-btn[data-undo]{
    display:grid !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }
  #topbar .icon-btn[data-undo]:not(.on){
    display:none !important;
  }
  #topbar .icon-btn[data-undo].on{
    color:var(--accent-2);
    border-color:var(--accent-2);
    background:color-mix(in srgb,var(--accent-2) 8%,transparent);
  }
}

/* ---- WCAG 2.5.5 touch-target floor ---- */
@media (max-width: 860px){
  .icon-btn,
  .mini-icon,
  .topic-row .topic-controls .row-actions .mini-icon,
  .subj-head .subj-actions .mini-icon{
    min-width:44px !important;
    min-height:44px !important;
  }
  .grade-btn{
    min-height:44px !important;
    min-width:44px !important;
  }
}

/* ---- Form element polish ---- */
@media (max-width: 860px){
  input[type="date"].inp,
  input[type="time"].inp{
    min-height:42px !important;
    font-size:15px !important;
  }
  select.inp{
    min-height:42px !important;
    font-size:15px !important;
  }
  textarea.inp{
    min-height:88px !important;
    font-size:15px !important;
  }
}

/* ============================================================
   Review card — mobile hierarchy polish
   Grade buttons are the only action on the card. Make them
   the loudest thing. Collapse metadata into a compact grid.
   ============================================================ */
@media (max-width: 860px){

  /* Grade row — 4 equal columns, taller buttons, tighter gap */
  .sess-card .grade-row{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
    padding:14px 0 4px !important;
    margin-top:4px !important;
    border-top:1px solid var(--border) !important;
    width:100% !important;
  }
  .sess-card .grade-btn{
    min-height:54px !important;
    font-size:12.5px !important;
    font-weight:700 !important;
    letter-spacing:.04em !important;
    padding:10px 4px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    line-height:1.15 !important;
    width:100% !important;
  }

  /* Meta grid — compact 3-col, borders stripped, quieter */
  .sess-card .sess-meta{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px 12px !important;
    padding:12px 0 !important;
    margin-top:2px !important;
    background:transparent !important;
    border:none !important;
    border-top:1px solid var(--border) !important;
    border-radius:0 !important;
  }
  .sess-card .sess-meta .fld{
    padding:0 !important;
    border:none !important;
    gap:2px !important;
    min-width:0 !important;
  }
  .sess-card .sess-meta .fld label{
    font-size:8.5px !important;
    letter-spacing:.14em !important;
    color:var(--text-3) !important;
    font-weight:600 !important;
  }
  .sess-card .sess-meta .fld b,
  .sess-card .sess-meta .fld .inp,
  .sess-card .sess-meta .fld input{
    font-size:12px !important;
    font-weight:600 !important;
    padding:0 !important;
    min-height:0 !important;
    background:transparent !important;
    border:none !important;
  }

  /* Notes — tucked under, quieter */
  .sess-card .sess-notes{
    padding:10px 12px !important;
    font-size:12.5px !important;
    line-height:1.6 !important;
  }

  /* Badges row — tighter */
  .sess-card .sess-tags{
    gap:5px !important;
  }
  .sess-card .sess-tags .pill,
  .sess-card .sess-tags .stage-dots{
    font-size:10px !important;
  }
}