/* ═══════════════════════════════════════════════════════════════════════
   FORTCALL — order desk console

   The palette is the client's own, read out of their production stylesheet:
   #E41837 red, #005CA9 blue. The ground is mixed toward the red rather than
   neutral black, so the console sits in their world without wearing their mark.

   Colour is rationed to exactly three jobs:
     RED   the live call, and the safety gate when it is armed
     BLUE  a call correctly referred to a human, and keyboard focus
     everything else is monochrome and hairlines
   so that the only colour in the room is the call itself.

   Type: Antonio and Open Sans — both named in the client's own stylesheet.
   Antonio is condensed and sits like the header on an order docket; Open Sans
   carries everything a person actually reads.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --red:        #E41837;
  --red-deep:   #DD052B;
  --red-dim:    #7d1421;
  --blue:       #005CA9;
  --blue-lift:  #2f86d4;

  --ink:        #0B0708;
  --ink-1:      #120C0E;
  --ink-2:      #191113;
  --ink-3:      #221719;
  --line:       #2b1e21;
  --line-soft:  #1d1416;

  --text:       #F2ECEC;
  --text-dim:   #A99C9E;
  --text-mute:  #6E6265;

  --display: 'Antonio', 'Oswald', 'Arial Narrow', sans-serif;
  --body:    'Open Sans', system-ui, -apple-system, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r: 3px;
  --pad: 18px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue-lift);
  outline-offset: 2px;
}

.mono { font-family: var(--mono); font-size: 12px; }
.sm { font-size: 12px; }
.muted { color: var(--text-mute); }

/* ───────────────────────────────────────────────── wordmark ─────────── */
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .14em;
  line-height: 1;
  color: var(--text);
}
.wordmark span { color: var(--red); }
.wordmark--lg { font-size: 40px; }

/* ───────────────────────────────────────────────── login ────────────── */
.login {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(228,24,55,.13), transparent 70%),
    var(--ink);
}
.login__card {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 34px 28px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.login__sub {
  margin: -6px 0 8px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.login__err {
  margin: 0;
  font-size: 12px;
  color: var(--red);
}

/* ───────────────────────────────────────────────── fields ───────────── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field__label {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.field input, .field select, .kbbar input, .composer input {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 10px;
  color: var(--text);
  width: 100%;
}
.field input:focus, .field select:focus { border-color: var(--blue); }

/* ───────────────────────────────────────────────── buttons ──────────── */
.btn {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--ink-3);
  cursor: pointer;
  transition: background .14s, border-color .14s, opacity .14s;
}
.btn:hover:not(:disabled) { background: #2b1d20; }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn--primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--red-deep); }
.btn--stop { background: transparent; border-color: var(--red); color: var(--red); }
.btn--stop:hover { background: rgba(228,24,55,.12); }
.btn--ghost { background: transparent; }
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-mute); font-size: 12px; text-decoration: underline;
}
.linkbtn:hover { color: var(--text); }

/* ───────────────────────────────────────────────── shell ────────────── */
.shell {
  display: grid;
  grid-template-columns: 210px 1fr;
  min-height: 100vh;
}
.rail {
  border-right: 1px solid var(--line);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--ink-1);
  position: sticky;
  top: 0;
  height: 100vh;
}
.rail__client {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.15;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.rail__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.navbtn {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  padding: 8px 10px;
  cursor: pointer;
  display: grid;
  gap: 1px;
}
.navbtn b {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.navbtn i { font-style: normal; font-size: 11px; color: var(--text-mute); }
.navbtn:hover b { color: var(--text); }
.navbtn.is-active { border-left-color: var(--red); background: var(--ink-2); }
.navbtn.is-active b { color: var(--text); }

.rail__foot { margin-top: auto; display: grid; gap: 8px; }
.tag {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  word-break: break-all;
}

.main { padding: 26px 30px 60px; min-width: 0; }
.view { display: none; }
.view.is-active { display: block; }

.vhead { margin-bottom: 22px; max-width: 70ch; }
.vhead__t {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.vhead__s { margin: 0; color: var(--text-dim); }

/* ───────────────────────────────────────────────── call grid ────────── */
.callgrid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 290px;
  gap: 18px;
  align-items: start;
}
.panel {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--pad);
}
.panel__t {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 10px;
}
.panel__t + .panel__t { margin-top: 20px; }
.stage { display: grid; gap: 12px; min-width: 0; }

.setup { display: grid; gap: 11px; margin-bottom: 20px; }
.btnrow { display: flex; gap: 8px; margin-top: 3px; }
.btnrow .btn { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   THE TRACKER — the signature element.

   An order tracker turned on the call itself. The stages are a real sequence,
   so the rail encodes something true rather than decorating.

   The SAFETY stage is the gate. Disarmed, it passes through quietly. Armed, it
   turns red and LOCKS every stage after it — the brand's own colour becomes
   literally the thing you cannot have until the allergen check passes.
   A severe allergy ends the rail in blue, not red, because referring that
   caller to a human is a success, not a failure.
   ═══════════════════════════════════════════════════════════════════════ */
.tracker {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 3px;
}
.stg {
  position: relative;
  padding: 9px 8px 8px;
  background: var(--ink-2);
  border-radius: 2px;
  overflow: hidden;
}
.stg::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--line);
  transition: background .3s;
}
.stg__n {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-mute);
  display: block;
}
.stg__l {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: block;
  line-height: 1.2;
}
.stg__h {
  font-size: 10px;
  color: var(--text-mute);
  display: block;
  min-height: 14px;
}

/* done */
.stg.is-done .stg__l { color: var(--text); }
.stg.is-done::after { background: var(--red); }
/* the stage currently in play */
.stg.is-live { background: var(--ink-3); }
.stg.is-live .stg__l { color: #fff; }
.stg.is-live::after { background: var(--red); animation: pulse 1.5s ease-in-out infinite; }
/* locked behind the gate */
.stg.is-locked { opacity: .42; }
.stg.is-locked .stg__l { color: var(--text-mute); }
.stg.is-locked::after { background: var(--line); }
/* the gate itself, armed */
.stg.is-gate {
  background: rgba(228,24,55,.14);
  box-shadow: inset 0 0 0 1px var(--red);
}
.stg.is-gate .stg__l { color: var(--red); }
.stg.is-gate .stg__h { color: #ec6d80; }
.stg.is-gate::after { background: var(--red); }
/* referred to a human — a good ending, so it reads blue, not red */
.stg.is-referred {
  background: rgba(0,92,169,.16);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.stg.is-referred .stg__l { color: var(--blue-lift); }
.stg.is-referred::after { background: var(--blue); }

@keyframes pulse { 50% { opacity: .35; } }

.gatenote {
  border: 1px solid var(--red);
  background: rgba(228,24,55,.09);
  border-radius: var(--r);
  padding: 10px 12px;
  font-size: 12px;
}
.gatenote b {
  font-family: var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 2px;
}
.gatenote--ref { border-color: var(--blue); background: rgba(0,92,169,.1); }
.gatenote--ref b { color: var(--blue-lift); }

/* ───────────────────────────────────────────────── status ───────────── */
.statusbar {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 9px;
}
.statusbar__sp { margin-left: auto; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-mute);
  flex: 0 0 auto;
}
.dot.is-live { background: var(--red); animation: pulse 1.4s ease-in-out infinite; }
.dot.is-done { background: var(--blue); }

/* ───────────────────────────────────────────────── transcript ───────── */
.transcript {
  min-height: 340px;
  max-height: 52vh;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  align-content: start;
  padding-right: 4px;
}
.turn { display: grid; gap: 2px; }
.turn__w {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.turn--agent .turn__w { color: var(--red); }
.turn--caller .turn__w { color: var(--text-dim); }
.turn--supervisor .turn__w { color: var(--blue-lift); }
.turn__t { margin: 0; }
.turn--supervisor .turn__t { color: var(--blue-lift); font-style: italic; }

.composer { display: flex; gap: 8px; }
.composer input { flex: 1; }

/* ───────────────────────────────────────────────── book ─────────────── */
.book { display: grid; gap: 6px; max-height: 62vh; overflow-y: auto; }
.rec {
  width: 100%;
  text-align: left;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: var(--r);
  padding: 9px 10px;
  cursor: pointer;
  display: grid;
  gap: 2px;
}
.rec:hover { background: var(--ink-3); }
.rec.is-sel { border-left-color: var(--red); background: var(--ink-3); }
.rec__n {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
}
.rec__m { font-size: 11px; color: var(--text-mute); }
.rec__f { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.flag {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid var(--line);
  color: var(--text-mute);
}
.flag--gate { border-color: var(--red); color: var(--red); }
.flag--stop { border-color: var(--red-dim); color: #c2606e; }
.flag--track { border-color: var(--line); }

/* ───────────────────────────────────────────────── docket ───────────── */
/* Quiet on purpose. The tracker is the one loud thing on this page. */
.docket { font-family: var(--mono); font-size: 12px; }
.docket__l {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 2px 0;
}
.docket__l span:last-child { color: var(--text-dim); }
.docket__r {
  border-top: 1px dashed var(--line);
  margin-top: 7px;
  padding-top: 7px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.docket__r b { font-family: var(--display); letter-spacing: .1em; }
.docket__gap { color: var(--red); margin-top: 5px; font-size: 11px; }

/* ───────────────────────────────────────────────── tools ────────────── */
.tools { display: grid; gap: 4px; max-height: 30vh; overflow-y: auto; }
.tool {
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 8px;
  background: var(--ink-2);
  border-left: 2px solid var(--line);
  border-radius: 0 2px 2px 0;
  color: var(--text-dim);
}
.tool.is-ok { border-left-color: #3f7d4f; }
.tool.is-blocked { border-left-color: var(--red); color: var(--red); background: rgba(228,24,55,.08); }
.tool.is-fail { border-left-color: #a06a1f; }
.tool small { display: block; color: var(--text-mute); }

.warn {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--red);
  border-left: 2px solid var(--red);
  padding-left: 8px;
}

/* ───────────────────────────────────────────────── wrap-up ──────────── */
.wrapup {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-1);
  padding: var(--pad);
}
.wrapup h2 {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.scoregrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.score {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  background: var(--ink-2);
}
.score__t {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.score__v {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
}
.score__v small { font-size: 13px; color: var(--text-mute); }
.score--breach { border-color: var(--red); }
.score--breach .score__v { color: var(--red); }
.coach { margin: 14px 0 0; padding-left: 18px; }
.coach li { margin-bottom: 5px; }

/* ───────────────────────────────────────────────── knowledge ────────── */
.kbbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.kbbar input { max-width: 620px; }
.kblist { display: grid; gap: 10px; }
.kb {
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-1);
  padding: 13px 15px;
}
.kb--hit { border-left-color: var(--red); }
.kb__h {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.kb__t {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kb__p { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
.kb__s { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--red); }
.kb__x { margin: 0; color: var(--text-dim); }

/* ───────────────────────────────────────────────── playbook ─────────── */
.pb { display: grid; gap: 16px; max-width: 95ch; }
.pbc {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-1);
  padding: 18px 20px;
}
.pbc--gate { border-color: var(--red); }
.pbc h2 {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.pbc--gate h2 { color: var(--red); }
.pbc h3 {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 16px 0 6px;
}
.pbc p, .pbc li { color: var(--text-dim); }
.pbc ol, .pbc ul { margin: 0; padding-left: 20px; }
.pbc li { margin-bottom: 5px; }
.pbc strong { color: var(--text); }
.steps { display: grid; gap: 8px; }
.step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
}
.step__n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--red);
  padding-top: 3px;
}

/* ───────────────────────────────────────────────── desk ─────────────── */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.deskgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.citylist, .catlist { display: grid; gap: 3px; max-height: 46vh; overflow-y: auto; }
.crow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.crow span:last-child { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
.basis {
  margin-top: 20px;
  border-left: 2px solid var(--line);
  padding-left: 12px;
  font-size: 11px;
  color: var(--text-mute);
  max-width: 90ch;
}

/* ───────────────────────────────────────────────── responsive ───────── */
@media (max-width: 1180px) {
  .callgrid { grid-template-columns: 1fr; }
  .deskgrid { grid-template-columns: 1fr; }
  .book { max-height: 240px; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .rail__client { display: none; }
  .rail__nav { grid-auto-flow: column; gap: 0; overflow-x: auto; }
  .navbtn { border-left: 0; border-bottom: 2px solid transparent; padding: 6px 10px; }
  .navbtn.is-active { border-left-color: transparent; border-bottom-color: var(--red); }
  .navbtn i { display: none; }
  .rail__foot { margin: 0 0 0 auto; }
  .main { padding: 18px 16px 48px; }
  .vhead__t { font-size: 26px; }
  .tracker { grid-auto-flow: row; grid-auto-columns: auto; }
  .stg__h { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}