/* ============================================================
   GP Team Hub - base.css
   Design tokens, reset, and the application shell: sidebar, top bar,
   search, account panel, buttons, forms, page headings.
   Content patterns live in components.css.
   Per-page element rules live in pages.css.

   COLOR RULE: :root is the only place a literal color value appears.
   Every rule below references a token. Changing a token changes the
   site; nothing has to be hunted for.

   Built mobile first. The sidebar is a drawer until 900px, where it
   pins open. This is a field tool used on a phone more than a desk.
   ============================================================ */

:root{
  /* ---------- Brand source ----------
     Heartland Science Blue and the Global Payments navy, with the
     Heartland brand gray. Every other value here is derived from
     these three so the tool reads as company software. */
  --brand-blue:#0072ce;
  --brand-navy:#003b71;
  --brand-grey:#2f3a45;

  /* ---------- Surfaces ----------
     A five-step ramp on the brand gray hue. Surfaces get lighter as
     they come forward, which is what separates one block from the
     next now that nothing carries a drop shadow. */
  --surface-sunken:#0f141a;
  --surface-page:#151b22;
  --surface-raised:#1c232b;
  --surface-high:#252e39;
  --surface-hover:#2d3743;

  /* ---------- Lines ---------- */
  --line:#2f3a45;
  --line-strong:#3f4c5a;

  /* ---------- Type ----------
     Three weights of ink. Hierarchy comes from these steps plus size
     and weight, never from giving a heading its own hue. */
  --ink:#e9eef3;
  --ink-soft:#a9b5c2;
  --ink-faint:#78858f;
  --ink-inverse:#ffffff;

  /* Ink that sits on top of a filled accent. Two softer steps of the
     same white carry the secondary line and the hairline rule inside a
     selected card, because a second hue on a blue fill reads as a
     second meaning. */
  --on-accent-soft:#ffffffc7;
  --on-accent-line:#ffffff38;

  /* ---------- Accent ----------
     The brand blue at full strength is too dark to read as type on a
     dark surface, so text and icons use a lightened step of the same
     hue and the true brand value stays on filled buttons, where white
     sits on top of it rather than beside it. */
  --accent:#3e9be8;
  --accent-strong:#0072ce;
  --accent-hover:#1183e2;
  --accent-wash:#1a2a3a;
  --accent-edge:#2c567c;
  --accent-ring:#3e9be866;
  --accent-ring-soft:#3e9be833;

  /* ---------- Gold ----------
     One domain and one only: money. Payouts, incentive tiers, what a
     deal is worth. It earns a second hue because money is the thing a
     rep scans for and it is a genuinely different subject from "this
     is a button". It never appears anywhere else. */
  --gold:#f9b311;
  --gold-ink:#f9b311;
  --gold-wash:#332810;
  --gold-edge:#6d5622;

  /* ---------- Danger ----------
     Fires only on real failure: errors, destructive actions,
     disqualifiers, unverified data. Never decoration. */
  --good:#1f8a54;
  --good-ink:#1f8a54;
  --good-wash:#12291d;
  --good-edge:#245c3f;

  /* ---------- The splash hues ----------
     Three colours the site wears only when Splash of Colour is on,
     carried by things that already mean something as a group: the two
     runs, the metrics, and the systems a rep signs into.

     Two steps each. The first is the mark: text and glyphs, and it is
     the same value in every theme because a glyph on a page reads the
     same whichever way round the page is. The second is the button,
     where white sits on top of the colour instead of beside it, and
     that one steps down on the dark themes so the white keeps its
     edge. */
  --hue-green:#6db890;
  --hue-blue:#67afdd;
  --hue-purple:#8a68d6;
  --hue-green-btn:#519a73;
  --hue-blue-btn:#59a0ce;
  --hue-purple-btn:#7c61b7;

  --danger:#ef5f62;
  --danger-wash:#33212a;
  --danger-edge:#5e3038;
  --danger-ink:#f6ccd0;

  /* ---------- Overlays ---------- */
  --scrim:#0a0e13b3;
  --topbar-veil:#151b22f2;
  --shadow-overlay:0 16px 44px #00000085, 0 2px 6px #00000059;
  --shadow-drawer:0 0 48px #000000a6;

  /* ---------- Shell ----------
     The sidebar and top bar read from their own tokens rather than
     from the page surfaces, which is what lets a light page keep a
     dark shell. On the dark themes these simply match the surfaces. */
  --shell-bg:#0f141a;
  --shell-raised:#1c232b;
  --shell-high:#252e39;
  --shell-line:#2f3a45;
  --shell-line-strong:#3f4c5a;
  --shell-ink:#e9eef3;
  --shell-ink-soft:#a9b5c2;
  --shell-ink-faint:#78858f;
  --shell-veil:#151b22f2;
  /* A card that sits on the shell's colour rather than on the page's.
     It is its own step above the band, and its hover is a step above
     that, because a card on the band cannot borrow the page's white. */
  --shell-card:#2e3947;
  --shell-card-hover:#3b4757;
  --shell-card-line:#3f4c5a;
  /* Half a step down from the card, for the four lines on Launchpad:
     they are a whole row of large cards there rather than the strip
     Today carries, and at the card's own brightness that much of it
     took the band over. */
  --shell-card-mid:#252e39;
  --shell-card-mid-hover:#303a48;
  --shell-card-mid-line:#374350;

  /* ---------- Decorative icons ----------
     The glyph on a tile or a section heading. Recessive on the dark
     themes, where the whole surface is already low contrast; the accent
     on the light ones, where a grid of white cards with charcoal glyphs
     has nothing at all to break it up. */
  --ic:#78858f;

  /* ---------- Shell metrics ---------- */
  --sidebar-w:244px;
  --topbar-h:56px;
  --radius:10px;
  --radius-sm:7px;
  --radius-pill:999px;
  /* ---- Chart hues ----
     Six categorical slots in a fixed order, so a series keeps its color
     whatever else is on the chart. Validated on this surface for the
     lightness band, the chroma floor, adjacent CVD separation and
     contrast; the green and amber pair sits in the 6-8 band, which the
     legend and the per-mark readout on every chart cover. */
  --c1:#4f92ea;
  --c2:#c07d1e;
  --c3:#2d9d63;
  --c4:#9a68da;
  --c5:#d5506d;
  --c6:#1f92a8;
  /* Two more, for the wins drawn beside the day's numbers: a signature
     is what FTAs are for and a referral is what a call is for, so each
     takes the hue of the work that produces it. Sharing a hue with the
     activity line it belongs to is the point, and what tells them apart
     is the dash and the lighter step, measured here at 6.73 and 6.61
     contrast against this surface. */
  --c7:#6db890;
  --c8:#67afdd;
}

/* ============================================================
   Light theme, opt in only.
   Dark above is the default and stays the default. This block does
   nothing until a reader turns it on, and the choice is remembered.
   It exists because the same person reading this in a parked car at
   2pm and at their desk at 9pm does not want the same screen.

   Only tokens are overridden. No rule anywhere else in the site is
   aware there is more than one theme.
   ============================================================ */
[data-theme="light"],
[data-theme="white"]{
  --surface-sunken:#e9edf2;
  --surface-page:#f5f7fa;
  --surface-raised:#ffffff;
  --surface-high:#eef1f6;
  --surface-hover:#e2e8ef;

  --line:#d7dde5;
  --line-strong:#b2bcc8;

  --ink:#16202b;
  --ink-soft:#4b5a68;
  --ink-faint:#67747f;
  --ink-inverse:#ffffff;

  /* On white the brand blue is dark enough to read as type, so the
     lightened step the dark theme needs is not used here. */
  --accent:#0063b1;
  --accent-strong:#0072ce;
  --accent-hover:#005ba6;
  --accent-wash:#e7f1fb;
  --accent-edge:#a9cdec;
  --accent-ring:#0072ce66;
  --accent-ring-soft:#0072ce33;

  /* Brighter than the link blue, because an icon is a graphic whose
     darker text step reads as charcoal rather than as a splash of
     color. */
  --ic:#0f7ddb;

  /* --gold is the brand gold and it stays the brand gold on every
     theme: it wears the logo mark and any gold graphic. It cannot carry
     text on a white card, where #f9b311 measures 1.83:1, so --gold-ink
     is the step that does. Measured against #ffffff: --gold-ink reaches
     4.73:1, which covers small bold text as well as display sizes. */
  --gold:#f9b311;
  --gold-ink:#9a6a00;
  --gold-wash:#fdf1dc;
  --gold-edge:#e3c184;

  --good:#12784a;
  --good-ink:#12784a;
  --good-wash:#e6f4ec;
  --good-edge:#a8d5bd;

  /* On a light page the button wears the mark's own value, because
     there is nothing behind it darkening the colour. */
  --hue-green-btn:#6db890;
  --hue-blue-btn:#67afdd;
  --hue-purple-btn:#8a68d6;

  --danger:#bf262c;
  --danger-wash:#fdeded;
  --danger-edge:#efb8b8;
  --danger-ink:#7a1a1e;

  --scrim:#16202ba6;
  --topbar-veil:#f5f7faf2;
  --shadow-overlay:0 16px 44px #16202b26, 0 2px 6px #16202b17;
  --shadow-drawer:0 0 48px #16202b3d;
  /* Same six slots, stepped for a light surface. */
  --c1:#2873d1;
  --c2:#b45309;
  --c3:#15803d;
  --c4:#7e22ce;
  --c5:#be123c;
  --c6:#0e7a9c;
  /* The same two stepped for a light surface, where the values above
     reach only 2.4 against white: 3.36 and 3.30, still the lighter step
     of the hue the solid line beside them wears. */
  --c7:#3f9d6d;
  --c8:#4a94c9;
}

/* ---------------- White ----------------
   Light page, light shell. The plain paper version, for a desk and a
   big screen. Shell tokens follow the page here, which is the only
   thing that separates it from Light. */
[data-theme="white"]{
  --shell-bg:#eef1f6;
  --shell-raised:#ffffff;
  --shell-high:#e2e8ef;
  --shell-line:#d7dde5;
  --shell-line-strong:#b2bcc8;
  --shell-ink:#16202b;
  --shell-ink-soft:#4b5a68;
  /* A touch darker than the page's own faint ink: on the shell's
     tinted gray, #67747f lands at 4.23 against it, under the 4.5 that
     inactive nav text needs to stay readable. */
  --shell-ink-faint:#5c6873;
  --shell-veil:#f5f7faf2;
  /* The light shell is already pale, so a card on it is the white the
     page uses and its edge is what separates the two. */
  --shell-card:#ffffff;
  --shell-card-hover:#f2f5fa;
  --shell-card-line:#d7dde5;
  /* Nothing to step down from on a pale shell: white is white. */
  --shell-card-mid:var(--shell-card);
  --shell-card-mid-hover:var(--shell-card-hover);
  --shell-card-mid-line:var(--shell-card-line);
}

/* ---------------- Light ----------------
   Light page, dark shell. The shell gets its own slate rather than the
   dark theme's near-black: beside a white page, #0f141a reads as a
   hole cut in the screen, while a lifted slate reads as chrome. Ink is
   stepped up to match, so the nav is no dimmer than it was. */
[data-theme="light"]{
  --shell-bg:#243040;
  --shell-raised:#2f3d4f;
  --shell-high:#394859;
  --shell-line:#3a4859;
  --shell-line-strong:#4c5c70;
  /* Near-white on the dark shell. The muted steps borrowed from the
     page palette made the nav read as disabled against it. */
  --shell-ink:#f4f7fb;
  --shell-ink-soft:#d4dde7;
  --shell-ink-faint:#b8c4d1;
  --shell-veil:#243040;
  --shell-card:#4e5a72;
  --shell-card-hover:#5d6b85;
  --shell-card-line:#5c6a84;
  --shell-card-mid:#3e4c60;
  --shell-card-mid-hover:#4b5a6f;
  --shell-card-mid-line:#4b596e;
}

/* ---------------- Black ----------------
   The dark palette with a true black page behind it. The shell and the
   cards keep their gray, because a black card on a black page has no
   edge and the whole layout dissolves. */
[data-theme="black"]{
  --surface-page:#000000;
  --surface-sunken:#07090c;
  --topbar-veil:#000000f2;
  --scrim:#000000cc;
  --shell-card:#1f262f;
  --shell-card-hover:#2b333e;
  --shell-card-line:#333c47;
  --shell-card-mid:#181e26;
  --shell-card-mid-hover:#242a34;
  --shell-card-mid-line:#2b333d;
}

/* ---------------- Splash of Colour ----------------
   Off by default, which is the flat scheme every screenshot of this
   site has been taken in. Switched on, the three hues above reach the
   handful of things that already read as groups, and the green the
   site uses for a target met becomes the green in that set.

   One attribute on the root rather than a class per page, so a rep who
   turns it on gets it on the admin and the hub alike. */
[data-splash="on"]{
  --good:var(--hue-green-btn);
  --good-ink:var(--hue-green);
}

/* ---------------- The four themes, as pictures ----------------
   The theme picker shows each look rather than naming it, which means
   it has to paint colours the page is not wearing. They live here, in
   the one place literal values are allowed, and they are the same
   values the theme blocks above set. */
:root{
  --sw-dark-page:#151b22;  --sw-dark-shell:#0f141a;
  --sw-light-page:#f5f7fa; --sw-light-shell:#243040;
  --sw-white-page:#f5f7fa; --sw-white-shell:#eef1f6;
  --sw-black-page:#000000; --sw-black-shell:#07090c;
  --sw-accent:#0072ce;
  --sw-edge:#7a8794;
}

/* ---------------- Reset ---------------- */
*{margin:0;padding:0;box-sizing:border-box;}
/* The browser's own [hidden]{display:none} is the weakest rule there
   is, so any class that names a display value outranks it and the
   element renders while the script that hid it believes it is gone.
   That is how a rep with no streak was shown a "0 day streak" pill.
   One rule here rather than a guard per class, because the next class
   with a display value would need the same guard and would not get it. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--surface-page);
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,select,textarea{font:inherit;}

/* Search inputs carry native platform styling that overrides author
   background, padding and radius, which is what made the filter boxes
   render as bare white fields with the icon sitting on top of the text.
   Stripping the appearance hands control back to the stylesheet. */
input[type="search"]{
  -webkit-appearance:none;
  appearance:none;
  border-radius:0;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance:none;
}
svg{display:block;}

/* Focus is visible everywhere and always the same shape, so keyboard
   users never have to guess where they are. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------------- Layout ---------------- */
.layout{min-height:100vh;}
.content{display:flex;flex-direction:column;min-height:100vh;}
/* The page's own padding, named so a block that has to reach the edges
   of the column can cancel exactly as much as the column added rather
   than guessing at a number that changes twice on the way up. */
:root{--page-pad-x:16px;--page-pad-t:20px;}
.page{
  flex:1;
  width:100%;
  max-width:1060px;
  margin:0 auto;
  padding:var(--page-pad-t) var(--page-pad-x) 72px;
}

/* ---------------- Sidebar ---------------- */
.sidebar{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--sidebar-w);
  background:var(--shell-bg);
  border-right:1px solid var(--shell-line);
  display:flex;
  flex-direction:column;
  z-index:60;
  transform:translateX(-100%);
  transition:transform .2s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* Scrolls, never shows a bar: a track down the edge of the chrome
     reads as a seam in the layout. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.sidebar::-webkit-scrollbar{display:none;width:0;height:0;}
.sidebar.open{transform:translateX(0);box-shadow:var(--shadow-drawer);}

.side-brand{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;}
/* The trophy ends the title line rather than crowding the top bar. */
.side-trophy{
  margin-left:auto;
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--shell-ink-faint);
  font-size:.86rem;
  flex-shrink:0;
}
.side-trophy:hover{background:var(--shell-raised);color:var(--shell-ink);text-decoration:none;}
.side-logo svg{width:28px;height:28px;}
.side-title{font-weight:700;font-size:.98rem;letter-spacing:.2px;color:var(--shell-ink);}

.side-nav{display:flex;flex-direction:column;gap:1px;padding:4px 8px;}

/* Grouping the nav by moment of need is the point of the whole
   ordering, so the group labels have to be legible rather than
   decorative whitespace. */
.side-group{
  font-size:.66rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--shell-ink-faint);
  padding:14px 11px 5px;
}
.side-group:first-child{padding-top:4px;}
.side-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 11px;
  border-radius:var(--radius-sm);
  color:var(--shell-ink-faint);
  font-size:.92rem;
  font-weight:500;
  transition:background .12s,color .12s;
}
.side-item:hover{background:var(--shell-raised);color:var(--shell-ink);text-decoration:none;}

/* The active item is filled rather than tinted, so the current page is
   readable at a glance from across a phone screen. */
.side-item.active{background:var(--accent-strong);color:var(--ink-inverse);font-weight:600;}
.side-item.active:hover{background:var(--accent-hover);color:var(--ink-inverse);}
.side-item.active .side-ic{color:var(--ink-inverse);}
.side-ic{width:18px;height:18px;flex-shrink:0;}

.side-foot{
  margin-top:auto;
  padding:14px;
  color:var(--shell-ink-faint);
  font-size:.73rem;
  line-height:1.5;
  border-top:1px solid var(--shell-line);
}

.backdrop{position:fixed;inset:0;background:var(--scrim);z-index:55;}

/* ---------------- Top bar ---------------- */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:8px;
  height:var(--topbar-h);
  padding:0 10px;
  background:var(--shell-veil);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--shell-line);
}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:var(--radius-sm);
  color:var(--shell-ink-soft);
  flex-shrink:0;
}
.icon-btn:hover{background:var(--shell-raised);color:var(--shell-ink);}
.icon-btn svg{width:21px;height:21px;}

/* ---------------- Breadcrumbs ----------------
   The slot under the top bar says where you are, which is what it was
   always for. Switching sections is the chip row inside the page, so
   this carries no navigation of its own beyond the step back to the
   whole page. */
.crumbs{
  position:sticky;
  top:var(--topbar-h);
  z-index:45;
  display:flex;
  gap:8px;
  align-items:center;
  min-height:38px;
  padding:0 16px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  background:var(--shell-veil);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--shell-line);
  font-size:.82rem;
}
.crumbs::-webkit-scrollbar{display:none;}
.crumb{
  flex:0 0 auto;
  color:var(--shell-ink-faint);
  white-space:nowrap;
}
a.crumb:hover{color:var(--shell-ink);text-decoration:none;}
.crumb-now{color:var(--shell-ink);font-weight:600;}
.crumb-sep{
  flex:0 0 auto;
  color:var(--shell-ink-faint);
  font-size:.68rem;
  opacity:.7;
}

@media (min-width:1080px){
  .crumbs{padding:0 22px;}
}

/* ---- Today's chips, in the sticky slot ----
   Same row, carrying chips instead of a trail. The chips wear the shell
   palette rather than the page palette, because the slot sits on the
   dark bar's surface on every theme. */
.crumbchips{gap:6px;min-height:42px;}
.crumbchips a{
  flex:0 0 auto;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  border:1px solid var(--shell-line);
  color:var(--shell-ink-soft);
  font-size:.8rem;
  font-weight:600;
  white-space:nowrap;
  transition:background .12s,color .12s,border-color .12s;
}
.crumbchips a:hover{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--ink-inverse);
  text-decoration:none;
}
.crumbchips a.accent{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--ink-inverse);
}
.crumbchips a.accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);}

/* ---------------- Search ----------------
   Search is the fastest route to any fact on this site, so it takes
   the whole middle of the bar rather than sitting in a corner. */
.topbar-search{position:relative;flex:1;min-width:0;}
/* Where the search is not offered, its width still belongs to the bar,
   so the controls on the right stay where they are on every page. */
.topbar-gap{flex:1;min-width:0;}
.search-ic{
  position:absolute;
  left:10px;top:50%;
  transform:translateY(-50%);
  width:16px;height:16px;
  color:var(--shell-ink-faint);
  pointer-events:none;
}
#searchInput{
  width:100%;
  background:var(--shell-raised);
  border:1px solid var(--shell-line);
  border-radius:var(--radius);
  color:var(--shell-ink);
  padding:8px 12px 8px 33px;
  font-size:.91rem;
  outline:none;
}
#searchInput::placeholder{color:var(--shell-ink-faint);}
#searchInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}

.search-results{
  position:absolute;
  top:calc(100% + 6px);
  left:0;right:0;
  background:var(--surface-high);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  max-height:min(64vh,440px);
  overflow-y:auto;
  box-shadow:var(--shadow-overlay);
}
.sr-group{
  padding:9px 12px 3px;
  font-size:.67rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:var(--ink-faint);
}
.sr-item{display:block;padding:9px 12px;color:var(--ink);font-size:.9rem;}
.sr-item .sr-d{
  color:var(--ink-faint);
  font-size:.78rem;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sr-item:hover,.sr-item.sel{background:var(--surface-hover);text-decoration:none;}
.sr-empty{padding:14px 12px;color:var(--ink-faint);font-size:.88rem;}

/* ---------------- Theme toggle ---------------- */
/* ---------------- Stuck ----------------
   The job holds more facets than working memory can carry, and when it
   overflows the result is freeze. Freezing is not solved by better
   organized information, because the effort of going to look is the
   thing that has run out. So this is one tap from every screen, it
   never asks the reader to categorize their problem before helping,
   and it always ends in a phone number or two clicks. */
.stuck-btn{
  display:flex;align-items:center;gap:7px;
  flex-shrink:0;
  padding:7px 12px;
  border-radius:var(--radius);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.88rem;
  font-weight:700;
}
.stuck-btn:hover{background:var(--accent-hover);}
.stuck-btn i{font-size:.9rem;}

.stuck-sheet{
  position:fixed;inset:0;
  z-index:80;
  background:var(--scrim);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:14px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* An author display rule beats the browser's [hidden]{display:none},
   so without this the panel renders open and nothing can shut it. Any
   element that is both hidden by attribute and given a display value
   needs its own [hidden] rule. */
.stuck-sheet[hidden]{display:none;}

body.stuck-open{overflow:hidden;}

.stuck-panel{
  width:100%;
  max-width:620px;
  margin-top:6vh;
  background:var(--surface-high);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);
  padding:15px;
}
.stuck-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.stuck-title{font-size:1.12rem;font-weight:700;flex:1;}

.stuck-search{position:relative;}
.stuck-ic{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);font-size:.92rem;pointer-events:none;
}
#stuckInput{
  width:100%;
  background:var(--surface-page);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  color:var(--ink);
  padding:12px 13px 12px 37px;
  font-size:1rem;
  outline:none;
}
#stuckInput::placeholder{color:var(--ink-faint);}
#stuckInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}

/* Offered before any typing, because picking from six is cheaper than
   composing a search when your head is already full. */
.stuck-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.stuck-quick[hidden]{display:none;}
.stuck-chip{
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  padding:7px 13px;
  font-size:.83rem;
  font-weight:600;
  color:var(--ink);
  background:var(--surface-raised);
}
.stuck-chip:hover{border-color:var(--line-strong);background:var(--surface-hover);}

.stuck-list{display:flex;flex-direction:column;gap:7px;margin-top:12px;}

/* The floor of the panel. When nothing fits or the choice itself is the
   blocker, doors are the answer, because they need no decision and they
   are the activity that makes every other one possible. */
.stuck-floor{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.stuck-floor-label{
  font-size:.68rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--ink-faint);
}
.stuck-floor-text{color:var(--ink-soft);font-size:.88rem;line-height:1.55;margin-top:5px;}
.stuck-floor-go{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:10px;
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-weight:700;font-size:.92rem;
  padding:11px 15px;
  border-radius:var(--radius-sm);
}
.stuck-floor-go:hover{background:var(--accent-hover);text-decoration:none;}

@media (max-width:520px){
  .stuck-btn-text{display:none;}
  .stuck-btn{padding:7px 10px;}
  .stuck-panel{margin-top:0;}
}

/* ---------------- Account panel ---------------- */
.auth-area{position:relative;flex-shrink:0;}
.auth-btn{
  display:flex;align-items:center;gap:7px;
  padding:7px 10px;
  border-radius:var(--radius);
  border:1px solid var(--shell-line);
  color:var(--shell-ink);
  font-size:.89rem;
  max-width:190px;
}
.auth-btn:hover{background:var(--shell-raised);}
.auth-btn .side-ic{color:var(--shell-ink-faint);}
.auth-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chev{width:13px;height:13px;color:var(--shell-ink-faint);flex-shrink:0;}

.auth-pop{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:min(280px,calc(100vw - 24px));
  background:var(--surface-high);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:9px;
  box-shadow:var(--shadow-overlay);
  z-index:70;
}
.pop-link{
  display:block;
  width:100%;
  text-align:left;
  padding:9px 10px;
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-size:.9rem;
}
.pop-link:hover{background:var(--surface-hover);text-decoration:none;}
.pop-danger{color:var(--danger);}
.pop-form{display:flex;flex-direction:column;gap:5px;padding:4px 4px 8px;}
.pop-label{font-size:.73rem;color:var(--ink-faint);margin-top:4px;}
.pop-input{
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:8px 10px;
  font-size:.91rem;
  outline:none;
}
.pop-input:focus{border-color:var(--accent);}
.pop-foot{
  padding:8px 4px 2px;
  color:var(--ink-faint);
  font-size:.77rem;
  text-align:center;
  border-top:1px solid var(--line);
  margin-top:4px;
  line-height:1.7;
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:var(--surface-high);
  color:var(--ink);
  font-size:.91rem;
  font-weight:600;
  transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--surface-hover);text-decoration:none;}

/* The one place the true brand blue appears at full strength. */
.btn-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn-danger{background:var(--danger-wash);border-color:var(--line-strong);color:var(--ink);}
.btn-danger:hover{background:var(--danger-edge);}
.btn-sm{padding:6px 11px;font-size:.82rem;}
.btn-block{width:100%;margin-top:8px;}

/* ---------------- Forms ---------------- */
.form-card{
  max-width:420px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
}
.form-row{margin-bottom:13px;}
.form-label{display:block;font-size:.81rem;color:var(--ink-soft);margin-bottom:5px;}
.form-input{
  width:100%;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:10px 12px;
  font-size:.94rem;
  outline:none;
}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.form-hint{font-size:.76rem;color:var(--ink-faint);margin-top:4px;}

/* ---------------- Alerts ---------------- */
.alert{
  border-radius:var(--radius-sm);
  padding:11px 14px;
  font-size:.9rem;
  margin-bottom:16px;
  border:1px solid var(--line);
  background:var(--surface-high);
}
.alert-error{border-color:var(--line-strong);background:var(--danger-wash);color:var(--ink);}
.alert-ok{border-color:var(--line-strong);background:var(--accent-wash);color:var(--ink);}

/* ---------------- Footer ---------------- */
.site-foot{
  padding:18px;
  text-align:center;
  color:var(--ink-faint);
  font-size:.77rem;
  border-top:1px solid var(--line);
}

/* ---------------- Page headings ----------------
   The old scale ran everything between .85rem and 1rem, so nothing
   led and nothing followed. These steps are far enough apart that a
   reader scanning mid-scroll can tell a section from a card title
   from body copy without reading any of them. */
.page-head{margin:6px 0 26px;}
.page-head h1{font-size:1.85rem;line-height:1.2;font-weight:700;letter-spacing:-.2px;}
.page-head .lead{color:var(--ink-soft);margin-top:8px;font-size:.97rem;line-height:1.6;}

/* Section headings need room above them or the page reads as one
   undifferentiated column. The gap above is deliberately much larger
   than the gap below, so a heading belongs to what follows it. */
h2{
  font-size:1.32rem;
  font-weight:700;
  letter-spacing:-.3px;
  line-height:1.3;
  margin:52px 0 10px;
  padding-top:4px;
  scroll-margin-top:calc(var(--topbar-h) + 12px);
}
h2:first-of-type{margin-top:28px;}
/* No measure cap: the page column is 1060px and these are one or two
   sentences, so a 70ch cap wrapped them at half the width available. */
.sub{color:var(--ink-soft);margin-bottom:18px;font-size:.92rem;line-height:1.6;}

/* ---------------- Skip link ---------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--surface-high);color:var(--ink);
  padding:8px 14px;border-radius:0 0 var(--radius-sm) 0;z-index:100;
}
.skip-link:focus{left:0;}

/* ---------------- Tablet ---------------- */
@media (min-width:640px){
  :root{--page-pad-x:24px;--page-pad-t:24px;}
  .page{padding:var(--page-pad-t) var(--page-pad-x) 80px;}
  .topbar{padding:0 16px;gap:10px;}
  .topbar-search{max-width:460px;margin-right:auto;}
}

/* ---------------- Desktop ---------------- */
@media (min-width:900px){
  .sidebar{transform:none;box-shadow:none;}
  .content{margin-left:var(--sidebar-w);}
  .burger{display:none;}
  .backdrop{display:none !important;}
  :root{--page-pad-x:34px;--page-pad-t:30px;}
  .page{padding:var(--page-pad-t) var(--page-pad-x) 88px;}
  .topbar{padding:0 22px;}
  .topbar-search{max-width:520px;}
}

/* ---------------- Small phones ---------------- */
@media (max-width:400px){
  .auth-name{display:none;}
  .auth-btn{padding:7px;}
  .chev{display:none;}
  .page-head h1{font-size:1.6rem;}
}

/* A nav entry that leads to the sign-in wall says so, rather than
   looking broken when the page it opens holds only a form. */
.side-item{position:relative;}
.side-lock{
  margin-left:auto;
  font-size:.62rem;
  color:var(--shell-ink-faint);
  flex-shrink:0;
}
.side-locked{color:var(--shell-ink-faint);}
.side-locked:hover .side-lock{color:var(--shell-ink-soft);}