/* Interview QA — Flatpay brand. Tokens and chrome shared with AC Call Tracker. */
:root{
  --ink:#000; --paper:#fff; --grey:#f1f2f1; --line:#e4e6e4;
  --muted:#6e6e6e; --faint:#9a9a9a;
  --mint:#92f8c2; --mint-soft:#dbf9eb;
  --peach:#f8b185; --pink:#f8b5d3; --cyan:#9beef8; --peri:#afbdfc;
  --good:#1d7a4a; --warn:#c2382f;
  --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:Calibri,"Segoe UI",-apple-system,system-ui,sans-serif;
  background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{font-family:"Arial Black","Arial Bold",Arial,sans-serif;letter-spacing:-.01em;margin:0}
button,input{font-family:inherit;font-size:16px}

.screen{max-width:760px;margin:0 auto;padding:16px}
.screen.wide{max-width:1040px}
.center{min-height:100dvh;display:flex;align-items:center;justify-content:center}

/* ---------------------------------------------------------- sign in */
#signin{background:var(--ink);color:var(--paper);max-width:none}
.signin-card{width:100%;max-width:420px;padding:24px}
/* Flatpay logo — the SVG uses currentColor, so `color` drives it */
.brand{display:flex;align-items:center;margin-bottom:34px;color:var(--paper)}
.brand .logo{width:132px;height:auto;display:block}
.brand.sm{margin-bottom:0;color:var(--ink)}
.brand.sm .logo{width:104px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:4px 0 14px}
#signin h1{font-size:34px;line-height:1.05;margin-bottom:10px}
#signin .sub{color:#bebebe;font-size:15px;line-height:1.45;margin:0 0 26px}
#signin label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mint);margin-bottom:8px}
#signin input{width:100%;padding:15px 16px;border-radius:12px;border:1px solid #333;
  background:#151515;color:var(--paper);text-transform:uppercase;letter-spacing:.05em}
#signin input:focus{outline:2px solid var(--mint);border-color:transparent}
#signin .primary{background:var(--mint);color:var(--ink);width:100%;margin-top:14px}

/* ---------------------------------------------------------- chrome */
.bar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:6px 0 14px}
.bar h2{font-size:26px;margin-top:6px}
.chip{display:inline-block;background:var(--mint);color:var(--ink);
  font-family:"Arial Black",Arial,sans-serif;font-size:10px;letter-spacing:.06em;
  padding:5px 10px;border-radius:20px}
.chip.admin{background:var(--peri)}

/* The sign-in fields are a username and a password, not a code — don't shout them back. */
#signin input{text-transform:none;letter-spacing:normal}

.tabs{display:flex;gap:6px;background:var(--grey);padding:4px;border-radius:12px;margin-bottom:16px}
.tab{flex:1;border:0;background:transparent;padding:10px 8px;border-radius:9px;
  font-weight:700;color:var(--muted);cursor:pointer}
.tab.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ---------------------------------------------------------- buttons */
button{cursor:pointer}
.primary{background:var(--ink);color:var(--paper);border:0;border-radius:12px;
  padding:14px 20px;font-weight:700}
.primary:disabled{opacity:.45;cursor:default}
.ghost{background:transparent;border:1px solid var(--line);border-radius:10px;
  padding:9px 14px;font-weight:700;color:var(--ink)}
.ghost:disabled{opacity:.4;cursor:default}
.wide-btn{width:100%;margin-top:18px}

/* ---------------------------------------------------------- forms */
label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
label .lite{text-transform:none;letter-spacing:normal;font-weight:400}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid var(--line);
  border-radius:11px;background:var(--paper);color:var(--ink)}
textarea{resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);border-color:transparent}
.stack{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.mt{margin-top:16px}
.hint{color:var(--muted);font-size:13px;line-height:1.5;margin:12px 0 0}
.lite{color:var(--muted);font-weight:400;font-size:13px}
.err{color:var(--warn);font-weight:700;font-size:14px;margin:10px 0 0}
.empty{color:var(--faint);text-align:center;padding:22px 10px;margin:0}
.empty.small{padding:10px;font-size:13px;text-align:left}

.card{border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.card h3{font-size:17px;margin-bottom:4px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------------------------------------------------------- the anchors
   Every anchor is on screen while the reviewer scores. That is the whole mechanism:
   "meets bar" only means one thing if two reviewers read the same sentence to get there. */
.crit .blurb{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 12px}
.anchors{display:grid;gap:8px}
.anchor{display:grid;grid-template-columns:34px 92px 1fr;gap:10px;align-items:baseline;
  text-align:left;background:var(--grey);border:1px solid transparent;border-radius:11px;
  padding:11px 12px;font-size:13px;line-height:1.45;color:var(--ink)}
.anchor:hover{border-color:var(--line);background:#eaebea}
.anchor .n{font-family:"Arial Black",Arial,sans-serif;font-size:16px}
.anchor .lab{font-weight:700}
.anchor .txt{color:var(--muted)}
.anchor.on{background:var(--mint-soft);border-color:var(--mint)}
.anchor.on .txt{color:var(--ink)}

.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{background:var(--grey);border:1px solid transparent;border-radius:20px;
  padding:9px 16px;font-weight:700;font-size:14px;color:var(--muted)}
.pill.on{background:var(--mint);border-color:var(--mint);color:var(--ink)}

.submitbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line);
  padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
.running{display:flex;align-items:baseline;gap:8px}
.running b{font-family:"Arial Black",Arial,sans-serif;font-size:24px}

/* ---------------------------------------------------------- lists */
.recent{margin-top:26px}
.recent h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-bottom:10px}
.stat-list{display:flex;flex-direction:column;gap:8px}
.stat{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:11px;padding:11px 14px}
.stat .right{display:flex;align-items:center;gap:10px}
.stat .lite{display:block}
.score{font-family:"Arial Black",Arial,sans-serif;font-size:18px}
.tag{background:var(--grey);border-radius:20px;padding:4px 11px;font-size:12px;font-weight:700}
.tag.strong_hire{background:var(--mint)}
.tag.hire{background:var(--mint-soft)}
.tag.no_hire{background:var(--peach)}

/* ---------------------------------------------------------- the matrix */
.weeknav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.weeknav span{font-weight:700}
.revblock{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:14px}
.revhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.revhead b{font-size:17px}
.revhead .lite{display:block}
.commit{font-family:"Arial Black",Arial,sans-serif;font-size:13px;
  border-radius:20px;padding:6px 13px;white-space:nowrap}
.commit.met{background:var(--mint)}
.commit.near{background:var(--peach)}
.commit.short{background:var(--pink)}
.commit.none{background:var(--grey);color:var(--muted)}
.cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.cell{display:grid;gap:2px;text-align:left;background:var(--grey);border:1px solid transparent;
  border-radius:11px;padding:11px 12px;color:var(--ink)}
.cell:hover{border-color:var(--ink)}
.cell .cname{font-weight:700;font-size:14px}
.cell .cnum{font-family:"Arial Black",Arial,sans-serif;font-size:26px;line-height:1.05}
.cell .cmix,.cell .cavg{font-size:12px;color:var(--muted)}

/* ---------------------------------------------------------- scorecard */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.45);overflow-y:auto;
  padding:24px 12px;z-index:20}
.sheet-card{max-width:760px;margin:0 auto;background:var(--paper);border-radius:var(--r);padding:20px}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:16px}
.sheet-head h2{font-size:26px;margin-top:4px}
.sheet-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.lead{background:var(--mint-soft);border-radius:11px;padding:14px 16px;margin-bottom:16px}
.lead b{display:block;font-family:"Arial Black",Arial,sans-serif;font-size:19px;margin:3px 0}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.kpi{background:var(--grey);border-radius:11px;padding:13px;text-align:center}
.kpi b{display:block;font-family:"Arial Black",Arial,sans-serif;font-size:24px}
.kpi span{font-size:12px;color:var(--muted)}
.cbars{display:flex;flex-direction:column;gap:11px}
.cbar-top{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:5px}
.bar-track{height:8px;background:var(--grey);border-radius:6px;overflow:hidden}
.bar-fill{height:100%;background:var(--ink);border-radius:6px}
.hrow{border-top:1px solid var(--line);padding:12px 0}
.hmeta{display:flex;flex-direction:column}
.hrow{display:grid;grid-template-columns:1fr auto;gap:8px}
.hscore{font-family:"Arial Black",Arial,sans-serif;font-size:18px}
.hnotes{grid-column:1/-1;margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}

.panel{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.panel summary{font-weight:700;cursor:pointer}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:24px;
  font-weight:700;z-index:30}

/* ---------------------------------------------------------- phone
   The anchors have to stay readable here — this is where they'll actually be used, with a
   laptop playing the Team Tailor recording next to it. */
@media (max-width:640px){
  .field-grid{grid-template-columns:1fr}
  .anchor{grid-template-columns:26px 1fr;row-gap:2px}
  .anchor .txt{grid-column:2}
  .cells{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr}
  .tabs{font-size:14px}
  .submitbar{flex-direction:column;align-items:stretch;gap:10px}
  .submitbar .primary{width:100%}
}

/* ---------------------------------------------------------- analysis tab
   Palette validated with the dataviz skill's checker against a #ffffff surface:
   categorical slots 1-3 pass all-pairs (worst CVD ΔE 9.2, normal-vision 24.0), and the
   1-5 ordinal ramp passes monotone lightness with a light end at 2.11:1. Do not hand-edit
   these hexes — re-run the validator if they need to change. */
:root{
  --viz-series:#2a78d6;
  --viz-grid:#e1e0d9;  --viz-axis:#c3c2b7;  --viz-muted:#898781;
  --viz-1:#86b6ef; --viz-2:#5598e7; --viz-3:#2a78d6; --viz-4:#1c5cab; --viz-5:#104281;
}

.periodbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.anasub{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 20px}
.anahead{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  margin:30px 0 12px;padding-top:14px;border-top:1px solid var(--line)}
.anahead:first-of-type{margin-top:0;border-top:0;padding-top:0}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.tile.wide{grid-column:1/-1}
.tile h4{font-size:15px;margin:0 0 4px;font-family:"Arial Black",Arial,sans-serif}
.tilenote{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 12px}
.tilenote.good{color:var(--good)}
.thin{color:var(--faint);font-size:14px;margin:10px 0}

/* Hero figure: proportional figures, never tabular — equal-width digits read loose at size. */
.hero{font-family:"Arial Black",Arial,sans-serif;font-size:46px;line-height:1.05;margin:6px 0 8px}
.herounit{font-size:18px;color:var(--muted)}
.pairstat{display:grid;gap:10px}
.pairstat div{background:var(--grey);border-radius:11px;padding:13px}
.pairstat b{display:block;font-family:"Arial Black",Arial,sans-serif;font-size:30px;line-height:1}
.pairstat span{font-size:12px;color:var(--muted)}

/* Charts keep their intrinsic size and shrink on small screens — they never scale UP,
   which would render a 10px axis tick at 25px in a wide tile. */
.chart{max-width:100%;height:auto;display:block;overflow:visible}
.vlab{font-size:12px;fill:var(--ink)}
.vlab2{font-size:12px;color:var(--ink);min-width:150px;display:inline-block}
.vval{font-size:12px;font-weight:700;fill:var(--ink)}
.vtick{font-size:10px;fill:var(--viz-muted);font-variant-numeric:tabular-nums}
.vnone{font-size:12px;fill:var(--faint);color:var(--faint);padding:4px 0}
.vlegend{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 12px;font-size:12px;color:var(--muted)}
.vlegend span{display:flex;align-items:center;gap:6px}
.vlegend i{width:11px;height:11px;border-radius:3px;display:block}

.distrow{display:grid;grid-template-columns:190px minmax(0,320px);gap:14px;align-items:center;
  padding:5px 0}
/* Every stacked row measures the same width — different widths would make the rows
   look like different totals when they are all 100%. */
.distrow .chart{width:100%;max-width:none}
.mults{display:grid;gap:14px}
.multhead{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-size:13px;margin-bottom:2px}

/* The heatmap carries its counts in every cell, so it IS its own table view — colour never
   the only channel. */
.heat{width:100%;border-collapse:separate;border-spacing:2px;font-size:13px}
.heat th{font-size:11px;font-weight:700;color:var(--muted);text-align:left;padding:3px 4px}
.heat thead th{text-align:center}
.heat td{text-align:center;padding:11px 4px;border-radius:6px;background:var(--grey);
  font-weight:700;font-variant-numeric:tabular-nums}

.score.up{color:var(--good)}
.score.down{color:var(--warn)}
.stat .notes{display:block;margin-top:4px;font-style:italic}

.checks{display:grid;gap:8px;margin-top:16px}
.check{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:normal;
  font-weight:400;font-size:14px;color:var(--ink);margin:0;cursor:pointer}
.check input{width:18px;height:18px;flex:none;accent-color:var(--ink)}

@media (max-width:640px){
  .tiles{grid-template-columns:1fr}
  .distrow{grid-template-columns:1fr;gap:4px}
  .vlab2{min-width:0}
  .hero{font-size:38px}
  .heat{font-size:12px}
  .heat th{font-size:10px}
}