/* ════════════════════════════════════════════════════════════════
   Fortcall — uniCare Medical Centre patient desk

   The palette is uniCare's own: the teal-to-blue run taken off
   unicaredubai.com (#009AA7 → #00709E), on a canvas mixed toward the
   same hues rather than a neutral black. uniCare's colours are used;
   uniCare's mark never is.

   The spectrum is rationed on purpose — it appears on the disclosure
   seal, on the topbar hairline, and on live states, and nowhere else.
   Everything else is monochrome and hairlines, so that when the seal
   lights up during a call it is the only colour in the room.

   Figures are set in mono because this is a ledger: references, file
   numbers and timers have to align and read digit by digit.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* uniCare's run, teal → deep blue */
  --teal:    #00C6D4;
  --teal-2:  #00B4C3;
  --lagoon:  #00A2B4;
  --shallow: #0092AB;
  --reef:    #0084A5;
  --sea:     #2E7FB8;
  --deep:    #3A72B4;

  /* Canvas — mixed toward the same hues, never neutral black */
  --ink-950: #04121F;
  --ink-900: #071A2B;
  --ink-850: #092132;
  --ink-800: #0C2A3E;
  --ink-700: #113A52;

  --bone:   #DCE9EE;
  --mist:   #A7BFCB;
  --slate:  #6E8B9A;
  --coral:  #E2564D;
  --amber:  #D9A441;

  --bg:          var(--ink-950);
  --surface:     var(--ink-900);
  --surface-up:  var(--ink-850);
  --line:        rgba(167, 191, 203, .12);
  --line-strong: rgba(167, 191, 203, .24);
  --text:        var(--bone);
  --text-dim:    var(--mist);
  --text-faint:  var(--slate);

  --accent:      var(--lagoon);
  --accent-warm: var(--teal);
  --accent-wash: rgba(0, 162, 180, .10);

  --display: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --micro: .6875rem;
  --sm:    .8125rem;
  --base:  .9375rem;
  --lg:    1.0625rem;

  --r: 2px;
  --gut: 28px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --spectrum: linear-gradient(180deg,
    var(--teal) 0%, var(--teal-2) 16%, var(--lagoon) 34%, var(--shallow) 50%,
    var(--reef) 68%, var(--sea) 86%, var(--deep) 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The UA rule for [hidden] is display:none, but any author rule that sets a
   display value outruns it — .console { display:flex } would leave the whole
   signed-in shell rendering behind the login gate. Make hidden mean hidden. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--base);
  font-weight: 300;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--lagoon); color: var(--ink-950); }

:focus-visible { outline: 1px solid var(--teal); outline-offset: 2px; }

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

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(167, 191, 203, .36); }

/* Raleway at 200 with wide tracking carries the whole display voice;
   nothing else needs to shout. */
.wordmark {
  font-family: var(--display);
  font-size: 1.5rem; font-weight: 200; letter-spacing: .46em;
  text-transform: uppercase;
  background: var(--spectrum);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* The tracking pushes the visual centre right; pull it back. */
  text-indent: .46em;
}
.wordmark--sm {
  font-size: var(--sm); letter-spacing: .3em; text-indent: .3em;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--display);
  font-size: var(--micro); font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint);
}

.panel__title {
  font-family: var(--display);
  font-size: var(--micro); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim);
}
.panel__note {
  margin-top: 8px; font-size: var(--sm); line-height: 1.66; color: var(--text-faint);
  max-width: 74ch;
}

/* ─────────────── Fields, selects, buttons ─────────────── */

.field { display: block; margin-bottom: 18px; }
.field__label {
  display: block; margin-bottom: 7px;
  font-family: var(--display); font-size: var(--micro); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
}
.field input, .select select, .kb-search input, .whisper input, .scene input {
  width: 100%; padding: 12px 14px;
  background: rgba(4, 12, 20, .6);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font-size: var(--base); font-weight: 300;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .kb-search input:focus, .whisper input:focus, .scene input:focus {
  outline: none; border-color: var(--lagoon); background: rgba(4, 12, 20, .88);
}
.field input::placeholder, .kb-search input::placeholder,
.whisper input::placeholder, .scene input::placeholder { color: var(--text-faint); }
.field--flat { flex: 1; margin-bottom: 0; }
.field__error { margin: -4px 0 16px; font-size: var(--sm); color: var(--coral); }

.select { display: flex; flex-direction: column; gap: 6px; }
.select select {
  padding: 8px 12px; font-size: var(--sm); appearance: none; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--slate) 50%),
    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.select select option { background: var(--ink-800); }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: none; cursor: pointer;
  font-family: var(--display); font-size: var(--sm); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.btn:hover:not(:disabled) { color: var(--text); border-color: var(--mist); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn--primary { color: var(--ink-950); background: var(--lagoon); border-color: var(--lagoon); }
.btn--primary:hover:not(:disabled) { background: var(--teal); border-color: var(--teal); color: var(--ink-950); }
.btn--danger { color: var(--coral); border-color: rgba(226, 86, 77, .46); }
.btn--danger:hover:not(:disabled) { color: var(--coral); border-color: var(--coral); background: rgba(226, 86, 77, .1); }
.btn--ghost { border-color: var(--line); }
.btn--sm { padding: 8px 16px; }
.btn--xs { padding: 6px 12px; font-size: var(--micro); }
.btn__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chip {
  display: inline-block; padding: 4px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font-family: var(--display); font-size: var(--micro); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-dim);
}
.chip--live { color: var(--lagoon); border-color: rgba(0, 162, 180, .5); }
.chip--warn { color: var(--coral); border-color: rgba(226, 86, 77, .5); }

.pill {
  padding: 5px 13px; border: 1px solid var(--line); border-radius: 100px;
  background: none; cursor: pointer;
  font-family: var(--display); font-size: var(--micro); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.pill:hover { color: var(--text-dim); }
.pill.is-active { color: var(--lagoon); border-color: var(--lagoon); }

/* ─────────────── Gate ─────────────── */

.gate {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 32px;
  background: radial-gradient(110% 80% at 50% -10%,
    var(--ink-700) 0%, var(--ink-850) 48%, var(--ink-950) 100%);
  overflow: hidden;
}
.gate__spectrum {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal) 20%,
    var(--lagoon) 50%, var(--sea) 80%, transparent);
}
.gate__inner { width: min(360px, 100%); }
.gate__brand { margin-bottom: 40px; text-align: center; }
.gate__card {
  padding: 34px 30px 30px;
  background: rgba(7, 26, 43, .72);
  border: 1px solid var(--line);
  border-radius: var(--r);
  backdrop-filter: blur(10px);
}
.gate__card .btn { width: 100%; justify-content: center; }

/* ─────────────── Shell ─────────────── */

.console { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--gut);
  padding: 0 var(--gut); height: 62px;
  background: rgba(4, 18, 31, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--teal), var(--lagoon) 34%,
    var(--reef) 62%, var(--sea) 82%, transparent);
}
.topbar__right { display: flex; align-items: center; gap: 18px; margin-left: 0; }
.topbar__op { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.topbar__op b { font-size: var(--sm); font-weight: 400; color: var(--text-dim); }
.topbar__op small {
  font-family: var(--display); font-size: var(--micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
}

.tabs { display: flex; gap: 2px; margin-left: auto; }
.tab {
  padding: 8px 15px; border: none; border-bottom: 1px solid transparent;
  background: none; cursor: pointer;
  font-family: var(--display); font-size: var(--sm); font-weight: 400;
  letter-spacing: .04em; color: var(--text-faint);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tab:hover { color: var(--text-dim); }
.tab.is-active { color: var(--bone); border-bottom-color: var(--lagoon); }

.view { display: none; flex: 1; }
.view.is-active { display: block; }

.wrapper { max-width: 1080px; margin: 0 auto; padding: 52px var(--gut) 80px; }
.wrapper--wide { max-width: 1360px; }

.page-head { margin-bottom: 36px; }
.page-head h1 {
  margin: 10px 0 10px;
  font-family: var(--display); font-size: 2rem; font-weight: 200;
  letter-spacing: -.01em;
}
.page-head__blurb { max-width: 78ch; font-size: var(--base); color: var(--text-faint); }

/* ─────────────── Desk: book + stage ─────────────── */

.desk {
  display: grid; grid-template-columns: 330px minmax(0, 1fr);
  align-items: start; min-height: calc(100vh - 62px);
}

.book {
  position: sticky; top: 62px; max-height: calc(100vh - 62px);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line); background: var(--surface);
}
.book__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px var(--gut) 16px;
}
.book__filter {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 14px var(--gut); border-bottom: 1px solid var(--line);
}

.stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.stats > div { padding: 13px var(--gut); border-bottom: 1px solid var(--line); }
.stats > div:nth-child(odd) { border-right: 1px solid var(--line); }
.stats dt {
  font-family: var(--display); font-size: var(--micro);
  letter-spacing: .13em; text-transform: uppercase; color: var(--slate);
}
.stats dd {
  margin-top: 3px; font-family: var(--mono); font-size: var(--lg);
  font-weight: 300; font-variant-numeric: tabular-nums; color: var(--bone);
}

.contact-list { overflow-y: auto; flex: 1; }
.contact {
  width: 100%; text-align: left; display: block;
  padding: 15px var(--gut);
  border: none; border-left: 2px solid transparent;
  border-bottom: 1px solid var(--line);
  background: none; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.contact:hover { background: var(--surface-up); }
.contact.is-active { background: var(--accent-wash); border-left-color: var(--lagoon); }
.contact__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.contact__name { font-size: var(--base); font-weight: 400; color: var(--text); }
.contact__meta { margin-top: 3px; font-size: var(--sm); color: var(--text-faint); }
.contact__tag {
  font-family: var(--display); font-size: var(--micro); font-weight: 400;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text-faint);
  white-space: nowrap;
}
.contact.is-blocked .contact__name { color: var(--text-faint); text-decoration: line-through; }
.contact.is-blocked .contact__tag { color: var(--coral); }

/* ─────────────── Stage ─────────────── */

.stage { padding: 0 var(--gut) 64px; min-width: 0; }

.empty {
  display: grid; place-content: center; justify-items: center; gap: 14px;
  min-height: calc(100vh - 62px); text-align: center; padding: 40px;
}
.empty__mark { width: 1px; height: 74px; background: var(--line-strong); position: relative; }
.empty__mark i {
  position: absolute; inset: 0; display: block;
  background: var(--spectrum); opacity: .5;
}
.empty h2 { font-family: var(--display); font-size: 1.3rem; font-weight: 200; }
.empty p { max-width: 42ch; font-size: var(--sm); color: var(--text-faint); }

.rec-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: end;
  padding: 30px 0 24px; border-bottom: 1px solid var(--line-strong);
}
.rec-head__ref { font-size: var(--lg); font-weight: 300; color: var(--text-dim); margin-top: 5px; }
.rec-head__who h2 { font-family: var(--display); font-size: 1.6rem; font-weight: 200; letter-spacing: -.01em; }
.rec-head__meta { font-size: var(--sm); color: var(--text-faint); }
.rec-head__cls { text-align: right; }
.rec-head__cls .chip { margin-top: 6px; }
.rec-head__sub { margin-top: 6px; font-size: var(--sm); color: var(--text-faint); max-width: 34ch; }

/* The verification crib. You are playing the caller, so you need the answers
   the agent is about to ask you for — a receptionist verifying somebody reads
   from the file exactly like this. Values are mono because they get read back
   digit by digit. */
.crib {
  margin-top: 22px; border: 1px solid var(--line);
  background: var(--surface);
}
.crib:empty { display: none; }
.crib__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
}
.crib__note { font-size: var(--micro); color: var(--text-faint); }
.crib__rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--line); }
.crib__row { padding: 12px 18px; background: var(--surface); }
.crib__k {
  font-family: var(--display); font-size: var(--micro); font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--slate);
}
.crib__v {
  margin-top: 4px; font-family: var(--mono); font-size: var(--base);
  font-weight: 400; color: var(--bone); overflow-wrap: anywhere;
}
.crib__sub { margin-top: 3px; font-size: var(--micro); color: var(--text-faint); }

.flags { display: grid; gap: 1px; margin-top: 22px; }
.flag {
  padding: 13px 16px; background: var(--surface);
  border-left: 2px solid var(--coral);
  font-size: var(--sm); line-height: 1.62; color: var(--text-dim);
}
.flag--calm { border-left-color: var(--reef); }

.controls {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: flex-end; justify-content: space-between;
  padding: 24px 0 16px;
}
.controls__left { display: flex; align-items: center; gap: 16px; }
.controls__right { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.controls--inbound { border-top: 1px solid var(--line); }

.level { width: 130px; height: 2px; background: var(--line-strong); overflow: hidden; }
.level i { display: block; height: 100%; width: 0; background: var(--accent-warm); transition: width .09s linear; }

.timer { display: flex; flex-direction: column; gap: 5px; }
.timer .mono { font-size: 1.25rem; font-weight: 300; letter-spacing: .04em; }

.status-line {
  padding: 11px 0; border-top: 1px solid var(--line);
  font-size: var(--sm); color: var(--text-faint);
}
.status-line.is-live { color: var(--lagoon); }
.status-line.is-error { color: var(--coral); }
.status-line.is-live::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lagoon); margin-right: 9px; vertical-align: middle;
  animation: pulse 1.7s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Inbound scene note + scenarios */
.scene { display: flex; align-items: flex-end; gap: 12px; padding: 4px 0 18px; }
.scenarios { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 20px; }
.scenario {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: none; cursor: pointer; text-align: left; max-width: 260px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.scenario:hover { border-color: var(--mist); background: var(--surface); }
.scenario b { display: block; font-size: var(--sm); font-weight: 400; color: var(--text); }
.scenario span { display: block; margin-top: 2px; font-size: var(--micro); color: var(--text-faint); line-height: 1.5; }

/* ─────────────── Live: seal + transcript + activity ─────────────── */

.live {
  display: grid; grid-template-columns: 252px minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1px; margin-top: 34px;
  background: var(--line); border: 1px solid var(--line);
}
.live__rail, .live__col { background: var(--surface); display: flex; flex-direction: column; min-width: 0; }
.live__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.legend {
  display: flex; gap: 16px;
  font-family: var(--display); font-size: var(--micro);
  letter-spacing: .12em; text-transform: uppercase;
}
.legend__c { color: var(--lagoon); }
.legend__a { color: var(--text-faint); }

.idle-note { padding: 18px; font-size: var(--sm); color: var(--text-faint); line-height: 1.62; }

.transcript {
  padding: 18px; min-height: 44vh; max-height: 56vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 15px;
}
.line { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
.line__who {
  font-family: var(--display); font-size: var(--micro); font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint);
  padding-top: 3px;
}
.line__text { font-size: var(--base); line-height: 1.64; overflow-wrap: anywhere; }
.line--caller .line__who { color: var(--lagoon); }
.line--caller .line__text { color: var(--text-dim); }
.line--agent .line__text { color: var(--text); }

.sysline {
  padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .05em;
  color: var(--text-faint); text-align: center;
}
.sysline--bad { color: var(--coral); }

.whisper { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.whisper input { flex: 1; min-width: 0; padding: 9px 12px; font-size: var(--sm); }

.activity { overflow-y: auto; max-height: 56vh; }
.act { padding: 13px 18px; border-bottom: 1px solid var(--line); }
.act__name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: var(--sm); color: var(--text-dim);
}
.act__state {
  font-family: var(--display); font-size: var(--micro);
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint);
}
.act__say { margin-top: 6px; font-size: var(--sm); line-height: 1.55; color: var(--text-faint); }
.act--blocked { background: rgba(226, 86, 77, .07); }
.act--blocked .act__name, .act--blocked .act__state { color: var(--coral); }
.act--emergency { background: rgba(226, 86, 77, .14); }
.act--emergency .act__name { color: var(--coral); font-weight: 500; }

/* ════════════════════════════════════════════════════════════════
   THE DISCLOSURE SEAL — the signature element

   Two mechanisms, not one bar, because the rule has two axes. The
   tumblers COUNT (three identity factors). The authority CATEGORISES
   (who the caller is to the patient). The plate opens only when both
   are satisfied.

   The whole argument of this desk is the refused state: the tumblers
   stay FULL and go grey while the plate latches red. Someone can know
   every detail on a file and still be entitled to nothing — a single
   progress bar cannot say that, which is why this is built as two
   parts rather than one.
   ════════════════════════════════════════════════════════════════ */

.rail { padding: 18px; display: flex; flex-direction: column; }
.seal__caption {
  font-family: var(--display); font-size: var(--micro); font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 11px;
}

.tumblers { list-style: none; display: grid; gap: 9px; margin-bottom: 18px; }
.tumbler { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.tumbler__bar { height: 4px; background: var(--line-strong); position: relative; overflow: hidden; }
.tumbler__bar::after {
  content: ''; position: absolute; inset: 0; width: 0;
  background: var(--spectrum);
  transition: width .26s var(--ease), background .24s var(--ease);
}
.tumbler[data-on="true"] .tumbler__bar::after { width: 100%; }
.tumbler__label { font-size: var(--sm); color: var(--text-faint); transition: color .22s var(--ease); }
.tumbler[data-on="true"] .tumbler__label { color: var(--text-dim); }

/* The plate: two halves that part when the seal opens. */
.seal__plate { position: relative; height: 30px; margin: 2px 0 12px; }
.seal__half {
  position: absolute; top: 50%; width: calc(50% - 1px); height: 2px; margin-top: -1px;
  background: var(--line-strong);
  transition: transform .34s var(--ease), background .24s var(--ease);
}
.seal__half--l { left: 0; transform-origin: left; }
.seal__half--r { right: 0; transform-origin: right; }

.seal__state {
  margin-bottom: 18px; text-align: center;
  font-family: var(--display); font-size: var(--micro); font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--text-faint);
  transition: color .24s var(--ease);
}
.seal__authority { font-size: var(--base); color: var(--text-dim); margin-bottom: 5px; }
.seal__scope { font-size: var(--sm); line-height: 1.55; color: var(--text-faint); }
.seal__meta {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .05em;
  color: var(--text-faint);
}
.seal__meta.is-hot { color: var(--amber); }

/* Identity complete, authority still unknown: the plate glows but holds. */
.seal[data-state="identity"] .seal__half { background: rgba(0, 162, 180, .5); }
.seal[data-state="identity"] .seal__state { color: var(--text-dim); }

/* Open — the halves part, and this is the only colour in the room. */
.seal[data-state="open"] .seal__half { background: var(--lagoon); }
.seal[data-state="open"] .seal__half--l { transform: translateX(-14%) scaleX(.7); }
.seal[data-state="open"] .seal__half--r { transform: translateX(14%) scaleX(.7); }
.seal[data-state="open"] .seal__state,
.seal[data-state="open"] .seal__authority { color: var(--lagoon); }

/* Part open — the employer's conclusion, and nothing behind it. */
.seal[data-state="partial"] .seal__half { background: var(--sea); }
.seal[data-state="partial"] .seal__half--l { transform: translateX(-6%) scaleX(.88); }
.seal[data-state="partial"] .seal__half--r { transform: translateX(6%) scaleX(.88); }
.seal[data-state="partial"] .seal__state,
.seal[data-state="partial"] .seal__authority { color: var(--sea); }

/* Refused. The tumblers stay FULL and lose their colour — the point of the
   whole component. Passing every identity check bought this caller nothing. */
.seal[data-state="refused"] .tumbler__bar::after { background: var(--slate); }
.seal[data-state="refused"] .tumbler__label { color: var(--text-faint); }
.seal[data-state="refused"] .seal__half { background: var(--coral); }
.seal[data-state="refused"] .seal__state,
.seal[data-state="refused"] .seal__authority { color: var(--coral); }
.seal[data-state="refused"] .seal__plate::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 15px; margin-top: -7.5px;
  border-left: 2px solid var(--coral); border-right: 2px solid var(--coral);
  animation: latch .3s var(--ease);
}
@keyframes latch { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: none; } }

/* An emergency outranks the seal entirely — the one thing allowed to shout,
   because it is the one thing that cannot wait. */
.seal[data-emergency="true"] { box-shadow: inset 0 0 0 1px var(--coral); }

/* ─────────────── Wrap-up ─────────────── */

.wrap {
  margin-top: 34px; border: 1px solid var(--line-strong); background: var(--surface);
  animation: rise .5s var(--ease) both;
}
.wrap::before { content: ''; display: block; height: 2px; background: var(--spectrum); }
.wrap__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.wrap__body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line);
}
.wrap__body > div { padding: 14px 20px; background: var(--surface); }
.wrap__body dt {
  font-family: var(--display); font-size: var(--micro);
  letter-spacing: .13em; text-transform: uppercase; color: var(--slate);
}
.wrap__body dd {
  margin-top: 4px; font-family: var(--mono); font-size: var(--lg);
  font-weight: 300; font-variant-numeric: tabular-nums; color: var(--bone);
}
.wrap__body dd.is-good { color: var(--lagoon); }
.wrap__body dd.is-bad { color: var(--coral); }
.wrap__body dd.is-text { font-family: var(--sans); font-size: var(--sm); line-height: 1.55; }

.wrap__score { padding: 18px 20px 20px; border-top: 1px solid var(--line); }
.score__breach {
  margin-bottom: 14px; padding: 11px 14px;
  border-left: 2px solid var(--coral); background: rgba(226, 86, 77, .1);
  font-size: var(--sm); color: #F0A8A2;
}
.score__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: var(--sm); color: var(--text-dim);
}
.score__n { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; color: var(--bone); }
.score__note { margin-top: 14px; font-size: var(--sm); line-height: 1.6; color: var(--text-faint); }
.score__note b {
  display: block; margin-bottom: 3px;
  font-family: var(--display); font-size: var(--micro); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--slate);
}

/* ─────────────── Knowledge ─────────────── */

.kb-search { display: flex; gap: 12px; margin-bottom: 34px; }
.kb-search input { flex: 1; }

.kb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.kb-card { padding: 18px 20px; background: var(--surface); }
.kb-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kb-card__title { font-size: var(--base); font-weight: 400; }
.kb-card__score { font-family: var(--mono); font-size: var(--micro); color: var(--lagoon); }
.kb-card__page { margin-top: 3px; font-family: var(--mono); font-size: var(--micro); color: var(--text-faint); }
.kb-card__text { margin-top: 9px; font-size: var(--sm); line-height: 1.62; color: var(--text-dim); }
.kb-card__tags { margin-top: 10px; font-family: var(--mono); font-size: var(--micro); color: var(--text-faint); }

/* ─────────────── Playbook ─────────────── */

.policy { margin-bottom: 48px; }
.policy__head { margin-bottom: 18px; }
.policy__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.policy__cell { padding: 18px 20px; background: var(--surface); }
.policy__cell h3 {
  font-family: var(--display); font-size: var(--sm); font-weight: 500;
  letter-spacing: .04em; margin-bottom: 6px;
}
.policy__cell p { font-size: var(--sm); line-height: 1.6; color: var(--text-faint); }
.policy__cell--warn { border-left: 2px solid var(--coral); }
.policy__cell .eyebrow { display: block; margin-bottom: 7px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin-top: 10px; }
.chips li {
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .04em;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 100px;
  color: var(--text-faint);
}

.rules { margin-bottom: 48px; }
.rules__list { list-style: none; margin-top: 16px; border-top: 1px solid var(--line); }
.rules__list li {
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: var(--sm); line-height: 1.66; color: var(--text-faint);
}
.rules__list b { color: var(--text-dim); font-weight: 500; }

/* ─────────────── Desk metrics ─────────────── */

#rollup {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-bottom: 34px;
}
#rollup > div { padding: 16px 20px; background: var(--surface); }
#rollup dt {
  font-family: var(--display); font-size: var(--micro);
  letter-spacing: .13em; text-transform: uppercase; color: var(--slate);
}
#rollup dd {
  margin-top: 4px; font-family: var(--mono); font-size: 1.35rem; font-weight: 300;
  font-variant-numeric: tabular-nums; color: var(--bone);
}
#rollup dd.is-good { color: var(--lagoon); }
#rollup dd.is-bad { color: var(--coral); }

.calls { border: 1px solid var(--line); }
.callrow { padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.callrow:last-child { border-bottom: none; }
.callrow__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px; }
.callrow__who { font-size: var(--base); font-weight: 400; }
.callrow__meta { font-family: var(--mono); font-size: var(--micro); color: var(--text-faint); }
.callrow__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.callrow__sum { margin-top: 9px; font-size: var(--sm); line-height: 1.6; color: var(--text-faint); }

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

@media (max-width: 1180px) {
  .live { grid-template-columns: 232px minmax(0, 1fr); }
  .live__col--narrow { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .desk { grid-template-columns: minmax(0, 1fr); }
  .book {
    position: static; max-height: none;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .contact-list { max-height: 340px; }
  .stage { padding: 0 var(--gut) 48px; }
  .empty { min-height: 40vh; }
  .rec-head { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  .rec-head__cls { text-align: left; }
  .live { grid-template-columns: minmax(0, 1fr); }
  .live__col--narrow { grid-column: auto; }
  .topbar { flex-wrap: wrap; height: auto; padding: 12px var(--gut); gap: 14px; }
  .tabs { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .controls { flex-direction: column; align-items: stretch; }
  .controls__left, .controls__right { justify-content: space-between; }
  .wrapper { padding: 34px var(--gut) 56px; }
  .page-head h1 { font-size: 1.55rem; }
}

@media (max-width: 560px) {
  :root { --gut: 18px; }
  .line { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .scenario { max-width: none; width: 100%; }
  .scene { flex-direction: column; align-items: stretch; }
}

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