/* The application shell: the persistent left navigation, the workspace
   router, and the workspaces themselves (Command Center, Operations
   Console, Experts, Agents, Relay, Assurance, Search, Settings).

   Loaded AFTER app.css, deliberately. Everything here that restyles an
   element app.css already styles depends on being the later declaration
   at equal specificity - a media query adds no specificity, and a rule
   placed above the one it means to override does nothing at all. Both of
   those have shipped as silent bugs in this repository. If you move this
   link tag above app.css in index.html, the shell loses.

   The colour tokens live in app.css :root, not here, so there is exactly
   one palette for the whole product. */

/* ---------------------------------------------------------------------
   1. Persistent navigation
   ------------------------------------------------------------------ */

.sidebar {
  /* One global icon rail; its module context is a separate pane. */
  width: 64px;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
}
.sidebar-head { padding: 16px 12px 12px 20px; display: flex; align-items: center; gap: 12px; }
.sidebar-head .wordmark { flex: 1; }
.sidebar-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 36px; height: 36px; padding: 0;
  border: none; border-radius: 6px; background: none;
  color: var(--text-2); cursor: pointer;
}
.sidebar-toggle:hover { background: var(--surface-2); color: var(--text); }
.sidebar-toggle:focus-visible, .menu-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ---- the wordmark ----
   A product mark, not a label. Light weight plus wide tracking on the IBM
   Plex Sans variable axis the page already loads (100-700, see fonts.css),
   so no new file is fetched for it and nothing depends on Chakra Petch,
   whose lightest cut is 500.

   letter-spacing adds its space AFTER the last glyph too, so a tracked
   word sits visibly left of true centre. The negative margin-right of one
   tracking unit cancels exactly that, which is what lets .wordmark-lg
   centre honestly in the Chat empty state. */
.wordmark {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1;
  /* Named rather than written twice: .wm-a has to re-emit exactly one
     tracking unit after itself, and a drifted copy of this number would
     show as one bad letter gap in the middle of the word. */
  --wm-track: 0.42em;
  letter-spacing: var(--wm-track);
  margin-right: calc(var(--wm-track) * -1);
  --wm-a-stroke: 8.8;
  color: var(--text);
  text-transform: uppercase;
  white-space: nowrap;
}
/* The standalone brand moment in Chat. Same treatment, larger, and given
   room rather than a strapline. */
.wordmark-lg {
  font-size: 30px;
  --wm-track: 0.52em;
  font-weight: 250;
  /* Lighter cut, lighter drawn A. The variable axis is at 250 here against
     300 above, and the real A's diagonal measures 0.046em perpendicular
     rather than 0.062em; 6.6 viewBox units reproduces that. Leaving it at
     8.8 drew a chevron visibly heavier than the V beside it. */
  --wm-a-stroke: 6.6;
}

/* ---------------------------------------------------------------------
   The drawn A.

   VARRA is set with its A as a bare apex - no crossbar - so the wordmark
   reads V /\ R R /\. IBM Plex Sans has a crossbar (measured: a 6.00px run
   at 65% down the cap at 15px), so the letterform is drawn rather than
   typed.

   Every number here is measured off the real glyph it replaces, at both
   sizes, rather than chosen:

     cap height        0.700em   - matched exactly, 10.50px / 21.00px
     ink width         0.575em   - real A is 0.575em / 0.563em
     diagonal angle    22.3deg   - derived from the real A's own ink box
     stroke            0.062em at w300, 0.046em at w250

   The path is drawn past the baseline (y=114 in a 100-tall viewBox) and
   clipped by the viewport. That is what gives the feet a flat horizontal
   cut: butt caps on a 22deg diagonal would end on the slant instead, which
   reads as a broken letter rather than an A.

   The apex is a mitre, and its rise above the centreline vertex is why the
   path starts at y=11.6 rather than y=0 - at stroke 8.8 the mitred point
   adds exactly that much, so the ink tops out on the cap line with the
   letters either side.
   --------------------------------------------------------------------- */

/* The letter itself, kept in the document beside the drawing of it.

   Without this the DOM reads V + <svg> + RR + <svg>, so anything
   extracting text - a screen reader, the accessible name, a summariser,
   reader mode - gets "VRR". The page title and og:title say Varra; the
   visible mark must not disagree with them.

   display:inline and nothing else. This is the part that is easy to get
   wrong invisibly: position:absolute or display:inline-block (the usual
   .sr-only recipes) blockify the box, and a non-inline box mid-word makes
   the accessible-name algorithm insert a space either side of it - the
   link announces as "V A RR A". font-size:0 with letter-spacing:0 keeps
   the glyph out of the picture without taking it out of the string. */
.wm-a-letter {
  display: inline;
  font-size: 0;
  letter-spacing: 0;
  word-spacing: 0;
}

.wm-a {
  width: 0.575em;
  height: 0.700em;
  /* letter-spacing is emitted after each character, and Chrome emits none
     after an atomic inline - so the drawn A contributed no tracking to its
     right while every real letter did. Measured at 15px before this line
     existed: the A->R gap collapsed to 2.50px where the other gaps ran
     8.25-8.74px, and the word read as VA RRA. Re-emitting one tracking
     unit here restores the rhythm to 8.38px.

     It also keeps .wordmark's trailing compensation honest. That negative
     margin-right cancels the letter-space after the final glyph, and the
     final glyph is now this SVG - so this margin is the space it cancels.
     Remove one and the other stops being correct. */
  margin-right: var(--wm-track);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--wm-a-stroke);
  stroke-linecap: butt;
  stroke-linejoin: miter;
  /* The apex is a 44.6deg join; the default limit of 4 would clip it to a
     bevel and flatten the point the whole treatment is about. */
  stroke-miterlimit: 12;
}

.nav-rail { flex: 1; overflow-y: auto; padding: 0 12px 14px; }
.nav-group + .nav-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.nav-label {
  margin: 0 0 6px;
  padding: 0 8px;
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-2);
}

/* One row shape for every destination. #newChatBtn and #workItemsBtn keep
   their ids and their handlers - they are nav rows now, not the two
   bespoke buttons they used to be - so app.js and the browser checks that
   drive them are unaffected. */
.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 450;
  text-align: left;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.nav-item + .nav-item { margin-top: 2px; }
.nav-item svg { flex: none; width: 16px; height: 16px; opacity: 0.8; }
.nav-item .nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: var(--surface); color: var(--text); }
/* Selected is a charcoal surface plus full-strength cream, no outline. An
   outlined row reads as a button that has been pressed; a filled one reads
   as where you are. */
.nav-item[aria-current] {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 500;
}
.nav-item[aria-current] svg { opacity: 1; }
.nav-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; }

/* Selected state is carried by the row, not by a coloured dot per section:
   colour here would be decoration, and the budget is spent on state. */
.nav-item .nav-tick {
  flex: none;
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background: transparent;
  margin-left: -10px;
  margin-right: -2px;
}
.nav-item[aria-current] .nav-tick { background: var(--brand); }

/* A section that is navigable but has nothing behind it yet still reads as
   available; the workspace itself is where the limit is stated plainly. */
/* "Soon" / "Partial" still have to be visible - a section that cannot do
   anything must say so before it is clicked - but they were set in mono
   caps, which put a second shouting type system in the calmest column of
   the product. Sentence case, tertiary, no tracking: read it when you look
   at the row, ignore it otherwise. */
.nav-item .nav-note {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}
.nav-item:hover .nav-note, .nav-item[aria-current] .nav-note { color: var(--text-2); }
#navOrbits .nav-note, #navTeamMessages .nav-note { color: var(--text-2); }

.sidebar-foot { border-top: 1px solid var(--border); padding: 10px 12px; }

/* The account row. The plan label was the third mono-caps system in this
   column, after the nav notes and the state chips; the nav notes are now
   sentence case and the state chips left the rail entirely, so this one
   follows. It reads as a subtitle to the name, which is what it is. */
.account-btn { gap: 11px; padding: 8px 10px; border-radius: 8px; }
.account-btn:hover { background: var(--surface); }
.account-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; }
.account-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.account-name { font-size: var(--type-secondary); font-weight: 450; color: var(--text); }
.account-plan {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}
.account-avatar {
  width: 26px; height: 26px;
  border-radius: 7px;
  font-size: var(--type-caption);
  font-weight: 500;
  color: var(--text-2);
}
.signin-btn { border-radius: 8px; }

/* ---------------------------------------------------------------------
   2. The workspace router
   ------------------------------------------------------------------ */

/* Exactly one of these is on screen at a time, hidden with the `hidden`
   attribute so the inactive workspaces leave the accessibility tree
   instead of merely going invisible.

   .view carries display:flex, which beats the browser's own
   [hidden] { display: none } - the same trap .task-state[hidden] and
   .search-setup[hidden] in app.css already had to work around. The
   restatement below is what actually hides them, and it has to stay
   BELOW .view: equal specificity, so the later declaration wins. */
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view[hidden] { display: none; }

/* Chat is the one workspace that is not a scrolling document: its
   transcript scrolls inside itself and the composer is pinned under it,
   which is the layout .scroller / .input-wrap already assume. Wrapping
   them changes nothing about either. */
#viewChat { overflow: hidden; }

.view-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* The first pass capped content at 940px, which left ~142px of dead gutter
   either side at 1440 and made a work surface feel like a landing page.
   1180px with a clamped side padding uses the canvas without letting a line
   of prose run to an unreadable length - the prose blocks set their own
   max-width in ch below. */
.view-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px clamp(20px, 3.4vw, 44px) 72px;
}
.view-inner.narrow { max-width: 760px; }

/* Home deliberately has no tiles, quick actions or speculative records. */
#viewHome .view-inner { padding-top: clamp(32px, 6vh, 64px); }
.home-title { margin: 0 0 8px; font-size: var(--type-title-1); font-weight: 500; letter-spacing: -0.02em; }
.home-date { display: block; color: var(--text-2); font-size: var(--type-secondary); line-height: 1.6; }
.home-sources { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border); max-width: 620px; }
.home-source-title, .home-session { margin: 0; color: var(--text-2); font-size: var(--type-secondary); line-height: 1.7; }
.home-source-detail { margin: 4px 0 0; max-width: 58ch; color: var(--text-2); font-size: var(--type-secondary); line-height: 1.7; }
.home-session { margin-top: 24px; }

/* ---------------------------------------------------------------------
   3. Workspace typography and cards
   ------------------------------------------------------------------ */

.ws-greeting {
  margin: 0 0 5px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-title-1);
  letter-spacing: 0.01em;
  color: var(--text);
}
.ws-sub { margin: 0 0 24px; font-size: var(--type-label); line-height: 1.6; color: var(--text-2); max-width: 66ch; }

/* ---- summary tiles ----
   Three counts, all of them rows the server returned. There is no fourth
   tile: the reference shows "Issues", and Varra has no failure state to
   count - open, blocked, resolved and cancelled is the whole lifecycle - so
   a zero there would be a number nothing measured. */
.ws-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 30px;
}
.ws-tile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  text-align: left;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ws-tile:hover { background: var(--surface-2); border-color: var(--border-strong); }
.ws-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ws-tile-value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-title-1);
  line-height: 1;
  color: var(--text);
}
.ws-tile-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--type-caption);
  color: var(--text-2);
}
/* The dot is the only colour on a tile, and it is the same token the row
   state uses, so a count and a row agree about what amber means. */
.ws-tile-label::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-3);
}
.ws-tile.is-attention .ws-tile-label::before { background: var(--attention); }
.ws-tile.is-progress .ws-tile-label::before { background: var(--active); }
.ws-tile.is-done .ws-tile-label::before { background: var(--success); }
/* Needs-you is the one tile allowed to look different, because it is the
   one the whole screen is ordered around. */
.ws-tile.is-attention { border-color: color-mix(in srgb, var(--attention) 34%, transparent); }
.ws-tile.is-attention:hover { border-color: color-mix(in srgb, var(--attention) 55%, transparent); }

.ws-section { margin-bottom: 30px; }
.ws-section { margin-bottom: 34px; }
.ws-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
/* A thin divider instead of a card border. Sections are separated by
   hierarchy and space here, not by nesting another rectangle. */
.ws-section-title {
  margin: 0;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}
.ws-count {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: 20px;
  padding: 1px 7px;
}
.ws-section-action { margin-left: auto; }

.ws-empty {
  margin: 0;
  padding: 14px 0 4px;
  font-size: var(--type-secondary);
  line-height: 1.6;
  color: var(--text-3);
}

/* The one card shape. Compact, one border, no inner card. */
.ws-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: var(--font-body);
  font-size: var(--type-secondary);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ws-row:last-child { border-bottom: none; }
.ws-row:hover { background: var(--surface); }

/* ---- weight between sections ----
   All three work sections were identical in weight in the first pass, so
   nothing "clearly deserved attention first" beyond its position on the
   page. Needs-you now sits on a charcoal panel; in-progress stays plain on
   the canvas; completed recedes. That is three levels from one surface
   token and one opacity, rather than three different card designs. */
.ws-section.is-primary .ws-rows {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 4px;
  margin-top: 10px;
}
.ws-section.is-primary .ws-row:last-child { border-bottom: none; }
.ws-section.is-primary .ws-row:hover { background: var(--surface-2); }
.ws-section.is-muted .ws-row-title { color: var(--text-2); }
.ws-section.is-muted .ws-section-title { color: var(--text-3); }
.ws-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ws-row-main { flex: 1; min-width: 0; }
.ws-row-title {
  display: block;
  color: var(--text);
  font-size: var(--type-label);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-row-meta {
  display: block;
  margin-top: 2px;
  font-size: var(--type-caption);
  color: var(--text-3);
}
.ws-row-time {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-3);
  white-space: nowrap;
  min-width: 56px;
  text-align: right;
}
/* The chevron that says a row goes somewhere. It appears only on rows that
   actually navigate - see workItemRow in shell.js - so it is an affordance
   rather than decoration. */
.ws-row-go { flex: none; color: var(--text-3); display: flex; align-items: center; }
.ws-row:hover .ws-row-go { color: var(--text-2); }

/* ---------------------------------------------------------------------
   4. State. The entire colour budget, and nothing else uses it.
   ------------------------------------------------------------------ */

/* A 6px dot with grey mono text beside it was too quiet to scan a list by -
   you had to read every row to find the one waiting on you. These are pills,
   but dark ones: a tinted charcoal ground and a desaturated foreground, so
   status becomes legible at a glance without the page turning into a
   traffic light. Sentence case rather than mono caps, because the mono-caps
   system was already doing too much work elsewhere. */
.ws-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  white-space: nowrap;
}
.ws-state::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-3);
}
.ws-state.is-open      { background: var(--active-tint); border-color: color-mix(in srgb, var(--active) 26%, transparent); color: var(--active); }
.ws-state.is-open::before { background: var(--active); }
.ws-state.is-blocked   { background: var(--attention-tint); border-color: color-mix(in srgb, var(--attention) 30%, transparent); color: var(--attention); }
.ws-state.is-blocked::before { background: var(--attention); }
.ws-state.is-resolved  { background: var(--success-tint); border-color: color-mix(in srgb, var(--success) 26%, transparent); color: var(--success); }
.ws-state.is-resolved::before { background: var(--success); }
.ws-state.is-cancelled { color: var(--text-3); }
.ws-state.is-cancelled::before { background: var(--text-3); }
.ws-state.is-failed    { background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }
.ws-state.is-failed::before { background: var(--danger); }
/* A chat is not a Work Item and has no lifecycle; it gets the plain pill. */
.ws-state.is-plain { background: none; border-color: transparent; padding-left: 0; }

/* Needs-you is the one thing allowed to raise its voice, and it does it
   with a 2px edge rather than a filled amber panel: prominent without
   reading as an alarm. */
.ws-attention {
  border-left: 2px solid var(--attention);
  padding-left: 12px;
}
.ws-section.is-primary .ws-attention { border-left: none; padding-left: 12px; }

/* ---------------------------------------------------------------------
   5. Controls
   ------------------------------------------------------------------ */

.ws-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--type-secondary);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.ws-btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.ws-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ws-btn:disabled { opacity: 0.45; cursor: default; }
.ws-btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 500; }
.ws-btn.primary:hover:not(:disabled) { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--on-brand); }

/* ---------------------------------------------------------------------
   6. Operations Console
   ------------------------------------------------------------------ */

/* The calmest surface in the product: one column, generous leading, and
   no card borders at all. */
#viewOperations .view-inner { max-width: 720px; padding-top: 11vh; }
.ops-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-2);
  cursor: pointer;
}
.ops-close:hover { border-color: var(--border-strong); color: var(--text); }
.ops-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#viewOperations { position: relative; }
.ops-since {
  margin: 0 0 8px;
  font-size: var(--type-label);
  line-height: 1.7;
  color: var(--text-2);
}
/* The compact truthful count. One line, middot-separated, and every number
   in it is a count of rows - never an estimate and never a claim about work
   done in the user's absence. */
.ops-tally {
  margin: 0 0 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: var(--type-secondary);
  color: var(--text-2);
}
.ops-tally span { display: inline-flex; align-items: center; gap: 7px; }
.ops-tally span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3);
}
.ops-tally .t-need::before { background: var(--attention); }
.ops-tally .t-changed::before { background: var(--active); }
.ops-tally .t-done::before { background: var(--success); }
.ops-block { margin-bottom: 26px; }
.ops-block h3 {
  margin: 0 0 8px;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.ops-line {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  font-family: var(--font-body);
  font-size: var(--type-label);
  line-height: 1.5;
  text-align: left;
  color: var(--text);
}
.ops-line + .ops-line { border-top: 1px solid var(--border); border-radius: 0; }
/* Only rows that resolve to a real Work Item become buttons; the rest stay
   as plain text, so a pointer never promises a destination there isn't one. */
button.ops-line { cursor: pointer; }
button.ops-line:hover { background: var(--surface); }
button.ops-line:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ops-line-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-actions { margin-top: 34px; display: flex; gap: 10px; align-items: center; }
/* The provenance of "since your last visit". Stated rather than implied,
   because the signal is this browser's own clock and nothing more. */
/* The capability disclosure. It stays complete and stays on the page - it
   is the sentence that keeps this screen honest - but as a disclosure
   rather than a paragraph, because in the first pass it was the largest
   block of text on the calmest workspace. <details> keeps it reachable by
   keyboard and readable by a screen reader with no JS, and the summary
   names what it contains rather than saying "more". */
.ops-provenance {
  margin: 30px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: var(--type-caption);
  line-height: 1.65;
  color: var(--text-3);
}
.ops-provenance > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-3);
  font-size: var(--type-caption);
}
.ops-provenance > summary::-webkit-details-marker { display: none; }
.ops-provenance > summary::before {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transition: transform 0.15s ease;
}
.ops-provenance[open] > summary::before { transform: rotate(90deg); }
.ops-provenance > summary:hover { color: var(--text-2); }
.ops-provenance > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.ops-provenance p { margin: 10px 0 0; max-width: 72ch; }
@media (prefers-reduced-motion: reduce) { .ops-provenance > summary::before { transition: none; } }

/* ---------------------------------------------------------------------
   7. Experts
   ------------------------------------------------------------------ */

/* The picker app.js renders (#generalItem / #modeSearch / #modeItems) is
   reused verbatim; only its container moved out of the sidebar. These
   rules re-space it for a full page without touching .mode-item itself,
   whose active/tick styling the capability check reads. */
.experts-picker { margin-top: 4px; }
/* The last two mono-caps labels in the product outside timestamps. The
   whole point of retiring that system from the rail was that it stopped
   competing; leaving it on two section labels would put it straight back. */
.experts-picker .conv-list-label,
.chat-history-strip .conv-list-label {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}
.experts-picker .mode-less {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}
.experts-picker .mode-less:hover { color: var(--text-2); }
.experts-picker .mode-search-wrap { max-width: 340px; margin-bottom: 14px; }
.experts-picker #modeItems,
.experts-picker #generalItem {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: 10px;
}
.experts-picker #generalItem { margin-bottom: 10px; }
.experts-picker .mode-item {
  align-items: flex-start;
  gap: 10px;
  height: auto;
  min-height: 76px;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.experts-picker .mode-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
/* Selected reads as cream, not as a hue. No Expert is ever given a colour
   of its own - they are capabilities, not personalities. */
.experts-picker .mode-item.active {
  border-color: var(--brand);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.experts-picker .mode-item .mode-label { font-size: var(--type-label); font-weight: 500; color: var(--text); }
.experts-picker .mode-item.active .mode-label { color: var(--text); }
.experts-picker .mode-blurb { white-space: normal; line-height: 1.55; margin-top: 3px; }
.experts-picker .mode-item .tick { margin-top: 4px; }

/* ---------------------------------------------------------------------
   8. Honest capability states
   ------------------------------------------------------------------ */

/* Agents, Relay and parts of Assurance have no backend today. These
   workspaces say so in words and offer nothing to press. Nothing here
   animates, counts, or renders a placeholder row that could be mistaken
   for real activity. */
.ws-unavailable {
  max-width: 58ch;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.ws-unavailable h3 {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--text);
}
.ws-unavailable .ws-tag {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
}
.ws-unavailable p { margin: 0 0 10px; font-size: var(--type-secondary); line-height: 1.65; color: var(--text-2); }
.ws-unavailable p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   9. Search
   ------------------------------------------------------------------ */

.ws-search-field {
  width: 100%;
  max-width: 460px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--type-label);
}
.ws-search-field::placeholder { color: var(--text-3); }
.ws-search-field:focus { outline: none; border-color: var(--focus-ring); }
.ws-search-field:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------------------------------------------------------------------
   10. Chat, quieted
   ------------------------------------------------------------------ */

/* Chat carries the least furniture of any workspace. The empty state is
   the wordmark and one question; everything else is the composer. */
#viewChat .empty-state { max-width: 560px; margin-top: 17vh; }
#viewChat .empty-state .wordmark-lg { margin-bottom: 20px; color: var(--text-2); }
/* The question is the loudest thing on the screen, and the wordmark sits
   above it as a mark rather than a heading - the reference reads the same
   way round. Nothing else competes with either. */
#viewChat .empty-prompt {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-title-1);
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* ---- the depth control, quieted ----
   Behaviour is untouched: same #depthSlider, same range, same handler, same
   accessible name. What changes is that a full-width rail with FASTER and
   DEEPER set in mono caps was the loudest thing on an otherwise empty
   screen. It now sits at composer width, and the two end legends are small
   and tertiary rather than shouting. */
/* app.css already sizes this to composer width; the margin is restated so
   this override does not silently drop its 8px bottom gap. */
#viewChat .depth-wrap { margin: 0 auto 8px; }
#viewChat .depth-legend { font-size: var(--type-caption); letter-spacing: 0.1em; color: var(--text-3); opacity: 0.75; }
#viewChat .depth-blurb { font-size: var(--type-caption); color: var(--text-3); }
#viewChat .depth-name { font-size: var(--type-caption); color: var(--text-2); }
.chat-history-strip {
  flex: none;
  padding: 10px 24px 0;
  max-width: 768px;
  margin: 0 auto;
  width: 100%;
}
.chat-context-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.chat-context-label { color: var(--text-2); font-size: var(--type-caption); }
.chat-context-controls .chat-new { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.chat-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px 3px 0;
  border: none;
  background: none;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.chat-history-toggle:hover { color: var(--text-2); }
.chat-history-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chat-history-toggle svg { transition: transform 0.15s ease; }
.chat-history-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .chat-history-toggle svg { transition: none; } }
/* The conversation list. It lives in Chat now rather than the rail, and
   it is a list of rows, not a panel with a border around it. */
#convItems { max-height: 34vh; overflow-y: auto; }
/* Sentence case, like the nav notes and the account plan. The mono-caps
   system now belongs to timestamps and nothing else. */
.chat-history-toggle {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  letter-spacing: 0;
  text-transform: none;
}

/* ---------------------------------------------------------------------
   11. Responsive
   ------------------------------------------------------------------ */

/* Desktop is this pass's target, but the existing off-canvas behaviour is
   what keeps the 320px overflow check green, so it is restated for the
   new rail width rather than left pointing at the old 272px. */
/* The rail's own off-canvas width is restated in section 13 alongside the
   rest of the narrow-viewport rules, so there is one place that knows it.
   What stays here is only what is specific to these workspaces. */
@media (max-width: 860px) {
  #viewOperations .view-inner { padding-top: 6vh; }
  .experts-picker #modeItems,
  .experts-picker #generalItem { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ws-row { gap: 10px; padding: 10px 4px; }
  .ws-row-time { display: none; }
  .ws-greeting { font-size: var(--type-title-2); }
  .ops-actions { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   12. Work Items, brought into the same system
   ------------------------------------------------------------------

   web/work-items.js owns this workspace's markup and behaviour and is not
   edited for appearance. Everything below restyles what it already renders,
   from here rather than from app.css, so the module keeps its own file and
   the shell keeps its design tokens in one place.

   The first pass left this workspace on its own scale - 97px rows against
   Home's 58px, a 28px heading against Home's 25px - so the two screens
   showing the same records did not read as one product. */

.work-items {
  padding: 34px clamp(20px, 3.4vw, 44px) 72px;
  font-size: var(--type-label);
}
/* One centred column, the same width as every other workspace. */
.work-items > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

.wi-header { align-items: center; margin-bottom: 18px; }
.work-items .wi-header h2 { font-size: var(--type-title-1); font-weight: 600; letter-spacing: 0.01em; }
.work-items .wi-toolbar { margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.work-items .wi-toolbar > label { color: var(--text-2); font-size: var(--type-caption); }

/* Controls at the shell's own button scale. 42px tall pill buttons made a
   filter bar look like a form. */
.work-items .wi-button,
.work-items .wi-toolbar select {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--type-secondary);
  font-weight: 450;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.work-items .wi-button:hover:not(:disabled) {
  border-color: var(--border-strong); color: var(--text); background: var(--surface-2);
}
.work-items .wi-button.wi-primary {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 500;
}
.work-items .wi-button.wi-primary:hover:not(:disabled) {
  background: var(--accent-bright); border-color: var(--accent-bright); color: var(--on-brand);
}
.work-items :is(button, input, textarea, select):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* The row. Title, status and time on ONE line - the timestamp used to take
   a row of its own, which is most of where the 97px went. */
.work-items .wi-list { border-top: none; }
.work-items .wi-item {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0 16px;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
}
.work-items .wi-item .wi-item-title { font-size: var(--type-label); font-weight: 450; color: var(--text); }
.work-items .wi-item .wi-time { grid-column: auto; margin: 0; font-family: var(--font-mono); font-size: var(--type-caption); color: var(--text-3); white-space: nowrap; }
.work-items .wi-item:hover { background: var(--surface); }

/* The lifecycle badge, matched to .ws-state so a record looks the same on
   Home as it does here. Same tokens, same restraint. */
.work-items .wi-badge {
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
.work-items .wi-badge.wi-open      { background: var(--active-tint); border-color: color-mix(in srgb, var(--active) 26%, transparent); color: var(--active); }
.work-items .wi-badge.wi-blocked   { background: var(--attention-tint); border-color: color-mix(in srgb, var(--attention) 30%, transparent); color: var(--attention); }
.work-items .wi-badge.wi-resolved  { background: var(--success-tint); border-color: color-mix(in srgb, var(--success) 26%, transparent); color: var(--success); }
.work-items .wi-badge.wi-cancelled { color: var(--text-3); }

/* Detail. Not the redesign - that waits until we have decided what data
   Varra should actually hold - just enough that it belongs to the same
   product as the list it came from. */
.work-items .wi-card {
  padding: 18px 20px;
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.work-items .wi-status { color: var(--text-2); font-size: var(--type-caption); }
.work-items .wi-time { color: var(--text-3); font-size: var(--type-caption); }
.work-items .wi-explanation { color: var(--text-3); font-size: var(--type-caption); }
.work-items .wi-history { margin-top: 30px; }
.work-items .wi-history h3, .work-items .wi-form h3 { font-size: var(--type-title-2); font-weight: 600; }
.work-items .wi-field label { font-size: var(--type-secondary); color: var(--text-2); }

/* ---------------------------------------------------------------------
   13. Responsive, restated for the wider rail and canvas
   ------------------------------------------------------------------ */

@media (max-width: 1100px) {
  .ws-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ws-tile { padding: 12px 13px; }
  .ws-tile-value { font-size: var(--type-title-1); }
}
@media (max-width: 860px) {
  .sidebar-toggle, .menu-btn { width: 44px; height: 44px; }
  .nav-item { min-height: 44px; }
  .sidebar-head { padding-top: 10px; padding-bottom: 8px; }
  .nav-group + .nav-group { margin-top: 8px; padding-top: 8px; }
  .app { height: 100dvh; }
  .view-inner, .work-items { padding-left: 16px; padding-right: 16px; }
  .ws-tiles { grid-template-columns: 1fr; }
  .ws-tile { flex-direction: row; align-items: baseline; gap: 12px; }
}
@media (max-width: 520px) {
  .wordmark-lg { font-size: 23px; }
  #viewChat .empty-prompt { font-size: var(--type-title-2); }
  .work-items .wi-item { grid-template-columns: minmax(0, 1fr) auto; }
  .work-items .wi-item .wi-time { grid-column: 1 / -1; margin-top: 4px; }
}

/* ---------------------------------------------------------------------
   14. Gmail: Connections (Settings) and one approval's review (Relay)
   Existing tokens and shapes only - the ws-section rule, ws-state pill,
   ws-btn and ws-attention edge. No new colour, type or component style.
   ------------------------------------------------------------------ */

.gm-card { padding: 14px 0 4px; max-width: 62ch; }
.gm-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gm-name { margin: 0; font-size: var(--type-label); font-weight: 600; color: var(--text); }
.gm-text, .gm-text p { margin: 0 0 10px; font-size: var(--type-secondary); line-height: 1.65; color: var(--text-2); }
.gm-meta { margin: 10px 0 0; font-size: var(--type-caption); line-height: 1.6; color: var(--text-3); }
.gm-facts, .gm-fields {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0 0 12px;
  font-size: var(--type-secondary);
  line-height: 1.55;
}
.gm-facts dt, .gm-fields dt { color: var(--text-3); font-size: var(--type-caption); padding-top: 1px; }
.gm-facts dd, .gm-fields dd { margin: 0; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.gm-fields { padding: 14px 0 0; max-width: 72ch; }
/* The body is shown whole, as it will be sent: line breaks kept, nothing
   truncated, long words wrapped rather than scrolled sideways. */
.gm-body {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--type-secondary);
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.gm-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.gm-msg { margin: 10px 0 0; min-height: 1em; font-size: var(--type-secondary); line-height: 1.6; color: var(--text-2); }
.gm-msg:empty { display: none; }
.gm-msg[role="alert"] { color: var(--text); }
.gm-details { margin: 0 0 4px; font-size: var(--type-secondary); color: var(--text-2); }
.gm-details summary { cursor: pointer; color: var(--text-2); }
.gm-details summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gm-details ul { margin: 8px 0; padding-left: 18px; }
.gm-details li { margin: 3px 0; }
.gm-details code {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.gm-details p { margin: 6px 0 0; color: var(--text-3); }
.gm-confirm, .gm-notice { margin-top: 12px; max-width: 62ch; }
.gm-confirm { padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 7px; }
.gm-confirm p, .gm-notice p { margin: 0; font-size: var(--type-secondary); line-height: 1.6; color: var(--text); }
.gm-notice .ws-btn { margin-top: 10px; }
.ws-btn.danger { color: var(--danger); border-color: var(--danger); }
.ws-btn.danger:hover:not(:disabled) { color: var(--text); background: var(--danger); border-color: var(--danger); }
.gm-result { margin-top: 16px; max-width: 62ch; padding-left: 12px; border-left: 2px solid var(--text-3); }
.gm-result.is-sent { border-left-color: var(--success); }
.gm-result.is-unknown { border-left-color: var(--attention); }
.gm-result.is-failed { border-left-color: var(--danger); }
.gm-result-title { margin: 0 0 6px; font-size: var(--type-label); font-weight: 600; color: var(--text); }
.gm-result-title:focus { outline: none; }
.gm-result-title:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gm-result p { margin: 0 0 8px; font-size: var(--type-secondary); line-height: 1.6; color: var(--text-2); }
#viewRelay [data-relay-review]:not(:empty) { margin-bottom: 24px; }

@media (max-width: 520px) {
  .gm-facts, .gm-fields { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .gm-facts dd, .gm-fields dd { margin-bottom: 8px; }
}

/* Gmail on a Work Item: the list of prepared emails and the form. Same
   Work Items card, field and button shapes as the rest of that view. */
.work-items .wi-gmail { margin-top: 30px; }
.work-items .wi-gmail > h3 { font-size: var(--type-title-2); font-weight: 600; margin: 10px 0; }
.work-items .wi-gmail > h3:focus { outline: none; }
.gm-prep-list { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--border); }
.gm-prep-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.gm-prep-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gm-prep-subject { font-size: var(--type-label); color: var(--text); overflow-wrap: anywhere; }
.gm-prep-meta { font-size: var(--type-caption); color: var(--text-3); overflow-wrap: anywhere; }
.gm-label { display: block; margin-bottom: 6px; font-size: var(--type-secondary); font-weight: 500; color: var(--text-2); }
.gm-readonly { margin: 0; font-size: var(--type-label); color: var(--text); overflow-wrap: anywhere; }
.gm-hint { margin: 0 0 6px; font-size: var(--type-caption); color: var(--text-3); }
.gm-prep .gm-msg + .wi-button { margin-top: 10px; }

@media (max-width: 520px) {
  .gm-prep-row { flex-wrap: wrap; }
  .gm-prep-main { flex-basis: 100%; }
}

/* The global rail never expands. Only the module's context can collapse. */
.navigation-shell { display: flex; flex: none; min-height: 0; }
.sidebar {
  position: relative; inset: auto; z-index: 42; margin-left: 0;
  width: 64px; flex: 0 0 64px; min-width: 64px; box-shadow: none;
}
.sidebar.open { margin-left: 0; box-shadow: none; }
.sidebar-head { justify-content: center; padding: 18px 8px 16px; }
.rail-mark { color: var(--text); font-family: var(--font-body); font-size: var(--type-title-1); font-weight: 300; }
.sidebar .nav-label, .sidebar .nav-text, .sidebar .nav-note,
.sidebar .nav-tick, .sidebar .account-info, .sidebar .signin-btn > span { display: none; }
.nav-rail { padding: 0 8px 12px; }
.nav-group + .nav-group { margin-top: 8px; padding-top: 8px; }
.nav-item { justify-content: center; width: 46px; height: 40px; min-height: 40px; padding: 0; gap: 0; }
.nav-item svg { width: 19px; height: 19px; }
.nav-item:focus-visible::after, .nav-item:hover::after {
  content: attr(aria-label); position: fixed; left: 70px; top: var(--nav-label-top);
  z-index: 100; padding: 9px 12px; border: 1px solid var(--border-strong);
  border-radius: 6px; background: var(--surface-2); color: var(--text);
  font-size: var(--type-caption); white-space: nowrap; pointer-events: none;
}
.sidebar-foot { padding: 10px 8px; }
.account-btn { justify-content: center; padding: 8px 0; }
.signin-btn { min-height: 40px; padding: 0; }
.account-menu { left: 56px; right: auto; width: 260px; max-width: calc(100vw - 72px); max-height: calc(100dvh - 24px); overflow-y: auto; }
.context-sidebar { display: flex; flex-direction: column; flex: 0 0 224px; width: 224px; min-width: 0; background: var(--sidebar); border-right: 1px solid var(--border); overflow-y: auto; }
.context-sidebar[hidden] { display: none; }
.context-head { display: flex; align-items: center; gap: 8px; padding: 15px 12px 17px 20px; min-height: 70px; }
.context-head h2 { flex: 1; margin: 0; font-size: var(--type-label); font-weight: 600; }
.context-nav { display: flex; flex-direction: column; gap: 3px; padding: 0 12px; }
.context-item { display: flex; align-items: center; gap: 6px; min-height: 38px; width: 100%; padding: 8px 10px; border: none; border-radius: 6px; background: none; color: var(--text-2); font: inherit; font-size: var(--type-secondary); text-align: left; cursor: pointer; }
.context-item:hover:not(:disabled), .context-item[aria-current] { background: var(--surface-2); color: var(--text); }
.context-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; }
.context-item:disabled { cursor: default; color: var(--text-3); }
.context-unavailable { font-size: var(--type-caption); margin-left: auto; color: var(--text-3); }
.context-note { padding: 0 22px; margin: 22px 0; font-size: var(--type-caption); line-height: 1.6; color: var(--text-3); }
.context-sidebar .chat-history-strip { padding: 16px 12px; min-width: 0; max-width: none; }
.chat-history-strip[hidden] { display: none; }
.chat-context-label { display: none; }
.chat-context-controls .chat-new { width: 100%; justify-content: flex-start; margin: 0; }
.context-sidebar #convItems { max-height: none; }
.menu-btn { display: inline-flex; justify-content: center; align-items: center; flex: none; }
.menu-btn[hidden] { display: none; }
#searchBtn, #searchSetup { display: none !important; }
@media (max-width: 860px) {
  .context-sidebar { position: fixed; z-index: 41; top: 0; bottom: 0; left: 64px; width: min(256px, calc(100vw - 64px)); box-shadow: var(--shadow-pop); }
  .scrim { left: 64px; z-index: 40; }
  .sidebar-head { padding: 14px 8px; }
  .nav-item { height: 44px; min-height: 44px; }
  .nav-group + .nav-group { margin-top: 4px; padding-top: 4px; }
  .context-item { min-height: 44px; }
  .sidebar .nav-rail { padding-bottom: 6px; }
  .context-head { padding-left: 18px; }
  .view-inner, .work-items { padding-left: 16px; padding-right: 16px; }
  .topbar { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .sidebar-foot { padding-top: 6px; padding-bottom: 6px; }
  .input-wrap { padding-left: 10px; padding-right: 10px; }
  .work-items .wi-toolbar { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .context-sidebar, .sidebar { transition: none; } }

.account-btn:focus-visible::after {
  content: attr(aria-label); position: fixed; bottom: 18px; left: 70px;
  z-index: 100; max-width: calc(100vw - 86px); padding: 9px 12px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface-2); color: var(--text); font-size: var(--type-caption);
  overflow-wrap: anywhere; pointer-events: none;
}

/* One universal entry point, separate from the selected module. */
.rail-create-wrap { flex: none; display: flex; justify-content: center; padding: 0 8px 12px; }
.rail-create { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.rail-create:hover { border-color: var(--text-3); background: var(--surface); }
.rail-create:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rail-create:focus-visible::after { content: 'Create (C)'; position: fixed; left: 70px; top: 72px; z-index: 100; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: var(--type-caption); white-space: nowrap; pointer-events: none; }
.create-dialog { width: 420px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); padding: 18px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--sidebar); color: var(--text); overflow-y: auto; box-shadow: var(--shadow-dialog); }
.create-dialog::backdrop { background: var(--scrim); }
.create-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.create-head h2 { margin: 0; font-size: var(--type-body); font-weight: 600; }
.create-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: none; border-radius: 6px; color: var(--text-2); cursor: pointer; }
.create-close:hover { background: var(--surface-2); color: var(--text); }
.create-search { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--type-secondary); }
.create-search::placeholder { color: var(--text-2); }
.create-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.create-action { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px; border: none; border-radius: 7px; background: none; color: var(--text); font: inherit; font-size: var(--type-secondary); text-align: left; cursor: pointer; }
.create-action svg { flex: none; color: var(--text-2); }
.create-action:hover, .create-action:focus-visible { background: var(--surface-2); }
.create-action[hidden], .create-empty[hidden] { display: none; }
.create-dialog :is(button,input):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.create-empty { margin: 20px 12px; color: var(--text-2); font-size: var(--type-secondary); }
.create-help { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-2); font-size: var(--type-caption); line-height: 1.6; }
@media (max-width: 520px) {
  .create-dialog { padding: 16px; }
  .create-close { width: 44px; height: 44px; }
  .create-help { font-size: var(--type-caption); }
}

/* Settings > Appearance. Native radios in a fieldset, so arrow keys, the
   group name and the checked state come from the browser. The label is the
   hit area; the checked option is marked by its edge, not a new colour. */
.theme-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; }
.theme-option { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font-size: var(--type-label); cursor: pointer; }
.theme-option:hover { border-color: var(--control-border); }
.theme-option:has(input:checked) { border-color: var(--text); }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.theme-option input { margin: 0; accent-color: var(--brand); }
@media (max-width: 520px) { .theme-option { min-height: 44px; } }