/* qahub.css — QA Hub's skin, loaded AFTER shared.css on every page.
   ───────────────────────────────────────────────────────────────────────────

   shared.css is the platform console's stylesheet, copied here unchanged so
   the two can still be diffed. This file is the whole of the difference.

   It works in two layers, and the split is deliberate:

     1. TOKENS. shared.css and qa.css between them use var(--...) 104 times
        and a literal colour three times, so redefining :root moves almost
        every surface, border and label at once. Most of this file's reach
        comes from twenty lines at the top.

     2. STRUCTURE. The things tokens cannot express: a 64px icon rail where a
        220px labelled one used to be, 2px Fluent corners softened to 10px,
        and the overview's tiles and detail panel, which have no counterpart
        in the platform console.

   ⚠️ Do not restyle a page by editing qa.css or feedback.css. Those two are
   shared with nothing, but they are also the files that would have to be
   re-merged if the platform console's versions ever change. Put the override
   here, where it is obvious that it is an override. */


/* ── 1. TOKENS ──────────────────────────────────────────────────────────── */

:root {
  /* Warm neutrals rather than Fluent's cool greys. The page is off-white, the
     panels are pure white, and the tiles are a shade darker than the page so
     they read as raised without needing a border or a shadow. */
  --bg:#FAF9F7; --s1:#FFFFFF; --s2:#F5F3EF; --s3:#F0EEE9;
  --border:#E8E5DF;
  --text:#1A1917; --dim:#6B6862; --faint:#9A968E;

  /* The primary is near-black, not blue. Every status colour on this site
     carries meaning - passed, failed, awaiting approval - so an accent that
     competes with them turns the page into bunting. A black button is the one
     thing on screen that is unambiguously the action. */
  --grass:#1C1B18; --grass-d:#000000;
  --link:#1F5FA8;

  /* Status families. Muted fills, legible text, a border one step darker so a
     pill still has an edge against both the white panel and the tile. */
  --green:#1E7A43; --green-d:#176034; --green-bg:#E6F2EA; --green-bdr:#BCDCC8;
  --red:#A8301F;   --red-bg:#FBEAE7;   --red-bdr:#EFC4BC;
  --amber:#8A5A14; --amber-bg:#FBF0DB; --amber-bdr:#EEDAAE;
  --blue:#1F5FA8;  --blue-bg:#EAF1FA;  --blue-bdr:#C6D9EF;
  --purple:#5C2E91;--purple-bg:#EFE9F7;--purple-bdr:#CFC0E4;
  --teal:#0F6B60;  --teal-bg:#E3F1EF;  --teal-bdr:#B5D9D4;

  --rail:#FFFFFF; --rail-2:#F5F3EF;
  --panel-head:#F5F3EF; --row-alt:#FAF9F7;
  --olive:#1A1917; --olive-d:#000000;

  /* The rail is 64px, not 220px. --sidebar is read by shared.css's own
     .sidebar rule and by two media queries, so setting it here keeps those
     in agreement with the rule below instead of fighting it. */
  --sidebar:64px; --rail-w:64px;

  /* Corner radii in one place. Fluent's 2px is the single strongest signal
     that this is a Windows admin tool; 10px is the single strongest signal
     that it is not. */
  --r:10px; --r-sm:8px; --r-lg:14px; --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(26,25,23,.04);
  --shadow:0 2px 10px rgba(26,25,23,.06);
  --shadow-lg:0 12px 40px rgba(26,25,23,.14);
}

html[data-theme="dark"] {
  --bg:#141311; --s1:#1D1C19; --s2:#232220; --s3:#2A2825;
  --border:#33312D; --text:#EDEBE7; --dim:#A8A49C; --faint:#78746C;
  --grass:#EDEBE7; --grass-d:#FFFFFF;
  --link:#8FB8E8;
  --green:#6FC68E; --green-d:#5AB47B; --green-bg:#1A2A20; --green-bdr:#2E4A38;
  --red:#E89A8C;   --red-bg:#2C1C19;   --red-bdr:#4C312B;
  --amber:#E0B86A; --amber-bg:#2A2317; --amber-bdr:#4A3C22;
  --blue:#8FB8E8;  --blue-bg:#1A2330;  --blue-bdr:#2E3E55;
  --rail:#1D1C19; --rail-2:#232220; --panel-head:#232220; --row-alt:#1A1916;
  --olive:#141311; --olive-d:#000000;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 2px 10px rgba(0,0,0,.35);
  --shadow-lg:0 12px 40px rgba(0,0,0,.55);
}

/* The black primary inverts to white-on-black in dark mode, so its label has
   to invert too. shared.css hardcodes #FFFFFF on .btn-primary. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .fluent-btn-primary,
html[data-theme="dark"] .btn-confirm { color:#141311; }

body {
  /* Segoe first was right for a console pretending to be Entra. This one is
     not pretending to be anything, so it asks for the platform's own UI face
     and falls back through the same stack. */
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;
  font-size:13.5px;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.004em;
}


/* ── 2. THE RAIL ────────────────────────────────────────────────────────── */

/* 64px of icons, a logo at the top and identity at the foot. No labels: the
   six destinations are one section, and a column of text was spending its
   width restating a section nobody was confused about.

   Every item still carries an aria-label, and a hover/focus tooltip renders
   the same string - so the label is one keystroke or one pointer away, and it
   is never the only way to know what an icon does. */
.sidebar {
  width:var(--rail-w); min-width:var(--rail-w);
  background:var(--rail); border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:stretch;
  /* 100%, not 100vh. As 100vh the rail overhung #app by exactly the 52px
     that shared.css's old chrome rule took off it, and the overhang scrolled
     the whole page on an otherwise empty screen. Matching the parent cannot
     drift the same way if #app's height is ever changed again. */
  height:100%;
  padding:12px 8px 10px; gap:4px; z-index:50;
  transition:width .16s ease, min-width .16s ease;
}
.sidebar.expanded { --rail-w:216px; }

.rail-logo { display:flex; align-items:center; height:34px; padding:0 4px; margin-bottom:12px; flex:0 0 auto; }
.sidebar:not(.expanded) .rail-logo { justify-content:center; padding:0; }
.rail-logo img { display:block; }
.rail-logo .rl-mark { width:28px; height:28px; }
.rail-logo .rl-full { height:26px; width:auto; display:none; }
/* Collapsed shows the mark; expanded shows the lockup, in whichever of the
   two colourways the theme can carry. */
.sidebar.expanded .rail-logo .rl-mark { display:none; }
.sidebar.expanded .rail-logo .rl-light { display:block; }
html[data-theme="dark"] .sidebar.expanded .rail-logo .rl-light { display:none; }
html[data-theme="dark"] .sidebar.expanded .rail-logo .rl-dark  { display:block; }

.rail-nav { flex:1; display:flex; flex-direction:column; gap:3px; width:100%; padding:0; overflow-y:auto; overflow-x:hidden; }
.rail-foot { display:flex; flex-direction:column; gap:3px; width:100%; padding-top:10px; border-top:1px solid var(--border); flex:0 0 auto; }

/* Two shapes, one element.
   
   Expanded it is a full-width row: icon, gap, label. Collapsed it has to be
   a SQUARE, and that is the part that was wrong - at 64px the rail is 48px
   of usable width, so a width:100% item drew a 48x40 rectangle, and
   `padding:0 10px` then pinned the icon to the left of it rather than the
   middle. The fill read as off-centre because it was.
   
   So the collapsed state overrides width, padding and justification rather
   than inheriting the row layout and hoping it looks square. */
.rail-item {
  position:relative;
  display:flex; align-items:center; gap:11px;
  width:100%; height:40px; flex:0 0 40px;
  padding:0 10px; border:none; background:transparent; cursor:pointer;
  border-radius:var(--r-sm); color:var(--faint);
  font:inherit; font-size:13px; text-align:left; text-decoration:none;
  transition:background .12s, color .12s;
}
.sidebar:not(.expanded) .rail-item,
.sidebar:not(.expanded) .rail-user {
  width:40px; min-width:40px; padding:0; gap:0;
  justify-content:center; margin-left:auto; margin-right:auto;
}
.rail-item svg { width:19px; height:19px; flex:0 0 19px; }
.rail-item:hover { background:var(--s2); color:var(--text); }
.rail-item:focus-visible { outline:2px solid var(--link); outline-offset:1px; }
.rail-item.active { background:var(--grass); color:var(--s1); }
html[data-theme="dark"] .rail-item.active { color:#141311; }
.rail-item.active:hover { background:var(--grass-d); }

/* The label. Present in the DOM at both widths so expanding does not restyle
   the item, just reveals what was already measured. */
.rail-label { display:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.sidebar.expanded .rail-label { display:block; }
.rail-label b { display:block; font-weight:600; font-size:11.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; }

/* The chevron points right when shut and left when open - it indicates the
   direction the rail will move, which is the only thing an arrow on a toggle
   can usefully mean. */
.rail-toggle svg { transition:transform .16s ease; }
.sidebar.expanded .rail-toggle svg { transform:rotate(180deg); }

/* The tooltip, for the collapsed state only: once the labels are visible it
   would be repeating them an inch to the right. */
.rail-tip {
  position:absolute; left:calc(100% + 9px); top:50%; transform:translateY(-50%) translateX(-4px);
  background:var(--text); color:var(--s1);
  font-size:11.5px; font-weight:500; line-height:1.45; letter-spacing:0;
  padding:5px 9px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .12s, transform .12s;
  z-index:200; box-shadow:var(--shadow);
}
html[data-theme="dark"] .rail-tip { color:#141311; }
.rail-item:hover .rail-tip,
.rail-item:focus-visible .rail-tip,
.rail-user:hover .rail-tip,
.rail-user:focus-visible .rail-tip { opacity:1; transform:translateY(-50%) translateX(0); }
.sidebar.expanded .rail-tip { display:none; }

/* Identity. Same geometry as a rail item so the column does not step in at
   the bottom, with the avatar standing in for the icon. */
/* Identity, not a control. No pointer cursor and no hover fill - it does
   nothing when clicked, and dressing it like the buttons above it is what
   made people try. Focusable only so the address in its tooltip is reachable
   without a mouse. */
.rail-user {
  position:relative; display:flex; align-items:center; gap:11px;
  width:100%; height:40px; flex:0 0 40px; padding:0 6px;
  border:none; background:transparent; border-radius:var(--r-sm);
  font:inherit; font-size:13px; color:var(--faint); text-align:left;
  margin-top:2px;
}
.rail-user:focus-visible { outline:2px solid var(--link); outline-offset:1px; }
.rail-avatar {
  width:28px; height:28px; flex:0 0 28px;
  border-radius:var(--r-pill); background:var(--grass); color:var(--s1);
  font-size:12px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  /* The Entra photo arrives as a background-image on this element, so it has
     to clip to the circle and never letterbox. */
  background-size:cover; background-position:center; overflow:hidden;
}
html[data-theme="dark"] .rail-avatar { color:#141311; }
.rail-user .rail-label { font-size:12px; }

/* ── 3. SHELL ───────────────────────────────────────────────────────────── */

.topbar {
  padding:18px 28px 16px; background:var(--bg);
  border-bottom:1px solid var(--border);
  min-height:0; gap:12px;
}
.topbar h1 { font-size:20px; font-weight:650; letter-spacing:-0.02em; }
.content { padding:24px 28px 40px; }

.hamburger-btn { border-radius:var(--r-sm); }

.refresh-btn {
  border-radius:var(--r-pill); border:1px solid var(--border);
  background:var(--s1); padding:6px 13px; font-size:11.5px; font-weight:500;
}
.refresh-btn:hover { background:var(--s2); border-color:var(--border); }

/* The command bar above a list. Fluent drew it as a bordered strip; here it
   is just the sentence that explains the page, with the actions pushed right. */
.fluent-cmdbar {
  background:transparent; border:none; padding:0 0 4px;
  display:flex; align-items:center; gap:12px;
}

/* ── 4. SOFTENING ───────────────────────────────────────────────────────── */

/* Everything shared.css and qa.css draw at 2-4px corners. Listed by class
   rather than applied with a universal selector, because a blanket
   `border-radius` would also round the things that must stay square - the
   progress track's fill, the avatar, the status dots. */
.qa-card, .qa-req, .qa-person, .qa-form, .qa-note, .qa-opinion, .qa-question,
.qa-grid > *, .qa-stat, .qa-attach, .qa-shots img, .qa-clip,
.fb-row, .fb-msg, .sv-card, .sv-form, .sv-stat, .sv-q,
.fluent-card, .fluent-panel, .card, .panel {
  border-radius:var(--r);
}
.qa-btn, .qa-input, .btn-primary, .btn-secondary, .input, .modal select,
.fluent-btn, .fluent-btn-primary, .btn-confirm, .btn-cancel, .fb-filter {
  border-radius:var(--r-sm);
}
.qa-chip, .qa-tag, .qa-status, .qa-outcome, .qa-ver, .qa-verdict,
.fb-tag, .sv-legend span, .badge, .pill {
  border-radius:var(--r-pill);
}

/* Buttons. Same geometry everywhere, a touch more padding than Fluent's, and
   the primary is the only filled thing on the page. */
.btn-primary, .fluent-btn-primary, .btn-confirm {
  padding:8px 16px; font-size:12.5px; font-weight:600;
  border-color:var(--grass); box-shadow:none;
}
.btn-secondary, .fluent-btn, .btn-cancel, .qa-btn {
  padding:8px 15px; font-size:12.5px; font-weight:550;
  background:var(--s1); border:1px solid var(--border); color:var(--text);
}
.btn-secondary:hover:not(:disabled), .fluent-btn:hover:not(:disabled),
.btn-cancel:hover, .qa-btn:hover:not(:disabled) { background:var(--s2); border-color:var(--border); }

.qa-input, .input, .modal select, .modal input, .modal textarea {
  border:1px solid var(--border); background:var(--s1); padding:9px 11px;
}
.qa-input:focus, .input:focus, .modal select:focus { border-color:var(--text); box-shadow:none; }

.modal { border-radius:var(--r-lg); border:none; box-shadow:var(--shadow-lg); padding:26px; }
#toast { border-radius:var(--r); box-shadow:var(--shadow); padding:11px 16px; }

/* Cards sit on the page with a hairline and no shadow. A shadow on every card
   in a list of forty is forty shadows. */
.qa-card, .fb-row, .sv-card { border:1px solid var(--border); box-shadow:none; background:var(--s1); }
.qa-card:hover, .fb-row:hover { border-color:#D9D5CD; }
html[data-theme="dark"] .qa-card:hover, html[data-theme="dark"] .fb-row:hover { border-color:#45423D; }

/* The QA and feedback pages' own status chips carry NO mark.
   
   They had the same generic dot the overview pills had, added here with a
   ::before. It went for the same reason: qa.js and fb.js emit a dozen states
   between them and the dot was identical for every one, so it was shape
   without meaning. Those chips are already tinted per state and sit in dense
   lists where a repeated glyph is pure noise. The overview, which shows one
   status per row with room around it, is where a real mark earns its place. */

.cg-foot {
  border-top:1px solid var(--border); margin-top:40px; padding:18px 0 0;
  display:flex; flex-wrap:wrap; gap:4px 18px;
  font-size:11px; color:var(--faint);
}


/* ── 5. OVERVIEW ────────────────────────────────────────────────────────── */

/* The landing page: a row of figures, the work assigned to you, and a detail
   panel that opens beside it. Nothing here exists in the platform console, so
   these classes are defined rather than overridden. */

.ov-wrap { display:flex; gap:20px; align-items:flex-start; }
.ov-left { flex:1; min-width:0; }

.ov-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:26px; }
.ov-stat { background:var(--s2); border-radius:var(--r-lg); padding:18px 20px 20px; }
.ov-stat-l { font-size:12px; color:var(--dim); font-weight:500; margin-bottom:10px; }
.ov-stat-v { font-size:36px; font-weight:600; letter-spacing:-0.035em; line-height:1; color:var(--text); }
.ov-stat-v.muted { color:var(--faint); }

.ov-sec { font-size:12px; font-weight:600; color:var(--dim); letter-spacing:-0.005em; margin:0 0 2px; }

.ov-tbl { width:100%; }
.ov-hrow { display:flex; align-items:center; gap:16px; padding:8px 12px; font-size:11.5px; color:var(--faint); font-weight:500; }
.ov-row {
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  padding:13px 12px; border:none; background:transparent; font:inherit; color:inherit;
  border-radius:var(--r); cursor:pointer; border-top:1px solid var(--border);
  transition:background .1s;
}
.ov-row:hover { background:var(--s2); }
.ov-row[aria-pressed="true"] { background:var(--s2); }
.ov-row:focus-visible { outline:2px solid var(--link); outline-offset:-2px; }
.ov-row.quiet { opacity:.5; cursor:default; }
.ov-row.quiet:hover { background:transparent; }
.ov-name { flex:1 1 42%; min-width:0; font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-stage { flex:0 0 22%; font-size:12.5px; color:var(--dim); }
.ov-pill-cell { flex:0 0 30%; display:flex; justify-content:flex-start; }

.ov-pill {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px 5px 9px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:550; white-space:nowrap;
  background:var(--s3); color:var(--dim); border:1px solid transparent;
}
.ov-pill svg { width:13px; height:13px; flex:0 0 13px; margin-left:-1px; }
.ov-pill.ok    { background:var(--green-bg); color:var(--green); border-color:var(--green-bdr); }
.ov-pill.warn  { background:var(--amber-bg); color:var(--amber); border-color:var(--amber-bdr); }
.ov-pill.bad   { background:var(--red-bg);   color:var(--red);   border-color:var(--red-bdr); }
.ov-pill.info  { background:var(--blue-bg);  color:var(--blue);  border-color:var(--blue-bdr); }
.ov-pill.quiet { background:transparent; color:var(--faint); border-color:var(--border); }

/* The detail panel. Sticky rather than fixed: it should scroll off the top
   with the page once you are past the list, not hover over the footer. */
.ov-panel {
  flex:0 0 330px; position:sticky; top:0;
  background:var(--s1); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:20px 22px 22px;
}
.ov-panel[hidden] { display:none; }
.ov-panel-head { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.ov-panel-head .t { flex:1; font-size:12.5px; font-weight:600; color:var(--dim); }
.ov-x { border:none; background:transparent; color:var(--faint); font-size:17px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:5px; }
.ov-x:hover { background:var(--s2); color:var(--text); }
.ov-panel h3 { font-size:16px; font-weight:600; letter-spacing:-0.02em; margin:0 0 4px; }
.ov-panel .sub { font-size:11.5px; color:var(--faint); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin-bottom:16px; }
.ov-kv { display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-top:1px solid var(--border); font-size:12.5px; }
.ov-kv dt { color:var(--dim); }
.ov-kv dd { color:var(--text); font-weight:550; text-align:right; }
.ov-panel .note { font-size:12.5px; line-height:1.6; color:var(--text); background:var(--s2); border-radius:var(--r); padding:12px 14px; margin-bottom:14px; }
.ov-panel-actions { display:flex; gap:8px; margin-top:18px; }

.ov-empty { padding:40px 12px; text-align:center; color:var(--faint); font-size:13px; }


/* ── 6. SIGN-IN ─────────────────────────────────────────────────────────── */

.qh-login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 24px; background:var(--bg); }
.qh-login-card { width:100%; max-width:380px; background:var(--s1); border:1px solid var(--border); border-radius:var(--r-lg); padding:36px 36px 30px; box-shadow:var(--shadow); }
/* The wordmark is solid black in one file and solid white in the other, so
   the page shows whichever one its background can carry. Swapped in CSS
   rather than by script: the logo is the first thing painted, and a JS swap
   would flash the wrong one on every load in dark mode. */
.qh-login-card img.lockup { width:176px; height:auto; display:block; margin-bottom:26px; }
.qh-login-card img.lockup-dark { display:none; }
html[data-theme="dark"] .qh-login-card img.lockup-light { display:none; }
html[data-theme="dark"] .qh-login-card img.lockup-dark  { display:block; }
.qh-login-card h1 { font-size:21px; font-weight:650; letter-spacing:-0.025em; margin-bottom:6px; }
.qh-login-card p.sub { font-size:13px; color:var(--dim); line-height:1.6; margin-bottom:24px; }
.qh-ms {
  width:100%; padding:11px; display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--grass); color:var(--s1); border:1px solid var(--grass);
  border-radius:var(--r-sm); font:inherit; font-size:13px; font-weight:600; cursor:pointer;
}
html[data-theme="dark"] .qh-ms { color:#141311; }
.qh-ms:hover:not(:disabled) { background:var(--grass-d); }
.qh-ms:disabled { opacity:.5; cursor:not-allowed; }
/* ⚠️ TEMPORARY, with the password form in index.html. Both come out once
   this site's domains are in the Firebase Auth authorised-domains list and
   signInWithPopup can succeed. */
.qh-alt { text-align:center; margin-top:16px; }
.qh-alt button { background:none; border:none; color:var(--link); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.qh-pw { display:none; margin-top:16px; border-top:1px solid var(--border); padding-top:16px; }
.qh-pw .field { margin-bottom:12px; }
.qh-err { color:var(--red); font-size:12px; margin-top:12px; min-height:17px; }
.qh-foot { margin-top:26px; padding-top:16px; border-top:1px solid var(--border); font-size:11px; color:var(--faint); line-height:1.7; }

/* buildFooter runs on every page, and on the sign-in page there is no
   .content to put the footer in, so it lands on <body> - below a card that is
   already min-height:100vh, which put the one line of copyright off the
   bottom of the screen behind a scrollbar.
   
   Making the body a column and letting the card take the slack keeps both on
   screen at any height, with no fixed positioning to collide with the card on
   a short window. */
body.login { display:flex; flex-direction:column; min-height:100vh; }
/* ⚠️ min-height:0 is doing real work. .qh-login is min-height:100vh for its
   own sake, and body.login is another 100vh around it - so with the footer
   below, the page was a footer's height taller than the viewport and scrolled
   on an empty screen. Letting the card section shrink to the space actually
   left is what removes the scrollbar. */
body.login .qh-login { flex:1 1 auto; min-height:0; }
body.login .cg-foot { justify-content:center; border-top:none; margin:0; padding:0 24px 26px; }


/* ── 7. NARROW ──────────────────────────────────────────────────────────── */

@media (max-width:768px) {
  /* The rail slides over the page rather than squeezing it. At 64px it was
     tempting to just leave it in place, but a phone has about 360px to spend
     and a fifth of that on navigation is a fifth too much. */
  .sidebar {
    position:fixed; inset:0 auto 0 0; transform:translateX(-100%);
    transition:transform .2s ease; box-shadow:var(--shadow-lg);
  }
  .sidebar.mobile-open { transform:translateX(0); }
  .sidebar-overlay { position:fixed; inset:0; background:rgba(26,25,23,.35); opacity:0; pointer-events:none; transition:opacity .2s; z-index:-1; }
  .sidebar-overlay.visible { opacity:1; pointer-events:auto; }
  /* On a touch screen there is no hover, so a tooltip would only ever be
     reachable by keyboard. The rail slides in at its full width instead, and
     the labels do the job the tooltips did. */
  .rail-tip { display:none; }
  .sidebar { --rail-w:216px; }
  .sidebar .rail-label { display:block; }
  .sidebar .rail-logo .rl-mark { display:none; }
  .sidebar .rail-logo .rl-light { display:block; }
  html[data-theme="dark"] .sidebar .rail-logo .rl-light { display:none; }
  html[data-theme="dark"] .sidebar .rail-logo .rl-dark  { display:block; }
  /* Nothing to collapse to when the whole rail is an overlay. */
  .rail-toggle { display:none; }

  .topbar { padding:14px 16px; }
  .content { padding:18px 16px 32px; }
  .ov-wrap { flex-direction:column; }
  .ov-panel { flex:1 1 auto; width:100%; position:static; }
  .ov-stage { display:none; }
  .ov-name { flex:1 1 60%; }
  .ov-pill-cell { flex:0 0 auto; }
}