/* ══════════════════════════════════════════════════════════════════════════
   PACE RETRO — step 1 of the redesign (R-122, D-0072, D-0073).
   --------------------------------------------------------------------------
   The design is docs/design/PACE.ds. This file is the same trick as theme.css
   (Session 23, D-0015): every screen draws with the same tokens, so the whole
   app changes by REDEFINING them here, loaded after theme.css. No page file is
   edited. Removing the one <link> in index.html restores the Session-23 look.

   Step 1 is colour, type, corners and shadows only. The sidebar regrouping and
   the sky header are step 2; the kit's components are step 3.

   MODES. The person picks Auto (follow the clock — the default), Light or Dark
   (04-shell-login.js). Auto is resolved to a real data-theme before first paint
   (index.html), so the OS-dark blocks in theme.css never decide anything; they
   are mirrored here only so a page whose script failed is still coherent.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/press-start-2p-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/silkscreen-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/silkscreen-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/space-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-mono-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── DAY (light) — the complete palette lives on bare :root ─────────────── */
:root{
  --bg:#F2EADB;            /* arcade cream: the canvas */
  --bg2:#E8DCC6;           /* shelf tan: the sidebar, the second ground */
  --bg3:rgba(26,16,51,.045);
  --card:#FFF6E6;          /* cartridge cream: paper, opaque — no glass */
  --card-solid:#FFF6E6;
  --glass-brd:#1A1033;     /* every surface edge is ink */
  --ctl-brd:#1A1033;
  --border:#E3D2B4;        /* ruled lines inside a surface */
  --border2:#CDBA98;
  --text:#1A1033;          /* midnight ink */
  --text2:#3D3260;
  --text3:#625782;         /* faded ink — 5.1:1 on cream */
  --accent:#7A4DE0;        /* pixel purple */
  --accent-m:#9B78F0;
  --accent-d:#5B3BB0;
  --accent-l:rgba(122,77,224,.12);
  --green:#276B2B;   --green-l:#DCE8CF;
  --amber:#A0540C;   --amber-l:#F5E0BC;
  --red:#B23A2E;     --red-l:#F3D3CC;
  --purple:#7A4DE0;  --purple-l:#E6DCFF;
  --teal:#2F6F8F;    --teal-l:#D7E9F4;
  --gold:#A0540C;    --gold-l:#F5E0BC;
  /* square, and hard shadows with no blur */
  --r:0px; --r2:0px; --r3:0px; --r4:0px;
  --hard:#2A1A57;          /* shadow plum */
  --sh:2px 2px 0 var(--hard);
  --sh2:4px 4px 0 var(--hard);
  --sh3:6px 6px 0 var(--hard);
  --blur:0px;
  --glow1:transparent; --glow2:transparent; --glow3:transparent;
  --grid:rgba(26,16,51,.055);
  --on-canvas:#5A4E7A; --on-canvas-strong:#1A1033;
  /* text ink for the PAGE GROUND (cv) — see THE TEXT INK RULE at the end of this file */
  --cv-text:#1A1033; --cv-text2:#3D3260; --cv-text3:#625782;
  --cv-accent:#7A4DE0; --cv-purple:#7A4DE0; --cv-amber:#A0540C; --cv-gold:#A0540C; --cv-red:#B23A2E; --cv-green:#276B2B; --cv-teal:#2F6F8F;
  /* the CANVAS and the sidebar SHELF are their own tokens: --bg is also the
     recessed groove inside cards (segmented controls, chips), which must stay
     cream at night. */
  --canvas:#F2EADB; --shelf:#E8DCC6;
  /* the action colour: one Sun Yellow per screen */
  --sun:#FFD36E; --on-sun:#1A1033;
  /* state fills (muted on purpose) — for tags and decision buttons */
  --st-go:#A9C98C; --st-stop:#D98A7E; --st-wait:#E6BC7A; --st-info:#9CC6E2;
  /* type: pixel faces are for the frame only (step 2); data in Space Mono */
  --font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --display:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --pixel:'Press Start 2P',ui-monospace,monospace;
  --pixel-label:'Silkscreen',ui-monospace,monospace;
  color-scheme:light;
}

/* ── NIGHT (dark) — the DAY palette restated (theme.css's own dark block would
   otherwise win) with the night overrides last. Defined twice, as theme.css
   does, so the two cannot drift. ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --bg:#F2EADB;            /* arcade cream: the canvas */
    --bg2:#E8DCC6;           /* shelf tan: the sidebar, the second ground */
    --bg3:rgba(26,16,51,.045);
    --card:#FFF6E6;          /* cartridge cream: paper, opaque — no glass */
    --card-solid:#FFF6E6;
    --glass-brd:#1A1033;     /* every surface edge is ink */
    --ctl-brd:#1A1033;
    --border:#E3D2B4;        /* ruled lines inside a surface */
    --border2:#CDBA98;
    --text:#1A1033;          /* midnight ink */
    --text2:#3D3260;
    --text3:#625782;         /* faded ink — 5.1:1 on cream */
    --accent:#7A4DE0;        /* pixel purple */
    --accent-m:#9B78F0;
    --accent-d:#5B3BB0;
    --accent-l:rgba(122,77,224,.12);
    --green:#276B2B;   --green-l:#DCE8CF;
    --amber:#A0540C;   --amber-l:#F5E0BC;
    --red:#B23A2E;     --red-l:#F3D3CC;
    --purple:#7A4DE0;  --purple-l:#E6DCFF;
    --teal:#2F6F8F;    --teal-l:#D7E9F4;
    --gold:#A0540C;    --gold-l:#F5E0BC;
    /* square, and hard shadows with no blur */
    --r:0px; --r2:0px; --r3:0px; --r4:0px;
    --hard:#2A1A57;          /* shadow plum */
    --sh:2px 2px 0 var(--hard);
    --sh2:4px 4px 0 var(--hard);
    --sh3:6px 6px 0 var(--hard);
    --blur:0px;
    --glow1:transparent; --glow2:transparent; --glow3:transparent;
    --grid:rgba(26,16,51,.055);
    --on-canvas:#5A4E7A; --on-canvas-strong:#1A1033;
    /* text ink for the PAGE GROUND (cv) — see THE TEXT INK RULE at the end of this file */
    --cv-text:#1A1033; --cv-text2:#3D3260; --cv-text3:#625782;
    --cv-accent:#7A4DE0; --cv-purple:#7A4DE0; --cv-amber:#A0540C; --cv-gold:#A0540C; --cv-red:#B23A2E; --cv-green:#276B2B; --cv-teal:#2F6F8F;
    /* the action colour: one Sun Yellow per screen */
    --sun:#FFD36E; --on-sun:#1A1033;
    /* state fills (muted on purpose) — for tags and decision buttons */
    --st-go:#A9C98C; --st-stop:#D98A7E; --st-wait:#E6BC7A; --st-info:#9CC6E2;
    /* type: pixel faces are for the frame only (step 2); data in Space Mono */
    --font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    --display:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
    --pixel:'Press Start 2P',ui-monospace,monospace;
    --pixel-label:'Silkscreen',ui-monospace,monospace;
    /* ── night overrides ── */
    --canvas:#130B2B; --shelf:#1D1240;
    /* NIGHT KEEPS THE PAPER (owner, on the first night build: "too much
       purple … not like this" — the concept had cream cards on a dark grid).
       So night changes the CANVAS, the sidebar ground and the shadow colour;
       cards, controls and their ink stay exactly as by day. Text that sits
       straight on the canvas is lightened one rule at a time below
       (ON THE NIGHT CANVAS). */
    --hard:#5B3BB0;
    --grid:rgba(205,184,255,.05);
    --on-canvas:#CDB8FF; --on-canvas-strong:#FFF6E6;
    /* text ink for the PAGE GROUND (cv) — see THE TEXT INK RULE at the end of this file */
    --cv-text:#FFF6E6; --cv-text2:#E2D6FF; --cv-text3:#B3A2E0;
    --cv-accent:#B79BFF; --cv-purple:#B79BFF; --cv-amber:#F0B254; --cv-gold:#F0B254; --cv-red:#FF9A8B; --cv-green:#86D68F; --cv-teal:#7FC4E6;
    color-scheme:light;
  }
}
:root[data-theme="dark"]{
  --bg:#F2EADB;            /* arcade cream: the canvas */
  --bg2:#E8DCC6;           /* shelf tan: the sidebar, the second ground */
  --bg3:rgba(26,16,51,.045);
  --card:#FFF6E6;          /* cartridge cream: paper, opaque — no glass */
  --card-solid:#FFF6E6;
  --glass-brd:#1A1033;     /* every surface edge is ink */
  --ctl-brd:#1A1033;
  --border:#E3D2B4;        /* ruled lines inside a surface */
  --border2:#CDBA98;
  --text:#1A1033;          /* midnight ink */
  --text2:#3D3260;
  --text3:#625782;         /* faded ink — 5.1:1 on cream */
  --accent:#7A4DE0;        /* pixel purple */
  --accent-m:#9B78F0;
  --accent-d:#5B3BB0;
  --accent-l:rgba(122,77,224,.12);
  --green:#276B2B;   --green-l:#DCE8CF;
  --amber:#A0540C;   --amber-l:#F5E0BC;
  --red:#B23A2E;     --red-l:#F3D3CC;
  --purple:#7A4DE0;  --purple-l:#E6DCFF;
  --teal:#2F6F8F;    --teal-l:#D7E9F4;
  --gold:#A0540C;    --gold-l:#F5E0BC;
  /* square, and hard shadows with no blur */
  --r:0px; --r2:0px; --r3:0px; --r4:0px;
  --hard:#2A1A57;          /* shadow plum */
  --sh:2px 2px 0 var(--hard);
  --sh2:4px 4px 0 var(--hard);
  --sh3:6px 6px 0 var(--hard);
  --blur:0px;
  --glow1:transparent; --glow2:transparent; --glow3:transparent;
  --grid:rgba(26,16,51,.055);
  --on-canvas:#5A4E7A; --on-canvas-strong:#1A1033;
  /* text ink for the PAGE GROUND (cv) — see THE TEXT INK RULE at the end of this file */
  --cv-text:#1A1033; --cv-text2:#3D3260; --cv-text3:#625782;
  --cv-accent:#7A4DE0; --cv-purple:#7A4DE0; --cv-amber:#A0540C; --cv-gold:#A0540C; --cv-red:#B23A2E; --cv-green:#276B2B; --cv-teal:#2F6F8F;
  /* the action colour: one Sun Yellow per screen */
  --sun:#FFD36E; --on-sun:#1A1033;
  /* state fills (muted on purpose) — for tags and decision buttons */
  --st-go:#A9C98C; --st-stop:#D98A7E; --st-wait:#E6BC7A; --st-info:#9CC6E2;
  /* type: pixel faces are for the frame only (step 2); data in Space Mono */
  --font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --display:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --pixel:'Press Start 2P',ui-monospace,monospace;
  --pixel-label:'Silkscreen',ui-monospace,monospace;
  /* ── night overrides ── */
  --canvas:#130B2B; --shelf:#1D1240;
  /* NIGHT KEEPS THE PAPER (owner, on the first night build: "too much
     purple … not like this" — the concept had cream cards on a dark grid).
     So night changes the CANVAS, the sidebar ground and the shadow colour;
     cards, controls and their ink stay exactly as by day. Text that sits
     straight on the canvas is lightened one rule at a time below
     (ON THE NIGHT CANVAS). */
  --hard:#5B3BB0;
  --grid:rgba(205,184,255,.05);
  --on-canvas:#CDB8FF; --on-canvas-strong:#FFF6E6;
  /* text ink for the PAGE GROUND (cv) — see THE TEXT INK RULE at the end of this file */
  --cv-text:#FFF6E6; --cv-text2:#E2D6FF; --cv-text3:#B3A2E0;
  --cv-accent:#B79BFF; --cv-purple:#B79BFF; --cv-amber:#F0B254; --cv-gold:#F0B254; --cv-red:#FF9A8B; --cv-green:#86D68F; --cv-teal:#7FC4E6;
  color-scheme:light;
}

/* ══ THE GROUND: cream (or night) with a faint 16px grid, no glows ════════ */
body{
  background-color:var(--canvas);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:16px 16px;
  font-family:var(--font);
  letter-spacing:0;
}
body::before{background:none}

/* ══ NO GLASS ANYWHERE — paper is opaque ══════════════════════════════════ */
#sidebar,#topbar,.card,.pg-body>.card,.dt-wrap,.tbl-wrap,body.ui-kit #sidebar,body.ui-kit #topbar,
.modal,.drawer,.dw,.dwr-pane,#nav-scrim,.scrim{
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
#sidebar,body.ui-kit #sidebar{background:var(--shelf);border-right:2px solid var(--glass-brd);box-shadow:none}
#topbar,body.ui-kit #topbar{background:var(--bg2);border-bottom:2px solid var(--glass-brd);box-shadow:none}

/* ══ SURFACES: square paper, ink edge, hard shadow ════════════════════════ */
.card,.pg-body>.card,.dt-wrap,.tbl-wrap{
  background:var(--card);
  border:2px solid var(--glass-brd);
  border-radius:0;
  box-shadow:var(--sh2);
}
.card{transition:background-color .12s steps(2),border-color .12s steps(2)}
.modal,.drawer,.dw{border:2px solid var(--glass-brd);border-radius:0;box-shadow:var(--sh3)}

/* ══ CONTROLS ════════════════════════════════════════════════════════════ */
.btn{border-radius:0;font-weight:700;letter-spacing:.01em}
.btn-primary{
  background:var(--sun);border:2px solid var(--glass-brd);color:var(--on-sun);
  box-shadow:var(--sh);
}
.btn-primary:hover{background:#FFC845;border-color:var(--glass-brd);color:var(--on-sun)}
.btn-outline{background:var(--card);border:2px solid var(--ctl-brd);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.inp,.sel,input[type=text],input[type=email],input[type=date],input[type=search],
input[type=number],input[type=password],textarea,select{
  background:var(--card);border:2px solid var(--ctl-brd);border-radius:0;
}
.inp:focus,.sel:focus,input:focus,textarea:focus,select:focus{
  border-color:var(--accent);box-shadow:3px 3px 0 var(--accent-l);
}
.bdg,.pill{border-radius:0}

/* Numbers that should line up: tables of figures, ids, stat tiles. */
table td.num,.mono,code,kbd{font-family:var(--mono)}

/* ══ THE RAIL (regrouped and restyled in step 2) ══════════════════════════ */
.nav-item{border-radius:0}
.nav-item.active,.nav-item.on{
  background:var(--card);border:2px solid var(--glass-brd);box-shadow:var(--sh);
}

/* The horizon bar and its friends were drawn as glass pills. */
.hz-bar,.hz-btn,.hz-count,.hz-pg,.na-act,.am-src,.lp-wrap,.lp-chip,.am-list,.var-chip,.warn-panel,.warn-panel-sm,.banner-chip{border-radius:0}

/* The content area paints its own ground in ui.css; give it the grid too. */
body.ui-kit #content{
  background-color:var(--canvas);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:16px 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   STEP 2 — THE FRAME: the sky, the pixel logo, the sidebar by business.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── THE SKY. Banded, hard stops (the 90s look), chosen by data-sky on <html>
   (set before first paint; see index.html and paceSkyPhase()). Independent of
   light/dark. The bar's background-COLOUR is the darkest band, and every band
   the text sits on is >= 3:1 against cream; the pale horizon bands are kept to
   the bottom quarter, where only the sun travels. ───────────────────────── */
:root{ --sky:linear-gradient(180deg,#1C6FBF 0 34%,#2588D6 34% 58%,#36A6EC 58% 74%,#62C2F5 74% 88%,#A6DEFA 88%); --sky-base:#1C6FBF; }
:root[data-sky="dawn"]{ --sky:linear-gradient(180deg,#2A1A57 0 30%,#5A2A8E 30% 56%,#A84F93 56% 72%,#E27788 72% 84%,#FFAE88 84% 93%,#FFDDA6 93%); --sky-base:#2A1A57; }
:root[data-sky="day"]{ --sky:linear-gradient(180deg,#1C6FBF 0 34%,#2588D6 34% 58%,#36A6EC 58% 74%,#62C2F5 74% 88%,#A6DEFA 88%); --sky-base:#1C6FBF; }
:root[data-sky="dusk"]{ --sky:linear-gradient(180deg,#1B1240 0 26%,#2E1863 26% 46%,#5A2A8E 46% 62%,#A2409E 62% 74%,#E2588F 74% 84%,#FF8E5A 84% 93%,#FFC36B 93%); --sky-base:#1B1240; }
:root[data-sky="night"]{ --sky:linear-gradient(180deg,#0B0620 0 30%,#110A2A 30% 52%,#171036 52% 70%,#1E1445 70% 86%,#271A57 86%); --sky-base:#0B0620; }

#topbar,body.ui-kit #topbar{
  position:relative;overflow:hidden;
  background-color:var(--sky-base);background-image:var(--sky);
  border-bottom:2px solid #000;
}
body.ui-kit #topbar>*:not(.tb-sky){position:relative;z-index:1}
body.ui-kit .tb-title{
  font-family:var(--pixel);font-weight:400;font-size:14px;letter-spacing:.5px;
  color:#FFF6E6;text-shadow:2px 2px 0 #000;text-transform:uppercase;
}
body.ui-kit .tb-title .tb-count{
  font-family:var(--mono);font-size:11px;text-shadow:none;text-transform:none;
  background:#FFF6E6;color:#1A1033;border:2px solid #000;border-radius:0;
}
body.ui-kit .tb-title .tb-crumb{font-family:var(--font);font-size:13px;text-transform:none;text-shadow:1px 1px 0 #000;color:#FFF6E6}
body.ui-kit .tb-ico,body.ui-kit .tb-theme,body.ui-kit .tb-burger{color:#FFF6E6;border-radius:0}
body.ui-kit .tb-ico:hover,body.ui-kit .tb-theme:hover{background:rgba(255,246,230,.16);color:#FFF6E6;border-color:transparent}
body.ui-kit .tb-ico .dot{border-radius:0;background:#FFD36E;box-shadow:0 0 0 2px #000}
body.ui-kit .tb-user{border-radius:0}
body.ui-kit #topbar .btn-outline{background:#FFF6E6;color:#1A1033;border-color:#000}
.tb-orb{position:absolute;z-index:0;pointer-events:none;line-height:0}
.tb-orb.is-sun{color:#FFD36E}
.tb-orb.is-moon{color:#F4EFD8}
.tb-orb svg{display:block}

/* ── THE LOGO: pixel PACE on a slice of the same sky ─────────────────────── */
body.ui-kit .sb-brand{
  background-color:var(--sky-base);background-image:var(--sky);
  border-bottom:2px solid #000;
}
body.ui-kit .rail-mark{
  width:30px;height:30px;border-radius:0;background:#1A1033;border:2px solid #000;
  font-family:var(--pixel);font-weight:400;font-size:14px;color:#E4D6FF;letter-spacing:0;
  box-shadow:2px 2px 0 #000;
}
body.ui-kit .rail-word{
  /* R-138 (owner: "increase the purple contrast for PACE, now it looks dull"):
     a bright face on a deep, saturated purple extrusion — the ramp is steeper,
     so the letters stand off the sky instead of melting into it. */
  font-family:var(--pixel);font-weight:400;font-size:20px;letter-spacing:1px;color:#FFFFFF;
  text-shadow:1px 1px 0 #B58CFF,2px 2px 0 #8A4DFF,3px 3px 0 #5E2BE0,4px 4px 0 #35108F,-1px 0 0 #000,1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000,5px 5px 0 #000;
}

/* ── THE SIDEBAR, BY BUSINESS. Section labels in the pixel label face with a
   square in the section colour; items are chunky paper keys; the active one
   takes its section's colour. Collapsed (60px) they read as icon keys. ───── */
:root{ --sec-day:#A9C98C; --sec-sales:#E6BC7A; --sec-rec:#CDB8FF; --sec-set:#9CC6E2; }
body.ui-kit .sb-nav{padding:8px 10px}
body.ui-kit .sb-lbl{
  font-family:var(--pixel-label);font-weight:700;font-size:13px;letter-spacing:.1em;
  color:var(--text);display:flex;align-items:center;gap:7px;padding:14px 4px 7px;height:auto;
}
body.ui-kit .sb-lbl::before{content:'';width:12px;height:12px;flex:none;box-sizing:border-box;border:2px solid var(--glass-brd);background:var(--sec,transparent)}
.sec-day{--sec:var(--sec-day)} .sec-sales{--sec:var(--sec-sales)} .sec-rec{--sec:var(--sec-rec)} .sec-set{--sec:var(--sec-set)}
body.ui-kit .nav-item{
  height:36px;margin-bottom:7px;padding:0 0 0 9px;border-radius:0;
  background:var(--card);border:2px solid var(--glass-brd);box-shadow:var(--sh);
  color:var(--text);font-weight:700;font-size:14px;
  transition:transform .08s steps(2),box-shadow .08s steps(2);
}
body.ui-kit .nav-icon{opacity:.85}
@media (hover:hover) and (pointer:fine){
  body.ui-kit .nav-item:hover{background:var(--card);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--hard)}
}
body.ui-kit .nav-item.active,body.ui-kit .nav-item.on{
  background:var(--sec,var(--card));color:#1A1033;border:2px solid var(--glass-brd);box-shadow:var(--sh);font-weight:800;
}
body.ui-kit .nav-item.active .nav-icon{opacity:1;color:#1A1033}
/* counts: an ink box (collapsed: a sun-yellow square on the icon) */
body.ui-kit .nav-badge{border-radius:0;background:var(--sun);box-shadow:0 0 0 1.5px #000}
body.ui-kit #sidebar.pinned .nav-badge{border-radius:0;background:#1A1033;color:#FFF6E6;box-shadow:none}
@media (hover:hover) and (pointer:fine){
  body.ui-kit #sidebar:hover .nav-badge{border-radius:0;background:#1A1033;color:#FFF6E6;box-shadow:none}
}
/* the sign-out row and the person stay quiet */
body.ui-kit .sb-footer{border-top:2px solid var(--glass-brd)}
body.ui-kit .sb-footer .nav-item{box-shadow:none;background:transparent;border-color:transparent}
body.ui-kit .user-row{border-radius:0}

/* PINNED OPEN PUSHES THE PAGE OVER; HOVER STILL FLOATS. The owner wants the
   labelled sidebar (R-122), so someone who pins it open must not lose the left
   of every page under it. Desktop only — below 861px the rail is the
   hamburger drawer (mobile.css) and must keep overlaying. */
@media (min-width:861px){
  body.ui-kit #sidebar.pinned ~ #main{margin-left:var(--rail-w-open)}
}
/* On a phone the bar is full of buttons — the sky stays, the sun/moon rests. */
@media (max-width:860px){ .tb-orb{display:none} }

/* ══ ON THE NIGHT CANVAS ══════════════════════════════════════════════════
   Cards keep their ink at night; only text that sits straight on the canvas
   or the sidebar ground changes. --on-canvas* is ink by day and cream/lavender
   by night, so each rule below is right in both. theme-contrast-smoke finds
   the next one. */
body.ui-kit .sb-lbl{color:var(--on-canvas-strong)}
body.ui-kit .sb-footer .nav-item,body.ui-kit .u-name{color:var(--on-canvas-strong)}
body.ui-kit .u-role{color:var(--on-canvas)}

/* ══ THE SIDEBAR AS DESIGNED (owner's sidebar mockup, R-122) ══════════════ */
/* The logo tile: a taller slice of sky with the big pixel PACE. */
body.ui-kit .sb-brand{height:84px;min-height:84px;padding-left:14px}
body.ui-kit #sidebar.pinned .rail-mark{display:none}
@media (hover:hover) and (pointer:fine){
  body.ui-kit #sidebar:hover .rail-mark{display:none}
}
body.ui-kit .rail-word{font-size:24px;margin-left:2px}
/* collapsed: the P key sits centred in the 60px rail */
body.ui-kit .sb-brand .rail-mark{margin-left:0}

/* Pixel icons are drawn in the text colour. */
body.ui-kit .nav-icon svg{display:block}
body.ui-kit .nav-item.sec-day .nav-icon,body.ui-kit .nav-item:not(.active) .nav-icon{color:var(--text)}
body.ui-kit .nav-item.active.sec-day .nav-icon svg rect:first-child{fill:inherit}

/* Counts on an open sidebar: an ink box, mono, square. */
body.ui-kit #sidebar.pinned .nav-badge{
  font-family:var(--mono);font-size:11px;font-weight:700;padding:0 6px;margin-right:9px;
}

/* Setup lives under the name card (Deliverability, Admin). */
body.ui-kit .sb-setup{display:none;padding:2px 0 8px}
body.ui-kit #sidebar.setup-open .sb-setup{display:block}
body.ui-kit .sb-footer{padding:10px;border-top:none}
body.ui-kit .sb-footer .sb-setup .nav-item{background:var(--card);border:2px solid var(--glass-brd);box-shadow:var(--sh);color:var(--text)}
body.ui-kit .sb-footer .sb-setup .nav-item.active{background:var(--sec-set);color:#1A1033}

/* The name card: paper, square avatar, a SETUP key on the right. */
body.ui-kit .me-card{
  display:flex;align-items:center;gap:6px;
  background:var(--card);border:2px solid var(--glass-brd);box-shadow:var(--sh);
  padding:0 6px 0 0;margin-bottom:8px;
}
body.ui-kit .me-card .user-row{flex:1;min-width:0;height:48px;padding-left:6px}
body.ui-kit .me-card .user-row:hover{background:transparent}
body.ui-kit .me-card .u-name{color:var(--text)}
body.ui-kit .me-card .u-role{color:var(--text3);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
body.ui-kit #sidebar .me-card .av{border-radius:0;border:2px solid #000;font-family:var(--pixel-label);font-weight:700}
body.ui-kit .me-setup{
  display:none;align-items:center;gap:4px;flex:none;cursor:pointer;
  font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;
  border:2px solid var(--glass-brd);padding:3px 6px;color:var(--text);background:var(--card);
}
body.ui-kit .me-setup svg{width:12px;height:12px}
body.ui-kit .me-setup .nav-txt{margin-left:0}
body.ui-kit #sidebar.pinned .me-setup{display:flex}
body.ui-kit #sidebar.setup-open .me-setup{background:var(--sec-set)}
@media (hover:hover) and (pointer:fine){ body.ui-kit #sidebar:hover .me-setup{display:flex} }
/* the sign-out row stays a quiet line under the card */
body.ui-kit .sb-footer>.nav-item{height:30px;margin:0}

/* ══ THE TALL SKY HEADER (owner, comparing to the concepts: the clouds, the
   date line, the counts, the New button and the big sun/moon were missing) ══ */
body.ui-kit{--topbar-h:104px}
/* Day bands re-cut for the taller bar: the title (top ~45%) and the date
   line sit on the two darkest bands; the pale horizon is the bottom 22%. */
:root,:root[data-sky="day"]{ --sky:linear-gradient(180deg,#1C6FBF 0 40%,#2588D6 40% 66%,#36A6EC 66% 78%,#62C2F5 78% 90%,#A6DEFA 90%); }
:root[data-sky="dawn"]{ --sky:linear-gradient(180deg,#2A1A57 0 36%,#5A2A8E 36% 62%,#A84F93 62% 74%,#E27788 74% 84%,#FFAE88 84% 93%,#FFDDA6 93%); }
:root[data-sky="dusk"]{ --sky:linear-gradient(180deg,#1B1240 0 30%,#2E1863 30% 50%,#5A2A8E 50% 64%,#A2409E 64% 75%,#E2588F 75% 85%,#FF8E5A 85% 93%,#FFC36B 93%); }
body.ui-kit #topbar{align-items:flex-start;padding:20px 22px 0 24px;gap:14px}
body.ui-kit .tb-head{display:flex;flex-direction:column;gap:9px;min-width:0}
body.ui-kit .tb-title{font-size:20px;letter-spacing:1px;text-shadow:3px 3px 0 #000;white-space:nowrap}
body.ui-kit .tb-meta{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.08em;color:#FFF6E6;text-shadow:1px 1px 0 #000}
body.ui-kit .tb-chips{display:flex;gap:8px;margin-top:2px}
.tb-chip{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.04em;background:#FFF6E6;color:#1A1033;border:2px solid #000;padding:3px 8px;white-space:nowrap}
.tb-chip.is-late{background:#D98A7E;cursor:pointer}
body.ui-kit .tb-right{align-self:flex-start;margin-top:-2px}
body.ui-kit .tb-new{font-family:var(--pixel);font-weight:400;font-size:10px;letter-spacing:.5px;padding:11px 14px;border:3px solid #000;box-shadow:4px 4px 0 #000;white-space:nowrap}
/* THE "+ NEW" MENU: an opaque paper float (glass is for the sky, not menus) */
.tb-newwrap{position:relative}
.tb-caret{display:inline-block;width:0;height:0;margin-left:8px;vertical-align:middle;border:4px solid transparent;border-top-color:currentColor;border-bottom-width:0}
.tb-newmenu{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:#FFF6E6;border:3px solid #000;box-shadow:5px 5px 0 var(--hard);z-index:60;padding:4px 0}
.tb-newrow{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:9px 14px;background:transparent;border:0;border-left:4px solid transparent;cursor:pointer;text-align:left;font:inherit;color:#1A1033}
.tb-newrow:focus-visible{background:#F2E6CF;border-left-color:#7A4DE0;outline:none}
@media (hover:hover) and (pointer:fine){ .tb-newrow:hover{background:#F2E6CF;border-left-color:#7A4DE0} }
.tb-newlbl{font-family:var(--pixel);font-size:10px;letter-spacing:.5px}
.tb-newsub{font-family:var(--mono);font-size:11px;color:#6E6290}
/* clouds, stars, and a bigger sun/moon travelling BELOW the text */
.tb-cloud{position:absolute;z-index:0;pointer-events:none;line-height:0;color:#FFF6E6}
.tb-cloud svg{display:block}
.tb-cloud.c1{left:47%;top:12px}
.tb-cloud.c2{left:63%;top:58px;opacity:.8}
:root[data-sky="dawn"] .tb-cloud,:root[data-sky="dusk"] .tb-cloud{color:#F3E2F1}
:root[data-sky="night"] .tb-cloud{color:#3A2F6B}
.tb-stars{position:absolute;z-index:0;left:0;top:0;width:2px;height:2px;background:transparent;pointer-events:none;display:none;
  box-shadow:120px 14px #fff,260px 30px #fff,410px 9px #fff,560px 40px #fff,700px 16px #fff,840px 34px #fff,980px 10px #fff,1100px 28px #fff,1240px 12px #fff,330px 66px #fff,770px 70px #fff,1010px 60px #fff}
:root[data-sky="night"] .tb-stars,:root[data-sky="dusk"] .tb-stars{display:block}
:root[data-sky="dusk"] .tb-stars{opacity:.6}

/* The logo tile: same height as the sky, PACE big, "AI RECRUITING" under it. */
body.ui-kit .sb-brand{height:var(--topbar-h);min-height:var(--topbar-h);position:relative;overflow:hidden}
body.ui-kit .rail-word{display:flex;align-items:center;font-size:27px;position:relative;z-index:1;white-space:nowrap}
/* TYPING PACE: each letter pops in on its own beat (steps — a typewriter, not a
   fade), then the caret blinks a few times and is gone. --el moves the whole
   show back in time when the sidebar repaints part-way through. */
.rail-word .tw{display:inline-block}
.rail-word.typing .tw{font-size:0;animation:tw-in 0s steps(1,end) forwards;animation-delay:calc(var(--i)*.2s + .45s - var(--el,0s))}
.tw-caret{display:none;width:.45em;height:.9em;margin-left:3px;background:#E4D6FF;box-shadow:1px 1px 0 #000;vertical-align:-.08em;
  animation:tw-blink .7s steps(1,end) infinite;animation-delay:calc(-1 * var(--el,0s));animation-iteration-count:3;animation-fill-mode:forwards}
body.ui-kit .rail-word.typing .tw-caret{display:inline-block}
@keyframes tw-in{to{font-size:1em}}
@keyframes tw-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .rail-word.typing .tw{font-size:inherit;animation:none}
  .tw-caret{display:none}
}
.sb-cloud{position:absolute;right:16px;top:14px;line-height:0;color:#FFF6E6;opacity:.95;pointer-events:none}
.sb-cloud svg{display:block}
:root[data-sky="night"] .sb-cloud{color:#3A2F6B}
body.ui-kit #sidebar:not(.pinned) .sb-cloud{display:none}
@media (hover:hover) and (pointer:fine){ body.ui-kit #sidebar:hover .sb-cloud{display:block} }

/* PHONE: the sky stacks — burger + title + icons, then the date line, then the
   counts and the New button (the concept's phone header). */
@media (max-width:860px){
  body.ui-kit{--topbar-h:auto}
  body.ui-kit #topbar{flex-wrap:wrap;padding:12px 12px 14px;gap:8px 10px;min-height:96px}
  body.ui-kit .tb-head{flex:1 1 0}
  body.ui-kit .tb-title{font-size:14px}
  body.ui-kit .tb-meta{font-size:10px}
  body.ui-kit .tb-chips{order:5;flex-basis:100%}
  body.ui-kit .tb-new{padding:8px 10px}
  .tb-cloud.c2{display:none}
  .tb-cloud.c1{left:auto;right:120px;top:52px}
}
body.ui-kit .sb-footer>.nav-item .nav-icon{color:inherit}
@media (max-width:860px){
  /* row 1: menu + the buttons; row 2: the title and date; row 3: the counts */
  body.ui-kit #topbar{align-items:center}
  body.ui-kit .tb-burger{order:0}
  body.ui-kit .tb-right{order:1;margin-left:auto;align-self:center;margin-top:0}
  body.ui-kit .tb-head{order:2;flex:1 1 100%;gap:6px;margin-top:4px}
  body.ui-kit .tb-chips{order:3}
  body.ui-kit .tb-new{font-size:10px;padding:8px 9px;box-shadow:3px 3px 0 #000}
  .tb-cloud.c1{right:24px;top:auto;bottom:10px;left:auto}
}

/* ══ SEARCH EVERYTHING (R-123) ════════════════════════════════════════════
   The bar no longer clips (its decoration is clipped by .tb-sky instead), so
   the results hang below it over the page. */
#topbar,body.ui-kit #topbar{overflow:visible;z-index:30}
.tb-sky{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.tb-search{position:relative;margin-left:auto;width:340px;flex:none;align-self:flex-start;
  display:flex;align-items:center;gap:8px;background:#FFF6E6;border:3px solid #000;box-shadow:4px 4px 0 #000;padding:0 10px;height:40px}
.tb-search .gs-ic{color:#6E6290;display:flex}
.tb-search .gs-ic svg{width:15px;height:15px}
.tb-search input{flex:1;min-width:0;border:none!important;background:transparent!important;box-shadow:none!important;outline:none;
  font-family:var(--font);font-size:13px;color:#1A1033;padding:0;height:34px}
.tb-search input::placeholder{color:#6E6290}
.tb-search input::-webkit-search-cancel-button{display:none}
.gs-kbd{font-family:var(--mono);font-size:10px;border:2px solid #1A1033;padding:0 4px;color:#1A1033;line-height:16px}
.gs-panel{position:absolute;left:-3px;right:-3px;top:calc(100% + 6px);max-height:420px;overflow-y:auto;
  background:#FFF6E6;border:3px solid #000;box-shadow:5px 5px 0 var(--hard);padding:4px 0;z-index:40}
.gs-group{font-family:var(--pixel-label);font-size:12px;letter-spacing:.14em;color:#6E6290;padding:9px 12px 4px}
.gs-row{display:flex;flex-direction:column;gap:1px;padding:7px 12px;cursor:pointer;border-left:4px solid transparent}
.gs-row.on,.gs-row:hover{background:#F2E6CF;border-left-color:#7A4DE0}
.gs-title{font-weight:700;font-size:14px;color:#1A1033}
.gs-sub{font-family:var(--mono);font-size:11px;color:#6E6290}
.gs-note{padding:12px;font-size:13px;color:#3D3260}
.gs-note.is-err{color:#B23A2E}
@media (max-width:1180px){ .tb-search{width:260px} }
@media (max-width:860px){
  .tb-search{order:4;flex:1 1 100%;width:auto;margin-left:0;height:42px}
  .tb-search input{font-size:16px}                 /* 16px: no zoom-on-focus on a phone */
  .gs-kbd{display:none}
}

/* ══ RETRO CHARTS (R-122 step 3) ═══════════════════════════════════════════
   The report's bars and columns (39-page-reports.js). Square paper tracks with
   a hard outline and plum shadow; the fill is a segmented level meter. Colour
   says what a stage MEANS (purple ours, blue client side, amber interviews,
   green won, red lost, grey parked) — not the old rounded blue ramp. They sit
   on cream cards in BOTH modes, so these are fixed paper-and-ink colours. */
.rep-card{padding:16px 18px}
.rep-ttl{font-family:var(--pixel-label);font-weight:700;font-size:13px;letter-spacing:.14em;color:#1A1033;margin-bottom:14px}
.rep-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.rep-lbl{width:140px;flex:none;text-align:right;font-family:var(--mono);font-size:11px;color:#3D3260}
.rep-lbl.is-name{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-track{flex:1;min-width:40px;height:20px;background:#F2EADB;border:2px solid #1A1033;border-radius:0;box-shadow:2px 2px 0 var(--hard);overflow:hidden;position:relative}
.rep-fill{height:100%;min-width:10px;border-right:2px solid #1A1033;border-radius:0;background-color:var(--tone,#7A4DE0);
  background-image:repeating-linear-gradient(90deg,transparent 0 10px,rgba(26,16,51,.28) 10px 12px)}
.rep-fill.is-empty{display:none}
.tone-brand{--tone:#A894DB} .tone-info{--tone:#9CC6E2} .tone-wait{--tone:#E6BC7A}
.tone-go{--tone:#A9C98C} .tone-stop{--tone:#D98A7E} .tone-muted{--tone:#C9BFA9}
.rep-num{width:34px;flex:none;font-family:var(--pixel-label);font-weight:700;font-size:13px;color:#1A1033}
.rep-num.is-zero{color:#8C80AD}

.rep-cols{display:flex;align-items:flex-end;gap:10px;height:132px;padding:0 4px;border-bottom:3px solid #1A1033}
.rep-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.rep-pair{display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%}
.rep-bar1{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;flex:1;max-width:30px;min-width:0}
.rep-colv{font-family:var(--pixel-label);font-weight:700;font-size:12px;color:#1A1033}
.rep-colv.is-zero{color:#8C80AD}
.rep-colbar{width:100%;max-width:26px;background-color:var(--tone,#7A4DE0);border:2px solid #1A1033;border-bottom:0;border-radius:0;box-shadow:3px 0 0 var(--hard);
  background-image:repeating-linear-gradient(0deg,transparent 0 8px,rgba(26,16,51,.25) 8px 10px)}
.rep-colbar.is-zero{display:none}
.rep-weeks{display:flex;gap:10px;padding:0 4px;margin-top:6px}
.rep-colw{flex:1;min-width:0;text-align:center;font-family:var(--mono);font-size:10px;color:#6E6290;white-space:nowrap}

.rep-filters{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding:12px 14px;margin-bottom:14px}
.rep-fgroup{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rep-flbl{font-family:var(--pixel-label);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6E6290;margin-right:2px}
.rep-fto{font-family:var(--mono);font-size:11px;color:#6E6290}
.rep-pill{font-family:var(--mono);font-weight:700;font-size:12px;padding:5px 11px;background:#FFF6E6;color:#1A1033;border:2px solid #1A1033;border-radius:0;box-shadow:2px 2px 0 var(--hard);cursor:pointer}
.rep-pill.on{background:#7A4DE0;color:#FFF6E6}
.rep-pill:active{transform:translate(2px,2px);box-shadow:none}
.rep-date{font-family:var(--mono);font-size:12px;padding:4px 7px;background:#FFF6E6;color:#1A1033;border:2px solid #1A1033;border-radius:0}

.rep-mini{padding:10px 12px 12px 44px;background:var(--bg)}
.rep-mini.is-empty{font-family:var(--mono);font-size:12px;color:#6E6290}
.rep-row.is-mini{margin-bottom:4px}
.rep-row.is-mini .rep-lbl{font-size:10px}
.rep-row.is-mini .rep-track{height:14px;box-shadow:none}
.rep-hot-bar{border-radius:0;background:#F2EADB;height:18px}
.rep-hot-s{font-family:var(--mono);width:280px}
@media (max-width:860px){
  .rep-lbl{width:92px;font-size:10px}
  .rep-date{font-size:16px}
  .rep-mini{padding-left:12px}
}

/* Mailbox warning: the two buttons sit together; the "hidden" line is quiet. */
.mba-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mba-hidden{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-family:var(--mono);font-size:11px;color:var(--text3)}
.mba-hidden a{color:var(--accent);font-weight:700}
.mba-hidden.is-alone{border-top:0;margin-top:0;padding-top:0}

/* ══ DRILL-DOWN + THE WORK TABLES (R-124 follow-up, D-0077) ══════════════════ */
.rep-sub{font-family:var(--mono);font-size:11px;color:#6E6290;margin:-8px 0 12px}
.rep-row.is-click,.rep-hot.is-click,.rep-bar1.is-click{cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .rep-row.is-click:hover .rep-track,.rep-hot.is-click:hover .rep-track{box-shadow:3px 3px 0 var(--hard);transform:translate(-1px,-1px)}
  .rep-bar1.is-click:hover .rep-colbar{box-shadow:3px 0 0 var(--hard),0 0 0 2px #FFD36E}
  .rep-numbtn:hover{background:#7A4DE0;color:#FFF6E6}
}
.rep-row:not(.is-mini) .rep-lbl{width:150px}
.rep-meta{min-width:128px;display:flex;gap:6px;align-items:center;flex:none}
.rep-tis{font-family:var(--mono);font-size:10px;color:#6E6290;white-space:nowrap}
.rep-stuckchip{font-family:var(--mono);font-weight:700;font-size:10px;padding:1px 6px;background:#E6BC7A;color:#1A1033;border:2px solid #1A1033;cursor:pointer;white-space:nowrap}
.rep-legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:#3D3260;margin:-6px 0 10px}
.rep-legend span{display:inline-flex;align-items:center;gap:6px}
.rep-key{display:inline-block;width:11px;height:11px;border:2px solid #1A1033;background:var(--tone,#7A4DE0)}

.rep-tablecard{padding:0;overflow:hidden}
.rep-tablehead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border-bottom:2px solid #1A1033}
.rep-tablewrap{overflow-x:auto}
.rep-table{width:100%;border-collapse:collapse;min-width:760px}
.rep-th{text-align:left;padding:8px 10px;font-family:var(--pixel-label);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6E6290;white-space:nowrap;background:#F2EADB;border-bottom:2px solid #1A1033}
.rep-td{padding:8px 10px;font-size:13px;border-top:1px solid #E3D6BC;vertical-align:middle}
.rep-who{font-weight:700}
.rep-zero{font-family:var(--mono);color:#8C80AD}
.rep-numbtn{font-family:var(--mono);font-weight:700;font-size:13px;min-width:30px;padding:2px 8px;background:#FFF6E6;color:#1A1033;border:2px solid #1A1033;border-radius:0;box-shadow:2px 2px 0 var(--hard);cursor:pointer}
.rep-exp{border:0;background:none;cursor:pointer;color:#6E6290;font-size:12px}
.rep-role{font-family:var(--mono);font-size:11px;font-weight:700;padding:1px 7px;border:2px solid #1A1033;background:#9CC6E2;color:#1A1033}
.rep-role.is-bd{background:#CDB8FF}
.rep-tr.is-combined{background:#F2E6CF;font-weight:700}
.rep-tr.is-combined .rep-td{border-top:2px solid #1A1033}

/* THE EVIDENCE DRAWER (64-evidence-drawer.js): an opaque paper float over any page */
.ev-drawer{width:min(680px,94vw);max-height:84vh;display:flex;flex-direction:column;background:#FFF6E6;color:#1A1033;border:3px solid #000;border-radius:0;box-shadow:6px 6px 0 var(--hard);padding:0;overflow:hidden}
.ev-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:3px solid #000;background:#F2E6CF}
.ev-title{font-family:var(--pixel);font-size:12px;letter-spacing:.5px;line-height:1.5}
.ev-count{display:inline-block;margin-left:6px;padding:1px 8px;background:#7A4DE0;color:#FFF6E6;border:2px solid #000;font-family:var(--mono);font-size:11px;vertical-align:middle}
.ev-hint{font-size:13px;color:#3D3260;margin-top:6px;line-height:1.45}
.ev-task{padding:12px 18px 14px;border-bottom:3px solid #000;background:#FFF6E6}
.ev-task-lbl{font-family:var(--pixel-label,var(--pixel));font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:#6E6290}
.ev-task-text{font-weight:700;font-size:14px;line-height:1.4;margin:4px 0 10px;color:#1A1033}
.ev-task-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ev-task-acts .sel{max-width:220px}
.ev-showall{display:block;width:100%;padding:12px 18px;text-align:center}
.ev-body{overflow-y:auto;padding:4px 0}
.ev-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid #E3D6BC;border-left:4px solid transparent}
.ev-row.is-click{cursor:pointer}
.ev-row.is-click:focus-visible{background:#F2E6CF;border-left-color:#7A4DE0;outline:none}
@media (hover:hover) and (pointer:fine){ .ev-row.is-click:hover{background:#F2E6CF;border-left-color:#7A4DE0} }
.ev-primary{font-weight:700;font-size:14px}
.ev-secondary{font-size:12px;color:#6E6290;margin-top:1px}
.ev-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.ev-chip{font-family:var(--mono);font-size:11px;font-weight:700;padding:1px 7px;border:2px solid #1A1033;background:#FFF6E6}
.ev-when{font-family:var(--mono);font-size:11px;color:#6E6290}
.ev-empty,.ev-more{padding:22px 18px;font-family:var(--mono);font-size:12px;color:#6E6290;text-align:center}
@media (max-width:860px){
  .rep-row:not(.is-mini) .rep-lbl{width:92px}
  .rep-meta{min-width:0;flex-wrap:wrap}
  .ev-row{flex-direction:column;align-items:flex-start}
  .ev-side{flex-direction:row;align-items:center;flex-wrap:wrap}
}

/* ══ ADD LEAD (the shared form kit, retro) ═══════════════════════════════════ */
.al-sec{padding:14px 0;border-top:2px solid var(--glass-brd)}
.al-sec:first-child{border-top:0;padding-top:4px}
.al-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.al-ht{font-family:var(--pixel-label);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.al-tabs{display:flex;gap:6px}
.al-tabs .fc{border-radius:0;border:2px solid var(--ctl-brd);box-shadow:2px 2px 0 var(--hard)}
.al-tabs .fc.on{background:var(--accent);color:#FFF6E6;border-color:var(--glass-brd)}
.al-picked{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--bg);border:2px solid var(--glass-brd);box-shadow:2px 2px 0 var(--hard)}
.al-picked-n{font-weight:700}
.al-contact{padding:10px 12px 2px;margin-bottom:10px;background:var(--bg);border:2px solid var(--ctl-brd)}
.al-contact-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.al-contact-t{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.04em}
.modal .mh{border-bottom:2px solid var(--glass-brd);margin-bottom:14px}
.modal .mf{border-top:2px solid var(--glass-brd)}
.modal .mt{font-family:var(--pixel);font-weight:400;font-size:13px;letter-spacing:.5px;line-height:1.5}

/* evidence rows that carry words (an email) */
.ev-actions{display:flex;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.ev-row.tone-in{border-left-color:#7A4DE0}
.ev-row.tone-out{border-left-color:#9CC6E2}
.ev-text{margin-top:6px;font-size:13px;line-height:1.5;color:#1A1033;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.ev-fulllink{margin-top:6px;padding:0;border:0;background:none;font-family:var(--mono);font-size:11px;font-weight:700;color:#7A4DE0;cursor:pointer;text-decoration:underline}
.ev-fulltext{margin-top:8px;padding:10px 12px;max-height:260px;overflow:auto;background:#F2EADB;border:2px solid #1A1033;font-family:var(--mono);font-size:12px;line-height:1.55;white-space:pre-wrap}
.ev-fullerr{margin-top:6px;font-size:12px;color:#B23A2E}

/* ══ SEQUENCE EMAIL STEP: saved template or its own words, with the AI writer ═ */
.seq-mode{display:inline-flex;border:2px solid var(--glass-brd);box-shadow:2px 2px 0 var(--hard);align-self:flex-start}
.seq-seg{padding:6px 12px;border:0;border-right:2px solid var(--glass-brd);background:var(--card);color:var(--text);font-family:var(--mono);font-size:12px;font-weight:700;cursor:pointer;border-radius:0}
.seq-seg:last-child{border-right:0}
.seq-seg.on{background:var(--accent);color:#FFF6E6}
.seq-ai{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seq-ai .seq-in{flex:1 1 320px}
.seq-note{font-family:var(--mono);font-size:12px;color:var(--text2);padding:6px 10px;background:var(--bg);border-left:4px solid var(--accent)}
.seq-ta-tall{min-height:150px}
.seq-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.seq-chip{padding:3px 9px;border:2px solid var(--glass-brd);background:var(--card);color:var(--text);font-family:var(--mono);font-size:11px;font-weight:700;cursor:pointer;border-radius:0;box-shadow:2px 2px 0 var(--hard)}
@media (hover:hover) and (pointer:fine){ .seq-chip:hover,.seq-seg:not(.on):hover{background:var(--accent-l)} }
.seq-prev{padding:12px 14px;background:#FFF6E6;color:#1A1033;border:2px solid #1A1033;font-size:13px;line-height:1.55}
.seq-prev-h{font-family:var(--pixel-label);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6E6290;margin-bottom:8px}
.seq-prev-s{font-weight:700;margin-bottom:8px}
.seq-prev-empty{font-size:13px;color:#6E6290}
.seq-bad{background:#F5C4BC;color:#7A1F14;padding:0 3px}
.seq-prev-warn{margin-top:10px;font-size:12px;color:#B23A2E;font-weight:700}
.seq-card,.seq-sel,.seq-in,.seq-ta,.seq-badge,.seq-day,.seq-add,.seq-hint,.seq-delay input{border-radius:0}
.seq-card{border:2px solid var(--glass-brd);box-shadow:3px 3px 0 var(--hard)}

/* POP-UPS SIT ABOVE THE SIDEBAR. #layer (modals + drawers) was a stacking context
   at z-index 1, so with the sidebar open by default a wide window (the sequence
   builder is 1040px) slid under it and lost its left edge. */
#layer,body.ui-kit #layer{z-index:90}

/* ── A FINISHED SEND IS ONE LINE (owner, 6 Oct) ────────────────────────────── */
.sp-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 12px;margin-bottom:12px;background:var(--card-solid,#FFF6E3);border:2px solid #1A1033;font-size:13px;color:var(--text)}
.sp-line-t{font-weight:700}
.sp-line-n{color:var(--text3)}
.sp-line-x{margin-left:auto;background:transparent;border:0;cursor:pointer;font-size:18px;line-height:1;padding:0 2px;color:var(--text3)}

/* ── ALL EMAIL: Received / Sent ──────────────────────────────────────────── */
.am-srcs2{margin-top:8px}
.am-fulllink{margin-top:8px;background:transparent;border:0;padding:0;font:inherit;font-weight:700;color:var(--accent);cursor:pointer;text-decoration:underline}
.am-fulltext{margin-top:8px;padding:10px 12px;border:2px solid #1A1033;background:var(--card-solid,#FFF6E3);max-height:360px;overflow:auto}

/* ── THE INBOX: SELECT MANY, LABELS ─────────────────────────────────────────── */
.mb-chk{display:flex;align-items:flex-start;padding-top:4px;flex:none}
.mb-chk input{width:16px;height:16px;cursor:pointer;accent-color:#6D4AE6}
.mb-row.picked{background:var(--sel)}
.mb-selhead{display:flex;align-items:center;gap:8px;padding:7px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink3);cursor:pointer;background:var(--card);position:sticky;top:0;z-index:1}
.mb-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;background:var(--card-solid,#FFF6E3);border:2px solid #1A1033;border-width:2px 0}
.mb-bulk-n{font-weight:700;font-size:13px;margin-right:4px}
.mb-bulk-wait{font-size:12px;color:var(--ink3)}
.mb-lbls{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.mb-head .mb-lbls{margin-top:6px}
.mb-lbl{font-size:11px;font-weight:700;padding:1px 7px;border:1.5px solid #1A1033;background:#EFE6FF;color:#1A1033;white-space:nowrap}
.mb-lbl-more{background:transparent}
.mb-lm{width:min(420px,92vw);padding:0}
.mb-lm-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:2px solid #1A1033}
.mb-lm-list{max-height:min(320px,50vh);overflow:auto;padding:6px 8px}
.mb-lm-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--text)}
.mb-lm-row:hover{background:var(--hover)}
.mb-lm-box{width:18px;height:18px;border:2px solid #1A1033;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--card-solid,#fff);flex:none}
.mb-lm-box.st-all{background:#CDB8FF}
.mb-lm-box.st-some{background:#EFE6FF}
.mb-lm-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-lm-empty{padding:16px;color:var(--ink3);font-size:13px}
.mb-lm-new{display:flex;gap:8px;padding:12px 16px;border-top:2px solid #1A1033}
.mb-lm-new input{flex:1;min-width:0}
.mb-lm-err{padding:0 16px 12px;color:var(--red);font-size:13px}

/* ── LEAD INSIGHTS on the shared kit; the chart purple is the pastel one (owner, 6 Oct: "very poppy") ── */
.rep-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.rep-grid.rep-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rep-grid > .card{min-width:0}
.rep-meta.is-pct{min-width:44px;justify-content:flex-end}
.iv-top{display:flex;align-items:center;gap:18px;padding:16px 18px;margin-bottom:14px;background:#EFE6FF;border:2px solid #1A1033;box-shadow:4px 4px 0 var(--hard);color:#1A1033}
.iv-top-ico{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;font-size:24px;background:#E6BC7A;border:2px solid #1A1033}
@media (max-width:1100px){ .rep-grid.rep-grid3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .rep-grid,.rep-grid.rep-grid3{grid-template-columns:minmax(0,1fr)} }

.rep-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:14px 10px}
.rep-kpi{padding:10px 12px;background:#F2EADB;border:2px solid #1A1033}
.rep-kpi-v{font-family:var(--pixel-label);font-weight:700;font-size:20px;color:#1A1033;line-height:1.1}
.rep-kpi-l{font-family:var(--mono);font-size:11px;color:#6E6290;margin-top:5px}

/* ── PRIMARY SEQUENCE: a left-to-right switch (owner, 6 Oct) ───────────────── */
.wf-prim{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.wf-prim-l{font-family:var(--pixel-label);font-weight:700;font-size:12px;letter-spacing:.08em;color:#6E6290;text-transform:uppercase}
.wf-prim-sw{position:relative;width:46px;height:24px;padding:0;border:2px solid #1A1033;background:#F2EADB;cursor:pointer;box-shadow:2px 2px 0 var(--hard)}
.wf-prim-sw i{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#FFF6E6;border:2px solid #1A1033}
.wf-prim-sw.on{background:#A9C98C}
.wf-prim-sw.on i{left:24px;background:#1A1033}
.wf-prim-sw:active{transform:translate(2px,2px);box-shadow:none}
.wf-prim-badge{font-family:var(--mono);font-size:10px;font-weight:700;padding:1px 7px;border:2px solid #1A1033;background:#CDB8FF;color:#1A1033;text-transform:uppercase;letter-spacing:.06em}

.wf-lock{margin-bottom:12px;padding:10px 12px;background:#F8E3B7;border:2px solid #1A1033;font-size:13px;line-height:1.5;color:#1A1033}

.dash-rep-more{margin-top:12px;font-family:var(--mono);font-size:12px}
.dash-rep-more a{color:var(--accent);cursor:pointer;font-weight:700;text-decoration:underline}


/* ══ THE TEXT INK RULE (R-140, owner: "the visibility issue is persistent across
   the UI") ══════════════════════════════════════════════════════════════════
   Night keeps the PAPER: cards stay cream with dark ink; only the ground goes
   dark. So there are two kinds of surface and two kinds of ink, and a piece of
   text must get the ink of the surface it is standing on:
     * the PAGE GROUND (#content itself) — --text/--text2/--text3 are the cv-
       values: ink by day, cream/lavender by night;
     * every PAPER surface (the list below) — --text* go back to ink.
   Because this is done with the tokens, everything that reads var(--text*)
   (headings, .c-text2, tab bars, inline styles) is right without being touched,
   and by day the two sets are the same colours, so nothing changes.
   A page's title, its sub-line and its tab bar used to be dark ink on the dark
   ground (1.05:1) in every screen, and the contrast test could not see it
   because it skipped anything over the ground's grid image (test/helpers/
   contrast-probe.mjs now measures it). A NEW paper surface that is not in this
   list shows up in theme-contrast-smoke as cream text on cream — add it here. */
/* zero specificity on purpose: this only fills in where no other rule says a colour,
   so a selected tab or an accent link keeps its own colour on either surface */
:where(#content){
  --text:var(--cv-text); --text2:var(--cv-text2); --text3:var(--cv-text3);
  --accent:var(--cv-accent); --purple:var(--cv-purple); --amber:var(--cv-amber); --gold:var(--cv-gold);
  --red:var(--cv-red); --green:var(--cv-green); --teal:var(--cv-teal);
  /* the kit's own aliases are resolved once at :root, so they are restated per surface */
  --ink:var(--text); --ink2:var(--text2); --ink3:var(--text3);
  color:var(--text);
}
html :where(#content :where(
  .card,.tbl-wrap,.dt-wrap,.modal,.drawer,.dw,.dwr-pane,.detail-panel,.strip,.tbar,.pgtabs,.kb-card,.kb-col,.flt-panel,.id-chip,.tzp-list,.ld-box,.fd-person,.fd-form,.fd-pill,.fd-chip,.fd-diag,.fd-block-box,.ms-box,.ms-preview,.ms-tag,.ms-step,.ms-toolbar,.ms-tb,.ms-tb-sel,
  .hz-bar,.hz-btn,.hz-count,.hz-pg,.hz-search,.lp-chip,.lp-wrap,.na-act,.na-hidden,
  .am-src,.am-body,.am-text,.am-list,.am-fulltext,.am-head,.banner,.briefing-card,.rem-card,.rem-panel,.rem-pill-quiet,
  .email-card,.failed-panel,.dash-tile,.cmp-prev,.cmp-fld select,.cmp-fld .cmp-static,.cp-found,.cpill,
  .chipf,.chipf-c,.fc,.fsel,.ev-chip,.ev-drawer,.gs-panel,.lx-chip,.lx-contact,.lx-facts,.lx-item,.lx-sel,
  .lxc-slot,.lxi-card,.lxi-row,.lxp-card,.mb-body,.mb-head,.mb-list,.mb-msg,.mb-read,.mb-bulk,.mb-lm-box,
  .mb-selhead,.mba-card,.rep-date,.rep-mini,.rep-numbtn,.rep-pill,.rep-hot-bar,.rw-panel,.seq-card,.seq-chip,
  .seq-note,.seq-prev,.seq-seg,.seq-sel,.seq-in,.seq-ta,.sp-line,.switcher,.toast,.txta,.al-contact,.al-picked,
  .win-bar,.win-chip,.bdg-gray,.ot-chip,.ind-bg,.empty-ico,.salary-range-wrap,
  .inp,.sel,input,select,textarea,.btn-outline,.btn-primary,.btn-danger,.google-btn,th,.bdg,.pill,
  [class*="bdg-"],
  /* paper made inline: style="background:var(--card)" / var(--bg) / var(--card-solid) / #fff */
  [style*="background:var(--card)"],[style*="background: var(--card)"],
  [style*="background:var(--card-solid)"],[style*="background: var(--card-solid)"],
  [style*="background:var(--bg)"],[style*="background: var(--bg)"],
  [style*="background:var(--bg2)"],[style*="background: var(--bg2)"],
  [style*="background:var(--green-l)"],[style*="background:var(--amber-l)"],[style*="background:var(--red-l)"],
  [style*="background:var(--purple-l)"],[style*="background:var(--teal-l)"],[style*="background:var(--gold-l)"],
  [style*="background:var(--accent)"],[style*="background: var(--accent)"],[style*="background:var(--accent-d)"],[style*="background:var(--accent-m)"],
  [style*="background:#fff"],[style*="background: #fff"],[style*="background:white"]
)){
  --text:#1A1033; --text2:#3D3260; --text3:#625782;
  --accent:#7A4DE0; --purple:#7A4DE0; --amber:#A0540C; --gold:#A0540C;
  --red:#B23A2E; --green:#276B2B; --teal:#2F6F8F;
  --ink:var(--text); --ink2:var(--text2); --ink3:var(--text3);
  color:var(--text);
}

/* an error card is pink paper: faded ink on it was 3.9:1, so its helper text uses the darker ink */
.briefing-card.is-error{--text3:#3D3260}

/* "+ New" (R-135): an entry — or the whole button — the person has no permission for is GREYED, never hidden. */
body.ui-kit .tb-new.is-off{opacity:.55;filter:grayscale(1);box-shadow:none;cursor:not-allowed}
.tb-newrow.is-off{opacity:.5;cursor:not-allowed}
.tb-newrow.is-off:hover,.tb-newrow.is-off:focus-visible{background:transparent;border-left-color:transparent}

/* a label's own colour, as a small square beside its name (R-136) */
.mb-ldot{display:inline-block;width:9px;height:9px;margin-right:5px;border:1px solid #1A1033;vertical-align:-1px;flex:none}

/* An opened job row (R-134): interviews this week, best matches, quick actions */
.lx-hint{font-weight:400;letter-spacing:0;text-transform:none;margin-left:6px;color:var(--text3)}
.lx-iv{display:flex;gap:12px;align-items:baseline;font-size:13px;padding:3px 0}
.lx-iv b{font-family:var(--mono);font-size:12px;min-width:150px}
.lx-match{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--border)}
.lx-match:last-child{border-bottom:0}
.lx-match-who{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px}
.lx-match-who span{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-score{font-family:var(--mono);font-weight:700;font-size:12px;border:2px solid var(--glass-brd);padding:1px 6px;background:var(--card)}
.lx-link.is-off{opacity:.45;cursor:not-allowed}
.lx-acts{display:flex;flex-direction:column;gap:6px}
.lx-acts .btn{justify-content:center}
.lx-acts .btn[disabled]{opacity:.5;cursor:not-allowed}

/* "How the AI writes for you" (D-0082) */
.ais-box{width:100%;min-height:96px;font-size:14px;line-height:1.5;resize:vertical}
.ais-box-sm{min-height:56px;margin:6px 0}
.ais-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 10px;flex-wrap:wrap}
.ais-actions{display:flex;gap:8px;flex-wrap:wrap}
.ais-on{font-weight:700;color:var(--green)}
.ais-off{font-weight:700;color:var(--amber)}
.ais-sample{margin-top:14px;padding:12px 14px;background:var(--bg);border:2px solid var(--glass-brd)}
.ais-sample.is-bad{border-style:dashed;font-size:13px;line-height:1.5}
.ais-subj{font-weight:700;margin:6px 0 8px}
.ais-body{white-space:pre-wrap;font-size:14px;line-height:1.55}
.ais-never{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.ais-team{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}

/* the job page's funnel scrolls sideways on a phone instead of squeezing eleven columns (25-workflow-bd.js) */
.rep-scroll{overflow-x:auto}
.rep-cols-wide{min-width:560px}

/* ══════════════════════════════════════════════════════════════════════════
   THE LAST OF THE OLD LOOK + ONE TYPE SCALE (7 Oct — owner: "some buttons and fonts have not been transitioned to the
   new theme … the stage, industry, date and the dropdown, send all pending, the pipeline funnel, candidate status
   and ID … the fonts are not consistent")
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ONE TYPE SCALE for plain text: 10 · 11 · 12 · 13 · 14 · 16 · 18 · 20 · 24 · 28 · 36. The half-sizes (12.5, 13.5 …)
   made neighbouring text look almost-but-not-quite the same. The utility classes keep their names (a test pins
   name = value in ui.css) and are snapped to the scale HERE, so removing this file's link still restores the old sizes. */
.fs-9,.fs-9_5{font-size:10px}
.fs-10_5{font-size:11px}
.fs-11_5{font-size:12px}
.fs-12_5{font-size:13px}
.fs-13_5{font-size:14px}
.fs-15,.fs-17{font-size:16px}
.fs-19{font-size:20px}
.fs-22{font-size:24px}

/* ── ONE VOICE FOR CONTROLS: every box, dropdown and date field is the same family, size and weight on a desk;
   compact ones (.sel-sm) are 12. Phone keeps its own 16px (mobile.css — iOS zooms into anything smaller). */
@media (min-width:861px){
  .sel,.inp,select,textarea,
  input[type=text],input[type=email],input[type=date],input[type=datetime-local],input[type=time],input[type=search],
  input[type=number],input[type=password],input[type=tel],input[type=url]{font-family:var(--font);font-size:13px;font-weight:500;line-height:1.35}
  .sel-sm,select.sel-sm{font-size:12px;font-weight:600}
  .btn{font-family:var(--font);font-size:13px}
  .btn-sm,.btn-xs{font-size:12px}
}
.sel-sm,select.sel-sm{padding:4px 8px;width:auto;max-width:100%}
.sel-inline{display:inline-block}

/* a state select (a lead's or a card's stage): calm card, ONE coloured stripe says the state */
.sel-state{border-left:5px solid var(--sc,var(--ctl-brd));font-weight:700;padding-left:8px}

/* filter buttons that open a checklist (Stage · Industry · Date on Leads) */
.flt-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.flt-btn.is-on{border-color:var(--accent);background:var(--accent-l);color:var(--accent)}
.flt-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:9000;background:var(--card-solid);color:var(--text);border:2px solid var(--glass-brd);border-radius:0;box-shadow:var(--sh2)}

/* status chips (.pill): square, ink edge, MUTED state fill, mono — the same chip everywhere (candidate status, lead flags…) */
.pill{border:2px solid #1A1033;border-radius:0;padding:1px 8px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.02em;color:#1A1033;background:#EFE5D0}
.pill i{border-radius:0;width:7px;height:7px;background:#1A1033}
.pill.ok{background:var(--st-go);color:#1A1033}
.pill.warn{background:var(--st-wait);color:#1A1033}
.pill.bad{background:var(--st-stop);color:#1A1033}
.pill.info{background:var(--st-info);color:#1A1033}
.pill.cool{background:#C9B8EE;color:#1A1033}
.pill.mute{background:#E7DCC6;color:#3D3260}
.pill.out{background:transparent}
/* a person's id (CN-0042): a small square tag, never loose grey text */
.id-chip{display:inline-block;padding:0 5px;border:1px solid var(--ctl-brd);background:var(--card);color:var(--text2);font-family:var(--mono);font-weight:700;font-size:11px;line-height:1.5;white-space:nowrap;vertical-align:baseline}

/* kanban */
.kb-col{background:var(--bg);border:2px solid var(--glass-brd);border-radius:0;padding:10px;transition:background .1s}
.kb-card{background:var(--card);border:2px solid var(--ctl-brd);border-radius:0;box-shadow:2px 2px 0 var(--hard);padding:9px 10px}

/* ── the safety net: any control still carrying an inline radius (or the soft grey edge) is squared and given the ink edge.
   New markup uses classes (btn / sel / flt-btn …); this is for the ones not yet moved, so nothing on screen is left behind. */
:where(#content,#layer) :is(button,select,input:not([type=checkbox]):not([type=radio]),textarea)[style*="border-radius"]{border-radius:0!important}
:where(#content,#layer) :is(button,select,input:not([type=checkbox]):not([type=radio]),textarea)[style*="border:1px solid var(--border"],
:where(#content,#layer) :is(button,select,input:not([type=checkbox]):not([type=radio]),textarea)[style*="border:1.5px solid var(--border"],
:where(#content,#layer) :is(button,select,input:not([type=checkbox]):not([type=radio]),textarea)[style*="border: 1px solid var(--border"]{border-width:2px!important;border-color:var(--ctl-brd)!important}
:where(#content,#layer) button[style*="background:var(--accent);color:#fff"]{background:var(--sun)!important;color:var(--on-sun)!important;border:2px solid var(--glass-brd)!important;box-shadow:var(--sh)}
.rw-btn{border-radius:0;border:2px solid var(--ctl-brd)}
/* the toolbar search box (UI.toolbar) — square ink edge like every other control (it was the old rounded pill) */
.tbar-search input,.hz-search{border:2px solid var(--ctl-brd);border-radius:0;background:var(--card)}
.tbar-search input:focus,.hz-search:focus{border-color:var(--accent);box-shadow:3px 3px 0 var(--accent-l)}

/* ── "can this company be added?" (R-157, D-0090): the answer a person sees before they press Add.
   Same family as the other callouts: paper, ink edge, a light tint for the state, ink text. */
.ld-box{padding:9px 12px;margin:8px 0;border:2px solid var(--ctl-brd);background:var(--card-solid);color:var(--text);font-size:12.5px;line-height:1.45}
.ld-box strong{display:block;margin-bottom:2px}
.ld-box.is-stop{background:var(--red-l)}
.ld-box.is-info{background:var(--info-l,var(--accent-l))}
.ld-box.is-go{background:var(--green-l)}

/* ── Find Leads (R-157): cards, the accept window, saved searches ─────────────────────────────────────── */
.fd-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fd-between{justify-content:space-between}
.fd-end{justify-content:flex-end;margin-top:10px}
.fd-grow{flex:1;min-width:220px}
.fd-wide{width:100%;box-sizing:border-box}
.fd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0;align-items:start}
.fd-label{font-size:12px;font-weight:700;margin:12px 0 4px;color:var(--text)}
.fd-hint{font-size:12px;color:var(--text3);line-height:1.4}
.fd-group{margin:16px 0 6px;padding-top:2px}
.fd-strong{font-weight:700}
.fd-pad{margin-top:18px}
.fd-card{padding:14px 16px;margin-bottom:10px}
.fd-card.is-blocked{opacity:.85}
.fd-pills{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.fd-chip,.fd-pill{display:inline-block;padding:2px 9px;border:2px solid var(--ctl-brd);background:var(--card-solid);color:var(--text);font-size:11.5px;line-height:1.5}
.fd-pill{cursor:pointer;font-family:inherit}
/* the selected tint is see-through; laid straight on the dark night ground it left ink-coloured text on dark (1.05:1) — keep the paper under it */
.fd-pill.on{background:linear-gradient(var(--accent-l),var(--accent-l)),var(--card-solid);font-weight:700}
.fd-tag{display:inline-block;padding:0 6px;font-size:11px;font-weight:700;border:2px solid var(--ctl-brd);background:var(--card-solid)}
.fd-posts{font-size:12.5px;line-height:1.6;flex:1;min-width:220px}
.fd-empty{padding:34px 16px;text-align:center;color:var(--text3);font-size:13px;line-height:1.7}
.fd-empty .btn{margin-top:10px}
.fd-toolbar{margin-bottom:10px}
.fd-form{padding:14px 16px;margin-bottom:12px}
.fd-num{width:70px}
.fd-use{display:inline-flex;gap:5px;align-items:center;font-size:12.5px;cursor:pointer}
.fd-person{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;margin:6px 0;border:2px solid var(--ctl-brd);background:var(--card-solid)}
.fd-person-main{display:flex;flex-direction:column;min-width:180px;flex:1}
.fd-manual{margin:10px 0;font-size:12.5px}
.fd-manual summary{cursor:pointer;font-weight:700}
.fd-diag{margin-top:10px;font-size:12.5px;line-height:1.6}
.fd-mhead{padding:16px 20px;border-bottom:1px solid var(--border);font-weight:700}
.fd-mbody{padding:6px 20px 14px;max-height:66vh;overflow:auto}
.fd-mfoot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
@media (max-width:640px){.fd-grid{grid-template-columns:1fr}}
.fd-block{display:flex;align-items:flex-start;margin-top:8px;line-height:1.4}
.fd-block input{margin-top:3px}
.fd-detail{margin-top:8px;padding-top:6px;border-top:2px dashed var(--ctl-brd);font-size:12.5px;line-height:1.6}

/* Find Leads form (8 Oct 2026): ticked titles, the posted-within slider, picked industries and companies */
.fd-block-box{border:2px solid var(--ctl-brd);background:var(--card-solid);padding:8px 10px;margin:8px 0}
/* The posted-within slider in the retro kit: a square, hard-edged track that fills with the sun yellow, and a block thumb
   with the same border and hard shadow as a primary button. --fd-pct (set by the page) is how far along it is. */
.fd-slider{-webkit-appearance:none;appearance:none;display:block;height:28px;margin:4px 0 0;padding:0;background:transparent;border:0;cursor:pointer}
.fd-slider:focus{outline:none}
.fd-slider::-webkit-slider-runnable-track{height:12px;border:2px solid var(--ctl-brd);border-radius:0;background:linear-gradient(to right,var(--sun) var(--fd-pct,50%),var(--card-solid) var(--fd-pct,50%))}
.fd-slider::-moz-range-track{height:8px;border:2px solid var(--ctl-brd);border-radius:0;background:var(--card-solid)}
.fd-slider::-moz-range-progress{height:8px;background:var(--sun)}
.fd-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:26px;margin-top:-9px;border:2px solid var(--glass-brd);border-radius:0;background:var(--sun);box-shadow:var(--sh)}
.fd-slider::-moz-range-thumb{width:12px;height:22px;border:2px solid var(--glass-brd);border-radius:0;background:var(--sun);box-shadow:var(--sh)}
.fd-slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ctl-brd);outline-offset:2px}
.fd-slider:focus-visible::-moz-range-thumb{outline:2px solid var(--ctl-brd);outline-offset:2px}
.fd-x{border:0;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer;padding:0 0 0 4px}
.fd-pill.on{border-color:var(--text)}

/* My Setup (8 Oct 2026): the person's own outreach — steps, mailboxes, who each writes for */
.ms-step{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:2px dashed var(--ctl-brd)}
.ms-step:first-of-type{border-top:0}
.ms-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:2px solid var(--ctl-brd);background:var(--card-solid);font-weight:700;flex:none}
.ms-step.is-done .ms-num{background:var(--st-go,#A9C98C)}
.ms-box{border:2px solid var(--ctl-brd);background:var(--card-solid);padding:10px 12px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.ms-for{font-size:12.5px;line-height:1.5}
.ms-for.is-none{background:var(--accent-l)}
.ms-tag{display:inline-block;padding:1px 8px;font-size:11px;font-weight:700;border:2px solid var(--ctl-brd);white-space:nowrap}
.ms-tag.is-ok{background:var(--st-go,#A9C98C)}
.ms-tag.is-warn{background:var(--st-wait,#F4D58D)}
.ms-preview{border:2px dashed var(--ctl-brd);background:var(--card-solid);padding:10px 12px;font-size:12.5px;line-height:1.5}

/* My Setup signature window: the formatting bar, the editable signature, the logo row */
.ms-toolbar{display:flex;flex-wrap:wrap;gap:4px;align-items:center;border:2px solid var(--ctl-brd);border-bottom:0;background:var(--card-solid);padding:4px 6px}
.ms-tb{min-width:30px;height:28px;padding:0 8px;border:2px solid var(--ctl-brd);background:var(--card-solid);color:var(--text);font:inherit;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ms-tb:hover{background:var(--accent-l)}
.ms-tb-sel{height:28px;padding:0 4px;font-size:12px;width:auto;max-width:130px}
.ms-tb-col{position:relative;font-weight:700}
.ms-tb-col input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ms-sig{min-height:90px;border-style:solid;background:#fff;color:#222;cursor:text}
.ms-sig:focus{outline:2px solid var(--accent);outline-offset:1px}
.ms-logo{margin:10px 0 2px}
.ms-logo-thumb{height:40px;width:auto;max-width:140px;border:2px solid var(--ctl-brd);background:#fff;padding:2px}
.ms-swatch{display:inline-block;width:14px;height:14px;border:2px solid var(--ctl-brd);vertical-align:middle;margin-left:4px}