/* ============================================================================
   LAYERS
============================================================================ */
@layer reset, tokens, utilities, components;

/* ============================================================================
   TOKENS
   - Semantic design system variables + bridge to legacy vars
   - Light by default; dark via :root[data-theme="dark"]
   - Per-pane overrides supported with .pane[data-theme="…"]
============================================================================ */
@layer tokens {
  /* --- Scales -------------------------------------------------------------- */
  :root {
    /* Spacing (4/8px rhythm) */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;

    /* --- Spacing half-steps (fill common gaps: 6px, 10px, 14px, …) --- */
    --space-0_5: 2px;
    --space-1_5: 6px;
    --space-2_5: 10px;
    --space-3_5: 14px;
    --space-4_5: 18px;
    --space-5_5: 22px;
    --space-6_5: 26px;

    /* --- Offsets/Nudges (for outline-offset, rings, tiny transforms) --- */
    --offset-1: 1px;
    --offset-2: 2px;
    --offset-3: 3px;
    --offset-4: 4px;
    --offset-5: 5px;
    --focus-ring: 3px; /* 0 0 0 var(--focus-ring) … */
  
    /* --- Padding aliases (semantic sugar over spacing scale) --- */
    --pad-tight: var(--space-1_5); /* 6px */
    --pad-xs:    var(--space-1);   /* 4px */
    --pad-sm:    var(--space-2);   /* 8px */
    --pad-md:    var(--space-3);   /* 12px */
    --pad-lg:    var(--space-4);   /* 16px */
    --pad-xl:    var(--space-5);   /* 20px */

    /* Font sizes + leading */
    --font-xs: 0.75rem;   /* 12px */
    --font-sm: 0.875rem;  /* 14px */
    --font-md: 1rem;      /* 16px */
    --font-lg: 1.125rem;  /* 18px */
    --font-xl: 1.25rem;   /* 20px */
    --font-xxl: 1.65rem;   /* 26px */
    --line-tight: 1.15;
    --line-normal: 1.5;

    /* Weights */
    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    /* Radii */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
    --shadow-card: 0 10px 20px rgb(0 0 0 / 5%);

    /* Layout measurements */
    --topbar-h:    56px;
    --nav-item-h:  42px;
    --icon:        24px;
    --icon-lg:     36px;
    --collapsed-w: 40px;
    --scrollbar-sm: 10px;
    --scrollbar-lg: 20px;
    --sidebar-w: 56px;
    --sidebar-w-expanded: 256px;
    --notes-w: var(--sidebar-w-expanded);
    --gap: var(--space-3);             /* 12px */
    --pane-radius: var(--radius-lg);

  }

  /* --- Semantic color tokens ---------------------------------------------- */
  :root {
    /* Light palette */
    --color-bg:            #f3f4f6;
    --color-surface:       #ffffff;
    --color-ink:           #111827;
    --color-muted:         #6b7280;
    --color-border:        #e5e7eb;
    --color-accent:        #1d4ed8; /* blue-700 */
    --color-accent-bg:     #dbeafe; /* blue-100 */
    --color-accent-border: #bfdbfe; /* blue-200 */
    --color-accent-text:   #172554; /* blue-950 */

    /* Bridge (legacy custom properties used by components/utilities) */
    --bg:           var(--color-bg);
    --card:         var(--color-surface);
    --ink:          var(--color-ink);
    --muted:        var(--color-muted);
    --border:       var(--color-border);
    --accent:       var(--color-accent);
    --accent-bg:    var(--color-accent-bg);
    --accent-border:var(--color-accent-border);
    --accent-text:  var(--color-accent-text);
  }

  /* Theme maps (explicit light/dark for completeness) */
  :root {
    --bg-light:            #f3f4f6;
    --card-light:          #ffffff;
    --ink-light:           #111827;
    --muted-light:         #6b7280;
    --border-light:        #e5e7eb;
    --accent-light:        #1d4ed8;
    --accent-bg-light:     #dbeafe;
    --accent-border-light: #bfdbfe;
    --accent-text-light:   #172554;
  }  

  :root[data-theme="dark"] {
    --color-bg:            #111827;
    --color-surface:       #1f2937;
    --color-ink:           #f9fafb;
    --color-muted:         #9ca3af;
    --color-border:        #374151;
    --color-accent:        #60a5fa; /* blue-400 */
    --color-accent-bg:     #1e40af; /* blue-800 */
    --color-accent-border: #60a5fa; /* blue-400 */
    --color-accent-text:   #e8f2ff; /* near-white */

    /* Bridge updates */
    --bg:           var(--color-bg);
    --card:         var(--color-surface);
    --ink:          var(--color-ink);
    --muted:        var(--color-muted);
    --border:       var(--color-border);
    --accent:       var(--color-accent);
    --accent-bg:    var(--color-accent-bg);
    --accent-border:var(--color-accent-border);
    --accent-text:  var(--color-accent-text);
  }

  /* Per-pane theme overrides (allow mixed-theme panes) */
  .pane[data-theme="light"] {
    --bg:           var(--bg-light);
    --card:         var(--card-light);
    --ink:          var(--ink-light);
    --muted:        var(--muted-light);
    --border:       var(--border-light);
    --accent:       var(--accent-light);
    --accent-bg:    var(--accent-bg-light);
    --accent-border:var(--accent-border-light);
    --accent-text:  var(--accent-text-light);
    color-scheme: light;
  }

  .pane[data-theme="dark"] {
    --bg:           #111827;
    --card:         #1f2937;
    --ink:          #f9fafb;
    --muted:        #9ca3af;
    --border:       #374151;
    --accent:       #60a5fa;
    --accent-bg:    #1e40af;
    --accent-border:#60a5fa;
    --accent-text:  #e8f2ff;
    color-scheme: dark;
  }
}

/* --- Extra semantic tokens & shadows ------------------------------------ */
:root {
  /* Light palette*/
  --accent-on-solid: #ffffff; /* Text on solid accent backgrounds (e.g., buttons on hover) */

  /* System roles */
  --info:        #f59e0b;  /* main hue */
  --info-bg:     #fffbeb;  /* soft amber background */
  --info-border: #f59e0b;  /* border */
  --info-text:   #92400e;  /* text/icon on info bg */

  --warn:        #f59e0b;
  --warn-bg:     #fffbeb;
  --warn-border: #f59e0b;
  --warn-text:   #92400e;

  --danger:        #b91c1c;
  --danger-bg:     #fef2f2;
  --danger-border: #fecaca;
  --danger-text:   #b91c1c;

  /* Shadows/Scrims */
  --shadow-md:        0 4px 8px rgb(0 0 0 / 12%);
  --shadow-lg:        0 8px 16px rgb(0 0 0 / 15%);
  --shadow-lg-strong: 0 10px 20px rgb(0 0 0 / 20%);
  --scrim:            rgb(0 0 0 / 50%);
}

/* Dark palette */
:root[data-theme="dark"] {
  --accent-on-solid: #ffffff; /* on-solid accent is still white; keep parity */

  /* (warn/danger keep same hues; adjust if you want darker tints later) */
  --info:        #f59e0b;
  --info-bg:     #7c2d12;  /* deeper amber tint for dark */
  --info-border: #f59e0b;
  --info-text:   #fff7ed;  /* high-contrast text on dark-tint bg */

  --warn:        #f59e0b;
  --warn-bg:     #7c2d12; /* optional: deeper tint if desired */
  --warn-border: #f59e0b;
  --warn-text:   #fff7ed;

  --danger:        #ef4444; /* slightly brighter red on dark */
  --danger-bg:     #7f1d1d; /* deeper tint on dark */
  --danger-border: #ef4444;
  --danger-text:   #fee2e2;

  /* Stronger shadow for dark surfaces */
  --shadow-lg-strong: 0 10px 20px rgb(0 0 0 / 35%);
  --scrim:            rgb(0 0 0 / 50%);
}

/* ============================================================================
   RESET
   - Minimal normalize & accessibility
============================================================================ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  html {
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
  }

  body {
    margin: 0;
    display: block;
    color: var(--muted);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: var(--line-normal);
    overflow: hidden; /* root doesn't scroll */
  }

  /* Accessible focus-visible ring */
  :where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
    outline: var(--offset-2) solid color-mix(in oklab, var(--accent) 65%, transparent);
    outline-offset: var(--offset-2);
  }
}

/* ============================================================================
   UTILITIES
   - Low-specificity helpers (all selectors wrapped in :where)
============================================================================ */
@layer utilities {

  /* While <body> has .preload, kill transitions/animations for the sidebar UI. */
  :where(
    body.preload .sidebar,
    body.preload .brand,
    body.preload .sidebar-nav,
    body.preload .nav-item .label,
    body.preload .settings-head .label,
    body.preload .settings-head .chev
  ){
    transition: none !important;
    animation: none !important;
  }

   /* Base icon styling for <svg><use></use></svg> */
  .icon use {
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }

  /* Layout primitives */
  :where(.u-stack) {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }
  :where(.u-cluster) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  :where(.u-grid) {
    display: grid;
    gap: var(--gap);
  }
  :where(.u-center) {
    display: grid;
    place-items: center;
  }

  /* Spacing shorthands */
  :where(.u-p-2) { padding: var(--space-2); }
  :where(.u-p-3) { padding: var(--space-3); }
  :where(.u-gap-2) { gap: var(--space-2); }
  :where(.u-gap-3) { gap: var(--gap); }
  :where(.u-gap-4) { gap: var(--space-4); }

  /* Visual helpers */
  :where(.u-card) {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  :where(.u-shadow) { box-shadow: var(--shadow-card); }
  :where(.u-muted)  { color: var(--muted); }

  /* Accessibility/behavior */
  :where(.sr-only) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  :where(.btn-reset) {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
  }
  :where(.hidden) { display: none !important; }

  /* Safety-nets */
  :where(#resetLayoutBtn[hidden]),
  :where(#resetLayoutBtn[aria-hidden="true"]) {
    display: none !important;
    visibility: hidden !important;
  }

  /* Pre-init interaction lock */
  :where(body:not(.app-loaded) .nav-item:not(.safe-toggle)),
  :where(body:not(.app-loaded) .tile) {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
  }
  :where(body:not(.app-loaded) .nav-item.safe-toggle) {
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
  }
}

/* ============================================================================
   COMPONENTS
   - App shell, sidebar, panes, headers, notes, modal, layouts, etc.
============================================================================ */
@layer components {
  /* --- App Shell ----------------------------------------------------------- */
  .app {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    height: 100dvh;
  }
  .main-container {
    display: flex;
    flex: 1;
    min-height: 0;
  }
  .content-wrapper {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }

  /* --- Sidebar ------------------------------------------------------------- */
  .sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    padding: var(--pad-sm) var(--pad-tight);
    gap: var(--space-2);
    background: var(--card);
    border-right: 1px solid var(--border);
    transition: width 0.3s ease, transform 0.3s ease, padding 0.3s ease;
    flex-shrink: 0;
    overflow: hidden;
    container-type: inline-size;
  }
  body.sidebar-expanded .sidebar { width: var(--sidebar-w-expanded); }
  body.sidebar-hidden .sidebar {
    transform: translateX(-100%);
    width: 0;
    padding: 8px 0;
    border-right: none;
  }

  .brand,
  .sidebar-nav { transition: opacity 0.2s ease; }
  body.sidebar-hidden .brand,
  body.sidebar-hidden .sidebar-nav { opacity: 0; }

  .brand {
    font-style: normal;
    font-weight: 650;
    font-size: var(--font-xxl);
    line-height: 1;
    color: var(--ink);
    opacity: 0.80;
    white-space: nowrap;
    cursor: pointer;
    margin-bottom: var(--gap);
    transition: transform 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  }
  .brand:hover { opacity: 1; }
  .brand:hover, .brand:active { cursor: pointer; }

  body.sidebar-expanded .brand {
    text-align: left;
    padding: 8px 12px;
    transform: rotate(0) translateY(0);
    position: relative;
    top: 0;
    left: 0;
  }
  body:not(.sidebar-expanded) .brand {
    position: absolute;
    right: 14px;
    top: var(--gap);
    transform: rotate(-90deg) translateY(-100%);
    transform-origin: top right;
    text-align: right;
    width: max-content;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: var(--gap);
    width: 100%;
    height: var(--nav-item-h);
    padding: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
    font-size: 14px;
  }
  .nav-item:hover {
    background: var(--bg);
    color: var(--muted);
  }
  .nav-item.active {
    background: var(--accent-bg);
    color: var(--accent-text);
    border-color: var(--accent-border);
  }
  .nav-item.active .label { font-weight: var(--weight-semibold); }
  .nav-item svg {
    width: var(--icon);
    height: var(--icon);
    flex-shrink: 0;
  }

  /* Safe toggle ON (amber), OFF should never look "selected" */
  #btn-safe[aria-pressed="true"],
  #btn-safe[aria-pressed="true"].active {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text);
    outline: none;
  }  
  #btn-safe[aria-pressed="false"].active {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
  }

  .nav-item .label {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    white-space: nowrap;
  }
  body.sidebar-expanded .nav-item .label {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.1s;
  }

  /* Collapsible Settings block inside sidebar */
  .settings-block { margin-top: 8px; }
  .settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-weight: var(--weight-semibold);
  }
  .settings-body {
    display: none;
    padding: 8px;
    color: var(--muted);
  }
  .settings-block.open .settings-body { display: block; }
  .settings-block.open .settings-head,
  .settings-block.open .settings-head *,
  .settings-block.open .settings-body label { color: var(--accent-text); }

  .settings-head .chev { transition: transform .2s ease; transform: rotate(180deg); }
  .settings-block.open .chev { transform: rotate(0deg); }

  .setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
  }
  .setting-row label { font-size: 13px; color: var(--muted); }
  .setting-row select {
    width: 55%;
    background: var(--card);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
  }

  .switch { display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .switch input { accent-color: var(--accent); width: 16px; height: 16px; }

  .settings-head .settings-title { display: flex; align-items: center; gap: var(--gap); }
  .settings-head .settings-title .cog { width: var(--icon); height: var(--icon); flex-shrink: 0; }

  .settings-head .label {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    white-space: nowrap;
  }
  body.sidebar-expanded .settings-head .label { opacity: 1; visibility: visible; }
  body:not(.sidebar-expanded) .settings-head .chev { display: none; }

  /* Show hand cursor on interactive items in the sidebar */
  .sidebar .nav a,
  .sidebar .nav button,
  .sidebar .nav .nav-item,
  .sidebar .nav .nav-item svg,
  .sidebar .nav .nav-item span,
  .settings-head,
  .settings-head svg,
  .settings-head .label { cursor: pointer; }

  /* --- Topbar -------------------------------------------------------------- */
  header.topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px var(--gap);
    height: var(--topbar-h);
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }
  header.topbar .title {
    margin-left: 8px;
    font-size: 1.25rem;    /* text-xl */
    font-weight: 700;      /* bold */
    color: var(--muted);   /* adapts to theme */
  }  
  header.topbar .right {
    margin-left: auto;
    display: flex;
    gap: 8px;
  }

  header.topbar .icon-btn,
  header.topbar .btn.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
  }
  header.topbar .icon-btn svg { width: var(--icon); height: var(--icon); }
  header.topbar .icon-btn:hover { background: #e5e7eb; }
  [data-theme="dark"] header.topbar .icon-btn:hover { background: #374151; }
  
  header.topbar #toggleSidebarBtn svg,
  header.topbar #toggleTheme svg,
  header.topbar #resetLayoutBtn svg,
  header.topbar #toggleNotesBtn svg { opacity: .80; }
  header.topbar #resetLayoutBtn svg { width: 20px; height: 20px; }
  header.topbar #toggleSidebarBtn:hover svg,
  header.topbar #toggleTheme:hover svg,
  header.topbar #resetLayoutBtn:hover svg,
  header.topbar #toggleNotesBtn:hover svg,
  header.topbar #toggleNotesBtn.active svg,
  header.topbar #toggleNotesBtn[aria-pressed="true"] svg { opacity: 1; }

  [data-theme="dark"] header.topbar #toggleNotesBtn:not(.active),
  [data-theme="dark"] header.topbar #toggleSidebarBtn,
  [data-theme="dark"] header.topbar #toggleTheme,
  [data-theme="dark"] header.topbar #resetLayoutBtn { color: var(--ink); }
  
  [data-theme="dark"] header.topbar #toggleSidebarBtn svg,
  [data-theme="dark"] header.topbar #toggleTheme svg,
  [data-theme="dark"] header.topbar #resetLayoutBtn svg { stroke: currentColor; }  

  header.topbar .icon-btn.active,
  header.topbar .icon-btn[aria-pressed="true"] {
    background: var(--accent-bg);
    color: var(--accent-text);
    border-color: var(--accent-border);
  }
  
  /* Dark theme: Notes active = same subdued blue as locked Home */
  [data-theme="dark"] header.topbar #toggleNotesBtn.active,
  [data-theme="dark"] header.topbar #toggleNotesBtn[aria-pressed="true"] {
    background: var(--accent-bg);
    border-color: var(--accent-border);
    color: var(--accent-text);
    opacity: .6;           /* <- same dim as locked Home */
    border-width: 1px;     /* <- remove the heavier outline */
  }

  /* Light theme: make Notes active match "locked Home" subdued tone */
  header.topbar #toggleNotesBtn.active,
  header.topbar #toggleNotesBtn[aria-pressed="true"] {
    opacity: .6;
  }  
  
  /* --- App Footer ---------------------------------------------------------- */
  .app-footer {
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    font-size: 12px;
  }

  .app-footer .muted { opacity: .8; }

  .app-footer .footer-link {
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
  }

  .app-footer .btn {
    padding: 6px 10px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  /* --- Grid / Views -------------------------------------------------------- */
  .view { display: none; }
  .view.active { display: flex; }
  #home.view.active { display: grid; }

  .grid, .home-view {
    flex: 1;
    min-height: 0;
    padding: var(--gap);
  }
  .grid {
    display: flex;
    flex-direction: row;
    gap: 0;
    overflow: auto; /* allow horizontal scroll when needed */
    scrollbar-gutter: auto;
    position: relative;
  }
  .grid { padding-right: var(--gap); }
  .grid::after { content: none; display: none; } /* no reserved gutter */

  /* --- Panes --------------------------------------------------------------- */
  .pane {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--pane-radius);
    display: flex;
    flex-direction: column;
    min-height: var(--pane-min-h, 200px);
    min-width: 0;
    height: 100%;
    overflow: hidden;
    container-type: inline-size;
  }
  .pane-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
    height: 100%;
  }
  .grid .pane,
  .grid .pane-column { min-width: var(--pane-min-w, 120px); }

  .pane .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--card);
    position: relative; /* enable z-index */
    z-index: 2;
    color: var(--ink);
  }
  .pane .head h2 {
    margin: 0;
    font-size: var(--font-lg); /* ≈18px */
    font-weight: var(--weight-bold);
    letter-spacing: 0.05em;
    text-transform: none;
    color: inherit;
  }

  /* Pane header controls */
  .pane .head .pane-header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .pane .head .pane-header-controls > * {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .15s ease;
  }
  .pane .head:hover .pane-header-controls > *,
  .pane .head .pane-header-controls:focus-within > * {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  /* Show only the correct action for current state */
  .pane:not([data-collapsed]) .expand-btn { display: none !important; }
  .pane[data-collapsed] .pane-header-controls > :not(.expand-btn) { display: none !important; }

  /* Header icon buttons (match topbar) */
  .pane .head .icon-btn,
  .pane .head .btn.icon-btn {
    border-radius: var(--radius-md);
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
    border-color: transparent;
    background: transparent;
    padding: 8px; /* touch target parity with topbar */
    color: inherit; /* match header/title color */
  }

  /* Pane header hover — use Sapphire */
  .pane .head .icon-btn:hover,
  .pane .head .icon-btn:focus-visible,
  .pane .head .btn.icon-btn:hover,
  .pane .head .btn.icon-btn:focus-visible {
    background: var(--accent-bg);
    box-shadow: inset 0 0 0 1px var(--accent-border);
    color: var(--accent-text);
    outline: none;
  }

  /* Dark pane header hover — Sapphire */
  :is([data-theme="dark"] .pane, .pane[data-theme="dark"]) .head .icon-btn:hover,
  :is([data-theme="dark"] .pane, .pane[data-theme="dark"]) .head .icon-btn:focus-visible,
  :is([data-theme="dark"] .pane, .pane[data-theme="dark"]) .head .btn.icon-btn:hover,
  :is([data-theme="dark"] .pane, .pane[data-theme="dark"]) .head .btn.icon-btn:focus-visible {
    background: var(--accent-bg);
    box-shadow: inset 0 0 0 1px var(--accent-border);
    color: var(--accent-text);
    outline: none;
  }

  .pane .head .custom-header { transition: opacity .15s ease; }
  .pane .head:hover .custom-header {
    opacity: 1;
    max-width: 500px;
    pointer-events: auto;
  }

  /* Zen icon swap */
  .pane .head .pane-zen-toggle .icon-zen-exit { display: none; }
  body.zen-active .pane .head .pane-zen-toggle .icon-zen-enter  { display: none; }
  body.zen-active .pane .head .pane-zen-toggle .icon-zen-exit { display: inline; }
  
  /* Pane fields (inherit per-pane/global theme) */
  .pane input[type="text"],
  .pane input[type="number"],
  .pane input[type="search"],
  .pane input[type="email"],
  .pane input[type="password"],
  .pane select,
  .pane textarea {
    font-size: var(--font-sm);
    line-height: var(--line-normal);
  }
  .pane textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  }
  .pane :where(input[type="text"],
               input[type="number"],
               input[type="search"],
               input[type="email"],
               input[type="password"],
               select,
               textarea) {
    display: inline-block;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--ink);
    caret-color: var(--accent);
    accent-color: var(--accent);
    outline: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
    font-size: var(--font-sm);
    line-height: var(--line-normal);
  }
  .pane :where(input, select, textarea)::placeholder { color: var(--muted); opacity: .9; }
  .pane :where(input, select, textarea):focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 var(--focus-ring) var(--accent-bg);
    outline: none;
  }
  .pane details > summary { cursor: pointer; user-select: none; }

  .pane .body {
    flex: 1;
    min-height: 0;
    min-width: var(--pane-min-w, 120px);
    padding: 8px 12px 12px; /* tighter top spacing */
    color: var(--muted);
    overflow: auto;
    overscroll-behavior: contain auto; /* let Y bubble, keep X contained */
    scrollbar-gutter: stable;          /* prevent layout shift */

    /* Scrollbars (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .pane .body > :first-child { margin-top: 0; }
  .pane .body :where(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }

  /* Pane scrollbars (WebKit/Blink) */
  .pane .body::-webkit-scrollbar { width: 10px; height: 10px; }
  .pane .body::-webkit-scrollbar-track { background: transparent; }
  .pane .body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
    transition: background-color .2s ease;
  }
  [data-theme="dark"] .pane .body::-webkit-scrollbar-thumb:hover { background: var(--muted); }

  /* Auto-hide state for panes */
  .pane .body.scrollbar-hidden { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .pane .body.scrollbar-hidden::-webkit-scrollbar-thumb { background: transparent; }

  /* Collapse / expand (attribute-driven) */
  .pane .head .collapse-btn .icon,
  .pane .head .expand-btn .icon { display: inline-block; }

  .pane[data-collapsed] { cursor: pointer; }
  .pane[data-collapsed] .body,
  .pane[data-collapsed] .foot { display: none; }

  .pane[data-collapsed="h"] {
    flex: 0 0 auto !important;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: auto;
  }
  .pane[data-collapsed="h"] .head {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: none; /* hide separator horizontally */
  }

  .pane[data-collapsed="v"] {
    flex: 0 0 var(--sidebar-w) !important;
    width: var(--collapsed-w);
    min-width: var(--collapsed-w) !important;
  }
  .pane[data-collapsed="v"] .head {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content 8px min-content;
    justify-items: center;
    align-content: center;
    padding: 12px 2px;
    border-bottom: none; /* hide separator when collapsed */
  }
  .pane[data-collapsed="v"] .pane-header-controls { grid-row: 1; margin-left: 0 !important; width: 100%; display: flex; justify-content: center !important; align-items: center !important; }
  .pane[data-collapsed="v"] .pane-title { grid-row: 3; place-self: center; display: inline-block; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); white-space: nowrap; line-height: 1; margin: 0; text-align: center; }

  .pane[data-collapsed="v"] .pane-header-controls .expand-btn {
    width: var(--icon-lg); height: var(--icon-lg); padding: 0;
    border: none; border-radius: var(--radius-xs);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pane[data-collapsed="v"] .pane-header-controls .expand-btn svg { display: block; margin: 0 auto; }

  /* Collapsed button visibility */
  .pane[data-collapsed] .collapse-btn { display: none !important; }
  .pane[data-collapsed] .expand-btn { display: inline-flex !important; }
  .pane[data-collapsed] .pane-header-controls > :not(.expand-btn) { display: none !important; }
  .pane[data-collapsed] .pane-header-controls > .expand-btn {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Optional pane footer */
  .pane .foot {
    display: block;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--card);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }
  .pane .head, .pane .foot { background: var(--card); color: var(--muted); }
  /* Footer baseline (duplicate-safe) */
  .pane .foot { border-top: 1px solid var(--border); padding: 8px 12px; flex-shrink: 0; }

  /* --- Buttons ------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    position: relative; /* allow overlay */
    white-space: nowrap;
  }
  .btn:hover { background: var(--bg); }
  .btn.danger {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger-border);
  }  

  .btn.ok { position: relative; }
  .btn.ok::after {
    content: attr(data-ok);
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-bg);
    color: var(--accent-text);
    font-weight: var(--weight-bold);
    border-radius: inherit;
    animation: btn-ok-pop .9s ease;
    pointer-events: none;
  }

  .icon-btn {
    width: var(--icon-lg); height: var(--icon-lg); padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--card);
    cursor: pointer;
  }
  .icon-btn svg { width: var(--icon); height: var(--icon); }

  @keyframes btn-ok-pop {
    0% { opacity: 0; transform: scale(.98); }
    20% { opacity: 1; transform: scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; }
  }

  /* --- Layout presets (Builder & Presets) --------------------------------- */
  .grid { flex-direction: row; } /* default */

  .pane, .pane-column { display: none; }
  .view { display: none; }
  .view.active { display: flex; }
  #home.view.active { display: grid; }

  /* DEV-ONLY: ensure dynamic custom layout panes render */
  body.layout-builder .grid .pane,
  body.layout-builder .grid .pane-column { display: flex; }

  /* Layout 1 */
  body.layout-1 .grid [data-pane-id="pane1"],
  body.layout-1 .grid [data-pane-id="pane2"],
  body.layout-1 .grid [data-pane-id="pane3"] { display: flex; }
  body.layout-1 .grid [data-pane-id="pane1"] { flex: 1 1 25%; }
  body.layout-1 .grid [data-pane-id="pane2"] { flex: 1 1 50%; }
  body.layout-1 .grid [data-pane-id="pane3"] { flex: 1 1 25%; }
  body.layout-1.left-hidden .grid [data-pane-id="pane1"] { display: none; }
  body.layout-1.left-hidden .grid [data-pane-id="pane2"] { flex: 1 1 75%; }
  body.layout-1.left-hidden .grid [data-pane-id="pane3"] { flex: 1 1 25%; }

  /* Layout 2 */
  body.layout-2 .grid [data-pane-id="pane1"],
  body.layout-2 .grid [data-pane-id="col2"],
  body.layout-2 .grid [data-pane-id="pane3"] { display: flex; }
  body.layout-2 .grid [data-pane-id="pane1"] { flex: 1 1 40%; }
  body.layout-2 .grid [data-pane-id="col2"]  { flex: 1 1 30%; }
  body.layout-2 .grid [data-pane-id="pane3"] { flex: 1 1 30%; }
  body.layout-2 .grid [data-pane-id="sub-pane-2a"],
  body.layout-2 .grid [data-pane-id="sub-pane-2b"] { display: flex; }
  body.layout-2 .grid [data-pane-id="sub-pane-2a"] { flex: 1 1 80%; }
  body.layout-2 .grid [data-pane-id="sub-pane-2b"] { flex: 1 1 20%; }

  /* Layout 3 */
  body.layout-3 .grid [data-pane-id="pane1"],
  body.layout-3 .grid [data-pane-id="col2"] { display: flex; }
  body.layout-3 .grid [data-pane-id="pane1"] { flex: 1 1 40%; }
  body.layout-3 .grid [data-pane-id="col2"]  { flex: 1 1 60%; }
  body.layout-3 .grid [data-pane-id="sub-pane-2a"],
  body.layout-3 .grid [data-pane-id="sub-pane-2b"],
  body.layout-3 .grid [data-pane-id="sub-pane-2c"] { display: flex; }
  body.layout-3 .grid [data-pane-id="sub-pane-2a"] { flex: 1 1 20%; }
  body.layout-3 .grid [data-pane-id="sub-pane-2b"] { flex: 1 1 40%; }
  body.layout-3 .grid [data-pane-id="sub-pane-2c"] { flex: 1 1 40%; }

  /* Layout 4 */
  body.layout-4 .grid [data-pane-id="pane1"],
  body.layout-4 .grid [data-pane-id="col2"] { display: flex; }
  body.layout-4 .grid [data-pane-id="pane1"] { flex: 1 1 40%; }
  body.layout-4 .grid [data-pane-id="col2"]  { flex: 1 1 60%; }
  body.layout-4 .grid [data-pane-id="sub-pane-2a"],
  body.layout-4 .grid [data-pane-id="sub-pane-2b"] { display: flex; }
  body.layout-4 .grid [data-pane-id="sub-pane-2a"] { flex: 1 1 5%; }
  body.layout-4 .grid [data-pane-id="sub-pane-2b"] { flex: 1 1 95%; }

  /* Make top-level stacks/panes allowed to shrink evenly */
  .grid > .pane,
  .grid > .pane-column { flex-shrink: 1; }

  /* Gutters */
  .gutter { background: var(--bg); flex-shrink: 0; }
  .gutter-col { cursor: col-resize; width: var(--gap); }
  .gutter-row { cursor: row-resize; height: var(--gap); }

  /* --- Home tiles & loader ------------------------------------------------- */
  .home-view { padding: 2rem; overflow-y: auto; }
  #home {
    min-height: 100dvh;
    place-content: center; /* center content vertically in grid */
  }
  .home-header { margin-bottom: 2rem; text-align: center; }
  .home-header h1 { font-size: 2rem; font-weight: var(--weight-bold); margin: 0 0 .5rem; }
  .home-header p {
    font-size: 1.1rem;
    color: var(--muted);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .file-loader {
    display: block;
    padding: 2rem;
    margin-bottom: 1.5rem;
    background: var(--card);
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: background-color .2s ease, border-color .2s ease;
  }
  .file-loader.dragover {
    border-color: var(--accent);
    background-color: var(--accent-bg);
  }
  .file-loader svg { margin: 0 auto 1rem; color: var(--muted); }
  .file-loader h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
  .file-loader p { margin: 0 0 1rem; color: var(--muted); }
  .file-loader .btn-group { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

  .file-loader .btn {
    background: var(--accent-bg);
    color: var(--accent-text);
    border-color: var(--accent-border);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease, filter .15s ease;
  }

  .file-loader .btn:hover,
  .file-loader .btn:focus-visible {
    background: var(--accent);
    border-color: var(--accent-border);
    color: var(--accent-on-solid);
    transform: translateY(calc(-1 * var(--offset-1)));
    box-shadow: 0 0 0 var(--focus-ring) var(--accent-bg), var(--shadow-lg);
    filter: saturate(1.05);
    outline: none;
  }  

  .file-loader .btn:active {
    transform: translateY(0);
    box-shadow: 0 0 0 2px var(--accent-bg), var(--shadow-md);
  }  

  /* Dark theme parity */
  [data-theme="dark"] .file-loader .btn:hover,
  [data-theme="dark"] .file-loader .btn:focus-visible {
    box-shadow: 0 0 0 var(--focus-ring) var(--accent-bg), var(--shadow-lg-strong);
  }  

  /* Motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .file-loader .btn { transition: none; }
    .file-loader .btn:hover { transform: none; }
  }

  /* Pulse animations — driven by current accent (Sapphire) from var(--accent) so loader can override */
  @keyframes pulseStrong {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 45%, transparent); transform: scale(1); }
    70%  { box-shadow: 0 0 0 14px color-mix(in oklab, var(--accent) 0%, transparent); transform: scale(1.01); }
    100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); transform: scale(1); }
  }
  @keyframes pulseSoft {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 20%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); }
  }
  .file-loader.pulsing-strong { animation: pulseStrong 1.6s ease-out infinite; border-color: var(--accent); }
  .file-loader.pulsing-soft   { animation: pulseSoft 3s ease-out infinite;  border-color: var(--accent); }

  /* Tiles */
  .layout-tiles-wrapper { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  .layout-tiles         { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  .tile.full-width { grid-column: 1 / -1; }
  .tile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
  }
  .tile:hover { transform: translateY(calc(-1 * var(--offset-5))); box-shadow: var(--shadow-card); }
  .tile-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
  .tile-header svg { color: var(--accent); }
  .tile-header h4 { margin: 0; font-size: 1.1rem; }
  .tile p { font-size: .95rem; color: var(--muted); line-height: var(--line-normal); }
  .tile:focus-visible { outline: var(--offset-2) solid var(--accent); outline-offset: 3px; }

  /* --- Notes Sidebar (docked) ---------------------------------------------- */
  .notes-sidebar {
    position: fixed;
    right: 0; top: var(--topbar-h); bottom: 0;
    width: var(--notes-w);
    display: flex; flex-direction: column;
    transform: translateX(100%); /* off-canvas by default */
    transition: transform .25s ease;
    z-index: 10; /* below modal, above content */
    background: var(--card);
    border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
  }
  body.notes-open .notes-sidebar { transform: translateX(0); }

  .notes-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
  }
  .notes-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: var(--weight-semibold);
    color: var(--muted);
  }
  .notes-body {
    flex: 1; min-height: 0; padding: 12px; overflow: auto; color: var(--muted);
    scrollbar-gutter: stable; /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  [data-theme="dark"] .notes-body { scrollbar-color: var(--border) transparent; }
  .notes-body::-webkit-scrollbar { width: var(--scrollbar-sm); height: var(--scrollbar-sm); }
  .notes-body::-webkit-scrollbar-track { background: transparent; }
  .notes-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
    transition: background-color .2s ease;
  }
  [data-theme="dark"] .notes-body::-webkit-scrollbar-thumb:hover { background: var(--muted); }

  /* Main window scrollbars (thicker than panes) */
  .grid, .home-view {
    scrollbar-gutter: auto;          /* Firefox */
    scrollbar-width: auto;
    scrollbar-color: var(--border) transparent;
    transition: margin-right .25s ease;
  }
  .grid::-webkit-scrollbar,
  .home-view::-webkit-scrollbar { width: var(--scrollbar-lg); height: var(--scrollbar-lg); }
  .grid::-webkit-scrollbar-track,
  .home-view::-webkit-scrollbar-track { background: transparent; }
  .grid::-webkit-scrollbar-thumb,
  .home-view::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
    transition: background-color .2s ease;
  }
  .grid::-webkit-scrollbar-thumb:hover,
  .home-view::-webkit-scrollbar-thumb:hover { background: var(--muted); }

  /* Offset scrollable views when notes are open; keep header flush right */
  body.notes-open main.grid,
  body.notes-open .home-view { margin-right: var(--notes-w); }

  /* Disable equalizer in Layout Builder so custom widths are preserved */
  body:not(.layout-builder).notes-open #grid > .pane,
  body:not(.layout-builder).notes-open #grid > .pane-column {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* --- Modal --------------------------------------------------------------- */
  .modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--scrim);
    z-index: 1000;
  }
  .modal-overlay.active { display: flex; }
  .modal-content {
    width: 90%; max-width: 400px;
    padding: 2rem;
    text-align: center;
    background: var(--card);
    border-radius: var(--radius-lg);
  }
  .modal-content h3 { margin-top: 0; }
  .modal-actions {
    display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem;
  }

  /* --- Zen mode (no overlay) ---------------------------------------------- */

  /* Keep only the active pane/stack visible at the top level */
  body.zen-active #grid > :not(.pane.is-zen, :has(.pane.is-zen)) {
    display: none !important;
  }

  /* Explicitly hide any top-level gutters while in Zen */
  body.zen-active #grid > .gutter,
  body.zen-active #grid > .gutter-col,
  body.zen-active #grid > .gutter-row {
    display: none !important;
  }
  
  /* Top-level pane zen behaves as before */
  body.zen-active #grid > .pane.is-zen {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border-radius: var(--pane-radius);
    overflow: hidden;
  }
  
  /* Stack hosting a zen row: give the chrome to the stack */
  body.zen-active #grid > .pane-column:has(.pane.is-zen) {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border-radius: var(--pane-radius);
    border: 1px solid var(--border);
    background: var(--card);
    overflow: hidden; /* clip inner scrollers to rounded edge */
  }
  
  /* Hide non-zen rows inside that stack */
  body.zen-active .pane-column:has(.pane.is-zen) > .pane:not(.is-zen) {
    display: none !important;
  }
  /* Also ide the in-between gutter so no extra top/bottom space remains in zen mode */
  body.zen-active .pane-column:has(.pane.is-zen) > .gutter-row {
    display: none !important;
  }  
  
  /* Flatten the inner zen row so there is no “double edge” (no extra top/bottom visual padding) */
  body.zen-active .pane-column:has(.pane.is-zen) > .pane.is-zen {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  
  /* Fallback for browsers without :has() — JS can set [data-zen-scope] on the hosting stack */
  body.zen-active .pane-column[data-zen-scope] > .pane:not(.is-zen) {
    display: none !important;
  }
  /* Hide the gutter here too */
  body.zen-active .pane-column[data-zen-scope] > .gutter-row {
    display: none !important;
  }
  body.zen-active .pane-column[data-zen-scope] > .pane.is-zen {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }  
  
  /* Safety net: if nothing is zen, revert */
  body.zen-active:not(:has(.pane.is-zen)) #grid > * {
    display: revert !important;
  }
  
  /* Zen pane should not use overlay positioning in this mode */
  #grid .pane.is-zen {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }  

  /* --- Misc helpers -------------------------------------------------------- */
  #devResetBuilder { white-space: nowrap; }
  body.layout-builder .grid .pane,
  body.layout-builder .grid .pane-column { min-height: 0 !important; }
  .size-badge, .width-badge { color: inherit; }

  /*.no-hover, .no-hover:hover { background: transparent !important; }
  pane[data-collapsed] .pane-zen-toggle:hover { background: transparent !important; }*/
  .no-hover, .no-hover:hover, .no-hover:focus, .no-hover:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* When state flips, don't let the freshly-shown button inherit hover paint */
  /* Limit the hover suppression to the brief JS-applied sentinel */
  .pane[data-collapsed] .expand-btn.no-hover:hover,
  .pane:not([data-collapsed]) .collapse-btn.no-hover:hover,
  .pane[data-collapsed] .pane-zen-toggle.no-hover:hover {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* --- Media queries (fallbacks) ------------------------------------------ */
  @media (width >= 600px) {
    .layout-tiles { grid-template-columns: repeat(2, 1fr); }
  }

  /* Desktop (≥769px): hide collapse pair if pane not collapsible */
  @media (width >= 769px) {
    body:not(.layout-builder) .pane:not(.collapsible) .collapse-btn,
    body:not(.layout-builder) .pane:not(.collapsible) .expand-btn {
      display: none !important;
    }
  }

  /* Mobile (≤768px) --------------------------------------------------------- */
  @media (width <= 768px) {
    .grid {
      flex-direction: column;
      overflow: hidden auto;
      scrollbar-gutter: auto;
      position: relative;
      gap: var(--gap);
    }

    .pane, .pane-column {
      flex-basis: auto !important;
      flex-shrink: 0;
      width: 100%;
      height: auto;
    }
    .pane { min-height: var(--pane-min-h, 300px); }
    .pane-column { min-height: 300px; gap: var(--gap); }

    /* When a stack's direct children are ALL collapsed, remove min-height & gap */
    .pane-column:not(:has(> .pane:not([data-collapsed]))) {
      min-height: auto; gap: 0;
    }
    @supports not (selector(:has(*))) {
      .pane-column[data-all-collapsed="1"] { min-height: auto; gap: 0; }
    }

    /* Hide gutters on mobile; use gap instead */
    .gutter-col, .gutter-row { display: none !important; }

    /* Fallback for older browsers without flex-gap */
    @supports not (gap: 1rem) {
      .grid > * + * { margin-top: var(--gap); }
      .pane-column > .pane + .pane { margin-top: var(--gap); }
      .pane-column[data-all-collapsed="1"] > .pane + .pane { margin-top: 0; }
    }

    /* Notes sidebar width on mobile */
    :root { --notes-w: 95vw; }
  }

  /* Motion preferences ------------------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .file-loader.pulsing,
    .file-loader.pulsing-strong,
    .file-loader.pulsing-soft { animation: none; }

    .notes-sidebar { transition: none; }
    .pane .head .pane-header-controls > *,
    .pane .head .custom-header,
    .pane .head .icon-btn,
    .pane .head .btn.icon-btn { transition: none; }

    .pane .head .icon-btn:active,
    .pane .head .btn.icon-btn:active { transform: none; }
  }
}