/* The shell: the menu bar and the sidebar (DESIGN.md §5, §8).
   The geometry is exact: a floating card sits --card-inset from the window,
   a control's plate --card-pad inside it on both axes, and the bar is twice
   the plate's centre tall, so the toggle, every bar icon and a panel's
   title share one centre line. */

.bar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-bar); height: calc(var(--bar-h) + var(--safe-top));
  padding: var(--safe-top) calc(var(--edge-pad) + env(safe-area-inset-right)) 0 calc(var(--edge-pad) + env(safe-area-inset-left));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; pointer-events: none; }
.bar .zone { display: flex; align-items: center; gap: 2px; pointer-events: auto; min-width: 0; }
.bar .zone.r { justify-content: flex-end; }
.bar .slot { width: var(--hit); height: var(--hit); }       /* where the toggle stands, above the bar */

#side-btn { position: fixed; z-index: calc(var(--z-sheet) + 1);   /* never moves, never hides */
  top: calc(var(--safe-top) + var(--edge-pad)); left: calc(env(safe-area-inset-left) + var(--edge-pad)); }

/* ---------- the sidebar: a floating card over home ---------- */
#sidebar { z-index: var(--z-sheet); top: calc(var(--card-inset) + var(--safe-top)); left: calc(var(--card-inset) + env(safe-area-inset-left));
  bottom: var(--card-inset); width: var(--sidebar-w); border-radius: var(--r-lg); display: flex; flex-direction: column;
  padding: calc(var(--card-pad) + var(--plate) + var(--s-2)) var(--card-pad) var(--card-pad);
  transition: opacity var(--d-panel) var(--ease), transform var(--d-panel) var(--ease); }
#sidebar.out { opacity: 0; transform: translateX(calc(-1 * var(--s-3))); }
/* pinned on desktop (DESIGN.md §9 rule 1): the same frosted card in every room, under the layers;
   open, every room makes room for it (--side), and the bar starts beside it */
#sidebar.docked { z-index: var(--z-panel); }
#sidebar.docked.out { pointer-events: none; }
body { --side: 0px; }
body.side-docked.side-open { --side: calc(var(--card-inset) + var(--sidebar-w)); }
.bar { left: var(--side); transition: left var(--d-panel) var(--ease); }
body.side-open .bar .slot { display: none; }   /* the toggle stands in the sidebar's corner */
.sb-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; scrollbar-width: none;
  padding-bottom: var(--s-4); -webkit-mask-image: linear-gradient(#000 calc(100% - var(--s-4)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--s-4)), transparent); }   /* rows fade under the foot, never cut */
.sb-scroll::-webkit-scrollbar { display: none; }
.sb-foot { flex: none; display: flex; flex-direction: column; gap: 1px; padding-top: var(--s-2); box-shadow: inset 0 .5px 0 var(--rule); }   /* the rooms beyond the shelves, ruled off from Continue */
#sidebar h6 { font: 500 var(--t-xs) var(--sans); color: var(--ink-3); padding: var(--s-4) 0 6px calc((var(--plate) - var(--icon-md)) / 2); }
#sidebar .one { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Continue: a listening row's time, quiet at the end of the row */
#sidebar .row .at { flex: none; margin-left: auto; padding-right: var(--s-2); font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* the shelves: the name opens the shelf's page, the chevron opens its folders here */
.tree, .tree ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; }
.tree .lbl { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); align-self: stretch;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree .mark { flex: none; width: var(--icon-md); display: flex; justify-content: center; }
.tree .mark i { width: 4px; height: 16px; border-radius: var(--r-xs); background: var(--cloth); }
#sidebar .tree ul .row { padding-left: calc((var(--plate) - var(--icon-md)) / 2 + var(--icon-md) + var(--s-3) + var(--depth, 0) * 14px); }
#sidebar .tree ul .lbl { font-size: var(--t-sm); }
.tw { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--r-ctl) - var(--s-1)); color: var(--ink-3); opacity: 0; transition: opacity var(--d-fast), background var(--d-fast); }
.tw svg.i { transition: transform var(--d-fast) var(--ease); }
.tw[aria-expanded="true"] { opacity: 1; }
.tw[aria-expanded="true"] svg.i { transform: rotate(90deg); }
@media (hover: hover) { .row:hover > .tw { opacity: 1; } .tw:hover { background: var(--fill-2); color: var(--ink); } }
@media (hover: none) { .tw { opacity: 1; } }
.tw:focus-visible { opacity: 1; }
/* a shelf that isn't there: an outlined mark, a dim name, nothing to press */
.tree .ghost > .row { color: var(--ink-3); pointer-events: none; }
.tree .ghost .mark i { background: none; box-shadow: inset 0 0 0 1px var(--cloth); }

@media (max-width: 720px) {
  /* the middle zone's name centred, as on desktop, so a name that changes (a running head) never shifts */
  .bar .zone.m { justify-content: center; }
  /* the same floating card as on desktop (Noah, 2026-10-29), over a dimmed page: clear of the status
     bar's blur and the home indicator, every corner round, the toggle in its corner; it grows out of
     the toggle and shrinks back into it */
  #sidebar { bottom: max(var(--card-inset), env(safe-area-inset-bottom)); width: min(80vw, 320px); transform-origin: calc(var(--edge-pad) + var(--hit) / 2 - var(--card-inset)) calc(var(--edge-pad) + var(--hit) / 2 - var(--card-inset)); }
  #sidebar.out { transform: scale(.94); }
  #sidebar.frost { box-shadow: var(--frost-edge-soft), var(--shadow-float); }
  #sidebar .row { min-height: var(--hit); font-size: var(--t-lg); }
}

/* a menu row with a second line: Get the app's iPhone and Android */
.menu-rows .two { display: flex; flex-direction: column; padding: 6px 0; line-height: var(--lh-snug); color: var(--ink); }
.menu-rows .two small { font-size: var(--t-xs); color: var(--ink-3); }