/* ==========================================================================
   Job Hunter — management console
   A dossier on paper, stamped.
   Monospace is the machine's voice (numbers, ids, logs, labels).
   Sans is the human's voice (prose, controls, navigation).
   ========================================================================== */

:root{
  /* palette — exact */
  --ink:#12161C;
  --rail:#171C24;
  --rail-2:#202733;
  --paper:#FAF9F6;
  --card:#FFFFFF;
  --rule:#E4E1DA;
  --rule-2:#CFCBC1;
  /* Clears 4.5:1 on paper, on white, and on all four wash tints. The
     previous value passed on paper and white but sat at 4.15-4.22 on the
     tints, which only showed up once tinted log rows were rendered. */
  --mute:#676D78;
  --stamp:#1F3A8A;
  --brick:#A3341F;
  --amber:#B7791F;              /* accents: borders, lamps, bars (3:1) */
  --amber-ink:#966319;          /* amber as text: 5.13:1 on white, 4.52 on its own wash */
  --go:#1E6B4F;
  /* derived: shades and washes mixed from the palette above, no new hues */
  --ink-04:rgba(18,22,28,.04);   /* hairlines and tints of the ink */
  --ink-16:rgba(18,22,28,.16);   /* the stamp's ink texture */
  --stamp-deep:#182C6B;
  --stamp-lit:#7C90D6;
  --stamp-wash:#EDF0F8;
  --go-wash:#E8F1EC;
  --brick-wash:#F8EDEA;
  --amber-wash:#F7F0E2;
  --rail-ink:#C7CDD8;
  --rail-ink-2:#8891A1;
  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* geometry */
  --r:2px;
  --line:1px solid var(--rule);
  --shadow:0 1px 2px rgba(18,22,28,.05), 0 8px 20px -14px rgba(18,22,28,.22);
  --rail-w:210px;
  /* type */
  /* type scale — eight steps, nothing off it */
  --t-2xs:10px;    /* eyebrows, timestamps, micro labels */
  --t-xs:11px;     /* badges, meta */
  --t-sm:12px;     /* dense tables */
  --t-base:13px;   /* interface body */
  --t-md:14.5px;   /* prose: emails, job descriptions */
  --t-lg:17px;     /* section figures */
  --t-xl:21px;     /* page title */
  --t-2xl:26px;    /* stat values */
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh;
  background:var(--paper); color:var(--ink);
  font:400 var(--t-md)/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.25}
p{margin:0 0 var(--s3)}
a{color:var(--stamp)}
code,kbd,samp,pre{font-family:var(--mono); font-size:.94em}
hr{height:1px; border:0; background:var(--rule); margin:var(--s4) 0}
::selection{background:var(--stamp-wash)}
:focus-visible{outline:2px solid var(--stamp); outline-offset:2px; border-radius:var(--r)}
.rail :focus-visible{outline-color:var(--stamp-lit)}

/* text utilities */
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.muted{color:var(--mute)}
.eyebrow{
  display:inline-block; color:var(--mute);
  font:600 var(--t-2xs)/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase;
}
/* .num is the machine's voice: monospace, tabular. Alignment is not part
   of it - a standalone figure belongs beside its label, while a column of
   figures belongs against the right edge. Those are different jobs. */
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.table .num,.kv .num{text-align:right}
.truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; max-width:38ch}
.rule{height:1px; border:0; background:var(--rule); margin:var(--s4) 0}

/* ── Shell + rail ──────────────────────────────────────────────────────── */

.shell{display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); min-height:100vh}
.rail{
  display:flex; flex-direction:column; gap:var(--s4);
  align-self:start; position:sticky; top:0; height:100vh; overflow-y:auto;
  padding:var(--s5) var(--s3);
  background:var(--rail); color:var(--rail-ink);
  scrollbar-width:thin; scrollbar-color:var(--rail-2) transparent;
}
.rail-brand{
  display:flex; align-items:center; gap:var(--s2);
  padding:0 var(--s2) var(--s4); border-bottom:1px solid var(--rail-2);
  color:var(--card); font:600 var(--t-sm)/1.3 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
}
.rail-brand::before{content:""; width:9px; height:9px; flex:none; background:var(--stamp-lit)}
.rail-nav{display:flex; flex-direction:column; gap:1px}
.rail-link{
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s3); border-left:2px solid transparent; border-radius:0 var(--r) var(--r) 0;
  color:var(--rail-ink-2); font-size:var(--t-base); text-decoration:none;
  transition:background-color .12s ease, color .12s ease;
}
.rail-link:hover{background:var(--rail-2); color:var(--rail-ink)}
.rail-link.is-active{background:var(--rail-2); border-left-color:var(--stamp-lit); color:var(--card)}
.rail-foot{
  margin-top:auto; padding:var(--s4) var(--s2) 0; border-top:1px solid var(--rail-2);
  color:var(--rail-ink-2); font:var(--t-xs)/1.6 var(--mono); font-variant-numeric:tabular-nums;
}
.rail-foot a{color:var(--rail-ink)}
/* --mute is tuned for the paper surface; on the rail it lands at 3.72:1. */
.rail .muted{color:var(--rail-ink-2)}

.main{display:flex; flex-direction:column; min-width:0}
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding:var(--s3) var(--s5);
  background:var(--paper); border-bottom:var(--line);
}
.page{
  display:flex; flex-direction:column; gap:var(--s5);
  width:100%; max-width:1180px; margin:0 auto; padding:var(--s5);
}
.page-title{font-size:var(--t-xl); letter-spacing:-.015em}

/* ── Conveyor: the pipeline as ticker tape ─────────────────────────────── */

.conveyor{
  position:relative; display:flex; align-items:stretch; overflow:hidden;
  background:var(--card); border:var(--line); border-radius:var(--r);
}
.conveyor::after{ /* the crawl head sweeping the line */
  content:""; position:absolute; inset:0; width:100%; pointer-events:none; opacity:.22;
  background:linear-gradient(90deg, var(--stamp) 0 1px, transparent 1px);
  animation:conveyor 7.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes conveyor{from{transform:translateX(-2%)} to{transform:translateX(100%)}}
.stage{
  flex:1 1 0; min-width:104px; position:relative;
  display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s3) var(--s3) var(--s3); border-right:var(--line);
}
.stage:last-child{border-right:0}
.stage::before{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--rule)}
.stage-label{color:var(--mute); font:var(--t-2xs)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase}
.stage-count{font:600 var(--t-lg)/1 var(--mono); font-variant-numeric:tabular-nums}

/* ── Stamp: the signature ──────────────────────────────────────────────── */

.stamp{
  position:relative; display:inline-flex; align-items:center; gap:var(--s2);
  margin:2px 3px; padding:3px var(--s2);
  color:var(--stamp);
  border:1px solid currentColor; outline:1px solid currentColor; outline-offset:2px;
  border-radius:1px; background:transparent;
  font:700 var(--t-2xs)/1.5 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  transform:rotate(-2.4deg); opacity:.94;
}
.stamp::after{ /* uneven rubber ink */
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; opacity:.1;
  background-image:repeating-linear-gradient(118deg, currentColor 0 1px, transparent 1px 4px);
}
.stamp--approved{color:var(--go); transform:rotate(-2.4deg)}
.stamp--rejected{color:var(--brick); transform:rotate(1.8deg)}
.stamp--applied{color:var(--stamp); transform:rotate(-1.2deg)}
.stamp--pending{color:var(--amber-ink); transform:rotate(2.2deg)}
.stamp--failed{color:var(--mute); border-style:dashed; outline-style:dashed; transform:rotate(-3deg)}

/* lamps: patch-panel indicators */
.lamp{
  display:inline-block; width:8px; height:8px; flex:none; vertical-align:middle;
  border-radius:1px; background:var(--rule-2); box-shadow:inset 0 0 0 1px var(--ink-16);
}
.lamp--ok{background:var(--go)}
.lamp--warn{background:var(--amber)}
.lamp--err{background:var(--brick)}
.lamp--idle{background:var(--rule-2)}

/* ── Evidence: a sentence quoted from the posting ──────────────────────── */

.evidence{
  position:relative; margin:var(--s3) 0; padding:2px 0 2px var(--s5);
  border-left:2px solid var(--stamp);
  font-size:var(--t-md); line-height:1.6; color:var(--ink); text-wrap:pretty;
}
.evidence::before{
  content:"\201C"; position:absolute; left:9px; top:0;
  font:700 var(--t-2xl)/1 var(--mono); color:var(--stamp); opacity:.35;
}
.evidence-cite{
  display:block; margin-top:var(--s2); color:var(--mute);
  font:var(--t-xs)/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

/* ── Tables ────────────────────────────────────────────────────────────── */

.table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--card); border:var(--line); border-radius:var(--r);
  scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent;
}
.table{
  width:100%; border-collapse:collapse; white-space:nowrap;
  font:400 var(--t-sm)/1.5 var(--mono); font-variant-numeric:tabular-nums;
}
.table th{
  padding:var(--s3) var(--s4); text-align:left; color:var(--mute);
  font:600 var(--t-2xs)/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--rule-2);
}
.table td{padding:var(--s3) var(--s4); border-bottom:var(--line); vertical-align:top}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--paper)}
.table--tight{font-size:var(--t-sm)}
.table--tight th,.table--tight td{padding:var(--s2) var(--s3)}
.row-link{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule-2)}
.row-link:hover{color:var(--stamp); border-bottom-color:var(--stamp)}

/* ── Panels, grids, stats ──────────────────────────────────────────────── */

.panel{min-width:0; background:var(--card); border:var(--line); border-radius:var(--r)}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  padding:var(--s3) var(--s4); border-bottom:var(--line);
}
.panel-head h2,.panel-head h3{font:600 var(--t-xs)/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase}
.panel-head .actions{margin-left:auto}
.panel-body{padding:var(--s4)}
.panel-body > :first-child{margin-top:0}
.panel-body > :last-child{margin-bottom:0}

.grid{display:grid; gap:var(--s4)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.stat{padding:var(--s4); background:var(--card); border:var(--line); border-radius:var(--r)}
.stat-value{font:600 var(--t-2xl)/1.1 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.stat-label{
  display:block; margin-top:var(--s2); color:var(--mute);
  font:var(--t-2xs)/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
}

/* ── Activity log: the hero ────────────────────────────────────────────── */

.log{
  max-height:520px; overflow:auto;
  background:var(--card); border:var(--line); border-radius:var(--r);
  font:400 var(--t-sm)/1.55 var(--mono); font-variant-numeric:tabular-nums;
  scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent;
}
.log-line{
  display:grid; grid-template-columns:74px 82px minmax(0,1fr); gap:var(--s3);
  padding:var(--s2) var(--s4); border-bottom:var(--line); align-items:baseline;
}
.log-line:last-child{border-bottom:0}
.log-line:hover{background:var(--paper)}
.log-time{color:var(--mute); white-space:nowrap}
.log-kind{color:var(--mute); font-size:var(--t-2xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase}
.log-msg{min-width:0; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere}
.log-line--warn{box-shadow:inset 2px 0 0 var(--amber)}
.log-line--warn .log-kind{color:var(--amber-ink)}
.log-line--error{background:var(--brick-wash); box-shadow:inset 2px 0 0 var(--brick)}
.log-line--error .log-kind,.log-line--error .log-msg{color:var(--brick)}
.log-line--success .log-kind{color:var(--go)}
.log::after{ /* the console is live */
  content:""; display:block; width:7px; height:13px; margin:var(--s2) var(--s4);
  background:var(--ink); opacity:.5; animation:caret 1.4s steps(1,end) infinite;
}
@keyframes caret{50%{opacity:0}}

/* ── Forms ─────────────────────────────────────────────────────────────── */

.field{display:flex; flex-direction:column; gap:var(--s2); min-width:0}
.label{color:var(--mute); font:600 var(--t-2xs)/1 var(--mono); letter-spacing:.14em; text-transform:uppercase}
.input,.select,.textarea{
  width:100%; padding:var(--s2) var(--s3); color:var(--ink); background:var(--card);
  border:1px solid var(--rule-2); border-radius:var(--r);
  font:400 var(--t-base)/1.5 var(--sans);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--stamp); box-shadow:0 0 0 3px var(--stamp-wash);
}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--paper); color:var(--mute); cursor:not-allowed}
.input::placeholder,.textarea::placeholder{color:var(--mute); opacity:.85}
.select{
  appearance:none; padding-right:var(--s6); cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),
                   linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.textarea{min-height:64px; resize:vertical; line-height:1.6}
.form-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s4); align-items:end}

/* Stacked fields need vertical rhythm.

   .field carries an 8px gap between its own label and input, but consecutive
   fields placed directly inside a form had nothing between them - so each label
   sat flush against the border of the textarea above it, which reads as a
   collision. .grid and .form-row already supply their own gap.

   Direct-child selectors only: a descendant selector would also match the
   second column of a .grid--2 and knock the rows out of alignment. */
form > .field + .field,
form > .field + .grid,
form > .field + .form-row,
form > .grid + .field,
form > .grid + .grid,
form > .grid + .form-row,
form > .form-row + .form-row,
form > .form-row + .btn,
/* Deliberately NOT `form > * + .btn`. Every table action is a form containing
   a hidden CSRF input followed by a button, so the universal sibling selector
   matched all of them and gave every action button a 24px top margin - which
   is what made each row in the boards, cvs and queue tables 65px instead of
   40px. List the block types that actually need the rhythm. */
form > .field + .btn,
form > .grid + .btn { margin-top: var(--s5); }

form > .btn + .mono,
form > .btn + .field { margin-top: var(--s4); }
.form-row .btn{justify-self:start}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:var(--s2) var(--s4); cursor:pointer; white-space:nowrap; text-decoration:none;
  color:var(--ink); background:var(--card); border:1px solid var(--rule-2); border-radius:var(--r);
  font:500 var(--t-base)/1 var(--sans);
  transition:background-color .12s ease, border-color .12s ease, color .12s ease, transform .06s ease;
}
.btn:hover{background:var(--paper); border-color:var(--mute)}
.btn:active{transform:translateY(1px); background:var(--rule)}
.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; transform:none; background:var(--card); border-color:var(--rule-2);
}
.btn--primary{color:var(--card); background:var(--stamp); border-color:var(--stamp)}
.btn--primary:hover{background:var(--stamp-deep); border-color:var(--stamp-deep)}
.btn--primary:active{background:var(--stamp-deep)}
.btn--primary:disabled{background:var(--stamp); border-color:var(--stamp); opacity:.4}
/* Ghost buttons keep a hairline at rest. Fully transparent made the
   maintenance actions on Settings read as paragraphs rather than controls. */
.btn--ghost{color:var(--mute); background:var(--card); border-color:var(--rule)}
.btn--ghost:hover{color:var(--ink); background:var(--paper); border-color:var(--rule-2)}
.btn--danger{color:var(--brick); background:transparent; border-color:var(--brick)}
.btn--danger:hover{color:var(--card); background:var(--brick); border-color:var(--brick)}
.btn--danger:active{background:var(--brick); color:var(--card)}
.btn--sm{padding:var(--s1) var(--s2); font-size:var(--t-sm); min-height:24px}

/* ── Login ─────────────────────────────────────────────────────────────── */

/* The wrap is only a measure. Centring and the full-height surface belong
   to .login-body, which already does both. */
.login-wrap{width:100%; max-width:460px}
.login-card h1{font:600 var(--t-md)/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase}
.login-card .field + .field{margin-top:var(--s4)}
.login-card .btn{width:100%; margin-top:var(--s5)}

/* ── Pills, flash, empty, tabs ─────────────────────────────────────────── */

.pill{
  display:inline-flex; align-items:center; gap:var(--s1);
  padding:2px var(--s2); border:1px solid var(--rule-2); border-radius:var(--r);
  color:var(--mute); background:var(--paper);
  font:600 var(--t-2xs)/1.7 var(--mono); letter-spacing:.1em; text-transform:uppercase;
}
.pill--ok{color:var(--go); background:var(--go-wash); border-color:var(--go)}
.pill--warn{color:var(--amber-ink); background:var(--amber-wash); border-color:var(--amber)}
.pill--err{color:var(--brick); background:var(--brick-wash); border-color:var(--brick)}
.pill--info{color:var(--stamp); background:var(--stamp-wash); border-color:var(--stamp)}

.empty{
  padding:var(--s6) var(--s4); text-align:center;
  color:var(--mute); font-size:var(--t-base);
  background:var(--card); border:1px dashed var(--rule-2); border-radius:var(--r);
}
.flash{
  padding:var(--s3) var(--s4); border:var(--line); border-left:3px solid var(--mute);
  border-radius:var(--r); background:var(--card); font-size:var(--t-base);
}
.flash--error{border-left-color:var(--brick); background:var(--brick-wash); color:var(--brick)}
.flash--ok{border-left-color:var(--go); background:var(--go-wash); color:var(--go)}

.tabs{display:flex; gap:2px; border-bottom:var(--line); overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  margin-bottom:-1px; padding:var(--s2) var(--s3); cursor:pointer; white-space:nowrap;
  color:var(--mute); background:none; border:0; border-bottom:2px solid transparent;
  font:500 var(--t-sm)/1.4 var(--sans); text-decoration:none;
}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink); border-bottom-color:var(--stamp)}

/* ── Key/value, bars, actions ──────────────────────────────────────────── */

.kv{display:grid; grid-template-columns:minmax(88px,auto) minmax(0,1fr); gap:var(--s2) var(--s4); align-items:baseline}
.kv-key{color:var(--mute); font:600 var(--t-2xs)/1.6 var(--mono); letter-spacing:.12em; text-transform:uppercase}
.kv-val{
  color:var(--ink); font:400 var(--t-sm)/1.6 var(--mono);
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.actions{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width:1080px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{
    position:static; height:auto; flex-direction:row; align-items:center; gap:var(--s3);
    overflow-x:auto; overflow-y:hidden; padding:var(--s2) var(--s3);
  }
  .rail-brand{padding:0 var(--s3) 0 0; border-bottom:0; border-right:1px solid var(--rail-2); white-space:nowrap}
  .rail-nav{flex-direction:row; gap:var(--s1)}
  .rail-link{
    border-left:0; border-bottom:2px solid transparent; border-radius:var(--r) var(--r) 0 0;
    white-space:nowrap;
  }
  .rail-link.is-active{border-left-color:transparent; border-bottom-color:var(--stamp-lit)}
  .rail-foot{display:none}
  .conveyor{overflow-x:auto; scrollbar-width:none}
  .conveyor::-webkit-scrollbar{display:none}
  .conveyor::after{display:none}
  .stage{flex:0 0 124px}
  .grid--2,.grid--3{grid-template-columns:minmax(0,1fr)}
  .topbar{padding:var(--s3) var(--s4)}
  .page{padding:var(--s4); gap:var(--s4)}
}
@media (max-width:560px){
  .page-title{font-size:var(--t-lg)}
  .log-line{display:flex; flex-wrap:wrap; align-items:center; gap:2px var(--s2); padding:var(--s2) var(--s3)}
  .log-time{width:62px; flex:none}
  .log-kind{flex:1 1 auto}
  .log-msg{flex:1 1 100%}
  .table th,.table td{padding:var(--s2) var(--s3)}
  .truncate{max-width:22ch}
  .actions .btn{flex:1 1 auto}
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none}
  .conveyor::after{animation:none; opacity:0}
  .log::after{animation:none; opacity:.35}
  .btn:active{transform:none}
}

/* ---------------------------------------------------------------------------
   Extensions
   Classes used by the templates that were not part of the original contract.
   Kept to the same rules: tokens only, 2px radius, hairlines as structure.
   --------------------------------------------------------------------------- */

.rail-rule {
  display: block;
  height: 1px;
  background: var(--rail-2);
  margin:var(--s3) var(--s4);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap:var(--s2);
  flex-wrap: wrap;
  /* Pushed to the far edge. Without this the primary action sits
     against the page title and reads as if it belongs to the heading. */
  margin-left: auto;
}

.topbar-actions form { display: inline; }

/* The job header: identity on the left, the stamp on the right. */
.job-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap:var(--s5);
  padding:var(--s4) 0 var(--s5);
  border-bottom: 1px solid var(--rule);
  margin-bottom:var(--s5);
}

.job-head .mono { line-height: 1.7; }

/* Verbatim blocks: the JD, the drafted email, extracted CV text. */
.draft {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-sm);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  margin:0;
  color: var(--ink);
  max-height: 520px;
  overflow: auto;
}

/* Login */
.login-mark {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom:var(--s4);
}

.login-mark span { color: var(--stamp); }

.login-lede {
  font-size: var(--t-base);
  line-height: 1.6;
  margin-bottom:var(--s5);
}

@media (max-width: 560px) {
  .job-head { flex-direction: column; gap:var(--s4); }
}

/* The sign-out control is a POST form, because a GET logout can be triggered
   by any third-party page. Styled to sit in the rail exactly like a link. */
.rail-logout { margin:0; }

.rail-logout .rail-link {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  /* The same box as every other rail link. Resetting padding to 0
     matched the look but left an 18px target, under the 24px minimum. */
  padding: var(--s2) var(--s3);
  font: inherit;
  cursor: pointer;
}

/* ── Sign-in ─────────────────────────────────────────────────────────────
   Standalone: no rail, no app chrome. Centred card on the paper surface. */

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--paper);
  padding:var(--s6) var(--s4);
}


.login-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--stamp);
  padding:var(--s6) var(--s6) var(--s6);
  box-shadow: var(--shadow-1, 0 1px 2px var(--ink-04));
}

.login-form { display: grid; gap:var(--s4); }
.login-submit { width: 100%; margin-top:var(--s1); }

.login-foot {
  margin-top:var(--s5);
  padding-top:var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-2xs);
  letter-spacing: .06em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--mute);
}

/* ── Bars, as SVG ────────────────────────────────────────────────────────
   The CSP is `style-src 'self'` with no inline exception, which blocks the
   style="width:N%" that a div-based bar needs. A <rect width> is a geometry
   attribute rather than a style, so it renders under the same policy - and it
   stays crisp at any size because the viewBox scales it. */

.bar {
  display: block;
  width: 100%;
  height: 4px;
  overflow: visible;
}
.bar .bar-track { fill: var(--rule); }
.bar .bar-fill  { fill: var(--stamp); }

/* The conveyor's own bar sits on the track drawn by .stage::before. */
.stage-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  display: block;
}
.stage-bar .bar-fill { fill: var(--stamp); }

/* ── Small utilities, so no template needs a style attribute ────────────── */

.mt-3 { margin-top:var(--s3); }
.error-text { color: var(--brick); }
.stat-value--sm { font-size: var(--t-lg); letter-spacing: -0.01em; }

/* ── Score reasons ───────────────────────────────────────────────────────
   Previously these reused .log-line, which is a three-column grid for
   timestamp / kind / message. With only a message child, every reason was
   laid into the 74px timestamp column and wrapped two words per line. */

.reasons { list-style: none; margin:0; padding:0; }

.reason {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap:var(--s4);
  align-items: baseline;
  padding:var(--s2) var(--s4);
  border-bottom: var(--line);
}
.reason:last-child { border-bottom: 0; }
.reason:nth-child(odd) { background: color-mix(in srgb, var(--paper) 55%, transparent); }

.reason-score {
  font: 600 var(--t-sm)/1.6 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--mute);
  text-align: right;
}
.reason-text { font-size: var(--t-base); line-height: 1.6; color: var(--ink); text-wrap: pretty; }

.reason--pos .reason-score { color: var(--go); }
.reason--neg .reason-score { color: var(--brick); }

/* Full-width flag rows: PRIORITY and SPONSORSHIP verdicts. */
.reason--flag {
  grid-template-columns: minmax(0, 1fr);
  padding-left:var(--s4);
  box-shadow: inset 3px 0 0 var(--stamp);
  background: color-mix(in srgb, var(--stamp) 5%, transparent);
}
.reason--flag .reason-text { font-size: var(--t-base); font-weight: 500; }

/* ── Form hints and grouped settings ───────────────────────────────────── */

/* A sentence under a field saying what it does. Settings are stored under
   machine keys; this is where the machine's vocabulary gets translated. */
.hint {
  margin: var(--s2) 0 0;
  color: var(--mute);
  font-size: var(--t-sm);
  line-height: 1.55;
  max-width: 62ch;
  text-wrap: pretty;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s5) var(--s5);
}

/* A count beside a list label, so you can see how many entries a textarea
   holds without scrolling inside it. */
.label .count {
  margin-left: var(--s2);
  padding: 1px var(--s1);
  color: var(--mute);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: .06em;
}

.label .count:empty { display: none; }

/* ── Collapsible panels ──────────────────────────────────────────────────
   Three profiles of eight fields each is five screens of scrolling. An
   accordion shows one at a time. Each profile is an independent form, so a
   collapsed panel cannot lose edits. */

.profile-panel > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.profile-panel > summary::-webkit-details-marker { display: none; }

/* A chevron that encodes open/closed, rather than decorating. */
.profile-panel > summary::before {
  content: "";
  width: 0; height: 0;
  margin-right: var(--s2);
  border-left: 5px solid var(--mute);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.profile-panel[open] > summary::before { transform: rotate(90deg); }

.profile-panel > summary:hover { background: var(--stamp-wash); }
.profile-panel > summary:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; }

/* The meta line sits at the far edge of the summary. */
.profile-panel > summary > span:last-child { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .profile-panel > summary::before { transition: none; }
}

/* Pushes the row-count control to the far end of a tab strip. */
.tabs-spacer { flex: 1 1 auto; }


/* ── Hit areas ───────────────────────────────────────────────────────────
   WCAG 2.5.8 asks for 24x24 on controls. Dense tables make that awkward:
   growing the link would grow every row. Padding grows the target and the
   matching negative margin leaves the layout exactly where it was. */

.row-link,
.panel-head a,
.table a:not(.btn) {
  display: inline-block;
  padding-block: 5px;
  margin-block: -5px;
}

/* Links inside a sentence are exempt under 2.5.8 ("Inline"). That covers the
   breadcrumb in a page eyebrow, which is left as text deliberately. */
.eyebrow a { white-space: nowrap; }

/* ── Forms inside action clusters ────────────────────────────────────────
   Every table action is its own <form> wrapping a single button. As a
   block-level flex item the wrapper measured 48px around a 24px button, and
   because each row's height follows its tallest cell, every row in the boards
   and queue tables was roughly double height. Making the wrapper a flex
   container sizes it to the button. */

/* Action clusters inside table cells.

   These started as inline buttons directly in the <td>, which produced a
   two-line inline formatting context inside the cell whatever line-height,
   vertical-align or display was set on it - every row in the boards, cvs and
   queue tables came out at 65px instead of 40px. A block-level flex wrapper
   removes the inline context entirely and lets the cell size to its content. */

td.actions { display: table-cell; white-space: nowrap; }

td.actions .action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
}