/* ===========================================================================
   Western Australia FIFO Jobs — one stylesheet for every page.
   Mobile first: the base rules are the phone layout; wider screens are
   progressive enhancement from 720px and 1080px up.
   Five themes, each with a selected light and dark palette. Colours are only
   ever referenced through these tokens, never hard-coded in a page.
   =========================================================================== */

/* ---------- theme tokens ---------------------------------------------------
   Default (no data-theme) = ironstone. Mode: data-mode="light|dark", or absent
   to follow the operating system.                                           */
:root,
:root[data-theme="ironstone"] {
  color-scheme: light;
  --bg:#fcfcfb; --panel:#ffffff; --line:#e4e3de; --ink:#0b0b0b; --ink2:#52514e;
  --ink3:#83827c; --accent:#2a78d6; --on-accent:#ffffff;
  --good:#1baf7a; --warn:#eda100; --bad:#e34948; --chip:#f2f1ed;
}
:root[data-theme="pilbara"] {
  color-scheme: light;
  --bg:#fbf0e7; --panel:#fffaf6; --line:#e7d2bf; --ink:#1d120c; --ink2:#5f463a;
  --ink3:#8d7060; --accent:#a93c12; --on-accent:#ffffff; --chip:#f3e0cf;
  --good:#1a8f66; --warn:#b07d00; --bad:#c23b3b;
}
:root[data-theme="goldfields"] {
  color-scheme: light;
  --bg:#fbf5df; --panel:#fffdf6; --line:#e4d8ae; --ink:#1a1604; --ink2:#574d24;
  --ink3:#877b4c; --accent:#7d5a06; --on-accent:#ffffff; --chip:#f1e7c6;
  --good:#1a8f66; --warn:#b07d00; --bad:#c23b3b;
}
:root[data-theme="ocean"] {
  color-scheme: light;
  --bg:#e9f4f7; --panel:#ffffff; --line:#c5dee5; --ink:#04171d; --ink2:#3b565e;
  --ink3:#6c8992; --accent:#0b6c87; --on-accent:#ffffff; --chip:#d6eaf0;
  --good:#1a8f66; --warn:#b07d00; --bad:#c23b3b;
}
:root[data-theme="graphite"] {
  color-scheme: light;
  --bg:#f0f0f4; --panel:#ffffff; --line:#d8d8e1; --ink:#0b0b12; --ink2:#474756;
  --ink3:#757585; --accent:#4735b0; --on-accent:#ffffff; --chip:#e5e5ed;
  --good:#1a8f66; --warn:#b07d00; --bad:#c23b3b;
}

/* dark palettes: selected for the dark surface, not flipped from light */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    color-scheme: dark;
    --bg:#141413; --panel:#1a1a19; --line:#33332f; --ink:#ffffff; --ink2:#c3c2b7;
    --ink3:#8d8c83; --accent:#3987e5; --on-accent:#ffffff;
    --good:#199e70; --warn:#c98500; --bad:#e66767; --chip:#262624;
  }
  :root[data-theme="pilbara"]:not([data-mode="light"]) {
    --bg:#1b100a; --panel:#261710; --line:#48291a; --ink:#fdf1e8; --ink2:#d5b9a6;
    --ink3:#9c7c66; --accent:#f4804a; --on-accent:#1b0c03; --chip:#33200f;
    --good:#199e70; --warn:#c98500; --bad:#e66767;
  }
  :root[data-theme="goldfields"]:not([data-mode="light"]) {
    --bg:#161204; --panel:#211b09; --line:#413517; --ink:#fcf7e6; --ink2:#d6c99f;
    --ink3:#988b60; --accent:#edb61f; --on-accent:#1a1400; --chip:#2c240d;
    --good:#199e70; --warn:#c98500; --bad:#e66767;
  }
  :root[data-theme="ocean"]:not([data-mode="light"]) {
    --bg:#06181e; --panel:#0d242b; --line:#1c414b; --ink:#ecfafd; --ink2:#a3c4cd;
    --ink3:#6d8d97; --accent:#31c0da; --on-accent:#04181e; --chip:#112f37;
    --good:#199e70; --warn:#c98500; --bad:#e66767;
  }
  :root[data-theme="graphite"]:not([data-mode="light"]) {
    --bg:#0e0e15; --panel:#17171f; --line:#2e2e3c; --ink:#f6f6fb; --ink2:#b6b6c6;
    --ink3:#80808f; --accent:#9d92f2; --on-accent:#0b0818; --chip:#1f1f2b;
    --good:#199e70; --warn:#c98500; --bad:#e66767;
  }
}
/* explicit dark choice wins over the OS setting */
:root[data-mode="dark"] {
  color-scheme: dark;
  --bg:#141413; --panel:#1a1a19; --line:#33332f; --ink:#ffffff; --ink2:#c3c2b7;
  --ink3:#8d8c83; --accent:#3987e5; --on-accent:#ffffff;
  --good:#199e70; --warn:#c98500; --bad:#e66767; --chip:#262624;
}
:root[data-theme="pilbara"][data-mode="dark"] {
  --bg:#1b100a; --panel:#261710; --line:#48291a; --ink:#fdf1e8; --ink2:#d5b9a6;
  --ink3:#9c7c66; --accent:#f4804a; --on-accent:#1b0c03; --chip:#33200f;
  --good:#199e70; --warn:#c98500; --bad:#e66767;
}
:root[data-theme="goldfields"][data-mode="dark"] {
  --bg:#161204; --panel:#211b09; --line:#413517; --ink:#fcf7e6; --ink2:#d6c99f;
  --ink3:#988b60; --accent:#edb61f; --on-accent:#1a1400; --chip:#2c240d;
  --good:#199e70; --warn:#c98500; --bad:#e66767;
}
:root[data-theme="ocean"][data-mode="dark"] {
  --bg:#06181e; --panel:#0d242b; --line:#1c414b; --ink:#ecfafd; --ink2:#a3c4cd;
  --ink3:#6d8d97; --accent:#31c0da; --on-accent:#04181e; --chip:#112f37;
  --good:#199e70; --warn:#c98500; --bad:#e66767;
}
:root[data-theme="graphite"][data-mode="dark"] {
  --bg:#0e0e15; --panel:#17171f; --line:#2e2e3c; --ink:#f6f6fb; --ink2:#b6b6c6;
  --ink3:#80808f; --accent:#9d92f2; --on-accent:#0b0818; --chip:#1f1f2b;
  --good:#199e70; --warn:#c98500; --bad:#e66767;
}

/* ---------- the two scaling knobs ----------------------------------------
   Every size on this site comes from one of two ramps: a type ramp multiplied
   by --type-scale, and a spacing ramp multiplied by --space-scale. No rule
   below states a font-size, padding, margin or gap in pixels — each one reads
   a token — so a phone is re-proportioned by changing two numbers rather than
   editing a hundred declarations.

   The two shrink by different amounts on purpose. Text still has to be read at
   arm's length, so type gives up only 4%; screen space is the scarce thing, so
   spacing gives up 38%. Measured on / at 393px, 21 Sep 2026: with that pairing
   and the changes below, the chrome above the first job row went from 1606px to
   464px and the header from 266px to 84px, while the smallest label on the page
   still computes at 10.08px and body copy at 14.4px.                         */
:root{
  --type-scale:1; --space-scale:1;

  --fs-2xs:calc(0.65625rem*var(--type-scale));  /* 10.5 — uppercase micro-labels */
  --fs-xs:calc(0.71875rem*var(--type-scale));   /* 11.5 — chips, card headings   */
  --fs-sm:calc(0.78125rem*var(--type-scale));   /* 12.5 — meta, footer           */
  --fs-base:calc(0.84375rem*var(--type-scale)); /* 13.5 — nav, desktop controls  */
  --fs-md:calc(0.9375rem*var(--type-scale));    /* 15   — body copy              */
  --fs-lg:calc(1rem*var(--type-scale));         /* 16   — row titles             */
  --fs-xl:calc(1.09375rem*var(--type-scale));   /* 17.5 — h2, modal titles       */
  --fs-2xl:calc(1.3125rem*var(--type-scale));   /* 21   — h1, tile numbers       */
  --fs-3xl:calc(1.5625rem*var(--type-scale));   /* 25   — benchmark numbers      */

  /* A form control may never compute below 16px on a phone or iOS zooms the
     whole page the moment it is focused. Only from 720px up does a control
     rejoin the type ramp. */
  --fs-ctl:1rem;

  --s-1:calc(2px*var(--space-scale));
  --s-2:calc(4px*var(--space-scale));
  --s-3:calc(6px*var(--space-scale));
  --s-4:calc(8px*var(--space-scale));
  --s-5:calc(10px*var(--space-scale));
  --s-6:calc(12px*var(--space-scale));
  --s-7:calc(14px*var(--space-scale));
  --s-8:calc(16px*var(--space-scale));
  --s-9:calc(20px*var(--space-scale));
  --s-10:calc(26px*var(--space-scale));
  --s-11:calc(34px*var(--space-scale));
  --hair:1px;                    /* optical, not spatial: never scaled */

  --ctl-py:var(--s-4);  --ctl-px:var(--s-5);
  --card-py:var(--s-5); --card-px:var(--s-6);
  --stack-gap:var(--s-6);
  --tap:44px; --tap-sm:36px;     /* tap targets are physical, never scaled */

  /* Page chrome is a viewport concern, so it is set by media query and left
     off the spacing ramp: the gutter must not move when --space-scale does,
     or the container breakpoint below stops lining up with 720px. */
  --gutter:16px;
  --topbar-h:88px;
}
/* One breakpoint, two numbers. */
@media (max-width:719px){ :root{ --type-scale:.96; --space-scale:.62 } }
@media (min-width:720px){ :root{ --fs-ctl:var(--fs-base); --topbar-h:76px } }
@media (min-width:1080px){ :root{ --gutter:24px } }

/* ---------- base ---------------------------------------------------------- */
*{box-sizing:border-box}
/* Several components set display on elements that JS also hides; without
   this the attribute silently loses to the class. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topbar-h) + var(--s-4))}
body{margin:0;background:var(--bg);color:var(--ink);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 font-size:var(--fs-md);line-height:1.5}
a{color:var(--accent)}
img{max-width:100%}

/* .shell is the query container for every component inside it, so a card
   decides its own layout from the width it actually has. 688px is the content
   box at a 720px viewport (720 - 2 x 16px gutter), which keeps the component
   switch and the page-chrome breakpoint on the same edge. */
.shell{width:100%;max-width:1500px;margin:0 auto;padding:0 var(--gutter);
 container-type:inline-size}
.shell.doc{max-width:900px}

/* ---------- header: a fixed band whose height is declared, not discovered --
   --topbar-h is load-bearing — the sticky filter bar hangs off it and
   scroll-padding-top keeps in-page anchors clear of it — so the header is
   given that exact height and test/scaling.test.mjs fails if the two drift. */
/* The header is its own band: a lighter surface than the page, a hairline to
   close it off, and the gutter given back as padding so the brand is not hard
   against the edge. The band bleeds to the window edges with a pseudo-element
   rather than 100vw, which would add a scrollbar's width of horizontal
   overflow - the one thing the layout must never do. */
header{height:var(--topbar-h);display:flex;align-items:center;
 position:sticky;top:0;z-index:20;padding:0 var(--s-5)}
header::before{content:"";position:absolute;inset:0;border-radius:0 0 12px 12px;
 background:var(--panel);border-bottom:var(--hair) solid var(--line);
 box-shadow:0 1px 0 color-mix(in oklab,var(--ink) 4%,transparent);z-index:-1}
.topbar{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;
 justify-content:space-between;width:100%}
h1{font-size:var(--fs-lg);margin:0;letter-spacing:-.01em;line-height:1.25;
 flex:1 1 100%;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;
 -webkit-line-clamp:2;overflow:hidden}
.sub{color:var(--ink3);font-size:var(--fs-sm);margin-top:var(--s-2)}
.sub a{color:var(--accent)}
.lede{padding-top:var(--s-5);margin:var(--s-3) 0 var(--s-5)}

.nav{display:flex;gap:var(--s-2);align-items:center;width:100%;
 overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:var(--fs-base);text-decoration:none;color:var(--ink2);
 padding:var(--s-3) var(--s-4);border-radius:8px;white-space:nowrap}
.nav a:hover{color:var(--accent);background:var(--chip)}
.nav a.here{color:var(--ink);background:var(--chip)}
.nav .spacer{flex:1}
 /* Signed in, the nav entry is initials plus a name. The address is not nav
    furniture — it lives in the account sheet, one tap away. */
.acct{display:inline-flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);
 border-radius:99px;text-decoration:none;color:var(--ink2);white-space:nowrap;min-width:0}
.acct:hover{background:var(--chip)}
.acctname{font-size:var(--fs-base);max-width:34vw;overflow:hidden;text-overflow:ellipsis}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
 border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:var(--fs-2xs);
 font-weight:700;flex:0 0 auto;line-height:1}
.avatar.lg{width:40px;height:40px;font-size:var(--fs-md)}
.acctline{display:flex;align-items:center;gap:var(--s-5);margin-bottom:var(--s-7);min-width:0}
.acctline b{display:block;font-size:var(--fs-md);color:var(--ink)}
.acctline .meta{display:block;overflow-wrap:anywhere}
.acctacts{display:flex;flex-direction:column;gap:var(--s-4)}
.acctacts a,.acctacts button{display:flex;align-items:center;justify-content:center;
 width:100%;min-height:var(--tap);padding:var(--ctl-py) var(--ctl-px);
 border:1px solid var(--line);border-radius:9px;background:var(--bg);
 text-decoration:none;color:var(--ink);font-size:var(--fs-ctl)}
.acctacts a:hover,.acctacts button:hover{border-color:var(--accent);color:var(--accent)}

/* controls */
button,select,input,textarea{font-family:inherit;font-size:var(--fs-ctl);line-height:1.4;
 color:var(--ink);background:var(--bg);border:1px solid var(--line);
 border-radius:9px;padding:var(--ctl-py) var(--ctl-px)}
button{cursor:pointer;min-height:var(--tap)}
select,input{min-height:var(--tap);max-width:100%}
button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
button:disabled{opacity:.45;cursor:not-allowed}
.iconbtn{padding:var(--s-3) var(--s-4);min-height:var(--tap-sm);font-size:var(--fs-base);
 white-space:nowrap}

/* ---------- drawers: filters and the breakdown charts --------------------
   Both ship open in the HTML so they work with scripting off; app.js closes
   them on a narrow screen and reopens them on a wide one, until the reader
   taps one, after which the reader's choice wins. */
.filters,.chartbox{background:var(--panel);border:1px solid var(--line);
 border-radius:12px;padding:var(--card-py);margin-bottom:var(--s-6)}
.filters summary,.chartbox summary{list-style:none;cursor:pointer;
 font-size:var(--fs-base);color:var(--ink2);display:flex;justify-content:space-between;
 align-items:center;gap:var(--s-4);min-height:var(--s-10)}
.filters summary::-webkit-details-marker,
.chartbox summary::-webkit-details-marker{display:none}
.filters summary b,.chartbox summary b{color:var(--ink)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-5)}
.fgrid input[type=search],.fgrid .wide{grid-column:1 / -1}
.fgrid select,.fgrid button,.fgrid input{width:100%;min-width:0}
.count{display:block;margin-top:var(--s-4);color:var(--ink3);font-size:var(--fs-sm)}

/* ---------- stat tiles & bars --------------------------------------------
   Measured 21 Sep 2026: a 92px floor puts the eight tiles in three columns at
   both 393px (186px tall, was two columns over four rows) and 320px (201px,
   against 230px at a 104px floor — one row fewer beats slightly taller rows). */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
 gap:var(--s-4);margin:var(--s-6) 0}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;
 padding:var(--card-py) var(--card-px)}
.tile .n{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.tile .l{font-size:var(--fs-2xs);color:var(--ink3);text-transform:uppercase;
 letter-spacing:.04em}
.charts{display:grid;grid-template-columns:1fr;gap:var(--s-5);margin-top:var(--s-5)}
.chartbox[open] summary{margin-bottom:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
 padding:var(--card-py) var(--card-px)}
.card h3{margin:0 0 var(--s-4);font-size:var(--fs-xs);text-transform:uppercase;
 letter-spacing:.04em;color:var(--ink3)}
.brow{display:grid;grid-template-columns:minmax(80px,1fr) 2fr 42px;gap:var(--s-4);
 align-items:center;margin:var(--s-1) 0;font-size:var(--fs-sm)}
.brow .lab{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 cursor:pointer;min-width:0}
.brow .lab:hover{color:var(--accent)}
.brow .val{text-align:right;color:var(--ink3);font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:4px;background:var(--accent);display:inline-block;
 vertical-align:middle}

/* ---------- results ------------------------------------------------------
   The table is the one thing on the page allowed to be wider than the screen,
   and it scrolls inside this box. The page itself never scrolls sideways. */
.tablewrap{overflow-x:auto;overscroll-behavior-x:contain}
table{width:100%;border-collapse:collapse}
thead{display:none}
tbody{display:block}
tr.row{display:block;background:var(--panel);border:1px solid var(--line);
 border-radius:12px;padding:var(--card-py) var(--card-px);margin-bottom:var(--s-5);
 position:relative}
tr.det{display:block;margin:calc(-1 * var(--s-3)) 0 var(--s-5)}
/* A card cell wraps. Without this the cell is a nowrap flex line whose
   min-content width is the sum of its chips, which is what pushed the whole
   page 86px wider than a 393px screen (measured 21 Sep 2026). */
/* Card rows are a label column and a value column. They used to be a flex line
   with space-between, which threw the label to one edge and the value to the
   other - at 393px that left a gap wide enough to lose your place across, and
   split "MLG Oz" from "MLG Oz Ltd" to opposite sides of the screen. */
tr.row td{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--s-2) var(--s-5);
 align-items:baseline;padding:var(--s-2) 0;border:none;min-width:0}
tr.row td:empty{display:none}          /* reset in the table layout below */
tr.row td::before{content:attr(data-label);color:var(--ink3);font-size:var(--fs-2xs);
 text-transform:uppercase;letter-spacing:.04em}
/* Values sit together on the left of their column rather than drifting right. */
tr.row td > *{min-width:0}
tr.row td[data-label] .v{min-width:0}
tr.row td[data-label] .v .meta{display:inline}
tr.row td[data-label] .v > div{display:inline}
tr.row td[data-label] .v > div::before{content:" · ";color:var(--ink3)}
tr.row td[data-label] .v .meta:not(:first-child)::before{content:" ";white-space:pre}
tr.row td.role{display:block;padding-bottom:var(--s-3)}
tr.row td.role::before{content:none}
tr.row td.star{position:absolute;right:var(--card-px);top:var(--card-py);padding:0}
.t{font-weight:600;color:var(--ink);text-decoration:none;font-size:var(--fs-lg);
 display:inline-block;padding-right:var(--s-10)}
.t:hover{color:var(--accent)}
.meta{color:var(--ink3);font-size:var(--fs-sm);min-width:0}
.chip{display:inline-block;padding:var(--hair) var(--s-4);border-radius:99px;
 background:var(--chip);color:var(--ink2);font-size:var(--fs-xs);
 margin:var(--hair) var(--s-1) var(--hair) 0;white-space:nowrap}
.chip.g{background:color-mix(in oklab,var(--good) 18%,transparent);color:var(--good)}
.chip.b{background:color-mix(in oklab,var(--bad) 18%,transparent);color:var(--bad)}
.chip.a{background:color-mix(in oklab,var(--accent) 16%,transparent);color:var(--accent)}
.score{font-variant-numeric:tabular-nums;font-weight:600}
.star{cursor:pointer;font-size:var(--fs-xl);color:var(--ink3);user-select:none;
 line-height:1;padding:var(--s-1) var(--s-2)}
.star.on{color:var(--warn)}
.detail{background:var(--chip);font-size:var(--fs-sm);color:var(--ink2);
 padding:var(--card-py) var(--card-px);border-radius:10px;display:block}
.detail b{color:var(--ink)}
.emptyrow{padding:var(--s-10) var(--s-6);text-align:center}
.pager{display:flex;gap:var(--s-4);align-items:center;justify-content:center;
 margin:var(--s-7) 0;flex-wrap:wrap}
.loading{opacity:.45;transition:opacity .15s}

/* ---------- long-form pages ---------------------------------------------- */
.doc h2{font-size:var(--fs-xl);margin:var(--s-10) 0 var(--s-4);padding-top:var(--s-7);
 border-top:1px solid var(--line)}
.doc h3{font-size:var(--fs-md);margin:var(--s-9) 0 var(--s-3);color:var(--ink)}
.doc p,.doc li{color:var(--ink2);font-size:var(--fs-md)}
.doc table{margin:var(--s-5) 0 var(--s-8);display:block;overflow-x:auto}
.doc table tr{display:grid;grid-template-columns:1fr;gap:var(--s-1);
 padding:var(--s-4) var(--card-px);
 border-bottom:1px solid var(--line)}
.doc table td{padding:0}
.doc table td:first-child{font-weight:600;color:var(--ink);font-size:var(--fs-base)}
.doc table td:not(:first-child){color:var(--ink2);font-size:var(--fs-base)}
.doc code{background:var(--chip);padding:var(--hair) var(--s-3);border-radius:5px;
 font-size:var(--fs-sm)}
.doc .note{background:var(--chip);border-left:3px solid var(--warn);
 padding:var(--card-py) var(--card-px);border-radius:0 10px 10px 0;margin:var(--s-6) 0;
 font-size:var(--fs-base)}
.doc .note b{color:var(--ink)}
.toc{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:var(--s-6) 0 var(--s-2)}
.toc a{font-size:var(--fs-sm);padding:var(--s-3) var(--s-5);border:1px solid var(--line);
 border-radius:99px;text-decoration:none;color:var(--ink2)}
.toc a:hover{border-color:var(--accent);color:var(--accent)}
.bench{display:grid;grid-template-columns:1fr;gap:var(--s-5);margin:var(--s-7) 0}
.bench .card{border-left:3px solid var(--accent)}
.bench .card p{margin:0}
.bench .big{font-size:var(--fs-3xl);font-weight:600;letter-spacing:-.02em;
 color:var(--ink);margin:var(--s-1) 0 var(--s-2)}
.bench .what{font-size:var(--fs-xs);color:var(--ink3);text-transform:uppercase;
 letter-spacing:.04em}

/* ---------- modals -------------------------------------------------------- */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:flex-end;
 justify-content:center;z-index:50;padding:0}
.mask.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--line);
 border-radius:16px 16px 0 0;
 padding:var(--s-9) var(--s-8) calc(var(--s-9) + env(safe-area-inset-bottom));
 width:100%;max-width:520px;max-height:92vh;overflow-y:auto}
.modal h2{margin:0 0 var(--s-2);font-size:var(--fs-xl)}
.modal h2.sub-h{font-size:var(--fs-md);margin:var(--s-9) 0 var(--s-3)}
.modal p{color:var(--ink3);font-size:var(--fs-base);margin:0 0 var(--s-7)}
.modal input,.modal select,.modal textarea{width:100%;margin-bottom:var(--s-5);
 font-size:var(--fs-ctl)}
.modal textarea{resize:vertical;line-height:1.45;display:block}
.modal input.code{letter-spacing:8px;text-align:center;font-size:var(--fs-2xl);font-weight:600}
.modal button.primary{width:100%;background:var(--accent);border-color:var(--accent);
 color:var(--on-accent);padding:var(--s-6);font-weight:600}
.modal .err{color:var(--bad);font-size:var(--fs-sm);margin:0 0 var(--s-5);min-height:1em}
.modal .alt{display:flex;justify-content:space-between;margin-top:var(--s-6);gap:var(--s-4)}
.modal .alt button{border:none;background:none;color:var(--ink3);font-size:var(--fs-sm);
 padding:var(--s-3) 0;min-height:0}
.modal .alt button:hover{color:var(--accent)}
.dmodal{max-width:620px}
.dterms{max-height:38vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px;
 padding:var(--card-py) var(--card-px);margin-bottom:var(--s-7);background:var(--bg)}
.dterms h3{font-size:var(--fs-base);margin:var(--s-7) 0 var(--s-2);color:var(--ink)}
.dterms h3:first-child{margin-top:0}
.dterms p{font-size:var(--fs-sm);color:var(--ink2);margin:0 0 var(--s-4)}
.dtick{display:flex;gap:var(--s-5);align-items:flex-start;font-size:var(--fs-base);
 color:var(--ink2);margin-bottom:var(--s-6);cursor:pointer;line-height:1.4}
.dtick input{width:20px;height:20px;margin:var(--hair) 0 0;flex:0 0 auto;
 accent-color:var(--accent);padding:0}
.fineprint{margin:var(--s-5) 0 0;font-size:var(--fs-xs)}

/* theme picker */
.themebox{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4);
 margin:var(--s-2) 0 var(--s-7)}
.swatch{display:flex;gap:var(--s-4);align-items:center;border:1px solid var(--line);
 border-radius:10px;padding:var(--ctl-py) var(--ctl-px);cursor:pointer;
 background:var(--bg);text-align:left;min-width:0}
.swatch.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.dots{display:flex;gap:var(--s-1);flex:0 0 auto}
.dots i{width:12px;height:12px;border-radius:50%;display:block;
 border:1px solid rgba(128,128,128,.25)}
.modes{display:flex;gap:var(--s-4);margin-bottom:var(--s-3)}
.modes button{flex:1}

/* ---------- footer -------------------------------------------------------- */
footer{padding:var(--s-9) 0 var(--s-11);color:var(--ink3);font-size:var(--fs-sm)}
footer .inner{border-top:1px solid var(--line);padding-top:var(--s-7);display:flex;
 flex-direction:column;gap:var(--s-3)}
footer a{color:var(--ink3);text-decoration:none}
footer a:hover{color:var(--accent);text-decoration:underline}
footer .links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}

/* ---------- alerts -------------------------------------------------------- */
.alertlist{display:flex;flex-direction:column;gap:var(--s-4);margin:var(--s-3) 0 var(--s-7)}
.alertrow{border:1px solid var(--line);border-radius:10px;
 padding:var(--card-py) var(--card-px)}
.alertrow .top{display:flex;justify-content:space-between;gap:var(--s-5);
 align-items:baseline;min-width:0}
.alertrow .nm{font-weight:600;font-size:var(--fs-md);min-width:0;overflow-wrap:anywhere}
.alertrow .sm{color:var(--ink3);font-size:var(--fs-sm);margin-top:var(--s-1)}
.alertrow .acts{display:flex;gap:var(--s-3);margin-top:var(--s-4);flex-wrap:wrap}
.alertrow .acts button{font-size:var(--fs-sm);padding:var(--s-3) var(--s-4);
 min-height:var(--tap-sm)}
.modes3{display:flex;gap:var(--s-3);margin:var(--s-2) 0 var(--s-6)}
.modes3 button{flex:1;font-size:var(--fs-base);min-width:0}

/* A notice that must not be skimmed past. */
.doc .note.alert{
  background:color-mix(in oklab, var(--bad) 12%, var(--panel));
  border:2px solid var(--bad); border-left-width:6px; border-radius:12px;
  padding:var(--s-7) var(--s-8); margin:var(--s-9) 0; color:var(--ink);
}
.doc .note.alert .hd{
  display:flex; gap:var(--s-4); align-items:center; font-weight:700; color:var(--bad);
  font-size:var(--fs-md); letter-spacing:.01em; text-transform:uppercase;
  margin-bottom:var(--s-4);
}
.doc .note.alert .hd svg{flex:0 0 auto}
.doc .note.alert p{color:var(--ink); font-size:var(--fs-md); margin:var(--s-4) 0 0}
.doc .note.alert p:first-of-type{margin-top:0}
.doc .note.alert b{color:var(--ink)}

/* Who is advertising: two clearly different hues, each with its own label so
   the distinction never rests on colour alone. */
.chip.direct{background:color-mix(in oklab,var(--accent) 20%,transparent);color:var(--accent);
 font-weight:600}
.chip.recruiter{background:color-mix(in oklab,var(--warn) 26%,transparent);
 color:color-mix(in oklab,var(--warn) 75%, var(--ink));font-weight:600}
.chip.unclear{background:var(--chip);color:var(--ink3);font-weight:600}

/* A condition chip is a filter, so it has to look and behave like a control. */
.chip.pick{cursor:pointer}
.chip.pick:hover{background:color-mix(in oklab,var(--good) 32%,transparent)}
.chip.pick:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ===========================================================================
   Component layout — driven by the width of .shell, the box these components
   actually live in, not by the width of the window. 688px is a 720px viewport
   less its gutters.
   =========================================================================== */
@container (min-width:688px){
  .tiles{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s-5)}
  .charts{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .bench{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .fgrid{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center}
  .fgrid input[type=search]{flex:1 1 220px;min-width:200px;grid-column:auto}
  .fgrid select,.fgrid button{width:auto}
  /* There is room for both drawers to stand open, so they lose their handle —
     and the charts lose the panel around them, which would otherwise be a
     second border drawn around cards that already have one. */
  .filters{position:sticky;top:var(--topbar-h);z-index:5}
  .filters summary,.chartbox summary{display:none}
  .chartbox{background:none;border:none;padding:0}
  .charts{margin-top:0}
  .doc table tr{grid-template-columns:200px 1fr;gap:var(--s-5)}

  /* back to a real table */
  table{background:var(--panel);border:1px solid var(--line);border-radius:12px;
   overflow:hidden;border-collapse:collapse}
  thead{display:table-header-group}
  tbody{display:table-row-group}
  th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;
   color:var(--ink3);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);
   cursor:pointer}
  th.sorted{color:var(--accent)}
  tr.row{display:table-row;background:none;border:none;border-radius:0;padding:0;
   margin:0;position:static}
  tr.row:hover{background:var(--chip)}
  tr.row td{display:table-cell;padding:var(--s-4) var(--s-5);
   border-bottom:1px solid var(--line);vertical-align:top}
  tr.row td::before{content:none}
  /* An empty labelled line is noise on a card, but removing a cell from a real
     table row slides every later cell one column left — which is what put the
     score under CONDITIONS on rows with none. app.js no longer emits an empty
     cell; this is the belt to that braces. */
  tr.row td:empty{display:table-cell}
  tr.row td.star{position:static;padding:var(--s-4) var(--s-5)}
  tr.row td.role{display:table-cell;padding:var(--s-4) var(--s-5)}
  tr.det{display:table-row;margin:0}
  /* The detail cell is display:block on phones; inside a table row that makes it
     shrink-wrap to the first column and ignore its colspan, which left the
     expanded panel crammed into a narrow strip. Put it back to a real cell. */
  td.detail{display:table-cell;border-radius:0;width:auto}
  .t{font-size:inherit;font-weight:550;padding-right:0}
  footer .inner{flex-direction:row;justify-content:space-between;align-items:center}
}

/* ===========================================================================
   Page chrome — genuinely a viewport concern: the top bar, the nav, and the
   modals, which live outside .shell and so have no container to ask.
   =========================================================================== */
@media (min-width:720px){
  h1{font-size:var(--fs-2xl);flex:0 1 auto;-webkit-line-clamp:1}
  .nav{width:auto;justify-content:flex-end;flex-wrap:wrap;overflow:visible}
  .acctname{max-width:180px}
  .themebox{grid-template-columns:repeat(3,1fr)}
  .mask{align-items:center;padding:var(--s-8)}
  .modal{border-radius:16px}
}

/* ---------------------------------------------------------------- admin ---
   Operator console. Every size reads a token like everywhere else. */
.tabs{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-6) 0 var(--s-7)}
.tabs button{font-size:var(--fs-base);padding:var(--ctl-py) var(--ctl-px)}
.rowline{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;
 justify-content:space-between;margin-bottom:var(--s-4)}
.tabpane .card{margin-bottom:var(--s-6)}
table.mini{width:100%;border-collapse:collapse;font-size:var(--fs-sm);display:block;overflow-x:auto}
table.mini th{text-align:left;font-size:var(--fs-2xs);text-transform:uppercase;
 letter-spacing:.04em;color:var(--ink3);padding:var(--s-3) var(--s-4);
 border-bottom:var(--hair) solid var(--line);white-space:nowrap}
table.mini td{padding:var(--s-3) var(--s-4);border-bottom:var(--hair) solid var(--line);
 vertical-align:top;color:var(--ink2)}
table.mini code{font-size:var(--fs-2xs);word-break:break-all}
.report p{margin:var(--s-4) 0;color:var(--ink);font-size:var(--fs-base);white-space:pre-wrap}
.report.done{opacity:.55}
.setting{display:block;margin-bottom:var(--s-7)}
.setting .nm{display:block;font-weight:600;font-size:var(--fs-base);margin-bottom:var(--s-2)}
.setting input,.setting select{width:100%;margin-bottom:var(--s-2)}
.setting .meta{display:block}

/* Desktop is mouse-driven and does not need a 44px target; the phone layout
   keeps it. Width is used rather than pointer type because pointer queries
   proved unreliable under emulation - they failed to match a real desktop and
   did match a touch viewport, shrinking exactly the targets that must stay big.
   Measured at 1400px, 21 Sep 2026: filter block 207px -> 150px. */
@media (min-width:720px){
  button,select,input{min-height:var(--tap-sm)}
  .filters{--ctl-py:var(--s-2)}
  .iconbtn{min-height:auto}
}

/* ------------------------------------------------------------- brand ------
   One lockup, rendered by site.js on every page: a mark, the name, and what
   the site covers. On a doc page it is a link home and the page title sits
   below it. Sized from tokens so it moves with the two knobs like everything
   else. */
.brand{display:flex;align-items:center;gap:var(--s-4);text-decoration:none;
 color:var(--ink);margin:0;min-width:0}
.brand .mark{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
 width:var(--tap-sm);height:var(--tap-sm);border-radius:10px;
 background:color-mix(in oklab,var(--accent) 14%,transparent);color:var(--accent)}
.brand .mark svg{width:60%;height:60%}
.brand .word{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.brand .name{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .tag{font-size:var(--fs-2xs);color:var(--ink3);text-transform:uppercase;
 letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.brand:hover .name{color:var(--accent)}
.pagetitle{font-size:var(--fs-2xl);margin:var(--s-6) 0 0}
@media (min-width:720px){
  .brand .name{font-size:var(--fs-xl)}
  .brand .mark{width:var(--tap);height:var(--tap)}
}

/* The page links move into a menu on a phone: inline they overflowed the bar
   and pushed the account button off-screen. Measured at 393px, 21 Sep 2026:
   nav content 396px against 361px available. */
.navlinks{display:none}
.menubtn{display:inline-flex}
.navsheet{display:flex;flex-direction:column;gap:var(--s-2)}
.navsheet a{padding:var(--ctl-py) var(--ctl-px);border-radius:9px;text-decoration:none;
 color:var(--ink);font-size:var(--fs-md);min-height:var(--tap);display:flex;align-items:center}
.navsheet a:hover,.navsheet a.here{background:var(--chip);color:var(--accent)}
/* The standfirst is scene-setting, not navigation - a phone needs the list. */
.sub.intro{display:none}
@media (min-width:720px){
  .navlinks{display:contents}
  .menubtn{display:none}
  .sub.intro{display:block}
}

/* Market patterns: the same surface as the other collapsible blocks. */
.insights{background:var(--panel);border:var(--hair) solid var(--line);border-radius:12px;
 padding:var(--card-py) var(--card-px);margin-bottom:var(--stack-gap)}
.insights summary{list-style:none;cursor:pointer;font-size:var(--fs-base);color:var(--ink2);
 display:flex;justify-content:space-between;align-items:center;gap:var(--s-4)}
.insights summary::-webkit-details-marker{display:none}
.insights summary b{color:var(--ink)}
.insights .charts{margin-top:var(--s-5)}
.guidance{font-size:var(--fs-sm);color:var(--ink2);background:var(--chip);
 border-left:3px solid var(--warn);border-radius:0 8px 8px 0;
 padding:var(--s-4) var(--s-5);margin:var(--s-5) 0}
.insights .card .meta{display:block;margin-top:var(--s-4)}
.insights table.mini td{padding:var(--s-2) var(--s-3)}

/* The closed door: shown instead of the list when an account is required. */
.gate{background:var(--panel);border:var(--hair) solid var(--line);border-radius:14px;
 padding:var(--s-11) var(--s-10);margin:var(--s-11) auto;max-width:34rem;
 text-align:left}
/* The door is the only thing on the page, so it sits in the middle of it
   rather than hard against the top-left corner. */
.gatewrap{display:flex;align-items:center;justify-content:center;
 min-height:min(60vh, 34rem);padding:var(--s-10) 0}
.gate h2{margin:0 0 var(--s-6);font-size:var(--fs-2xl)}
.gate p{color:var(--ink2);font-size:var(--fs-md);margin:0 0 var(--s-5)}
.gateacts{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-7)}
.gateacts .primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);
 font-weight:600}
#stepwait textarea{width:100%;margin-bottom:var(--s-5);font:inherit;font-size:var(--fs-ctl);
 color:var(--ink);background:var(--bg);border:var(--hair) solid var(--line);
 border-radius:9px;padding:var(--ctl-py) var(--ctl-px)}

/* The closed door, and the "this is a trial" notice that goes with it. */
.gate{background:var(--panel);border:var(--hair) solid var(--line);border-radius:14px;
 padding:var(--s-11) var(--s-10);margin:var(--s-11) auto;max-width:34rem;
 text-align:left}
/* The door is the only thing on the page, so it sits in the middle of it
   rather than hard against the top-left corner. */
.gatewrap{display:flex;align-items:center;justify-content:center;
 min-height:min(60vh, 34rem);padding:var(--s-10) 0}
.gate h2{margin:0 0 var(--s-6);font-size:var(--fs-2xl)}
.gate p{color:var(--ink2);font-size:var(--fs-md);margin:0 0 var(--s-5)}
.gateacts{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-7)}
.gateacts .primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);
 font-weight:600}
.devnote{font-size:var(--fs-sm);color:var(--ink2);background:var(--chip);
 border-left:3px solid var(--warn);border-radius:0 8px 8px 0;
 padding:var(--s-4) var(--s-5);margin:0 0 var(--s-5)}
.devnote b{color:var(--ink)}
#stepwait textarea{width:100%;margin-bottom:var(--s-5);font:inherit;font-size:var(--fs-ctl);
 color:var(--ink);background:var(--bg);border:var(--hair) solid var(--line);
 border-radius:9px;padding:var(--ctl-py) var(--ctl-px);min-height:var(--tap)}

/* An active filter that has no dropdown of its own - clicking an employer in
   the breakdown - needs somewhere to show and a way to clear it. */
.pillclear{font-size:var(--fs-xs);padding:var(--s-1) var(--s-4);min-height:0;
 border-radius:99px;background:color-mix(in oklab,var(--accent) 16%,transparent);
 border-color:transparent;color:var(--accent);font-weight:600}
.pillclear:hover{background:color-mix(in oklab,var(--accent) 26%,transparent)}


/* ---------- report an issue: loud on purpose, and temporary ---------------
   A footer link is where a reader looks last. While the site is being built
   the ask belongs where they already are - the header on every page, and a
   band they meet at the end of it. The report_button setting removes both. */
/* Same yellow-lime as the band at the foot of the page: one colour means
   "tell us something is wrong", wherever it appears. */
.iconbtn.flag{color:var(--flag-ink);font-weight:700;gap:var(--s-2);
 display:inline-flex;align-items:center;justify-content:center;
 min-width:var(--tap);flex:0 0 auto;      /* squeezed, it was a 20px target */
 border-color:var(--flag-line);background:var(--flag-bg)}
.iconbtn.flag:hover{filter:brightness(1.06)}
.iconbtn.flag .lbl{display:none}          /* icon only where the bar is tight */
@media (min-width:520px){ .iconbtn.flag .lbl{display:inline} }

.reportband{margin:var(--stack-gap) auto}
/* Deliberately loud: while the site is being built this ask should catch the
   eye rather than blend into the page, so it uses its own bright yellow-lime
   instead of the accent. Its own tokens, so dark mode is chosen not flipped. */
:root{--flag-bg:#f2fb8a;--flag-line:#c9d83a;--flag-ink:#2f3600}
:root:not([data-theme="light"]){}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]){--flag-bg:#3f4a06;--flag-line:#8fa521;--flag-ink:#f4ffc0}
}
:root[data-mode="dark"]{--flag-bg:#3f4a06;--flag-line:#8fa521;--flag-ink:#f4ffc0}
.reportband .rb{display:flex;align-items:center;justify-content:space-between;
 gap:var(--s-4);flex-wrap:wrap;padding:var(--card-py) var(--card-px);
 border:2px solid var(--flag-line);
 border-radius:12px;background:var(--flag-bg);color:var(--flag-ink)}
.reportband b{color:var(--flag-ink)}
.reportband .meta{color:var(--flag-ink);opacity:.85}
.reportband button{background:var(--flag-ink);border-color:var(--flag-ink);
 color:var(--flag-bg);font-weight:700}
.reportband button:hover{opacity:.88}
.reportband b{display:block;font-size:var(--fs-md);color:var(--ink)}
.reportband .meta{display:block;font-size:var(--fs-sm);color:var(--ink2);margin-top:var(--s-1)}
.reportband button{white-space:nowrap}
@media (max-width:719px){ .reportband .rb{flex-direction:column;align-items:stretch}
 .reportband button{width:100%} }


/* An employer name is a filter, so it must look pressable without turning the
   table into a wall of links. Inherits the cell's type; only the underline on
   hover says it does something. */
.asname{all:unset;cursor:pointer;font:inherit;color:inherit;display:inline}
.asname:hover,.asname:focus-visible{text-decoration:underline;color:var(--accent)}


/* ---------- all-employers list ----------------------------------------- */
.morelink{all:unset;cursor:pointer;display:block;margin-top:var(--s-3);
 font-size:var(--fs-sm);color:var(--accent);font-weight:600}
.morelink:hover,.morelink:focus-visible{text-decoration:underline}
.modal.wide{max-width:34rem}
.emplist{max-height:46vh;overflow:auto;margin-top:var(--s-3);
 border:var(--hair) solid var(--line);border-radius:10px}
.emprow{all:unset;cursor:pointer;display:flex;justify-content:space-between;
 align-items:center;gap:var(--s-4);width:100%;box-sizing:border-box;
 padding:var(--s-3) var(--ctl-px);min-height:var(--tap);font-size:var(--fs-base)}
.emprow+.emprow{border-top:var(--hair) solid var(--line)}
.emprow:hover,.emprow:focus-visible{background:var(--chip);color:var(--accent)}
.emprow .meta{white-space:nowrap;font-size:var(--fs-sm)}


/* ---------- pay by role -------------------------------------------------
   A bar chart of medians would hide the thing that matters: the spread. The
   track is the whole market, the block is the middle half, the tick is the
   median - so a wide range reads as a wide range. */
.bench2{display:grid;gap:var(--s-2);margin-top:var(--s-3)}
.brow2,.bhead{display:grid;
 grid-template-columns:minmax(7rem,12rem) 1fr 8.5rem 4.5rem 2.5rem;
 gap:var(--s-3);align-items:center;font-size:var(--fs-sm)}
.bhead{font-size:var(--fs-2xs);color:var(--ink3);text-transform:uppercase;
 letter-spacing:.04em;padding-bottom:var(--s-2);align-items:end}
.bhead em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.8}
.bhead .scale{position:relative;height:1.1em}
.bhead .scale i{position:absolute;top:0;transform:translateX(-50%)}
.bhead .scale i:first-child{transform:none}
.bhead .scale i:last-child{transform:translateX(-100%)}
.brow2 .range{font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap}
.brow2 .lab{cursor:pointer;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;
 white-space:nowrap}
.brow2 .lab:hover{color:var(--accent);text-decoration:underline}
.brow2 .track{position:relative;height:12px;border-radius:99px;background:var(--chip)}
.brow2 .iqr{position:absolute;top:0;height:12px;border-radius:99px;
 background:color-mix(in oklab,var(--accent) 45%,transparent)}
.brow2 .med{position:absolute;top:-2px;width:3px;height:16px;border-radius:2px;
 background:var(--accent);margin-left:-1px}
.brow2 .val{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.brow2 .n{font-variant-numeric:tabular-nums;text-align:right;opacity:.75}
@media (max-width:719px){
  .bhead{display:none}
  .brow2{grid-template-columns:1fr auto;grid-template-areas:"lab val" "range n" "track track"}
  .brow2 .range{grid-area:range}
  .brow2 .lab{grid-area:lab;white-space:normal}
  .brow2 .val{grid-area:val}
  .brow2 .track{grid-area:track}
  .brow2 .n{grid-area:n}
}

.calclink{display:inline-block;margin-bottom:var(--s-2);color:var(--accent);
 font-weight:600;text-decoration:none}
.calclink:hover{text-decoration:underline}

/* Somebody else's rating, so it reads as a note rather than as our figure. */
.rate{font-size:var(--fs-xs);color:var(--ink2);white-space:nowrap;
 background:var(--chip);border-radius:99px;padding:1px var(--s-3);margin-left:var(--s-2)}


/* ---------- the one warning that has to be read -------------------------
   It used to be printed twice on a page, which teaches people to skip it.
   There is one now, at the top, and the foot of the page points back at it -
   so it has to earn the attention it asks for. Hence the colour: a red-pink
   field for the warning itself and a lime edge that belongs to nothing else
   on the site. Its own tokens, so dark mode is chosen rather than flipped. */
:root{--warn-bg:#fff1f3;--warn-line:#e8536a;--warn-ink:#5c0d18;--warn-edge:#d8ef4a}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]){--warn-bg:#2c0d13;--warn-line:#ff6b82;
   --warn-ink:#ffe3e7;--warn-edge:#b7d321}
}
:root[data-mode="dark"]{--warn-bg:#2c0d13;--warn-line:#ff6b82;
 --warn-ink:#ffe3e7;--warn-edge:#b7d321}

.note.alert{position:relative;overflow:hidden;background:var(--warn-bg);
 border:var(--hair) solid var(--warn-line);color:var(--warn-ink);
 border-radius:12px;padding:var(--card-py) var(--card-px)}
.note.alert::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;
 background:linear-gradient(90deg,var(--warn-line) 0%,#ff9fb0 45%,var(--warn-edge) 100%)}
.note.alert > .hd{color:var(--warn-line);font-weight:800;letter-spacing:.02em;
 margin-top:var(--s-2)}
.note.alert b{color:var(--warn-ink)}
.note.alert a{color:var(--warn-line);font-weight:700}

/* The pointer at the foot: quiet, but in the same family so it reads as the
   same warning rather than a new one. */
.note.recap{background:color-mix(in oklab,var(--warn-bg) 60%,transparent);
 border:var(--hair) solid color-mix(in oklab,var(--warn-line) 45%,transparent);
 border-left:4px solid var(--warn-edge);border-radius:10px;
 padding:var(--s-4) var(--card-px);color:var(--ink2)}
.note.recap a{color:var(--warn-line);font-weight:700}
.note.recap b{color:var(--ink)}


/* ---------- your acceptance receipt -------------------------------------
   Green because it is the one box on the site that says something is DONE,
   rather than something you must be careful about. */
:root{--ok-bg:#e8fbe8;--ok-line:#2fa84f;--ok-ink:#12401f}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]){--ok-bg:#0d2c16;--ok-line:#54d67a;--ok-ink:#d8ffe2}
}
:root[data-mode="dark"]{--ok-bg:#0d2c16;--ok-line:#54d67a;--ok-ink:#d8ffe2}

.accepted{background:var(--ok-bg);border:2px solid var(--ok-line);border-radius:12px;
 padding:var(--s-6) var(--card-px);margin:var(--s-6) 0 var(--stack-gap);
 color:var(--ok-ink)}
.accepted .ahd{font-weight:800;font-size:var(--fs-md);color:var(--ok-line);
 margin-bottom:var(--s-4)}
.accepted .arow{display:grid;grid-template-columns:minmax(9rem,13rem) 1fr;gap:var(--s-4);
 padding:var(--s-2) 0;border-top:var(--hair) solid color-mix(in oklab,var(--ok-line) 30%,transparent)}
.accepted .arow:first-of-type{border-top:0}
.accepted .arow span{color:var(--ok-ink);opacity:.75;font-size:var(--fs-sm)}
.accepted .arow b{color:var(--ok-ink);word-break:break-all;overflow-wrap:anywhere;
 font-variant-numeric:tabular-nums}
.accepted .ameta{margin:var(--s-4) 0 0;font-size:var(--fs-sm);opacity:.8}
.accepted.stale{--ok-bg:var(--warn-bg);--ok-line:var(--warn-line);--ok-ink:var(--warn-ink)}
@media (max-width:519px){ .accepted .arow{grid-template-columns:1fr} }

/* An ad we have only skimmed says so, rather than showing an empty row that
   reads as "this job offers nothing". */
.chip.unread{background:transparent;border:1px dashed var(--line);color:var(--ink3);
 font-style:italic}


/* ---------- membership ---------------------------------------------------
   Two plain cards. No countdown, no crossed-out fake price, no urgency: the
   thing being sold is a tool, and the page should read like one. */
.plangrid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
 margin:var(--stack-gap) 0}
.plan{border:var(--hair) solid var(--line);border-radius:12px;background:var(--panel);
 padding:var(--card-py) var(--card-px);text-align:center}
.plan .pname{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.06em;
 color:var(--ink3)}
.plan .pprice{font-size:var(--fs-3xl);font-weight:700;color:var(--ink);line-height:1.1;
 margin-top:var(--s-3)}
.plan .pper{color:var(--ink2);font-size:var(--fs-sm)}
.plan .psave{margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--accent);font-weight:600}
.plan button{width:100%;margin-top:var(--s-5)}
.linkish{all:unset;cursor:pointer;color:var(--accent);font-weight:600;text-decoration:underline}