/* ============================================================
   lib/brand.css — shared house style for Career Services tools.
   Tokens, base layout, controls, licence viewer, responsive rules.
   Tool-specific styles stay in each tool's own <style> block.
   ============================================================ */
/* ============================================================
   FONTS — embedded unmodified under the SIL Open Font License 1.1.
   Uncut Sans: Copyright (c) 2022 Kasper Nordkvist.
     "Uncut Sans" is trademark of Kasper Nordkvist.
     https://uncut.wtf/sans-serif/uncut-sans.html
   Geist Mono: Copyright (c) 2023 Vercel, in collaboration with
     basement.studio
   Font files live in ../fonts/ and must travel with these pages.
   Full licence texts: see the Licences link in the tool, the
   licenses/ folder, or http://scripts.sil.org/OFL
   ============================================================ */
@font-face{font-family:"Uncut Sans";src:url("../fonts/UncutSans-Variable.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ============================================================
   TOKENS — every brand value lives here and nowhere else.
   ============================================================ */
:root{
  /* Core brand palette */
  --anchor-blue:#307FE2;
  --link-pink:#EB6FBD;
  --open-mint:#47D7AC;
  --signal-yellow:#E3E935;
  --bright-orange:#EE5340;
  --framework-gray:#B2B4B2;
  --light-concrete:#D9D9D6;
  --core-black:#1E2021;
  --white:#FFFFFF;

  /* UI roles */
  --color-bg:var(--white);
  --color-surface:var(--white);
  --color-sunk:#F4F4F2;
  --color-text:var(--core-black);
  --color-muted:#6E7273;
  --color-line:var(--light-concrete);
  --color-line-strong:var(--core-black);
  --color-accent:var(--anchor-blue);
  --color-warn:#8A3A2C;
  --color-warn-bg:#FDEDEA;

  --font-ui:"Uncut Sans",system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;

  --radius-control:0;
  --track:1px;
  --thumb:12px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:20px;
  --space-5:32px;
  --space-6:48px;

  --ease-snap:cubic-bezier(.2,0,0,1);
  --dur:120ms;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:13px;
  line-height:1.45;
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}

/* ---- masthead: mirrors the deck's running header ---- */
.masthead{
  display:flex;align-items:center;gap:var(--space-3);
  height:34px;padding:0 var(--space-4);
  border-bottom:1px solid var(--color-line-strong);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;
}
.masthead .arrow{color:var(--color-muted)}
.masthead .spacer{flex:1;min-width:var(--space-2)}
.masthead .dim{color:var(--color-muted)}
.masthead a.home{color:inherit;text-decoration:none}
.masthead a.home:hover{color:var(--color-accent)}
.masthead a.home:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* ---- tool switcher: full-height tabs in the masthead ---- */
.toolnav{display:flex;align-self:stretch;border-left:1px solid var(--color-line)}
.toolnav a{
  display:flex;align-items:center;padding:0 var(--space-3);
  border-right:1px solid var(--color-line);
  color:var(--color-muted);text-decoration:none;font-size:10px;
}
.toolnav a:hover{color:var(--color-text);background:var(--color-sunk)}
.toolnav a[aria-current=page]{background:var(--color-text);color:var(--white)}
.toolnav a:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}

.app{display:grid;grid-template-columns:316px 1fr;height:calc(100vh - 34px);height:calc(100dvh - 34px)}

/* ---- panel ---- */
.panel{
  background:var(--color-surface);
  border-right:1px solid var(--color-line-strong);
  overflow-y:auto;
}
.group{padding:var(--space-4);border-bottom:1px solid var(--color-line)}
.group:last-child{border-bottom:0}
.group>h2{
  margin:0 0 var(--space-3);
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--color-muted);
}


/* ---- fields ---- */
.field{margin-bottom:var(--space-4)}
.field:last-child{margin-bottom:0}
.field-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-2)}
.field-head label{font-size:12px}
.readout{
  font-family:var(--font-mono);font-size:11px;color:var(--color-text);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.readout em{font-style:normal;color:var(--color-muted)}

/* ---- slider: 1px rule, square thumb, filled left half ---- */
.slider{position:relative;height:18px;display:flex;align-items:center}
.slider::before{
  content:"";position:absolute;left:0;right:0;height:var(--track);
  background:var(--color-line);
}
.slider::after{
  content:"";position:absolute;left:0;height:var(--track);
  width:var(--fill,0%);background:var(--color-text);
}
.slider input[type=range]{
  -webkit-appearance:none;appearance:none;position:relative;
  width:100%;height:18px;margin:0;background:transparent;cursor:pointer;
}
.slider input[type=range]::-webkit-slider-runnable-track{height:var(--track);background:transparent}
.slider input[type=range]::-moz-range-track{height:var(--track);background:transparent}
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:var(--thumb);height:var(--thumb);
  margin-top:calc((var(--thumb) / -2) + (var(--track) / 2));
  background:var(--color-text);border:0;border-radius:0;
}
.slider input[type=range]::-moz-range-thumb{
  width:var(--thumb);height:var(--thumb);background:var(--color-text);
  border:0;border-radius:0;
}
.slider input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--color-accent);outline-offset:2px}
.slider.disabled{opacity:.35;pointer-events:none}

/* ---- segmented ---- */
.seg{display:flex;border:1px solid var(--color-line-strong)}
.seg button{
  flex:1;border:0;background:var(--color-surface);color:var(--color-muted);
  font:inherit;font-size:12px;padding:6px var(--space-2);cursor:pointer;
  border-radius:0;
}
.seg button+button{border-left:1px solid var(--color-line-strong)}
.seg button[aria-pressed=true]{background:var(--color-text);color:var(--white)}
.seg.mini{width:72px}
.seg.mini button{font-family:var(--font-mono);font-size:10px;padding:2px var(--space-2)}

/* ---- toggle: rectangle, square knob, snap ease ---- */
.toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.toggle label{font-size:12px}
.switch{
  width:34px;height:18px;flex:none;padding:0;position:relative;cursor:pointer;
  border:1px solid var(--color-line-strong);background:var(--color-surface);border-radius:0;
}
.switch::after{
  content:"";position:absolute;top:1px;left:1px;width:14px;height:14px;
  background:var(--color-text);
  transition:transform var(--dur) var(--ease-snap),background var(--dur) var(--ease-snap);
}
.switch[aria-pressed=true]{background:var(--anchor-blue);border-color:var(--color-text)}
.switch[aria-pressed=true]::after{transform:translateX(16px);background:var(--white)}
.switch:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* ---- colour select ---- */
.select{position:relative}
.select-trigger{
  width:100%;display:flex;align-items:center;gap:var(--space-2);
  padding:6px var(--space-2);cursor:pointer;border-radius:0;
  border:1px solid var(--color-line-strong);background:var(--color-surface);
  font:inherit;font-size:12px;color:var(--color-text);text-align:left;
}
.select-trigger:hover{border-color:var(--color-text)}
.select-trigger:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-caret{
  flex:none;font-family:var(--font-mono);font-size:9px;color:var(--color-muted);
  transition:transform var(--dur) var(--ease-snap);
}
.select-trigger[aria-expanded=true] .select-caret{transform:rotate(180deg)}
.select-list{
  border:1px solid var(--color-line-strong);border-top:0;
  max-height:242px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--color-surface);
}
.select-group{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--color-muted);padding:var(--space-2) var(--space-2) var(--space-1);
  border-bottom:1px solid var(--color-line);background:var(--color-sunk);
  position:sticky;top:0;z-index:1;
}
.select-option{
  width:100%;display:flex;align-items:center;gap:var(--space-2);
  padding:5px var(--space-2);cursor:pointer;border:0;border-radius:0;
  background:var(--color-surface);font:inherit;font-size:12px;
  color:var(--color-text);text-align:left;
}
.select-option:hover,.select-option.active{background:var(--color-sunk)}
.select-option[aria-selected=true]{background:var(--color-text);color:var(--white)}
.select-option[aria-selected=true] .sw{box-shadow:0 0 0 1px var(--white)}
.sw{
  flex:none;width:14px;height:14px;border:1px solid var(--color-line);
  background-color:var(--color-surface);
}
.sw.transparent{
  background-image:linear-gradient(45deg,var(--color-line) 25%,transparent 25%,transparent 75%,var(--color-line) 75%),
                   linear-gradient(45deg,var(--color-line) 25%,transparent 25%,transparent 75%,var(--color-line) 75%);
  background-size:8px 8px;background-position:0 0,4px 4px;
}

/* custom colours: removable rows, and a hex field pinned to the list's foot */
.select-custom{display:flex}
.select-custom .select-option{flex:1;min-width:0}
.select-remove{
  flex:none;width:30px;border:0;border-left:1px solid var(--color-line);border-radius:0;
  background:var(--color-surface);color:var(--color-muted);cursor:pointer;
  font-family:var(--font-mono);font-size:10px;
}
.select-remove:hover{background:var(--color-sunk);color:var(--color-text)}
.select-remove:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
.select-add{
  position:sticky;bottom:0;z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  padding:var(--space-2);border-top:1px solid var(--color-line-strong);
  background:var(--color-surface);
}
.select-hex{
  flex:1;min-width:0;padding:4px 6px;border-radius:0;
  border:1px solid var(--color-line-strong);background:var(--color-surface);color:var(--color-text);
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
}
.select-hex::placeholder{color:var(--color-muted)}
.select-hex[aria-invalid=true]{border-color:var(--color-warn)}
.select-hex:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}
.select-addbtn{
  flex:none;padding:5px var(--space-2);border-radius:0;cursor:pointer;
  border:1px solid var(--color-text);background:var(--color-text);color:var(--white);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
}
.select-addbtn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.select-hexerr{flex-basis:100%;font-family:var(--font-mono);font-size:10px;color:var(--color-warn)}

/* ---- stage ---- */
.stage{display:flex;flex-direction:column;min-width:0}
.stage-bar{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--color-line);
}
.stage-bar .spacer{flex:1}
.stat{font-family:var(--font-mono);font-size:11px;color:var(--color-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat b{color:var(--color-text);font-weight:500}

button.action{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:7px var(--space-3);border-radius:0;
  border:1px solid var(--color-text);background:var(--color-text);color:var(--white);cursor:pointer;
}
button.action.ghost{background:var(--color-surface);color:var(--color-text)}
button.action:disabled{opacity:.3;cursor:default}
button.action:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

.viewport{flex:1;min-height:0;display:grid;place-items:center;padding:var(--space-5);overflow:auto}
#preview{max-width:100%;max-height:100%;outline:1px solid var(--color-line)}
.empty{color:var(--color-muted);text-align:center;max-width:34ch;font-size:12px}

.notice{
  padding:var(--space-2) var(--space-3);
  background:var(--color-warn-bg);color:var(--color-warn);font-size:11px;
  font-family:var(--font-mono);line-height:1.5;
}
.group .notice{margin-top:var(--space-2)}
.stage .notice{margin:var(--space-3) var(--space-4) 0}

/* ---- licence viewer ---- */
.lic-link{
  position:fixed;right:var(--space-4);bottom:var(--space-3);z-index:20;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--color-muted);background:var(--color-surface);
  border:1px solid var(--color-line);padding:5px var(--space-2);cursor:pointer;border-radius:0;
}
.lic-link:hover{color:var(--color-text);border-color:var(--color-line-strong)}
.lic-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.lic-overlay{
  position:fixed;inset:0;z-index:30;background:rgba(30,32,33,.55);
  display:flex;align-items:center;justify-content:center;padding:var(--space-4);
}
.lic-panel{
  background:var(--color-surface);border:1px solid var(--color-line-strong);
  width:min(760px,100%);
  max-height:86vh;max-height:86dvh;   /* dvh keeps it clear of mobile browser chrome */
  display:flex;flex-direction:column;min-height:0;
}
/* Head and tabs must not shrink: without flex:none a long licence body
   squeezes them and the text rides over the tab bar. */
.lic-head{
  flex:none;
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-line-strong);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
}
.lic-head .spacer{flex:1}
.lic-close{
  flex:none;
  border:1px solid var(--color-line-strong);background:var(--color-surface);color:var(--color-text);
  font-family:var(--font-mono);font-size:11px;line-height:1;padding:5px 9px;cursor:pointer;border-radius:0;
}
.lic-close:hover{background:var(--color-text);color:var(--white)}
.lic-tabs{
  flex:none;
  display:flex;border-bottom:1px solid var(--color-line);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.lic-tabs button{
  flex:none;
  border:0;border-right:1px solid var(--color-line);background:var(--color-surface);
  color:var(--color-muted);font:inherit;font-size:12px;padding:8px var(--space-3);
  cursor:pointer;white-space:nowrap;border-radius:0;
}
.lic-tabs button[aria-selected=true]{background:var(--color-text);color:var(--white)}
.lic-body{
  flex:1 1 auto;min-height:0;
  padding:var(--space-4);overflow-y:auto;overscroll-behavior:contain;
  font-family:var(--font-mono);font-size:11px;line-height:1.65;
  white-space:pre-wrap;overflow-wrap:anywhere;color:var(--color-text);
}

@media (max-width:860px){
  .app{grid-template-columns:1fr;height:auto}
  .panel{border-right:0;border-bottom:1px solid var(--color-line-strong);order:2;overflow-y:visible}
  .stage{order:1;height:60vh;min-height:340px}
  .stage-bar{flex-wrap:wrap;row-gap:var(--space-2)}
  .stage-bar .spacer{flex-basis:100%;height:0}
  .lic-overlay{padding:var(--space-2)}
  .lic-panel{max-height:92vh;max-height:92dvh}
}
@media (max-width:560px){
  .masthead{gap:var(--space-2);padding:0 var(--space-3);font-size:10px}
  .masthead #buildStamp{display:none}
  .group{padding:var(--space-3)}
  .viewport{padding:var(--space-3)}
  .lic-body{padding:var(--space-3);font-size:10px}
  .lic-head{padding:var(--space-2) var(--space-3)}
  .lic-link{right:var(--space-3);bottom:var(--space-2)}
}
/* Long grid readouts shouldn't force the stage bar wider than the screen. */
.stat{overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}