/* theme.css — the one theme.

   Until 2.8 there were five of these, each showing a slice of what the application knows and
   each needing its own fix for every change. This file replaces all of them. The rules below
   are the whole visual language: a shell that never moves, and one table that says everything
   about a search term on a single line.

   Colour carries exactly one meaning. Depth of accent means closer to #1. Red is reserved for
   movement in the wrong direction, so a red mark anywhere on this page always means the same
   thing. Nothing else is coloured for decoration.

   The three brand hexes arrive as custom properties from the server (see brand.py); every
   other colour here is derived from them, so no combination can produce unreadable text. */

:root {
  --bg: #F4F2EE; --surface: #FFFFFF; --ink: #1B211D; --muted: #5A6560; --faint: #8A948C;
  --line: #E4E0D8; --line-soft: #F0ECE4;
  --up: #2F6F4E; --down: #B5533C; --ad: #6B4E9E; --warn: #DDA03F;
  --radius: 10px; --gutter: 28px; --maxw: none;
  --side-w: 250px; --rail-w: 64px; --top-h: 56px;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-display: "DM Sans", system-ui, sans-serif;
  --font-ui: "DM Sans", system-ui, sans-serif;
}

/* ---------- shell ---------- */
/* The shell holds the window; the content scrolls inside it. The page used to scroll as a
   whole, which made the sidebar as tall as the longest section on the site — so its floor,
   and the logo standing on it, sat wherever that section happened to end: far below the fold
   on a long page, on screen on a short one. Bounded to the window, the sidebar has one
   height on every section, the brand is always visible in the same place, and the top bar
   stays put while you read. Only pages built around .app are affected; the share, status and
   access pages share this stylesheet and still scroll normally. */
.app { max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; overflow: hidden; }
.app .grow { flex: 1 1 auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the strip: where credit warnings, paused checks and platform notices live */
.strip { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 44px;
  background: var(--strip); color: var(--strip-ink); font-size: .93rem; font-weight: 500; }
.strip .ico { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.strip a { flex: 0 0 auto; padding: 5px 13px; border-radius: 14px; background: var(--strip-ink);
  color: var(--strip); font-size: .86rem; font-weight: 600; text-decoration: none; }
.strip button { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: var(--strip-fill); color: var(--strip-ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }

/* the top bar: what is happening now */
.topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: var(--top-h);
  padding: 0 14px; background: var(--topbar); color: var(--topbar-ink); }
.topbar .icobtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 0; border-radius: 9px; background: transparent; color: inherit; cursor: pointer; }
.topbar .icobtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.topbar .brand { display: inline-flex; align-items: baseline; gap: 8px; margin-right: 10px; text-decoration: none;
  font: 700 1.05rem/1 var(--font-display); color: inherit; white-space: nowrap; }
.topbar .brand small { font: 500 .72rem var(--font-ui); color: var(--topbar-mute); }
.topbar .brand img { max-height: 26px; vertical-align: middle; }
.topnav { display: flex; align-items: center; gap: 2px; }
.topnav button { border: 0; background: transparent; color: var(--topbar-mute); padding: 7px 13px;
  border-radius: 8px; font: 500 .93rem var(--font-ui); cursor: pointer; white-space: nowrap; }
.topnav button[aria-current="true"] { color: var(--topbar-ink); background: var(--topbar-fill); font-weight: 600; }
.tsearch { display: flex; align-items: center; gap: 8px; width: 260px; height: 34px; padding: 0 10px;
  border: 1px solid var(--topbar-line); border-radius: 9px; background: var(--topbar-fill); color: var(--topbar-mute); }
.tsearch svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.tsearch input { flex: 1 1 auto; min-width: 0; border: 0; background: none; color: var(--topbar-ink); font-size: .9rem; outline: none; }
.tsearch input::placeholder { color: var(--topbar-mute); }
.topbar .pill { display: inline-flex; align-items: baseline; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--topbar-line); border-radius: 16px; color: var(--topbar-ink); text-decoration: none;
  font-size: .88rem; white-space: nowrap; }
.topbar .pill b { font-variant-numeric: tabular-nums; }
.topbar .pill.low { border-color: var(--warn); }
.topbar .pill.out { border-color: var(--down); color: var(--down); }
.topbar .who { color: var(--topbar-mute); font: .84rem var(--font-ui); white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.topbar .btn { white-space: nowrap; flex: 0 0 auto; }
/* The account switcher, for a sign-in that reaches more than one account. It sits where the
   account name sits and looks like it until you go near it, because switching account is a
   thing people do occasionally and read constantly. */
.topbar #acctWrap { max-width: 260px; }
.topbar #acctPick { font: .84rem var(--font-ui); color: var(--topbar-mute); background: transparent;
  border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; max-width: 100%; cursor: pointer; }
.topbar #acctPick:hover, .topbar #acctPick:focus { border-color: var(--topbar-mute); color: var(--topbar-ink, inherit); }
.topbar #acctPick option { color: var(--ink); background: var(--panel); }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dateline { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.dateline .status { color: var(--muted); }
.dateline .status strong { color: var(--ink); font-weight: 600; }

/* ---------- sidebar: what you set up ---------- */
.body { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; }
.side { flex: 0 0 var(--side-w); width: var(--side-w); display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line); transition: flex-basis .16s ease, width .16s ease; }
.side nav { flex: 1 1 auto; min-height: 0; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
/* Items keep their height and the menu scrolls. Without this they shrink to fit a short
   window, and on a laptop at 420px the labels end up printed on top of each other. */
.side nav > * { flex: 0 0 auto; }
.side h3 { margin: 12px 10px 4px; font: 700 .69rem/1 var(--font-ui); letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); }
.side nav > h3:first-child { margin-top: 2px; }
.side button.nav { display: flex; align-items: center; gap: 11px; width: 100%; height: 36px; padding: 0 10px;
  border: 0; border-radius: 9px; background: none; color: #3B453E; font: 500 .9rem var(--font-ui);
  text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; }
.side button.nav svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side button.nav:hover { background: var(--line-soft); }
.side button.nav[aria-current="true"] { background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent-deep); font-weight: 700; }
.railtoggle { display: flex; align-items: center; gap: 11px; width: calc(100% - 20px); margin: 0 10px 12px;
  height: 34px; padding: 0 10px; border: 0; border-radius: 9px;
  background: none; color: var(--muted); font: 600 .84rem var(--font-ui); cursor: pointer; white-space: nowrap; }
.railtoggle:hover { background: var(--line-soft); }
.railtoggle svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* collapsed to an icon rail: the icons stay, so the width is a per-person choice, not a loss */
:root[data-rail="1"] .side { flex-basis: var(--rail-w); width: var(--rail-w); }
:root[data-rail="1"] .side h3,
:root[data-rail="1"] .side button.nav span,
:root[data-rail="1"] .railtoggle span { display: none; }
:root[data-rail="1"] .railtoggle svg { transform: rotate(180deg); }

.content { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; padding: 0 var(--gutter) 56px; }
.content > section { padding-top: 20px; }
.dateline { padding-top: 16px; color: var(--faint); font: .82rem var(--font-ui); }
.pagefoot { padding: 18px var(--gutter); color: var(--faint); font-size: .8rem; border-top: 1px solid var(--line); }

/* ---------- the ranks table: the theme itself ---------- */
.rk-head { display: flex; align-items: flex-end; gap: 14px; margin: 14px 0 16px; }
.rk-head h1 { margin: 0 0 3px; font: 700 1.65rem/1.1 var(--font-display); letter-spacing: -.4px; }
.rk-head p { margin: 0; color: var(--muted); font-size: .88rem; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 13px; }
.tile .lbl { font: 700 .66rem var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px; }
.tile .val { font: 700 1.6rem/1.05 var(--font-display); letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.tile .val small { font-size: .55em; font-weight: 500; color: var(--faint); }
.tile .sub { margin-top: 6px; font-size: .78rem; color: var(--muted); }
.tile .sub.up { color: var(--up); font-weight: 600; }
.tile .sub.down { color: var(--down); font-weight: 600; }
.tile .bar { display: flex; gap: 2px; height: 5px; margin: 7px 0 6px; }
.tile .bar i { display: block; border-radius: 3px; }

.rktable { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: visible; }
.rkhead, .rkgroup, .rkrow { display: flex; align-items: center; gap: 14px; padding: 0 16px; }

/* ---- column geometry, defined once ----
   The header labels and the row cells have to line up, so their widths are set here for the
   whole table rather than on the row. They were on the row once, which meant the header knew
   nothing about them and every label collapsed to the width of its own text. Appearance stays
   below on .rkrow; only size and alignment live here, and both the header and the rows read
   from the same source. The header carries the row's 3px left border as well, transparent, or
   it would sit three pixels out from every cell beneath it. */
.rkhead { border-left: 3px solid transparent; }
.rktable .term     { flex: 1 1 0; min-width: 0; }
.rktable .chip     { flex: 0 0 52px; text-align: center; }
.rktable .d        { flex: 0 0 56px; text-align: right; }
.rktable .dlast    { flex: 0 0 56px; text-align: right; }
.rktable .spk      { flex: 0 0 120px; }
.rktable .goalcell { flex: 0 0 110px; }
.rktable .vol      { flex: 0 0 76px; text-align: right; }   /* the header word is wider than its numbers */

/* The header stays put while the table scrolls. Grouped by product, the rows run a long way
   past their own labels; without this you are reading bare numbers by the second product. */
.rkhead .sortb { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; display: inline-flex;
  align-items: center; gap: 3px; }
.rkhead .sortb:hover, .rkhead .sortb:focus-visible { color: var(--accent-deep); outline: none; }
.rkhead .sortb i { font-style: normal; font-size: .7em; opacity: .35; }
.rkhead .sortb[aria-sort="descending"] i, .rkhead .sortb[aria-sort="ascending"] i { opacity: 1; }
.rkhead { position: sticky; top: 0; z-index: 3; height: 36px; background: #FBF9F6;
  font: 700 .66rem var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; }
.rkhead .chip { background: none; height: auto; font: inherit; letter-spacing: inherit; }
.rkhead .spk { text-align: center; }
.rkgroup { padding: 10px 16px; background: #F7F4EF; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rkgroup .tile-letter { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; background: #232B26; color: #fff; font: 700 .95rem var(--font-display); }
.rkgroup .gname { flex: 1 1 0; min-width: 0; }
.rkgroup .gname b { display: block; font: 700 .88rem var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rkgroup .gname span { font-size: .74rem; color: var(--faint); letter-spacing: .04em; }
.rkgroup .fact { flex: 0 0 auto; font-size: .8rem; }
.rkgroup .fact.win { color: var(--accent-deep); font-weight: 600; }
.rkgroup .fact.lose { color: var(--down); font-weight: 600; }
/* Check this one product now. Quiet by design: it spends credits, so it should be findable
   when wanted rather than inviting on every visit. */
.rkgroup .pcheck { flex: 0 0 auto; padding: 4px 10px; font-size: .74rem; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.rkgroup .pcheck:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.rkgroup .pcheck:disabled { opacity: .5; cursor: default; }

.rkrow { width: 100%; height: 46px; border: 0; border-top: 1px solid var(--line-soft);
  border-left: 3px solid transparent; background: var(--surface); color: var(--ink);
  font: 400 .87rem var(--font-ui); text-align: left; cursor: pointer; }
.rkrow:hover { background: var(--line-soft); }
.rkrow[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 7%, transparent); border-left-color: var(--accent); }
.rkrow .term { display: flex; align-items: center; gap: 7px; overflow: hidden; }
.rkrow .term > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rkrow .chip { display: inline-flex; align-items: center; justify-content: center; height: 26px;
  border-radius: 7px; font: 700 .87rem var(--font-ui); font-variant-numeric: tabular-nums; }
.rkrow .chip.b1 { background: var(--accent); color: var(--accent-ink); }
.rkrow .chip.b2 { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-deep); }
.rkrow .chip.b3 { background: color-mix(in srgb, var(--accent) 14%, transparent); color: #2C3630; }
.rkrow .chip.b4 { background: #EDE9E0; color: var(--muted); }
.rkrow .chip.b5 { background: #F4F1EA; color: var(--faint); }
.rkrow .chip.none { background: #F1EDE5; color: #96A09A; }
.rkrow .d { font-weight: 600; font-size: .8rem; font-variant-numeric: tabular-nums; }
.rkrow .d.up { color: var(--up); } .rkrow .d.down { color: var(--down); } .rkrow .d.flat { color: var(--faint); font-weight: 400; }
/* The line takes the colour of the direction it is going, so the row says the same thing twice
   rather than twice in different languages. */
.rkrow .spk { height: 26px; color: var(--faint); }
.rkrow .spk.up { color: var(--up); }
.rkrow .spk.down { color: var(--down); }
.rkrow .spk svg { display: block; }

.rkrow .goalcell .gt { display: block; margin-bottom: 5px; font-size: .74rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rkrow .goalcell .gt.warn { color: var(--down); font-weight: 600; }
.rkrow .goalcell .gt.none { color: #B3BCB6; }
.rkrow .goalcell .track { display: block; height: 4px; border-radius: 2px; background: #EFEBE3; overflow: hidden; }
.rkrow .goalcell .track i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.rkrow .goalcell .track i.off { background: var(--down); }
.rkrow .vol { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rkdetail { border-top: 1px solid var(--line-soft); background: #FCFBF8; }
.rkdetail > .detail { padding: 14px 16px 18px; }

/* ---------- phone: the sidebar becomes a drawer over the page ---------- */
@media (max-width: 860px) {
  /* On a phone the bar keeps only what cannot be found elsewhere: the way into the menu,
     who you are looking at, the balance, and the one action. */
  .topbar .who, .tsearch, .topnav { display: none; }
  .topbar { gap: 6px; padding: 0 10px; }
  .topbar .brand small { display: none; }
  .topbar .brand { margin-right: 0; font-size: .95rem; }
  .topbar .pill { padding: 0 9px; font-size: .8rem; }
  .topbar .btn { padding: 0 11px; font-size: .84rem; }
  /* The bar must never be wider than the phone: the brand yields before the action does. */
  .topbar .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .grow { flex: 0 1 auto; }
  /* The group header stacks on a phone rather than pushing the row off the screen. */
  .rkgroup { flex-wrap: wrap; row-gap: 4px; }
  .rkgroup .gname { flex: 1 1 100%; order: -1; }
  .rkgroup .fact { font-size: .76rem; }
  .content { padding: 0 16px 48px; }
  .side { position: fixed; inset: var(--top-h) auto 0 0; z-index: 40; box-shadow: 0 8px 40px rgba(0,0,0,.18);
    transform: translateX(-100%); transition: transform .18s ease; }
  :root[data-drawer="1"] .side { transform: none; }
  :root[data-rail="1"] .side { flex-basis: var(--side-w); width: var(--side-w); }
  :root[data-rail="1"] .side h3, :root[data-rail="1"] .side button.nav span { display: revert; }
  .railtoggle { display: none; }
  .rkrow .spk, .rkrow .goalcell, .rkrow .vol { display: none; }
  .rkhead { display: none; }
  /* Two across rather than six stacked: the table is what people came for. */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile .val { font-size: 1.35rem; }
}

/* ---------- support ---------- */
/* The question mark sits above everything, on every page, because trouble does not wait
   until you are on the right tab. */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 48px; height: 48px;
  border: 0; border-radius: 24px; background: var(--accent); color: var(--accent-ink);
  font: 700 1.3rem/1 var(--font-display); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.helppanel { position: fixed; right: 20px; bottom: 78px; z-index: 60; width: min(380px, calc(100vw - 40px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.18); padding: 14px 16px 16px; }
.helppanel .hp-head { display: flex; align-items: center; margin-bottom: 8px; }
.helppanel .hp-head b { font-size: 1.05rem; }
.helppanel .hp-head button { margin-left: auto; border: 0; background: none; font-size: 1.3rem;
  line-height: 1; color: var(--muted); cursor: pointer; }
.helppanel label { display: block; margin: 10px 0 4px; font: 600 .78rem var(--font-ui); color: var(--muted); }
.helppanel input, .helppanel select, .helppanel textarea { width: 100%; }
.helppanel .actions { margin-top: 12px; display: flex; gap: 8px; }

.tstate { display: inline-block; padding: 2px 9px; border-radius: 11px; background: var(--line-soft);
  color: var(--muted); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.tstate.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-deep); }
.tstate.warn { background: color-mix(in srgb, var(--warn) 26%, transparent); color: #6B4E12; }
ul.thread { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ul.thread li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
/* Staff messages are tinted so a thread reads as a conversation at a glance. Internal notes
   are never sent to this view at all — they are filtered in the query, not hidden in CSS. */
ul.thread li.staff { background: color-mix(in srgb, var(--accent) 6%, transparent); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
ul.thread li.note { background: #FFF8E6; border-color: #E7D9A8; }
ul.thread li b { font-size: .88rem; }
ul.thread li .when { margin-left: 8px; color: var(--faint); font-size: .76rem; }
ul.thread li .body { margin-top: 5px; font-size: .9rem; }
ul.thread li .att { display: inline-block; margin: 6px 6px 0 0; padding: 3px 9px; border: 1px solid var(--line);
  border-radius: 8px; font-size: .78rem; text-decoration: none; }
@media (max-width: 860px) { .fab { right: 14px; bottom: 14px; } .helppanel { right: 14px; bottom: 70px; } }

/* ---------- the brand, in the sidebar ---------- */
/* It used to sit in the top bar, small, beside a version number. Down here it has room, and
   the top bar keeps only what changes: where you are, what you have, what you can do next. */
.sidebrand { position: relative; flex: 0 0 auto; padding: 14px 16px 18px; border-top: 1px solid var(--line); margin-top: 4px;
  display: flex; align-items: center; justify-content: center; min-height: 64px; }
.sidebrand .full { display: block; max-width: 100%; font: 700 1.05rem var(--font-display); color: var(--ink); }
.sidebrand .full img { max-width: 180px; height: auto !important; }
.sidebrand .mark { display: none; }
.sidebrand .mark b { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 700 1rem var(--font-display); }
/* Low enough to stay out of the way, readable on hover, and the whole of it in the tooltip. */
.sidebrand .ver { position: absolute; right: 8px; bottom: 4px; font: 500 .66rem var(--font-ui);
  color: var(--faint); opacity: .45; transition: opacity .12s ease; cursor: default; }
.sidebrand .ver:hover { opacity: 1; }
:root[data-rail="1"] .sidebrand { padding: 12px 8px 14px; }
:root[data-rail="1"] .sidebrand .full,
:root[data-rail="1"] .sidebrand .ver { display: none; }
:root[data-rail="1"] .sidebrand .mark { display: block; }
/* The brand belongs in the top bar only where the sidebar is a drawer and would hide it. */
.topbar .brand.phoneonly { display: none; }
@media (max-width: 860px) {
  .topbar .brand.phoneonly { display: inline-flex; }
}

/* A quiet button on the dark bar was invisible: its surface and its text both came from the
   page palette, not the bar's. Anything sitting on the top bar takes the bar's colours. */
.topbar .btn.quiet { background: transparent; border-color: var(--topbar-line); color: var(--topbar-ink); }
.topbar .btn.quiet:hover { background: var(--topbar-fill); }
/* A count in the sidebar, for the queue that wants attention. */
.side .navbadge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--down); color: #fff; font: 700 .68rem/18px var(--font-ui); text-align: center; }
:root[data-rail="1"] .side .navbadge { display: none; }
/* Where you are, in the bar, for a panel whose navigation is all in the sidebar. */
.topbar .crumb { font: 600 1rem var(--font-display); color: var(--topbar-ink); letter-spacing: -.2px; }