/* ============================================================
   Theme: modern-uzh — layer 10, shell
   Owns: .shell, .shell__body, .topbar (+ __search, __right), .lockup,
   .sidebar (+ __nav, __group-label, __recent, __toc),
   .sheet (+ --wide, --seq, --annotate), .icon-btn, .avatar, .user-menu
   (+ __name, __popup), .msg family, .page__meta, .auth family,
   .u-visually-hidden, and the sidebar's responsive collapse.
   This is the application chrome — the frame every page sits in.
   Loaded after app.css and any per-page CSS.

   00-tokens.css has already re-pointed --ground, --radius, --radius-page,
   --font-sans, --font-mono, --danger-dim and the type scale, and added
   --shadow-1/--shadow-2/--shadow-lift/--halo/--radius-sm/--radius-pill/
   --control-h. Anything that only needed a colour or a radius already
   looks right without a line below — this file states only what the
   markup's *structure* still gets wrong for the modern-uzh direction.
   ============================================================ */

/* ---- lockup: tighter Inter metrics than the baseline's system-ui ---- */
.lockup {
  gap: 0.6rem;
  font-weight: 620;
  letter-spacing: -0.02em;
}
.lockup img,
.lockup svg { height: 21px; }
.lockup .bar { height: 16px; }
@media (max-width: 900px) { .lockup img, .lockup svg { height: 19px; } }

/* ---- topbar: sticky + translucent, one notch taller ----------------
   The baseline topbar is a plain flex child of .shell with no position
   set, so on a page taller than the viewport it scrolls away with the
   content. The reference keeps it pinned (examples/samples-library.html
   vs its uzh twin: the bar stays put while the table scrolls under it),
   which needs position:sticky plus a stacking context above the fixed
   .sidebar and the sheet's own content. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  gap: 0.8rem;
  padding: 0 1rem;
  height: 56px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}

.topbar__search {
  margin-left: 0.5rem;
  max-width: 26rem;
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.85rem;
  gap: 0.5rem;
}
/* :focus-within (accent border + opaque surface) is the baseline's own
   a11y affordance and isn't in the reference's static demo — left as
   app.css defines it, this only adds the hover the reference shows. */
.topbar__search:hover { border-color: var(--rule); }
.topbar__search svg { width: 15px; height: 15px; }

/* Sized for the 56px bar above (was 28px/16px against a 46px bar); the
   pill radius comes from --radius-sm rather than the general --radius so
   small chrome controls read as one family with .sidebar__nav's items. */
.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}
.icon-btn svg { width: 17px; height: 17px; }

.avatar {
  width: 28px;
  height: 28px;
  font-size: 0.64rem;
  letter-spacing: 0;
}

/* .user-menu__popup's 6px corner radius is a literal in app.css, never
   part of the --radius system at all (unlike every other popover-style
   panel), so the token re-point in 00-tokens.css can't reach it. Pulling
   it onto --radius-sm keeps the dropdown visually consistent with
   .icon-btn/.topbar__search rather than looking like a leftover corner
   from the old chrome. */
.user-menu__popup { border-radius: var(--radius-sm); }

/* ---- shell / body -----------------------------------------------------
   Horizontal padding matches the reference; the vertical rhythm (2rem
   top, 4rem bottom) is unchanged since nothing about it was wrong. */
.shell__body { padding: 1.6rem 1.4rem 4rem; }

/* ---- sidebar: 236px, painted in the ground colour, raised active pill
   fixes.md's sidebar is 208px and .shell__body's margin-left matches it
   1:1 — the two numbers below MUST move together, or content underlaps
   the rail. sidebar.js reads no width of its own (confirmed: it only
   toggles .is-active off location.pathname), so nothing else needs to
   change to carry the wider rail.

   .notes-layout must be listed here too, not just .shell__body: app.css
   offsets BOTH by its own 208px (they are the two things that sit beside
   the fixed sidebar — a sheet page uses one, notes/shell.html the other),
   so widening only .shell__body left the notebook's rail 28px underneath
   the sidebar — clipped on its left edge and unclickable there, which is
   exactly the bug reported against this theme. */
.shell:has(.sidebar) .shell__body,
.shell:has(.sidebar) .notes-layout { margin-left: 236px; }

.sidebar {
  /* .topbar's new 56px height + its 1px border, same convention as the
     47px this replaces. */
  top: 57px;
  width: 236px;
  padding: 0.9rem 0.8rem 1.4rem;
  /* The reference paints the rail in --ground, not --surface — the rail
     recedes into the desk and only the active item and the sheet stay
     "raised," which is the whole point of the pill below. */
  background: var(--ground);
  border-right: 0;
}

.sidebar__nav { gap: 0.12rem; }

.sidebar__group-label {
  margin: 1.1rem 0.7rem 0.3rem;
  font-size: var(--text-label);
  font-weight: 650;
  letter-spacing: 0.09em;
}

.sidebar__nav a {
  gap: 0.65rem;
  padding: 0.46rem 0.7rem;
  font-weight: 500;
}
.sidebar__nav a svg {
  width: 17px;
  height: 17px;
  opacity: 0.8;
}
/* sidebar.js does `best.classList.add("is-active")` — confirmed this is
   the exact class the app sets at runtime, matching the reference. */
.sidebar__nav a.is-active {
  background: var(--surface);
  color: var(--accent);
  font-weight: 620;
  box-shadow: var(--shadow-1);
}
.sidebar__nav a.is-active svg { opacity: 1; }

@media (max-width: 900px) {
  /* Same story as app.css's twin block: css/mobile/10-shell.css (loaded
     after every theme) turns .sidebar into an off-canvas drawer here,
     not display:none, so a phone user keeps the left menu instead of
     losing it outright. All this block still needs to do is keep
     collapsing the 236px offset .shell__body/.notes-layout otherwise
     carry for the fixed desktop column — the drawer is off-canvas
     (out of flow) and takes no space, so there's nothing left to make
     room for. */
  .shell:has(.sidebar) .shell__body,
  .shell:has(.sidebar) .notes-layout { margin-left: 0; }
}

/* ---- sheet: rounded, floating on shadow-2 -----------------------------
   app.css's .sheet uses var(--shadow-page), and 00-tokens.css does not
   re-point --shadow-page (only --radius-page) — so without this the
   corners round but the sheet keeps the old flat baseline shadow instead
   of "floating" the way the reference's sheet does. --radius-page itself
   needs no line here; it's already re-pointed.

   Padding is deliberately NOT touched: the reference's .sheet is a shell
   around a separate .sheet__head/.sheet__body (0 side padding on the
   outer box, padding lives on the inner regions instead), but this app's
   .sheet has no such wrapper — h1/p/.section sit directly inside it. That
   class pair does not exist in this codebase (grepped templates and css:
   no match), so copying the reference's padding here would zero out the
   sheet's only padding and run the content edge-to-edge. */
.sheet {
  max-width: 44rem;
  box-shadow: var(--shadow-2);
}
.sheet--wide { max-width: 82rem; }

/* sequences.css/annotate.css already set these two variants to
   max-width:none (full-bleed viewers, not prose sheets) — from a
   stylesheet that loads BEFORE this theme layer. Restated here, or this
   file's own .sheet { max-width: 44rem } above would win the cascade at
   equal specificity purely by loading later, undoing that full-bleed
   layout on the sequence viewer and the annotator. */
.sheet--seq,
.sheet--annotate {
  max-width: none;
}

/* ---- auth: same shadow-2 fix as .sheet, same reasoning -------------- */
.auth__sheet,
.auth__sheet--wide {
  box-shadow: var(--shadow-2);
}