/* FORTCALL — Broadway Pizza operator console.
 *
 * Broadway's palette is yellow #eab308 and red #fb2c36 on near-black. Both are
 * loud, so they are rationed: the canvas is a warm charcoal mixed toward the
 * brand's own hue rather than neutral black, everything structural is
 * monochrome and hairlines, and saturated colour is allowed in exactly three
 * places —
 *
 *   1. the serviceability rail, where yellow marks a stage genuinely cleared
 *   2. the live-call indicator
 *   3. the primary action button
 *
 * Red is reserved for one meaning only: this cannot proceed. A blocked gate,
 * a closed outlet, the end-call button. Nothing decorative is ever red, so
 * red on this screen always means stop.
 */

:root {
  --ink:        #0d0b0a;   /* warm charcoal — black mixed toward the brand */
  --ink-raised: #141110;
  --ink-high:   #1c1817;
  --ink-hair:   #272220;

  --paper:      #f6f4f2;
  --muted:      #a49d98;
  --muted-dim:  #6f6864;

  --yellow:     #eab308;
  --yellow-deep:#edb200;
  --yellow-dim: #cd8900;
  --red:        #fb2c36;
  --red-soft:   #ffa3a3;
  --green:      #4ade80;

  --hair: 1px solid var(--ink-hair);
  --radius: 10px;
  --radius-sm: 7px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Load-bearing: views are toggled with the hidden attribute. */
[hidden] { display: none !important; }

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

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 3px;
}

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

/* ─────────────────────────────── wordmark ─────────────────────────── */
.wordmark {
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: 15px;
  white-space: nowrap;
}
.wordmark__fort { color: var(--paper); }
.wordmark__call { color: var(--yellow); }
.wordmark--lg { font-size: 27px; letter-spacing: 0.17em; }

/* ──────────────────────────────── login ──────────────────────────── */
.login {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  /* A single warm glow off the brand yellow, so the sign-in screen is not
     a flat black rectangle but is still nowhere near a yellow page. */
  background:
    radial-gradient(60rem 40rem at 50% -20%, rgba(234, 179, 8, 0.09), transparent 65%),
    var(--ink);
}
.login__card {
  width: min(370px, 100%);
  background: var(--ink-raised);
  border: var(--hair);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: grid;
  gap: 14px;
}
.login__sub {
  margin: -6px 0 8px;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.login__error {
  margin: 0;
  color: var(--red-soft);
  font-size: 13px;
  border-left: 2px solid var(--red);
  padding-left: 10px;
}

/* ─────────────────────────────── fields ──────────────────────────── */
.field { display: grid; gap: 5px; }
.field__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted-dim);
  font-weight: 600;
}
input, select, textarea {
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  border: var(--hair);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted-dim); }
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

/* ─────────────────────────────── buttons ─────────────────────────── */
.btn {
  border: var(--hair);
  background: var(--ink-high);
  color: var(--paper);
  border-radius: var(--radius-sm);
  padding: 9px 15px;
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover:not(:disabled) { background: #241f1d; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--wide { width: 100%; }
.btn--sm { padding: 7px 12px; font-size: 12.5px; }

.btn--primary {
  background: var(--yellow);
  border-color: var(--yellow-deep);
  color: #221900;
}
.btn--primary:hover:not(:disabled) { background: var(--yellow-deep); }

.btn--danger {
  background: transparent;
  border-color: rgba(251, 44, 54, 0.5);
  color: var(--red-soft);
}
.btn--danger:hover:not(:disabled) {
  background: rgba(251, 44, 54, 0.12);
  border-color: var(--red);
}

.btn--ghost { background: transparent; color: var(--muted); }
.btn--ghost:hover:not(:disabled) { color: var(--paper); background: var(--ink-high); }

.btnrow { display: grid; gap: 8px; margin-top: 2px; }

/* ─────────────────────────────── topbar ──────────────────────────── */
.app { display: flex; flex-direction: column; min-height: 100%; }

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: var(--hair);
  background: var(--ink-raised);
  flex-wrap: wrap;
}
.topbar__client {
  color: var(--muted-dim);
  font-size: 12px;
  letter-spacing: 0.05em;
  border-left: var(--hair);
  padding-left: 14px;
}
.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  border: var(--hair);
  border-radius: 100px;
  padding: 5px 12px;
}
.live__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted-dim);
  flex: none;
}
.live[data-state="live"] { color: var(--paper); border-color: var(--yellow-dim); }
.live[data-state="live"] .live__dot {
  background: var(--yellow);
  animation: pulse 1.7s ease-in-out infinite;
}
.live[data-state="connecting"] .live__dot { background: var(--yellow-dim); }
.live[data-state="error"] { color: var(--red-soft); border-color: rgba(251,44,54,.5); }
.live[data-state="error"] .live__dot { background: var(--red); }
.live__timer { color: var(--muted); font-size: 12px; }

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(234,179,8,.45); }
  50%      { opacity: .65; box-shadow: 0 0 0 5px rgba(234,179,8,0); }
}

/* ──────────────────────────────── tabs ───────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  border-bottom: var(--hair);
  background: var(--ink-raised);
  overflow-x: auto;
}
.tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--paper); }
.tab[aria-selected="true"] {
  color: var(--paper);
  border-bottom-color: var(--yellow);
}

/* ──────────────────────────────── views ──────────────────────────── */
.view { flex: 1; min-height: 0; }

.view--call {
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) minmax(280px, 350px);
  gap: 1px;
  background: var(--ink-hair);
}
.col {
  background: var(--ink);
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.col--talk { gap: 10px; }

.col__title {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted-dim);
  font-weight: 700;
}
.col__subtitle {
  margin: 6px 0 0;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted-dim);
  font-weight: 700;
}

.view--doc { overflow-y: auto; }
.doc {
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 18px 60px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.note { margin: 0; color: var(--muted-dim); font-size: 12px; line-height: 1.5; }
.status { margin: 0; font-size: 12.5px; color: var(--muted); min-height: 1.2em; }
.status[data-tone="error"] { color: var(--red-soft); }
.status[data-tone="good"]  { color: var(--green); }

/* ───────────────────────── the contact card ──────────────────────── */
.cardslot:empty { display: none; }

.card {
  border: var(--hair);
  border-radius: var(--radius);
  background: var(--ink-raised);
  padding: 13px;
  display: grid;
  gap: 9px;
}
.card__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card__name { font-weight: 700; font-size: 15px; }
.card__id { font-size: 11px; color: var(--muted-dim); }
.card__seg {
  margin-left: auto;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: var(--hair);
  border-radius: 100px;
  padding: 2px 8px;
}

/* Contact details are the point of the card — an operator should never have
   to open another view to read a number back to the person on the line. */
.card__contact {
  display: grid;
  gap: 4px;
  padding: 9px 0;
  border-top: var(--hair);
  border-bottom: var(--hair);
}
.card__line { display: flex; gap: 8px; font-size: 12.5px; align-items: baseline; }
.card__k {
  color: var(--muted-dim);
  min-width: 62px;
  flex: none;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.card__v { color: var(--paper); word-break: break-word; }
.card__v a { color: var(--paper); text-decoration: none; border-bottom: 1px dotted var(--muted-dim); }
.card__v a:hover { color: var(--yellow); }

.card__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  font-size: 11px;
  color: var(--muted);
  border: var(--hair);
  border-radius: 100px;
  padding: 2px 9px;
}
.pill--warn { color: var(--yellow); border-color: var(--yellow-dim); }

.card__flag {
  font-size: 12px;
  color: var(--red-soft);
  border-left: 2px solid var(--red);
  padding: 3px 0 3px 9px;
  line-height: 1.45;
}
.card__note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  border-left: 2px solid var(--ink-hair);
  padding-left: 9px;
}

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  background: var(--ink-high);
  border: var(--hair);
  color: var(--muted);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 11.5px;
  cursor: pointer;
  font-family: var(--mono);
}
.chip:hover { color: var(--paper); border-color: var(--yellow-dim); }

/* ───────────────────── the serviceability rail ───────────────────── */
/* The signature element. Each stage is a real precondition the desk cannot
   price without. Cleared stages fill with Broadway yellow; the moment the
   gate fails the failing stage turns red and every stage above it locks —
   so the brand's own colour becomes literally the thing you cannot have
   until the call qualifies. */

.rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border: var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-raised);
}

.rail__stage {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-bottom: var(--hair);
  position: relative;
}
.rail__stage:last-child { border-bottom: 0; }

.rail__mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--ink-hair);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-dim);
  background: var(--ink);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.rail__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.35;
}
.rail__value {
  font-size: 11.5px;
  color: var(--muted-dim);
  margin-top: 2px;
  word-break: break-word;
}

.rail__stage[data-state="done"] .rail__mark {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #221900;
}
.rail__stage[data-state="done"] .rail__label { color: var(--paper); }
.rail__stage[data-state="done"] .rail__value { color: var(--yellow); }

.rail__stage[data-state="blocked"] .rail__mark {
  background: var(--red);
  border-color: var(--red);
  color: #2a0004;
}
.rail__stage[data-state="blocked"] .rail__label { color: var(--red-soft); }
.rail__stage[data-state="blocked"] .rail__value { color: var(--red-soft); }
.rail__stage[data-state="blocked"] { background: rgba(251, 44, 54, 0.07); }

/* Locked: a stage above a failed gate. Deliberately inert-looking. */
.rail__stage[data-state="locked"] { opacity: 0.38; }
.rail__stage[data-state="locked"] .rail__mark { border-style: dashed; }

.rail[data-state="cleared"] { border-color: var(--yellow-dim); }
.rail[data-state="blocked"] { border-color: rgba(251, 44, 54, 0.55); }

.stamp {
  border: 2px solid var(--red);
  color: var(--red-soft);
  border-radius: var(--radius-sm);
  text-align: center;
  padding: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  font-size: 12px;
  transform: rotate(-1.4deg);
  background: rgba(251, 44, 54, 0.08);
}

/* ─────────────────────────────── ticket ──────────────────────────── */
.ticket {
  border: var(--hair);
  border-radius: var(--radius);
  background: var(--ink-raised);
  padding: 11px;
  font-size: 12.5px;
  display: grid;
  gap: 5px;
}
.ticket:empty { display: none; }
.ticket__row { display: flex; justify-content: space-between; gap: 10px; }
.ticket__row span:last-child { font-family: var(--mono); }
.ticket__row--total {
  border-top: var(--hair);
  padding-top: 6px;
  margin-top: 3px;
  font-weight: 700;
  color: var(--yellow);
}
.ticket__ref { font-family: var(--mono); font-size: 11.5px; color: var(--muted-dim); }

/* ────────────────────────────── transcript ───────────────────────── */
.transcript {
  flex: 1;
  min-height: 240px;
  overflow-y: auto;
  border: var(--hair);
  border-radius: var(--radius);
  background: var(--ink-raised);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.turn { display: grid; gap: 3px; }
.turn__who {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 700;
  color: var(--muted-dim);
}
.turn--agent .turn__who { color: var(--yellow-dim); }
.turn__text { font-size: 14px; line-height: 1.55; color: var(--paper); }
.turn--caller .turn__text { color: #ddd6d1; }

.transcript__empty {
  margin: auto;
  color: var(--muted-dim);
  font-size: 12.5px;
  text-align: center;
}

.whisper { display: flex; gap: 7px; }
.whisper input { flex: 1; }

/* ────────────────────────────── tool log ─────────────────────────── */
.toollog {
  display: grid;
  gap: 5px;
  font-size: 11.5px;
  max-height: 260px;
  overflow-y: auto;
}
.toolrow {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: var(--hair);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  background: var(--ink-raised);
}
.toolrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-dim);
  margin-top: 5px;
}
.toolrow[data-status="running"] .toolrow__dot { background: var(--yellow-dim); }
.toolrow[data-status="done"] .toolrow__dot { background: var(--green); }
.toolrow[data-status="blocked"] .toolrow__dot { background: var(--red); }
.toolrow[data-status="blocked"] { border-color: rgba(251,44,54,.4); }
.toolrow__name { font-family: var(--mono); color: var(--paper); font-size: 11.5px; }
.toolrow__detail { color: var(--muted-dim); line-height: 1.45; margin-top: 2px; }
.toolrow[data-status="blocked"] .toolrow__detail { color: var(--red-soft); }

/* ─────────────────────────── kpi / scorecard ─────────────────────── */
.kpi, .score {
  border: var(--hair);
  border-radius: var(--radius);
  background: var(--ink-raised);
  padding: 12px;
  display: grid;
  gap: 8px;
  font-size: 12.5px;
}
.kpi__title, .score__title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted-dim);
  font-weight: 700;
}
.kpi__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.kpi__k { color: var(--muted-dim); font-size: 11px; }
.kpi__v { font-family: var(--mono); }

.score__mark { font-size: 27px; font-weight: 800; font-family: var(--mono); }
.score__mark[data-band="good"] { color: var(--green); }
.score__mark[data-band="fair"] { color: var(--yellow); }
.score__mark[data-band="poor"] { color: var(--red); }
.score__line { color: var(--muted); line-height: 1.5; }
.score__list { margin: 0; padding-left: 16px; color: var(--muted); line-height: 1.5; }

.badge {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border-radius: 100px;
  padding: 2px 9px;
  border: var(--hair);
  color: var(--muted);
}
.badge--good { color: var(--green); border-color: rgba(74,222,128,.4); }
.badge--bad  { color: var(--red-soft); border-color: rgba(251,44,54,.5); }

/* ───────────────────────────── knowledge ─────────────────────────── */
.searchbar { display: flex; gap: 8px; }
.searchbar input { flex: 1; }

.kbresults { display: grid; gap: 9px; }
.kbcard {
  border: var(--hair);
  border-left: 2px solid var(--yellow-dim);
  border-radius: var(--radius-sm);
  background: var(--ink-raised);
  padding: 11px 13px;
  display: grid;
  gap: 5px;
}
.kbcard__top { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.kbcard__title { font-weight: 700; font-size: 13.5px; }
.kbcard__meta { font-size: 11px; color: var(--muted-dim); font-family: var(--mono); }
.kbcard__text { font-size: 13px; color: var(--muted); line-height: 1.55; }

.kbindex {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
}
.kbitem {
  border: var(--hair);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  background: var(--ink-raised);
}
.kbitem__title { color: var(--paper); }
.kbitem__tags { color: var(--muted-dim); font-size: 10.5px; margin-top: 2px; }

/* ────────────────────────────── playbook ─────────────────────────── */
.panel {
  border: var(--hair);
  border-radius: var(--radius);
  background: var(--ink-raised);
  padding: 15px;
  display: grid;
  gap: 10px;
}
.panel--gate { border-left: 2px solid var(--yellow); }
.panel__title { margin: 0; font-size: 14.5px; font-weight: 700; }
.panel__why { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.toolgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 7px;
}
.toolcard {
  border: var(--hair);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 12px;
  background: var(--ink);
  display: grid;
  gap: 3px;
}
.toolcard[data-gated="true"] { border-left: 2px solid var(--red); }
.toolcard__name { font-family: var(--mono); color: var(--paper); font-size: 12px; }
.toolcard__desc { color: var(--muted-dim); line-height: 1.45; }
.toolcard__gate { color: var(--red-soft); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; }

.disclaimer {
  border-left: 2px solid var(--yellow);
  padding: 8px 0 8px 11px;
  color: var(--yellow);
  font-size: 12.5px;
  line-height: 1.55;
}

table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tbl th, table.tbl td {
  text-align: left;
  padding: 7px 9px;
  border-bottom: var(--hair);
}
table.tbl th {
  color: var(--muted-dim);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
table.tbl td.num { font-family: var(--mono); text-align: right; }

/* ──────────────────────────────── desk ───────────────────────────── */
.statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.stat {
  border: var(--hair);
  border-radius: var(--radius);
  background: var(--ink-raised);
  padding: 12px;
  display: grid;
  gap: 3px;
}
.stat__v { font-size: 22px; font-weight: 800; font-family: var(--mono); }
.stat__k {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted-dim);
}
.stat--accent .stat__v { color: var(--yellow); }

.calllist { display: grid; gap: 6px; }
.callrow {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) repeat(4, minmax(0,1fr));
  gap: 10px;
  align-items: center;
  border: var(--hair);
  border-radius: var(--radius-sm);
  background: var(--ink-raised);
  padding: 9px 11px;
  font-size: 12.5px;
}
.callrow__who { font-weight: 600; }
.callrow__sub { color: var(--muted-dim); font-size: 11px; }
.callrow[data-outcome="success"] { border-left: 2px solid var(--green); }
.callrow[data-outcome="neutral"] { border-left: 2px solid var(--muted-dim); }
.callrow[data-outcome="loss"]    { border-left: 2px solid var(--red); }

.empty {
  color: var(--muted-dim);
  font-size: 12.5px;
  border: 1px dashed var(--ink-hair);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
}

/* ───────────────────────────── responsive ────────────────────────── */
@media (max-width: 1180px) {
  .view--call { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
  .col--rail { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  body { font-size: 14.5px; }
  .view--call { grid-template-columns: 1fr; }
  .col { max-height: none; overflow: visible; }
  .col--rail { grid-column: auto; }
  .transcript { min-height: 300px; }
  .topbar { gap: 9px; padding: 10px 13px; }
  .topbar__client { display: none; }
  .callrow { grid-template-columns: 1fr 1fr; gap: 5px; }
  .kbindex { grid-template-columns: 1fr; }
}