/* ══════════════════════════════════════════════════════════════════════
   FORTCALL — Connekt Property Desk

   Built from Connekt's own colours: the blue gradient behind their "FROM A
   SINGLE DESK TO A WHOLE OFFICE" artwork, and the single orange their wordmark
   uses for the doubled N. Their logo is never used — only the palette.

   The canvas is mixed toward that blue rather than being neutral black, so the
   console sits inside the brand rather than beside it.

   COLOUR IS RATIONED to three places and nowhere else:
     1. the floor stack   — blue as the call climbs, ember at the gate
     2. the live pip      — the call is on
     3. focus rings       — accessibility is not decoration
   Everything else is bone, mist and hairlines. When the gate turns red it is
   the only warm thing on the screen.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --deep:    #051A2E;
  --night:   #08243C;
  --slab:    #0C2C48;
  --line:    rgba(143, 199, 242, .13);
  --line-hi: rgba(143, 199, 242, .26);

  --connekt: #2E86DE;
  --sky:     #5AA9E9;
  --haze:    #8FC7F2;
  --ember:   #F28C1E;
  --amber:   #FFA733;
  --danger:  #D2544A;
  --good:    #3FA98B;

  --bone:  #E8F1F9;
  --mist:  #93AEC6;
  --slate: #5F7A93;

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
  --urdu:    'Noto Naskh Arabic', 'IBM Plex Sans', serif;

  --r: 3px;
}

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

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--deep);
  color: var(--bone);
  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(--sky);
  outline-offset: 2px;
  border-radius: 1px;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 99px; }

/* ───────────────────────────────────────────────────── wordmark ── */
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}
.wordmark--lg { font-size: 34px; }
.wordmark__fort { color: var(--bone); }
.wordmark__call { color: var(--mist); }

/* ──────────────────────────────────────────────────────── login ── */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(90ch 60ch at 50% -20%, rgba(46,134,222,.16), transparent 70%),
    var(--deep);
}
.login__card {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 34px 30px;
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.login__desk {
  margin: -6px 0 10px;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--slate);
}
.login__error {
  margin: 0;
  font-size: 13px;
  color: var(--danger);
}

/* ──────────────────────────────────────────────────────── field ── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate);
}
.field__opt { color: var(--line-hi); letter-spacing: .06em; }

input, select, textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--line-hi); }
textarea { resize: vertical; }
select { cursor: pointer; }

/* ───────────────────────────────────────────────────────── btn ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--line-hi);
  border-radius: var(--r);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { background: rgba(143,199,242,.07); border-color: var(--haze); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--primary { background: var(--bone); color: var(--deep); border-color: var(--bone); }
.btn--primary:hover:not(:disabled) { background: #fff; border-color: #fff; }
.btn--danger { border-color: rgba(210,84,74,.6); color: #F0A79F; }
.btn--danger:hover:not(:disabled) { background: rgba(210,84,74,.14); border-color: var(--danger); }
.btn--ghost { border-color: var(--line); color: var(--mist); }

/* ───────────────────────────────────────────────────────── shell ── */
.shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 208px 1fr;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 24px 18px;
  border-right: 1px solid var(--line);
  background: var(--night);
  position: sticky;
  top: 0;
  height: 100dvh;
}
.rail__desk {
  margin: -18px 0 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
}
.rail__desk span { color: var(--slate); }
.rail__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.rail__model {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--slate);
  word-break: break-all;
}

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  background: transparent;
  color: var(--mist);
  border: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.nav__item:hover { color: var(--bone); background: rgba(143,199,242,.05); }
.nav__item.is-active { color: var(--bone); border-left-color: var(--connekt); background: rgba(46,134,222,.09); }
.nav__idx { font-family: var(--mono); font-size: 10px; color: var(--slate); }

/* ────────────────────────────────────────────────────────── main ── */
.main { padding: 26px 30px 46px; min-width: 0; }

.view { display: none; }
.view.is-active { display: block; animation: rise .3s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.head__eyebrow {
  margin: 0 0 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--slate);
}
.head__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
}
.head__note { margin: 0; font-size: 13px; color: var(--mist); max-width: 44ch; }

/* ───────────────────────────────────────────────────────── grid ── */
.grid {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.grid--inbound { grid-template-columns: minmax(0, 1fr) 340px; }
.col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.panel {
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
}
.panel--grow { display: flex; flex-direction: column; }
.panel__title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
}
.hint { margin: 8px 0 0; font-size: 12px; color: var(--slate); line-height: 1.5; }
/* A hint explains the control above it, so it must not crowd the control
   below it — without this the note collides with the next field's label. */
.hint + .field, .hint + .search { margin-top: 15px; }

.setup { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.callstat {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
}
.callstat.is-live { color: var(--sky); }
.callstat.is-live::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--connekt);
  animation: pip 1.4s ease-in-out infinite;
}
@keyframes pip { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ───────────────────────────────────────────────────────── book ── */
.book { display: flex; flex-direction: column; gap: 1px; max-height: 60vh; overflow-y: auto; }
.rec {
  width: 100%;
  display: block;
  padding: 10px 11px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.rec:hover { background: rgba(143,199,242,.05); }
.rec.is-picked { background: rgba(46,134,222,.12); border-color: rgba(46,134,222,.4); }
.rec__name { font-weight: 600; font-size: 13px; }
.rec__org { font-size: 12px; color: var(--mist); }
.rec__meta {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate);
}
.rec--blocked { opacity: .95; }
.rec--blocked .rec__name { color: #F0A79F; }
.rec__flag {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #F0A79F;
  border: 1px solid rgba(210,84,74,.5);
  border-radius: 2px;
}

/* ═════════════════════════════════════════════ THE FLOOR STACK ══
   The signature. A cross-section of RJ Shopping Mall, nine storeys, that
   doubles as the call's progression rail — the call climbs the building it is
   selling.

   The gate sits on the 2nd floor because that is where the fire started. Until
   the agent has told the truth about it, every floor above stays dark and
   locked, and the 2nd burns ember. The brand's own blue is literally the thing
   you cannot have until you have been honest.
   ══════════════════════════════════════════════════════════════════ */
.stack__legend {
  margin: -6px 0 12px;
  font-size: 12px;
  color: var(--slate);
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px 0;
  border-left: 1px solid var(--line-hi);
  border-right: 1px solid var(--line-hi);
  background: linear-gradient(180deg, transparent, rgba(46,134,222,.04));
}
/* Ground line — the building sits on something. */
.stack::after {
  content: '';
  display: block;
  height: 4px;
  margin: 6px -10px 0;
  border-top: 2px solid var(--line-hi);
}

.floor {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  background: rgba(143,199,242,.035);
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background .3s, border-color .3s, opacity .3s;
}
.floor__no {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--slate);
  text-align: right;
  transition: color .3s;
}
.floor__body { min-width: 0; }
.floor__use {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
  transition: color .3s;
}
.floor__stage {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floor__mark {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--slate);
  transition: color .3s;
}

/* Connekt's own floors. Six of the nine are theirs, and a client looking at
   this panel should see that before anything else — the three mall floors are
   context, not the product. */
.floor--ours { border-left: 2px solid rgba(46,134,222,.55); }
.floor:not(.floor--ours) .floor__use { color: var(--slate); font-style: italic; }

/* Reached — the call has got this far. */
.floor.is-done {
  background: rgba(46,134,222,.15);
  border-color: rgba(46,134,222,.42);
}
.floor.is-done .floor__no,
.floor.is-done .floor__use { color: var(--haze); }
.floor.is-done .floor__mark { color: var(--connekt); }

/* Where the call is now. */
.floor.is-now {
  background: rgba(46,134,222,.24);
  border-color: var(--connekt);
}
.floor.is-now .floor__no,
.floor.is-now .floor__use { color: #fff; }
.floor.is-now .floor__mark { color: var(--sky); }

/* THE GATE, armed. Safety has been raised and not yet acknowledged. */
.floor.is-gate {
  background: rgba(242,140,30,.2);
  border-color: var(--ember);
}
.floor.is-gate .floor__no,
.floor.is-gate .floor__use { color: var(--amber); }
.floor.is-gate .floor__mark { color: var(--ember); }

/* THE GATE, breached. The agent tried to reassure before acknowledging. */
.floor.is-breach {
  background: rgba(210,84,74,.24);
  border-color: var(--danger);
  animation: alarm 1s ease-in-out infinite;
}
.floor.is-breach .floor__no,
.floor.is-breach .floor__use { color: #F5B3AC; }
@keyframes alarm { 0%,100% { border-color: var(--danger); } 50% { border-color: rgba(210,84,74,.35); } }

/* Locked out by the gate. Everything above the 2nd floor, until it is opened. */
.floor.is-locked { opacity: .3; }
.floor.is-locked .floor__stage { color: transparent; }

/* ─────────────────────────────────────────────────── gate card ── */
.gatecard {
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mist);
}
.gatecard__title {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 5px;
}
.gatecard.is-armed { border-color: rgba(242,140,30,.5); background: rgba(242,140,30,.08); }
.gatecard.is-armed .gatecard__title { color: var(--amber); }
.gatecard.is-breach { border-color: rgba(210,84,74,.55); background: rgba(210,84,74,.1); }
.gatecard.is-breach .gatecard__title { color: #F0A79F; }
.gatecard.is-open { border-color: rgba(63,169,139,.45); background: rgba(63,169,139,.08); }
.gatecard.is-open .gatecard__title { color: var(--good); }

/* ─────────────────────────────────────────────────── transcript ── */
.transcript {
  flex: 1;
  min-height: 300px;
  max-height: 52vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}
.line { display: flex; flex-direction: column; gap: 3px; }
.line__who {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
}
.line__text {
  font-size: 14px;
  line-height: 1.6;
  padding-left: 11px;
  border-left: 2px solid var(--line);
}
.line__text:lang(ur), .line__text[dir="rtl"] { font-family: var(--urdu); font-size: 16px; line-height: 1.9; }
.line--agent .line__text { border-left-color: rgba(46,134,222,.5); }
.line--caller .line__text { border-left-color: var(--line-hi); color: var(--mist); }
.line--supervisor .line__text { border-left-color: rgba(242,140,30,.55); color: var(--amber); font-style: italic; }
.transcript__empty { margin: auto; color: var(--slate); font-size: 13px; }

.whisper { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.whisper input { flex: 1; }

/* ──────────────────────────────────────────────────────── tools ── */
.tools { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow-y: auto; }
.tool {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 11px;
  border-radius: 2px;
}
.tool__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--slate); flex: none; }
.tool--ok .tool__dot { background: var(--good); }
.tool--blocked { background: rgba(242,140,30,.1); }
.tool--blocked .tool__dot { background: var(--ember); }
.tool--fail .tool__dot { background: var(--danger); }
.tool__name { color: var(--bone); }
.tool__tag { margin-left: auto; color: var(--slate); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.tools__empty { color: var(--slate); font-size: 12px; padding: 4px 2px; }

/* ───────────────────────────────────────────────────── wrap-up ── */
.wrap { display: flex; flex-direction: column; gap: 12px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 12.5px; }
.kv dt { color: var(--slate); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 11.5px; text-align: right; }
.score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.score__n { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1; }
.score__of { font-family: var(--mono); font-size: 11px; color: var(--slate); }
.score__label { margin-left: auto; font-size: 12px; color: var(--mist); text-align: right; }
.breach {
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #F0A79F;
  background: rgba(210,84,74,.12);
  border: 1px solid rgba(210,84,74,.45);
  border-radius: 2px;
}
.coach { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--mist); line-height: 1.6; }
.coach li { margin-bottom: 4px; }

/* ────────────────────────────────────────────────── knowledge ── */
.search { display: flex; gap: 10px; }
.search input { flex: 1; }
.chunks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 18px; }
.chunk {
  padding: 14px;
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.chunk__title {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
}
.chunk__src {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--slate);
  word-break: break-word;
}
.chunk__text { margin: 9px 0 0; font-size: 13px; line-height: 1.6; color: var(--mist); }
.chunk__tags { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 4px; }
.tag {
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.chunk__score {
  float: right;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--connekt);
}

/* ─────────────────────────────────────────────────── playbook ── */
.pb { margin-bottom: 18px; }
.pb__body {
  margin: 0;
  padding: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--mist);
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: var(--r);
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 460px;
}
.arm {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--ember);
  border-radius: var(--r);
  margin-bottom: 10px;
}
.arm__name {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
}
.arm__rule { margin: 5px 0 0; font-size: 13.5px; }
.arm__why { margin: 5px 0 0; font-size: 12.5px; color: var(--slate); }

/* ─────────────────────────────────────────────────────── desk ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat {
  padding: 14px;
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.stat__n { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1; }
.stat__label {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
}
.calls { display: flex; flex-direction: column; gap: 1px; }
.callrow {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 9px 8px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}
.callrow__d { font-family: var(--mono); font-size: 11px; color: var(--mist); }
.pill {
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--line-hi);
  border-radius: 99px;
  color: var(--mist);
}
.pill--success { color: var(--good); border-color: rgba(63,169,139,.45); }
.pill--miss { color: #F0A79F; border-color: rgba(210,84,74,.45); }
.pill--failed { color: var(--danger); border-color: rgba(210,84,74,.55); }
.empty { color: var(--slate); font-size: 13px; padding: 10px 2px; }

/* ─────────────────────────────────────────────────── responsive ── */
@media (max-width: 1240px) {
  .grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .col--left { grid-column: 1 / -1; }
  .book { max-height: 260px; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .rail__desk { display: none; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav__item { border-left: 0; border-bottom: 2px solid transparent; padding: 6px 9px; }
  .nav__item.is-active { border-left-color: transparent; border-bottom-color: var(--connekt); }
  .rail__foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .rail__model { display: none; }
  .main { padding: 20px 16px 40px; }
  .grid, .grid--inbound { grid-template-columns: 1fr; }
  .setup { grid-template-columns: 1fr; }
}

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