/* The landing console. A dark product window on the light page, drawn like the real console:
   a queue, one incident being worked, and the audit chain as a linked ledger. */

@keyframes sc-blink { 50% { opacity: 0; } }

.scene {
  --sc-bg: #1d1f21; --sc-bg-2: #232527; --sc-bg-3: #2d3033; --sc-bar: #151618; --sc-rule: #383b40;
  --sc-text: #eeeff0; --sc-soft: #c7cacd; --sc-mute: #9ea2a8;
  --sc-ok: #47d16c; --sc-bad: #f24b5d; --sc-warn: #f4c430;
  margin-top: 0; background: var(--sc-bg); color: var(--sc-text); border: 1px solid var(--ink);
  font: 400 .85rem/1.5 var(--font-body);
}

/* top bar */
.scene__bar { display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 18px; background: var(--sc-bar); border-bottom: 1px solid var(--sc-rule); font: 500 .66rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-mute); }
.scene__bar b { font-weight: 500; color: var(--sc-text); }
.scene__bar .sp { flex: 1; }
.scene__live { display: inline-flex; align-items: center; gap: 8px; color: var(--sc-ok); }
.scene__live::before { content: ""; width: 6px; height: 6px; background: var(--sc-ok); animation: sc-blink 1.4s steps(2, jump-none) infinite; }

/* three panes */
.scene__grid { display: grid; grid-template-columns: 256px minmax(0, 1fr) 306px; height: clamp(380px, calc(100vh - 530px), 640px); }
.sc-pane { min-width: 0; overflow: hidden; }
.sc-pane + .sc-pane { border-left: 1px solid var(--sc-rule); }
.sc-pane--queue, .sc-pane--chain { background: var(--sc-bg-2); }
.sc-lab { display: flex; justify-content: space-between; padding: 12px 16px 11px; font: 500 .62rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-mute); border-bottom: 1px solid var(--sc-rule); }

/* queue */
.sc-queue { overflow: hidden; height: calc(100% - 38px); }
.sc-q { padding: 11px 16px 11px 14px; max-height: 120px; overflow: hidden; border-bottom: 1px solid var(--sc-rule); border-left: 2px solid transparent; transition: background .3s ease, border-color .3s ease, opacity .4s ease, transform .4s ease, max-height .5s ease, padding .5s ease; }
.sc-q.is-new { opacity: 0; transform: translateY(10px); }
.sc-q.is-on { background: var(--sc-bg-3); border-left-color: var(--sc-ok); }
.sc-q__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 8px; }
.sc-q b { font: 500 .64rem var(--font-mono); letter-spacing: .04em; color: var(--sc-mute); white-space: nowrap; }
.sc-q span { display: block; margin-top: 3px; font: 600 .86rem/1.3 var(--font-body); color: var(--sc-text); }
.sc-q em { display: inline-flex; align-items: center; gap: 6px; font: 500 .58rem var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-mute); white-space: nowrap; margin-left: auto; }
.sc-q em::before { content: ""; width: 5px; height: 5px; background: currentColor; flex: none; }
.sc-q em.a { color: var(--sc-warn); }
.sc-q em.r { color: var(--sc-bad); }
.sc-q em.g { color: var(--sc-ok); }
.sc-q.is-done { background: rgba(71, 209, 108, .08); border-left-color: var(--sc-ok); }
.sc-q.is-done em::before { width: 6px; height: 6px; transform: rotate(45deg); }
.sc-q.is-leaving { max-height: 0 !important; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateX(34px); border-bottom-width: 0; }

/* incident */
.sc-case { height: 100%; display: flex; flex-direction: column; padding: 16px 24px 0; transition: opacity .35s ease; }
.sc-case > * { flex-shrink: 0; }
.sc-case.is-out { opacity: 0; }
.sc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-id { font: 500 .72rem var(--font-mono); letter-spacing: .05em; color: var(--sc-mute); margin-right: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 .6rem var(--font-mono); letter-spacing: .09em; text-transform: uppercase; padding: 3px 8px; background: var(--sc-bg-3); color: var(--sc-soft); white-space: nowrap; }
.chip::before { content: ""; width: 5px; height: 5px; background: currentColor; }
.chip--sev { color: var(--sc-bad); }
.chip--run { color: var(--sc-warn); }
.chip--done { color: var(--sc-ok); }
.sc-title { margin: 10px 0 8px; font: 700 1.3rem/1.15 var(--font-display); letter-spacing: -0.02em; color: #fff; }
.sc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sc-tags .chip { background: transparent; border: 1px solid var(--sc-rule); color: var(--sc-mute); letter-spacing: .05em; padding: 2px 8px; opacity: 0; transition: opacity .35s ease; }
.sc-tags .chip::before { display: none; }
.sc-tags .chip.is-in { opacity: 1; }

/* the agent's queries, numbered, each ticked as it returns */
.sc-trace { counter-reset: ln; height: 120px; padding: 9px 14px; background: #151618; border: 1px solid var(--sc-rule); font: 400 .74rem/1.5 var(--font-mono); color: var(--sc-soft); overflow: hidden; }
.sc-trace div { counter-increment: ln; position: relative; padding-left: 28px; min-height: 1.5em; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-trace div::before { content: counter(ln, decimal-leading-zero); position: absolute; left: 0; color: #55606d; }
.sc-trace .k { display: none; }
.sc-trace .tick { color: var(--sc-ok); }
.sc-trace .tick::before { content: ""; display: inline-block; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); margin-left: 8px; vertical-align: 1px; }
.sc-cursor::after { content: ""; display: inline-block; width: .55em; height: 1.05em; background: var(--sc-ok); vertical-align: -0.18em; margin-left: 2px; animation: sc-blink 1s steps(2, jump-none) infinite; }

/* verdict: four classes, one lit */
.sc-verdict { display: flex; align-items: flex-start; gap: 22px; padding: 12px 0 4px; }
.sc-v { flex: none; width: 178px; }
.sc-v__word { font: 800 1.4rem/1.05 var(--font-display); letter-spacing: -0.02em; color: #fff; opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.sc-v.is-set .sc-v__word { opacity: 1; transform: none; }
.sc-v--tp .sc-v__word { color: var(--sc-bad); }
.sc-v--benign .sc-v__word, .sc-v--fp .sc-v__word { color: var(--sc-ok); }
.sc-v--und .sc-v__word { color: var(--sc-warn); }
.sc-v__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 11px; }
.sc-v__bar i { height: 6px; background: var(--sc-rule); transition: background .12s ease; }
.sc-v__bar i.scan { background: var(--sc-text); }
.sc-v--tp .sc-v__bar i.on { background: var(--sc-bad); }
.sc-v--benign .sc-v__bar i.on, .sc-v--fp .sc-v__bar i.on { background: var(--sc-ok); }
.sc-v--und .sc-v__bar i.on { background: var(--sc-warn); }
.sc-v__lab { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 5px; font: 500 .55rem var(--font-mono); letter-spacing: .06em; color: #55606d; }
.sc-v__lab span.on { color: var(--sc-soft); }
.sc-ev { margin: 0; padding: 0; list-style: none; flex: 1; min-width: 0; font-size: .78rem; line-height: 1.4; color: var(--sc-soft); }
.sc-ev li { position: relative; padding: 0 0 4px 16px; opacity: 0; transform: translateX(-6px); transition: opacity .35s ease, transform .35s ease; }
.sc-ev li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 1px; background: var(--sc-mute); }
.sc-ev li.is-in { opacity: 1; transform: none; }

/* action / escalation */
.sc-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 40px; padding: 7px 0; margin-top: 2px; border-top: 1px solid var(--sc-rule); font: 400 .76rem var(--font-mono); }
.sc-act__t { color: var(--sc-text); opacity: 0; transition: opacity .3s ease; }
.sc-act__t.is-in { opacity: 1; }
.sc-btn { font: 600 .74rem var(--font-body); letter-spacing: .01em; padding: 5px 16px; background: var(--sc-ok); color: #07140b; opacity: 0; transition: opacity .3s ease, background .15s ease, transform .15s ease; }
.sc-btn.is-in { opacity: 1; }
.sc-btn.is-press { background: #2fae52; transform: translateY(1px); }
.sc-res { color: var(--sc-ok); opacity: 0; transition: opacity .3s ease; }
.sc-res.is-in { opacity: 1; }
.sc-res--am { color: var(--sc-warn); }
.sc-res .wb { color: var(--sc-mute); }
.sc-wb { display: none; }

/* audit chain: a ledger drawn as linked nodes */
.sc-chainwrap { display: flex; flex-direction: column; height: 100%; }
.sc-chain { flex: 1; overflow: hidden; padding: 4px 16px 0 14px; }
.sc-row { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 78px; gap: 8px; align-items: center; height: 31px; padding-left: 22px; font: 400 .72rem var(--font-mono); opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; }
.sc-row.is-in { opacity: 1; transform: none; }
.sc-row::before { content: ""; position: absolute; left: 3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: #3a444f; z-index: 1; transition: background .25s ease; }
.sc-row::after { content: ""; position: absolute; left: 6px; top: 50%; width: 1px; height: 100%; background: var(--sc-rule); }
.sc-row:last-child::after { display: none; }
.sc-row span:first-child { color: #55606d; }
.sc-row span:nth-child(2) { color: var(--sc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-row span:nth-child(3) { color: #55606d; font-size: .66rem; text-align: right; transition: color .25s ease; }
.sc-row.is-ok::before { background: var(--sc-ok); }
.sc-row.is-ok span:nth-child(3) { color: var(--sc-ok); }
.sc-foot { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 10px 16px; border-top: 1px solid var(--sc-rule); font: 500 .68rem var(--font-mono); letter-spacing: .04em; color: var(--sc-mute); }
.sc-foot.is-ok { color: var(--sc-ok); }
.sc-foot.is-ok::before { content: ""; width: 7px; height: 7px; background: var(--sc-ok); transform: rotate(45deg); flex: none; }

/* smaller screens */
@media (max-width: 1040px) {
  .scene__grid { grid-template-columns: minmax(0, 1fr) 290px; height: auto; }
  .sc-pane--queue { display: none; }
  .sc-pane--case, .sc-pane--chain { min-height: 520px; }
}
@media (max-width: 720px) {
  .scene__grid { grid-template-columns: 1fr; }
  .sc-pane + .sc-pane { border-left: 0; border-top: 1px solid var(--sc-rule); }
  .sc-pane--case { min-height: 0; padding-bottom: 8px; }
  .sc-pane--chain { min-height: 320px; }
  .sc-title { font-size: 1.15rem; }
  .sc-trace { height: auto; min-height: 150px; }
  .scene__bar > span:not(.sp):not(.scene__live) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .scene__live::before, .sc-cursor::after { animation: none; } }