/* Team-area workspace shell (WORKSPACE.md → Shell): dark sidebar menu, the Directory list beside records on wide
   screens, and on phones a sticky top bar, a slide-in menu and a bottom bar. Page styles stay in admin.css. */
/* Hub look (docs/spec/design-brief.md → Hub look): a warm graphite menu, 4px grid, one size of icon, sentence-case
   labels, quiet mono counts. Colours come from the tokens at the top of admin.css; the --side-* names stay for
   older rules and page files that read them. */
:root {
  --side: var(--s-bg, #161513);
  --side-2: var(--s-raised, #24221f);
  --side-ink: var(--s-text, #efe9de);
  --side-muted: var(--s-muted, #8a847a);
  --side-accent: var(--s-accent, #e7a6d6);
  --side-w: 256px;
  --list-w: 360px;
  --rail-w: 44px;
  --shell-top: 0px;          /* height of the sticky bar above the page: none on desktop, the top bar on phones */
}

.shell svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--ink); padding: 8px 12px; border-radius: 8px; font-weight: 500; box-shadow: 0 0 0 1px var(--line-strong), 0 4px 12px rgba(31, 27, 22, .08); }
.skip-link:focus { top: 12px; }
main.page:focus { outline: none; }

/* ---------- layout ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; --list-now: 0px; }
.shell-main { min-width: 0; }
/* Wide pages fill the space beside the menu (no 1680px cap); narrow pages stay centred in it. */
.shell main.page { max-width: none; margin: 0; padding: 24px 32px 64px; }
.shell main.page.narrow { max-width: 1120px; margin: 0 auto; }
/* Width of the page column, for content that breaks out of a narrow page (the clinical timeline). */
.shell { --shell-main: calc(100vw - var(--side-w) - var(--list-now)); }

/* ---------- environment banner (env-banner.js): still red and unmissable, but one 28px line ---------- */
.environment-banner { height: 28px; padding: 0 16px; font: 500 12px/16px var(--font); letter-spacing: 0; }
.environment-banner.dev, .environment-banner.staging, .environment-banner.preprod {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.environment-banner.dev { background: #b42318; }
.environment-banner span { display: inline; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 400; font-size: 12px; opacity: .82; }

/* ---------- sidebar ----------
   aside.side, not .side: pages have their own .side blocks (e.g. the timeline's owners panel), which must not
   pick up the menu's dark background or its phone drawer position. Every rule below starts at aside.side. */
aside.side {
  position: sticky; top: 0; height: 100vh; height: calc(100dvh - var(--shell-banner, 0px)); z-index: 30;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--side); color: var(--s-text-2); font: 400 14px/20px var(--font);
}
aside.side a { text-decoration: none; }
aside.side :focus-visible { outline: 2px solid var(--side-accent); outline-offset: 1px; }
aside.side svg { width: 16px; height: 16px; stroke-width: 1.75; }
aside.side .side-top { display: flex; align-items: center; gap: 8px; padding: 16px 12px 0; }
aside.side .side-brand { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 4px 0 6px; color: var(--s-text); min-width: 0; flex: 1; border-radius: 8px; }
aside.side .side-brand:hover { color: var(--s-text); }
aside.side .side-brand img { width: 24px; height: 24px; border-radius: 50%; background: #fff; flex: none; }
aside.side .side-brand > span { display: flex; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; }
aside.side .side-brand strong { font-size: 15px; font-weight: 500; color: var(--s-text); letter-spacing: 0; }
aside.side .side-brand small { font-size: 15px; font-weight: 400; color: var(--s-muted); letter-spacing: 0; text-transform: none; }
aside.side .side-close { display: none; width: 32px; height: 32px; border-radius: 8px; border: 0; box-shadow: inset 0 0 0 1px var(--s-line); background: none; color: var(--s-text-2); cursor: pointer; place-items: center; padding: 0; }
aside.side .side-search {
  margin: 16px 12px 0; display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); height: 36px;
  background: var(--s-input); border: 0; box-shadow: inset 0 0 0 1px var(--s-line); border-radius: 8px; padding: 0 8px 0 10px;
  color: var(--s-muted); font: 400 14px/20px var(--font); cursor: pointer; text-align: left;
  transition: box-shadow .15s var(--ease), color .15s var(--ease);
}
aside.side .side-search:hover, aside.side .side-search[aria-expanded="true"] { box-shadow: inset 0 0 0 1px rgba(239, 233, 222, .16); color: var(--s-text-2); }
aside.side .side-search span { flex: 1; }
aside.side .side-search kbd {
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border: 0; border-radius: 4px;
  font: 400 11px/16px var(--mono); color: var(--s-text-2);
  box-shadow: inset 0 0 0 1px rgba(239, 233, 222, .14), inset 0 -1px 0 rgba(239, 233, 222, .10);
}
aside.side .side-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 16px; scrollbar-width: thin; scrollbar-color: rgba(239, 233, 222, .14) transparent; }
aside.side .side-group { margin-top: 24px; }
aside.side .side-home { margin-top: 0; }
aside.side .side-body, aside.side .side-home { display: grid; gap: 2px; }
/* Section label: 24px above (the group's margin), 8px below. When the menu is narrow (761–1179px) the Filters
   actions move under the heading rather than past the menu's edge. */
aside.side .side-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 8px; min-height: 16px; }
aside.side .side-actions { display: flex; gap: 4px; margin-left: auto; }
aside.side .side-toggle {
  flex: 1; display: flex; align-items: center; gap: 4px; height: 16px; border: 0; background: none; cursor: pointer; text-align: left;
  padding: 0 8px; border-radius: 4px; color: var(--s-muted); font: 400 12px/16px var(--font); letter-spacing: 0; text-transform: none;
}
aside.side .side-toggle:hover { color: var(--s-text-2); }
/* The fold chevron stays out of the way until the label is pointed at, and shows while a group is folded. */
aside.side .side-toggle svg { width: 12px; height: 12px; opacity: 0; transition: transform .15s var(--ease), opacity .15s var(--ease); }
aside.side .side-toggle:hover svg, aside.side .side-toggle:focus-visible svg, aside.side .side-toggle[aria-expanded="false"] svg { opacity: .8; }
aside.side .side-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
@media (hover: none) { aside.side .side-toggle svg { opacity: .6; } }
aside.side .side-action { height: 16px; border: 0; background: none; color: var(--s-text-2); font: 400 12px/16px var(--font); padding: 0 4px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
aside.side .side-action:hover { color: var(--s-text); }
aside.side .side-action[aria-pressed="true"] { color: var(--s-text); box-shadow: inset 0 -1px 0 var(--side-accent); border-radius: 0; }
aside.side .side-link {
  display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border-radius: 8px; color: var(--s-text-2);
  font-weight: 400; min-width: 0; transition: background-color .15s var(--ease), color .15s var(--ease);
}
aside.side .side-link svg { color: var(--s-muted); }
aside.side .side-link:hover { background: rgba(239, 233, 222, .04); color: var(--s-text); }
aside.side .side-link[aria-current="page"] {
  background: var(--side-2); color: var(--s-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px var(--s-line);
}
aside.side .side-link[aria-current="page"] svg { color: var(--side-accent); }
aside.side .side-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Counts are quiet mono text, never pills. */
aside.side .side-n { margin-left: auto; font: 400 12px/16px var(--mono); color: var(--s-muted); background: none; padding: 0; font-variant-numeric: tabular-nums; }
aside.side .side-n.hot { color: var(--side-accent); }
/* Collapsed groups, applied before first paint from the cached preferences (html[data-shell-collapsed]). */
html[data-shell-collapsed~="day"] #side-g-day,
html[data-shell-collapsed~="directory"] #side-g-directory,
html[data-shell-collapsed~="filters"] #side-g-filters,
html[data-shell-collapsed~="views"] #side-g-views,
html[data-shell-collapsed~="practice"] #side-g-practice,
html[data-shell-collapsed~="docs"] #side-g-docs { display: none; }

/* Filters and saved views */
aside.side .side-fgroup { padding: 0 4px 8px; }
aside.side .side-flabel { display: block; font-size: 12px; line-height: 16px; color: var(--s-muted); margin: 0 4px 4px; }
aside.side .side-chips { display: flex; flex-wrap: wrap; gap: 4px; }
aside.side .side-chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 13px; line-height: 16px;
  border: 0; box-shadow: inset 0 0 0 1px var(--s-line); color: var(--s-text-2); background: none;
  transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
aside.side .side-chip:hover { box-shadow: inset 0 0 0 1px rgba(239, 233, 222, .16); color: var(--s-text); }
aside.side .side-chip[aria-current="true"] { background: var(--side-2); color: var(--s-text); box-shadow: inset 0 0 0 1px rgba(231, 166, 214, .5); }
aside.side .side-select {
  width: 100%; height: 32px; font: 400 13px/16px var(--font); color: var(--s-text-2); background: var(--s-input); border: 0;
  box-shadow: inset 0 0 0 1px var(--s-line); border-radius: 8px; padding: 0 8px;
}
aside.side .side-select.on { color: var(--s-text); box-shadow: inset 0 0 0 1px rgba(231, 166, 214, .5); }
aside.side .side-note { margin: 4px 8px; font-size: 12px; line-height: 16px; color: var(--s-muted); }
aside.side .side-note b { font-weight: 500; color: var(--s-text-2); }
aside.side .side-view { display: flex; align-items: center; gap: 4px; }
aside.side .side-view .side-link { flex: 1; min-width: 0; }
aside.side .side-view.is-editing { flex-wrap: wrap; }
aside.side .side-tools { display: flex; justify-content: flex-end; gap: 2px; flex-basis: 100%; padding: 0 4px 4px; }
/* Saved views get a small neutral dot in the icon column; the open view's dot takes the accent. */
aside.side .side-dot { width: 6px; height: 6px; margin: 0 5px; border-radius: 50%; flex: none; background: var(--s-muted); }
aside.side .side-link[aria-current="page"] .side-dot { background: var(--side-accent); }
aside.side .side-ibtn { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--s-muted); cursor: pointer; font: 500 14px/1 var(--font); flex: none; padding: 0; }
aside.side .side-ibtn:hover { background: var(--side-2); color: var(--s-text); }
aside.side .side-ibtn:disabled { opacity: .3; cursor: default; background: none; }
aside.side .side-ibtn svg { width: 16px; height: 16px; }
aside.side .side-form { display: flex; gap: 4px; padding: 4px; flex-wrap: wrap; }
aside.side .side-form input { flex: 1 1 100%; min-width: 0; height: 32px; font: 400 13px/16px var(--font); color: var(--s-text); background: var(--s-input); border: 0; box-shadow: inset 0 0 0 1px rgba(239, 233, 222, .14); border-radius: 8px; padding: 0 8px; }
aside.side .side-form input:focus { box-shadow: inset 0 0 0 1px var(--side-accent); outline: none; }
aside.side .side-form .side-mini { height: 28px; border: 0; border-radius: 6px; padding: 0 12px; font: 500 12px/16px var(--font); cursor: pointer; background: var(--s-text); color: var(--s-bg); }
aside.side .side-form .side-mini.ghost { background: none; color: var(--s-text-2); box-shadow: inset 0 0 0 1px rgba(239, 233, 222, .14); }
aside.side .side-save { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 0 8px; height: 32px; width: 100%; border: 1px dashed rgba(239, 233, 222, .16); border-radius: 8px; background: none; color: var(--s-text-2); font: 400 13px/16px var(--font); cursor: pointer; text-align: left; }
aside.side .side-save:hover { border-color: rgba(239, 233, 222, .3); color: var(--s-text); }
aside.side .side-err { margin: 4px 8px; font-size: 12px; line-height: 16px; color: #f0a59c; }

/* The person, their role and Log out at the bottom. */
aside.side .side-me { margin-top: auto; border-top: 1px solid var(--s-line); padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 16px; }
aside.side .side-me-av { display: block; flex: none; width: 28px; height: 28px; border-radius: 50%; }
aside.side .side-me .av-tone-person { font: 500 11px/1 var(--font); }
aside.side .side-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 500; font-size: 11px; flex: none; background: var(--side-2); color: var(--s-text); }
aside.side .side-me-text { flex: 1; min-width: 0; }
aside.side .side-me .name { display: block; color: var(--s-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
aside.side .side-me .role { display: block; color: var(--s-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
aside.side .side-me form { margin: 0; flex: none; }
aside.side .side-logout {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: none;
  color: var(--s-muted); font: 400 12px/16px var(--font); cursor: pointer; text-decoration: none;
}
aside.side .side-logout:hover { color: var(--s-text); background: rgba(239, 233, 222, .04); }

/* ---------- list pane (Directory results beside records) ---------- */
.listpane, .lp-rail { display: none; }
.lp-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: #5f5360; font: 650 12px/1 inherit; cursor: pointer; }
.lp-btn:hover { background: var(--lilac); color: var(--purple-dark); }
.lp-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (min-width: 1180px) {
  .shell.has-list { grid-template-columns: var(--side-w) var(--list-w) minmax(0, 1fr); --list-now: var(--list-w); }
  .shell.has-list .listpane { display: flex; }
  html[data-shell-list="off"] .shell.has-list:not(.is-directory) { grid-template-columns: var(--side-w) var(--rail-w) minmax(0, 1fr); --list-now: var(--rail-w); }
  html[data-shell-list="off"] .shell.has-list:not(.is-directory) .listpane { display: none; }
  html[data-shell-list="off"] .shell.has-list:not(.is-directory) .lp-rail { display: flex; }
}
.listpane {
  position: sticky; top: 0; height: 100vh; height: calc(100dvh - var(--shell-banner, 0px)); z-index: 2; overflow: hidden;
  flex-direction: column; min-height: 0; background: #fff; border-right: 1px solid var(--line); font-size: 14px;
}
.lp-rail { position: sticky; top: 0; height: 100vh; height: calc(100dvh - var(--shell-banner, 0px)); justify-content: center; padding-top: 16px; background: #fff; border-right: 1px solid var(--line); }
.lp-rail .lp-btn { width: 32px; padding: 0; justify-content: center; }
.lp-head { padding: 16px 16px 10px; border-bottom: 1px solid var(--line); }
.lp-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-titlebar h2 { margin: 0; font-size: 18px; }
.lp-meta { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; min-height: 1.45em; }
.lp-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-pills:not(:empty) { margin-top: 8px; }
.lp-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--lilac-2); color: var(--purple-dark); font-weight: 650; text-decoration: none; }
.lp-pill:hover { background: #efd6ea; color: var(--purple-dark); }
.lp-pill b { font-weight: 700; opacity: .6; }
.lp-rows { position: relative; min-height: 0; list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; flex: 1; transition: opacity .15s; }
.lp-rows[aria-busy="true"] { opacity: .55; }
.lp-row { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: flex-start; color: var(--ink); text-decoration: none; }
.lp-row:hover { background: var(--lilac); color: var(--ink); }
.lp-row[aria-current="page"] { background: var(--lilac-2); box-shadow: inset 3px 0 0 var(--purple); }
.lp-row:focus-visible { outline-offset: -3px; }
.lp-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 11.5px; flex: none; background: var(--lilac-2); color: var(--purple-dark); }
.lp-text { min-width: 0; flex: 1; }
.lp-text b { display: block; font-size: 14px; color: #3d2c3b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-sub { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.lp-tag { display: inline-block; font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 999px; background: var(--lilac-2); color: var(--purple-dark); }
.lp-tag.amber { background: var(--amber-bg); color: var(--amber); }
.lp-tag.red { background: var(--red-bg); color: var(--red); }
.lp-tag.green { background: var(--green-bg); color: var(--green); }
.lp-side { margin-left: auto; text-align: right; font-size: 11.5px; color: var(--faint); white-space: nowrap; padding-left: 4px; }
.lp-empty { padding: 22px 16px; color: var(--muted); font-size: 13.5px; }
.lp-more { padding: 12px 16px 18px; color: var(--faint); font-size: 12.5px; }

/* ---------- the whole menu folded to icons (wide screens; html[data-shell-rail], applied before first paint) ---------- */
aside.side .side-fold { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 8px; background: none;
  color: var(--s-muted); cursor: pointer; padding: 0; transition: background-color .15s var(--ease), color .15s var(--ease); }
aside.side .side-fold:hover { background: rgba(239, 233, 222, .04); color: var(--s-text); }
aside.side .side-fold svg { width: 16px; height: 16px; }
@media (min-width: 761px) {
  html[data-shell-rail] { --side-w: 64px; }
  html[data-shell-rail] aside.side .side-top { flex-direction: column; padding: 16px 12px 0; gap: 8px; }
  html[data-shell-rail] aside.side .side-brand { flex: none; padding: 0 4px; }
  html[data-shell-rail] .side-brand > span,
  html[data-shell-rail] .side-search span, html[data-shell-rail] .side-search kbd,
  html[data-shell-rail] .side-label, html[data-shell-rail] .side-n, html[data-shell-rail] .side-head,
  html[data-shell-rail] [data-shell-filters], html[data-shell-rail] [data-shell-views],
  html[data-shell-rail] .side-tree > summary > svg:last-child, html[data-shell-rail] .side-tree-body,
  html[data-shell-rail] .side-me-text, html[data-shell-rail] .side-me form { display: none !important; }
  html[data-shell-rail] .side-fold svg { transform: scaleX(-1); }
  html[data-shell-rail] aside.side .side-search { width: 40px; margin: 12px auto 0; justify-content: center; padding: 0; }
  html[data-shell-rail] aside.side .side-scroll { padding: 12px 12px 16px; }
  html[data-shell-rail] aside.side .side-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--s-line); }
  html[data-shell-rail] aside.side .side-home { margin-top: 0; padding-top: 0; border-top: 0; }
  /* Folded groups stay visible as icons: the rail is for getting around, not for tidying. */
  html[data-shell-rail] .side-body { display: grid !important; }
  html[data-shell-rail] aside.side .side-link { justify-content: center; padding: 0; position: relative; }
  html[data-shell-rail] .side-count:not([hidden]) { position: absolute; top: 4px; right: 4px; min-width: 6px; width: 6px; height: 6px; padding: 0;
    font-size: 0; border-radius: 50%; background: var(--side-accent); }
  html[data-shell-rail] aside.side .side-me { justify-content: center; padding: 12px 0; }
}

/* ---------- record pages: breadcrumbs with previous / next in the Directory list (shell.js recordStep) ---------- */
.record-bar { display: flex; align-items: center; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; margin: 0 0 12px; min-width: 0; }
.record-bar .crumbs-bar { margin: 0; flex: 1 1 auto; }
.record-step { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 13px; }
.record-step[hidden] { display: none; }
.record-step .rs-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 0; box-shadow: inset 0 0 0 1px var(--line-strong);
  background: var(--card); color: var(--text-2); text-decoration: none; font-size: 16px; line-height: 1; font-weight: 400; }
.record-step a.rs-btn:hover { background: var(--raised); color: var(--ink); }
.record-step span.rs-btn { opacity: .4; }
.record-step .rs-pos { color: var(--faint); text-decoration: none; padding: 0 4px; white-space: nowrap; font: 400 12px/16px var(--mono); font-variant-numeric: tabular-nums; }
.record-step .rs-pos:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
@media (max-width: 760px) { .record-step .rs-list { display: none; } }

/* ---------- phones: top bar, slide-in menu and bottom bar ---------- */
.shell .topbar, .shell-bottom, .shell-scrim { display: none; }
@media (max-width: 760px) {
  :root { --shell-top: 56px; }
  .shell { display: block; min-height: 0; }
  .shell { --shell-main: 100vw; }
  .shell main.page { padding: 16px 12px calc(84px + env(safe-area-inset-bottom)); }
  aside.side {
    position: fixed; inset: 0 auto 0 0; width: 86%; max-width: 320px; height: 100%; height: 100dvh; z-index: 70;
    transform: translateX(-104%); visibility: hidden; transition: transform .22s var(--ease), visibility 0s linear .22s;
    box-shadow: 16px 0 48px rgba(0, 0, 0, .28);
  }
  html.shell-menu-open aside.side { transform: none; visibility: visible; transition: transform .22s var(--ease); }
  aside.side .side-close { display: grid; }
  aside.side .side-fold { display: none; }
  /* Touch sizes: rows 40px, search 40px, chips 32px; same rhythm otherwise. */
  aside.side .side-search { height: 40px; font-size: 15px; }
  aside.side .side-search kbd { display: none; }   /* no keyboard to press / on */
  aside.side .side-link { height: 40px; font-size: 15px; }
  aside.side .side-chip { height: 32px; }
  html.shell-menu-open, html.shell-menu-open body { overflow: hidden; }
  .shell-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(22, 21, 19, .45); }
  .shell .topbar {
    display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 40; height: var(--shell-top);
    padding: 8px 12px; background: rgba(247, 245, 242, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  }
  .tb-btn { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--card); color: var(--text-2); cursor: pointer; flex: none; padding: 0; }
  .tb-btn svg { width: 18px; height: 18px; stroke-width: 1.75; }
  .tb-title { flex: 1; min-width: 0; line-height: 20px; }
  .tb-title strong { display: block; font-size: 15px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-title small { display: block; color: var(--faint); font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell-bottom {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
    background: var(--card); border-top: 1px solid var(--line); padding: 4px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .shell-bottom a, .shell-bottom button {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px; border: 0; background: none; cursor: pointer;
    font: 500 11px/16px var(--font); color: var(--faint); text-decoration: none; border-radius: 8px; min-width: 0;
  }
  .shell-bottom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .shell-bottom [aria-current="page"] { color: var(--accent-ink); }
  .shell-bottom span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 1179px) {
  :root:not([data-shell-rail]) { --side-w: 236px; }
  .shell main.page { padding: 20px 20px 64px; }
}

/* ---------- customise dialog ---------- */
dialog.shell-dialog { width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 24px 64px rgba(31, 27, 22, .18); color: var(--ink); background: var(--card); }
dialog.shell-dialog::backdrop { background: rgba(22, 21, 19, .4); }
.sd-head { padding: 20px 20px 8px; }
.sd-head h2 { margin: 0 0 4px; font-size: 17px; font-weight: 500; }
.sd-head p { margin: 0; font-size: 13px; }
.sd-list { list-style: none; margin: 8px 0 0; padding: 0 12px; }
.sd-list li { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; }
.sd-list li + li { border-top: 1px solid var(--line); }
.sd-list label { flex: 1; display: flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; }
.sd-list input { width: 16px; height: 16px; accent-color: var(--purple); }
.sd-move { width: 28px; height: 28px; border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: 6px; background: var(--card); color: var(--text-2); cursor: pointer; font: 400 14px/1 var(--font); }
.sd-move:disabled { opacity: .35; cursor: default; }
.sd-extra { margin: 12px 20px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.sd-extra label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.sd-extra input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--purple); }
.sd-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px 20px; }
.sd-msg { margin: 8px 20px 0; font-size: 13px; color: var(--red); }

/* ---------- Directory page: filters the page has no buttons for ---------- */
.dir-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.dir-active .faint { font-size: 13px; margin-right: 2px; }

@media (prefers-reduced-motion: reduce) {
  aside.side, html.shell-menu-open aside.side { transition: none; }
}
@media print {
  aside.side, .listpane, .lp-rail, .shell .topbar, .shell-bottom, .shell-scrim, .skip-link { display: none !important; }
  .shell { display: block; }
}

/* ---------- Docs tree in the menu (DOCS.md): areas fold open into their groups and pages ---------- */
aside.side .side-tree > summary { list-style: none; cursor: pointer; }
aside.side .side-tree > summary::-webkit-details-marker, aside.side .side-tree-group > summary::-webkit-details-marker { display: none; }
aside.side .side-tree > summary > svg:last-child { margin-left: auto; width: 12px; height: 12px; opacity: .7; transition: transform .15s var(--ease); transform: rotate(-90deg); }
aside.side .side-tree[open] > summary > svg:last-child { transform: none; }
aside.side .side-tree > summary[data-current] { color: var(--s-text); }
/* The page list hangs off a hairline under the area's icon (row padding 8 + half the 16px icon). */
aside.side .side-tree-body { margin: 2px 0 8px 16px; border-left: 1px solid var(--s-line); padding-left: 8px; display: grid; gap: 2px; min-width: 0; }
aside.side .side-tree-body a, aside.side .side-tree-group > summary { display: block; padding: 4px 8px; border-radius: 6px; color: var(--s-text-2); font-size: 13px; line-height: 20px; font-weight: 400; overflow-wrap: anywhere; }
aside.side .side-tree-body a:hover, aside.side .side-tree-group > summary:hover { background: rgba(239, 233, 222, .04); color: var(--s-text); }
aside.side .side-tree-body a[aria-current="page"] { color: var(--s-text); background: var(--side-2); box-shadow: inset 0 0 0 1px var(--s-line); }
aside.side .side-tree-head { display: block; padding: 8px 8px 4px; font-size: 12px; line-height: 16px; letter-spacing: 0; text-transform: none; color: var(--s-muted); }
aside.side .side-tree-group > summary { list-style: none; cursor: pointer; }
aside.side .side-tree-group > summary::before { content: "▸"; display: inline-block; width: 12px; color: var(--s-muted); transition: transform .15s var(--ease); }
aside.side .side-tree-group[open] > summary::before { transform: rotate(90deg); }
aside.side .side-tree-group > a { padding-left: 20px; }
aside.side .side-tree-group .count { font: 400 12px/16px var(--mono); color: var(--s-muted); background: none; padding: 0 0 0 4px; }
aside.side .side-tree-body a.side-tree-all { font-size: 12px; color: var(--s-muted); }
aside.side .side-tree-body a.side-tree-all:hover { color: var(--s-text); }

/* ---------- Breadcrumbs (hub_crumbs.py, _crumbs.html): at the top of every page; on phones the middle folds ---------- */
.crumbs-bar { margin: 0 0 12px; font-size: 13px; line-height: 20px; min-width: 0; }
.crumbs-bar ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; min-width: 0; }
.crumbs-bar li { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; color: var(--faint); }
.crumbs-bar li + li::before { content: "/"; margin: 0 6px; color: #c9c2b8; flex: none; }
.crumbs-bar a { color: var(--faint); text-decoration: none; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs-bar a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.crumbs-bar [aria-current] { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs-more { display: none !important; }
.crumbs-more button { border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--card); color: var(--text-2); border-radius: 6px; padding: 0 8px; min-height: 24px; font-weight: 500; cursor: pointer; line-height: 1; }
.crumbs-more button:hover { background: var(--raised); }
@media (max-width: 760px) {
  .crumbs-bar { margin-bottom: 8px; }
  .crumbs-bar a, .crumbs-bar [aria-current] { max-width: 46vw; }
  .crumbs-bar.can-fold:not(.is-open) .crumbs-mid { display: none; }
  .crumbs-bar.can-fold:not(.is-open) .crumbs-more { display: inline-flex !important; }
  .crumbs-bar.is-open a, .crumbs-bar.is-open [aria-current] { white-space: normal; max-width: none; overflow-wrap: anywhere; }
}
@media print { .crumbs-bar { display: none; } }

/* Catch-up count (CATCH_UP.md) beside the menu item: quiet mono text in the accent tint, the one count that asks for
   attention. On the phone top bar's bell it is a small badge. */
.side-count { flex: none; margin-left: auto; min-width: 16px; padding: 0; background: none; color: var(--side-accent); font: 500 12px/16px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.side-count[hidden] { display: none; }
.tb-catch-up { position: relative; }
.tb-catch-up .side-count { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font: 500 10px/16px var(--mono); text-align: center; }

/* Directory: "Save as a view" beside the filters (WORKSPACE.md → Saved views). */
.dir-save { margin-top: 10px; }
.dir-save[hidden] { display: none; }
.dir-save .faint { font-size: 13px; }

/* Phones: Filters sit under Home and start folded (shell.js placeFilters). */
.side-group.is-phone-folded #side-g-filters { display: none; }
html[data-shell-collapsed] .side-group.is-phone-open #side-g-filters { display: grid; }

/* The menu and list columns are sticky and as tall as the window; paint their colours down the whole page behind
   them too, so a full-page screenshot (or a page taller than the window) never shows them stopping part-way. */
@media (min-width: 761px) {
  .shell {
    background: linear-gradient(to right,
      var(--side) 0 var(--side-w),
      #fff var(--side-w) calc(var(--side-w) + var(--list-now) - 1px),
      var(--line) calc(var(--side-w) + var(--list-now) - 1px) calc(var(--side-w) + var(--list-now)),
      transparent calc(var(--side-w) + var(--list-now))) no-repeat;
  }
  .shell:not(.has-list) { background: linear-gradient(to right, var(--side) 0 var(--side-w), transparent var(--side-w)) no-repeat; }
}
@media print { .shell { background: none; } }