/* Kantor LP, the office page. Same family as the approved PnL card (style C): deep teal ground, cream text, gold for
   gain, coral for loss, Cormorant Garamond for titles, Manrope for text, IBM Plex Mono for figures. Hairline rules,
   no boxes for their own sake. Light mode follows Telegram's colorScheme (html[data-theme]). */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #1e3a44;
  --floor: #19323b;
  --raised: #22414b;
  --text: #f1e9da;
  --muted: #b7c4c2;
  --figure: #dcd2c0;
  --rule: #3e5a63;
  --rule-strong: #587680;
  --gain: #e8c27a;
  --loss: #f08c78;
  --medal: #22414b;
  --lamp-on: #e8c27a;
  --lamp-warm: #e8c27a;
  --lamp-alarm: #f08c78;
  --lamp-off: #5d777e;
  --select: rgba(232, 194, 122, 0.3);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(16px, 5.2vw, 24px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --breath: 4.8s;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground: #f4ede1;
  --floor: #ebe2d2;
  --raised: #fbf7ef;
  --text: #16313a;
  --muted: #4a6066;
  --figure: #2a3f45;
  --rule: #cdc5b4;
  --rule-strong: #95a29f;
  --gain: #80590f;
  --loss: #a8432f;
  --medal: #fbf7ef;
  --lamp-on: #b9811f;
  --lamp-warm: #e3ae4f;
  --lamp-alarm: #c2553f;
  --lamp-off: #a3aeaa;
  --select: rgba(185, 129, 31, 0.24);
}

/* Before app.js reads Telegram's colorScheme, follow the webview's own preference so a light Telegram never
   flashes dark on open. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground: #f4ede1;
    --floor: #ebe2d2;
    --raised: #fbf7ef;
    --text: #16313a;
    --muted: #4a6066;
    --figure: #2a3f45;
    --rule: #cdc5b4;
    --rule-strong: #95a29f;
    --gain: #80590f;
    --loss: #a8432f;
    --medal: #fbf7ef;
    --lamp-on: #b9811f;
    --lamp-warm: #e3ae4f;
    --lamp-alarm: #c2553f;
    --lamp-off: #a3aeaa;
    --select: rgba(185, 129, 31, 0.24);
  }
}

/* ---------- base ---------- */

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

[hidden] {
  display: none !important;
}

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ground);
  color: var(--text);
  font: 400 15px/1.5 var(--sans);
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

::selection {
  background: var(--select);
  color: var(--text);
}

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

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- scene tokens: a calm night office (dark) and the same room by day (light) ---------- */

:root,
:root[data-theme="dark"] {
  --sc-floor: #16303a;
  --sc-tile: #1a3843;
  --sc-slab-l: #10262e;
  --sc-slab-r: #0b1d23;
  --sc-wall-b: #284954;
  --sc-wall-l: #1f3c46;
  --sc-wash: rgba(241, 233, 218, 0.05);
  --sc-skirt-b: #1d3943;
  --sc-skirt-l: #183139;
  --sc-end-r: #142b33;
  --sc-end-l: #1a353e;
  --sc-cap: #3e5a63;
  --sc-frame: #3e5a63;
  --sc-glass: #0e2026;
  --sc-sill: #4a6872;
  --sc-board-frame: #b9ae9a;
  --sc-board: #e9e1d1;
  --sc-board-ink: #1e3a44;
  --sc-board-accent: #b9811f;
  --sc-wood-t: #8c765a;
  --sc-wood-l: #735f47;
  --sc-wood-r: #5c4b38;
  --sc-shelf-in: #172b31;
  --sc-spk-t: #2b4650;
  --sc-spk-l: #1e3740;
  --sc-spk-r: #172d35;
  --sc-cone: #0f2026;
  --sc-cone-in: #3e5a63;
  --sc-pot-t: #c79473;
  --sc-pot-l: #a9765a;
  --sc-pot-r: #8d5f46;
  --sc-leaf: #6e9e7a;
  --sc-leaf-d: #4f7c5e;
  --sc-rug: #2f5058;
  --sc-rug-in: #24434c;
  --sc-sofa-t: #4d7a79;
  --sc-sofa-l: #3d6564;
  --sc-sofa-r: #30514f;
  --sc-cushion-t: #5a8886;
  --sc-cushion-l: #47706e;
  --sc-cushion-r: #3a5e5c;
  --sc-pillow-t: #dcd2c0;
  --sc-pillow-l: #c3b8a4;
  --sc-pillow-r: #a99e8b;
  --sc-desk-t: #d3c6ad;
  --sc-desk-l: #b9ab91;
  --sc-desk-r: #9c8f78;
  --sc-top-t: #e6dcc7;
  --sc-top-l: #c8bba2;
  --sc-top-r: #ada08a;
  --sc-key-t: #3e5a63;
  --sc-key-l: #2e4a53;
  --sc-key-r: #263f47;
  --sc-mon-t: #3a5862;
  --sc-mon-l: #2a4650;
  --sc-mon-r: #213b44;
  --sc-chair-t: #2e4b55;
  --sc-chair-l: #233d46;
  --sc-chair-r: #1b323a;
  --sc-screen-off: #15303a;
  --sc-screen-on: #f3d9a0;
  --sc-screen-alarm: #f4a08d;
  --sc-glow-warm: #e8c27a;
  --sc-glow-alarm: #f08c78;
  --sc-plate-bg: rgba(14, 32, 38, 0.86);
  --sc-plate-text: #f1e9da;
  --sc-visor: #10252c;
  --sc-eye-on: #f7d58e;
  --sc-eye-alarm: #f6a08c;
  --sc-sleep: #dcd2c0;
  --sc-core-off: #3e5a63;
  --sc-cream: #f1e9da;
  --sc-gold: #e8c27a;
  --bubble-bg: #24454f;
  --bar: #1a333c;
}

:root[data-theme="light"] {
  --sc-floor: #e4dbc9;
  --sc-tile: #dbd1bd;
  --sc-slab-l: #a6b9b5;
  --sc-slab-r: #8fa4a0;
  --sc-wall-b: #f3ecdf;
  --sc-wall-l: #dcd8c9;
  --sc-wash: rgba(255, 255, 255, 0.4);
  --sc-skirt-b: #d8cfbe;
  --sc-skirt-l: #c6c3b5;
  --sc-end-r: #b6c3bf;
  --sc-end-l: #cad2ce;
  --sc-cap: #c3ccc8;
  --sc-frame: #aebbb7;
  --sc-glass: #cfe3e4;
  --sc-sill: #c3ccc8;
  --sc-board-frame: #9fb0ac;
  --sc-board: #fffdf7;
  --sc-wood-t: #b29674;
  --sc-wood-l: #957b5c;
  --sc-wood-r: #7c6449;
  --sc-shelf-in: #6e5a45;
  --sc-spk-t: #4e6d76;
  --sc-spk-l: #3e5c65;
  --sc-spk-r: #314c54;
  --sc-cone: #2a444c;
  --sc-cone-in: #7d969d;
  --sc-rug: #c9d6d1;
  --sc-rug-in: #d8e1dc;
  --sc-sofa-t: #86aaa5;
  --sc-sofa-l: #719691;
  --sc-sofa-r: #5f837e;
  --sc-cushion-t: #9bbcb7;
  --sc-cushion-l: #84a8a3;
  --sc-cushion-r: #729591;
  --sc-desk-t: #4e7079;
  --sc-desk-l: #3e5e67;
  --sc-desk-r: #324f57;
  --sc-top-t: #5b7e87;
  --sc-top-l: #4a6c75;
  --sc-top-r: #3b5a62;
  --sc-chair-t: #a7bab6;
  --sc-chair-l: #93a8a4;
  --sc-chair-r: #7e9591;
  --sc-screen-off: #2a444c;
  --sc-screen-on: #fce7b4;
  --sc-glow-warm: #e3ae4f;
  --sc-glow-alarm: #e2765f;
  --sc-plate-bg: rgba(30, 58, 68, 0.88);
  --bubble-bg: #fffdf8;
  --bar: #efe7d9;
}

/* Agent colours: muted, distinct, readable on teal and on cream. */
[data-agent="athena"] { --agent: #9db4d0; --agent-shade: #7d95b3; --agent-light: #c5d4e5; --i: 0; }
[data-agent="artemis"] { --agent: #8cbf95; --agent-shade: #6e9f78; --agent-light: #bddcc2; --i: 1; }
[data-agent="hades"] { --agent: #c29b9e; --agent-shade: #a27d80; --agent-light: #dec2c4; --i: 2; }
[data-agent="poseidon"] { --agent: #69b3be; --agent-shade: #4e949f; --agent-light: #a3d3da; --i: 3; }
[data-agent="apollo"] { --agent: #e2a869; --agent-shade: #c28a4e; --agent-light: #f0cb9e; --i: 4; }
[data-agent="hermes"] { --agent: #cbbf7f; --agent-shade: #aba062; --agent-light: #e3daab; --i: 5; }
[data-agent="kronos"] { --agent: #b6a58d; --agent-shade: #968670; --agent-light: #d6c9b5; --i: 6; }
[data-agent="vulcan"] { --agent: #cc8a62; --agent-shade: #ab6c47; --agent-light: #e5b396; --i: 7; }

/* ---------- the five-second answer ---------- */

.headline {
  margin: 0 0 14px;
  font: 600 2.125rem/1.06 var(--serif);
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: var(--text);
}

.headline[data-size="short"] {
  font-size: 2.875rem;
  line-height: 1;
}

.headline[data-tone="ok"] {
  color: var(--gain);
}
.headline[data-tone="bad"] {
  color: var(--loss);
}
.headline[data-tone="idle"] {
  color: var(--muted);
}
/* Old data never shows a gold "all good": the sentence stays, the colour steps back. */
.headline[data-stale="1"] {
  color: var(--muted);
}

.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--muted);
}

.tally__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The small lamp used in the tally, the nameplates and the brake line. Shape differs per state, not only colour. */
.lamp-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lamp-off);
}
.lamp-dot[data-lamp="on"] {
  background: var(--lamp-on);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--lamp-warm) 55%, transparent);
}
.lamp-dot[data-lamp="check"] {
  background: transparent;
  border: 1.5px solid var(--lamp-alarm);
}
.lamp-dot[data-lamp="fault"] {
  background: var(--lamp-alarm);
  outline: 1.5px solid var(--lamp-alarm);
  outline-offset: 1.5px;
}

.pending {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 0;
  font-size: 0.9375rem;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--gain);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.lede__money {
  margin-top: 14px;
  font: 400 0.8125rem/1.4 var(--mono);
  color: var(--figure);
  font-variant-numeric: tabular-nums;
}

.lede__money:empty {
  display: none;
}

.lede__sep {
  color: var(--muted);
}

.stale-note {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--loss);
}

/* ---------- app frame: header, panels, tab bar ---------- */

.app {
  --pad-l: calc(var(--gutter) + max(var(--inset-left, 0px), env(safe-area-inset-left, 0px)));
  --pad-r: calc(var(--gutter) + max(var(--inset-right, 0px), env(safe-area-inset-right, 0px)));
  --bar-h: 58px;
  --bar-pad: max(var(--inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
}

.appbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  max-width: 34rem;
  margin: 0 auto;
  padding: calc(max(var(--inset-top, 0px), env(safe-area-inset-top, 0px)) + 14px) var(--pad-r) 12px var(--pad-l);
}

.appbar__id {
  display: grid;
  gap: 3px;
}

.appbar__name {
  font: 600 1.375rem/1 var(--serif);
  letter-spacing: 0.01em;
}

.appbar__time {
  font: 400 0.71875rem/1.2 var(--mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.appbar__time[data-stale="1"] {
  color: var(--loss);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border: 1px solid color-mix(in srgb, var(--gain) 60%, transparent);
  border-radius: 999px;
  font: 400 0.6875rem/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--gain);
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lamp-on);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--lamp-warm) 60%, transparent);
  animation: bulb var(--breath) ease-in-out infinite alternate;
}

.panels {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 var(--pad-r) calc(var(--bar-h) + var(--bar-pad) + 36px) var(--pad-l);
}

.lede {
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 max(var(--inset-right, 0px), env(safe-area-inset-right, 0px)) var(--bar-pad) max(var(--inset-left, 0px), env(safe-area-inset-left, 0px));
  background: var(--bar);
  border-top: 1px solid var(--rule);
}

.tab {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-height: var(--bar-h);
  padding: 0;
  border: 0;
  background: none;
  font: 400 0.71875rem/1 var(--sans);
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
}

.tab svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab circle {
  fill: currentColor;
  stroke: none;
}

.tab[aria-selected="true"] {
  color: var(--gain);
}

.tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: calc(50% - 14px);
  width: 28px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--gain);
}

.tab:focus-visible {
  outline-offset: -4px;
}

/* The first section of the Posisi and Log tabs starts right under the header, like the Kantor lede. */
.sec.sec--first {
  margin-top: 0;
}

.sub-title--first {
  margin-top: 0;
}

/* ---------- the scene ---------- */

.scene {
  position: relative;
  margin: 22px calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l));
  padding: 0 4px;
}

.scene__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  -webkit-user-select: none;
  user-select: none;
}

.scene__hint {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

/* room and furniture */
.s-floor { fill: var(--sc-floor); }
.s-tile { fill: var(--sc-tile); }
.s-slab-l { fill: var(--sc-slab-l); }
.s-slab-r { fill: var(--sc-slab-r); }
.s-wall-b { fill: var(--sc-wall-b); }
.s-wall-l { fill: var(--sc-wall-l); }
.s-wash { fill: var(--sc-wash); }
.s-skirt-b { fill: var(--sc-skirt-b); }
.s-skirt-l { fill: var(--sc-skirt-l); }
.s-end-r { fill: var(--sc-end-r); }
.s-end-l { fill: var(--sc-end-l); }
.s-cap { fill: var(--sc-cap); }
.s-frame { fill: var(--sc-frame); }
.s-glass, .s-moon-cut { fill: var(--sc-glass); }
.s-moon { fill: var(--sc-cream); }
.s-star { fill: var(--sc-cream); opacity: 0.8; }
.s-sill { fill: var(--sc-sill); }
.s-board-frame { fill: var(--sc-board-frame); }
.s-board { fill: var(--sc-board); }
.s-tray { fill: var(--sc-board-frame); }
.s-board-title { font: 400 4.6px var(--sans); letter-spacing: 0.14em; fill: var(--sc-board-ink); }
.s-board-big { font: 600 17px var(--serif); fill: var(--sc-board-ink); }
.s-board-label { font: 400 5.2px var(--sans); fill: var(--sc-board-ink); }
.s-board-ink { fill: none; stroke: var(--sc-board-accent); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.s-board-ink--soft { stroke: var(--sc-board-ink); opacity: 0.35; }
.s-wood-t { fill: var(--sc-wood-t); }
.s-wood-l { fill: var(--sc-wood-l); }
.s-wood-r { fill: var(--sc-wood-r); }
.s-board-edge { fill: var(--sc-wood-t); }
.s-shelf-in { fill: var(--sc-shelf-in); }
.s-book-0 { fill: #9db4d0; }
.s-book-1 { fill: #c29b9e; }
.s-book-2 { fill: #8cbf95; }
.s-book-3 { fill: #e2a869; }
.s-book-4 { fill: #dcd2c0; }
.s-spk-t { fill: var(--sc-spk-t); }
.s-spk-l { fill: var(--sc-spk-l); }
.s-spk-r { fill: var(--sc-spk-r); }
.s-cone { fill: var(--sc-cone); }
.s-cone-in { fill: var(--sc-cone-in); }
.s-pot-t { fill: var(--sc-pot-t); }
.s-pot-l { fill: var(--sc-pot-l); }
.s-pot-r { fill: var(--sc-pot-r); }
.s-leaf { fill: var(--sc-leaf); }
.s-leaf-d { fill: var(--sc-leaf-d); }
.s-rug { fill: var(--sc-rug); }
.s-rug-in { fill: var(--sc-rug-in); }
.s-sofa-t { fill: var(--sc-sofa-t); }
.s-sofa-l { fill: var(--sc-sofa-l); }
.s-sofa-r { fill: var(--sc-sofa-r); }
.s-cushion-t { fill: var(--sc-cushion-t); }
.s-cushion-l { fill: var(--sc-cushion-l); }
.s-cushion-r { fill: var(--sc-cushion-r); }
.s-pillow-t { fill: var(--sc-pillow-t); }
.s-pillow-l { fill: var(--sc-pillow-l); }
.s-pillow-r { fill: var(--sc-pillow-r); }
.s-desk-t { fill: var(--sc-desk-t); }
.s-desk-l { fill: var(--sc-desk-l); }
.s-desk-r { fill: var(--sc-desk-r); }
.s-top-t { fill: var(--sc-top-t); }
.s-top-l { fill: var(--sc-top-l); }
.s-top-r { fill: var(--sc-top-r); }
.s-key-t { fill: var(--sc-key-t); }
.s-key-l { fill: var(--sc-key-l); }
.s-key-r { fill: var(--sc-key-r); }
.s-mon-t { fill: var(--sc-mon-t); }
.s-mon-l { fill: var(--sc-mon-l); }
.s-mon-r { fill: var(--sc-mon-r); }
.s-chair-t { fill: var(--sc-chair-t); }
.s-chair-l { fill: var(--sc-chair-l); }
.s-chair-r { fill: var(--sc-chair-r); }

:root[data-theme="light"] .s-moon,
:root[data-theme="light"] .s-moon-cut,
:root[data-theme="light"] .s-star {
  display: none;
}

/* gradients for the screen glow */
.g-warm { stop-color: var(--sc-glow-warm); }
.g-alarm { stop-color: var(--sc-glow-alarm); }
.g-0 { stop-opacity: 0.62; }
.g-1 { stop-opacity: 0; }

/* robots */
.a-body, .a-tip { fill: var(--agent); }
.a-shade { fill: var(--agent-shade); }
.a-head { fill: var(--agent-light); }
.a-head-shade { fill: var(--agent); opacity: 0.6; }
.a-visor { fill: var(--sc-visor); }
.a-ant { fill: none; stroke: var(--agent-shade); stroke-width: 1.3; stroke-linecap: round; }
.a-eye { fill: var(--sc-eye-on); display: none; }
.a-core { fill: var(--sc-core-off); }
.a-sleep { fill: none; stroke: var(--sc-sleep); stroke-width: 1.2; stroke-linecap: round; opacity: 0.75; }

/* attributes: the emblem each agent wears or holds */
.x-owl-body { fill: var(--sc-cream); }
.x-owl-eye { fill: #1e3a44; }
.x-line { fill: none; stroke: var(--sc-gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[data-agent="artemis"] .x-line { stroke: #c9a06a; stroke-width: 1.8; }
.x-thin { fill: none; stroke: var(--sc-cream); stroke-width: 0.7; opacity: 0.85; }
.x-helm { fill: #6b777a; }
.x-crest { fill: none; stroke: var(--sc-cream); stroke-width: 2.6; stroke-linecap: round; }
.x-sun { fill: var(--sc-gold); opacity: 0.3; }
.x-rays { fill: none; stroke: var(--sc-gold); stroke-width: 1.3; stroke-linecap: round; opacity: 0.85; }
.x-wing { fill: var(--sc-cream); }
.x-handle { fill: none; stroke: #8c765a; stroke-width: 2; stroke-linecap: round; }
.x-head { fill: #a3aeb0; }
.x-glass-frame { fill: none; stroke: var(--sc-gold); stroke-width: 1.1; stroke-linecap: round; }
.x-sand { fill: var(--sc-gold); }

/* name plates on the desks */
.a-plate-bg { fill: var(--sc-plate-bg); stroke: transparent; stroke-width: 1; transition: stroke 0.4s var(--ease); }
.a-name { font-family: var(--sans); font-weight: 400; fill: var(--sc-plate-text); letter-spacing: 0.01em; }
.a-led { fill: var(--lamp-off); }
.tag.is-speaking .a-plate-bg { stroke: var(--sc-gold); }

/* status: the monitor is the lamp */
.a-screen { fill: var(--sc-screen-off); transition: fill 0.6s var(--ease); transition-delay: calc(var(--i) * 110ms); }
.a-glow { fill: url(#glow-warm); opacity: 0; transition: opacity 0.6s var(--ease); transition-delay: calc(var(--i) * 110ms); pointer-events: none; }
.a-fault { display: none; }
.a-fault-disc { fill: var(--sc-glow-alarm); }
.a-fault-mark { fill: none; stroke: #10252c; stroke-width: 1.7; stroke-linecap: round; }
.a-fault-dot { fill: #10252c; }

.agent[data-lamp="on"] .a-screen { fill: var(--sc-screen-on); }
.agent[data-lamp="on"] .a-glow { opacity: 0.9; animation: breathe var(--breath) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.7s); }
.agent[data-lamp="on"] .a-eye { display: inline; }
.agent[data-lamp="on"] .a-core { fill: var(--sc-eye-on); }
.agent[data-lamp="on"] .a-sleep { display: none; }
.tag[data-lamp="on"] .a-led { fill: var(--lamp-on); }

.agent[data-lamp="check"] .a-screen,
.agent[data-lamp="fault"] .a-screen { fill: var(--sc-screen-alarm); }
.agent[data-lamp="check"] .a-glow,
.agent[data-lamp="fault"] .a-glow { fill: url(#glow-alarm); opacity: 0.75; }
.agent[data-lamp="check"] .a-glow { animation: pulse 3.2s ease-in-out infinite; }
.agent[data-lamp="check"] .a-eye,
.agent[data-lamp="fault"] .a-eye { display: inline; fill: var(--sc-eye-alarm); }
.agent[data-lamp="check"] .a-core,
.agent[data-lamp="fault"] .a-core { fill: var(--sc-eye-alarm); }
.agent[data-lamp="check"] .a-sleep,
.agent[data-lamp="fault"] .a-sleep { display: none; }
.tag[data-lamp="check"] .a-led,
.tag[data-lamp="fault"] .a-led { fill: var(--lamp-alarm); }
.tag[data-lamp="fault"] .a-fault { display: inline; }

/* first data: the screens come on desk by desk */
.scene:not(.is-lit) .a-glow { opacity: 0; }

/* no fresh data: the screens hold still and dim; the office does not pretend to be alive */
.scene.is-stale .agent .a-glow { animation: none; opacity: 0.25; }
.scene.is-stale .agent .a-screen { opacity: 0.6; }

/* tap targets */
.a-hit { fill: transparent; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.a-hit:focus-visible { stroke: var(--gain); stroke-width: 1.2; stroke-dasharray: 3 3; }

/* ---------- the speech bubble ---------- */

/* The strip above the room that holds the bubble: the bubble never covers the whiteboard or a name plate. */
.scene__strip {
  position: relative;
  height: 92px;
}

.bubble {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  left: 0;
  width: max-content;
  max-width: min(72%, 280px);
  padding: 8px 12px 10px;
  background: var(--bubble-bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 12px 28px -10px rgba(4, 14, 18, 0.6), 0 2px 6px rgba(4, 14, 18, 0.22);
  pointer-events: none;
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: calc(var(--tail, 50%) - 5.5px);
  width: 11px;
  height: 11px;
  background: var(--bubble-bg);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transform: rotate(45deg);
}

/* A thin dotted line from the bubble's tail down to the speaking agent's head. */
.bubble__leader {
  position: absolute;
  z-index: 1;
  width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--gain) 55%, transparent);
  pointer-events: none;
}

.bubble__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 0.6875rem/1.3 var(--mono);
  color: var(--muted);
}

.bubble__dot,
.act__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--agent, var(--muted));
}

.bubble__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-size: 0.875rem;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.bubble__note {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 4px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.bubble__note[data-lamp="check"],
.bubble__note[data-lamp="fault"] {
  color: var(--loss);
}

/* ---------- aktivitas terbaru ---------- */

.acts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.act {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.act:first-child {
  padding-top: 2px;
}

.act__dot {
  margin-top: 5px;
}

.act__meta {
  font: 400 0.71875rem/1.4 var(--mono);
  color: var(--muted);
}

.act__text {
  margin-top: 2px;
  font: 600 1.125rem/1.28 var(--serif);
  overflow-wrap: anywhere;
}

/* ---------- editorial sections ---------- */

.sec {
  margin-top: 56px;
  scroll-margin-top: 16px;
}

.sec__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.sec__title {
  font: 600 1.75rem/1.1 var(--serif);
  letter-spacing: -0.005em;
}

.sec__count {
  font: 400 0.75rem/1 var(--mono);
  color: var(--muted);
  white-space: nowrap;
}

#count-decisions {
  color: var(--gain);
}

.sub-title {
  margin: 30px 0 4px;
  font: 600 1.3125rem/1.2 var(--serif);
}

.empty {
  padding: 2px 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.aside {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Numbers that roll when they change are transformed, so they need a box. */
.figure-roll {
  display: inline-block;
}

/* Ruang direksi */

.worth {
  padding-bottom: 20px;
}

.worth__label {
  margin-bottom: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.worth__value {
  display: block;
  font: 600 3.25rem/0.95 var(--serif);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}

.worth__value[data-unknown="1"] {
  font-size: 2rem;
  color: var(--muted);
}

.worth__usd {
  margin-top: 8px;
  font: 400 0.9375rem/1.3 var(--mono);
  color: var(--figure);
}

.worth__note {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--loss);
}

.ledger {
  margin: 0;
  border-top: 1px solid var(--rule);
}

.ledger__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.ledger__label {
  font-size: 0.875rem;
  color: var(--muted);
}

.ledger__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  text-align: right;
}

.ledger__value {
  font: 400 0.9375rem/1.3 var(--mono);
  color: var(--figure);
  font-variant-numeric: tabular-nums;
}

.ledger__sub {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--muted);
}

:root [data-tone="gain"] {
  color: var(--gain);
}
:root [data-tone="loss"] {
  color: var(--loss);
}

.brake {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--muted);
}

.brake .lamp-dot {
  transform: translateY(-1px);
}

.brake[data-active="1"] {
  color: var(--loss);
}

/* Keputusan menunggu */

.ask {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.ask__q {
  margin-bottom: 14px;
  font: 600 1.375rem/1.25 var(--serif);
  overflow-wrap: anywhere;
}

.ask__options {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ask__option {
  display: grid;
  grid-template-columns: 1.625rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
}

.ask__n {
  display: inline-grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  font: 400 0.75rem/1 var(--mono);
  color: var(--muted);
}

.ask__option[data-recommended="1"] .ask__n {
  border-color: var(--gain);
  color: var(--gain);
}

.ask__text {
  overflow-wrap: anywhere;
}

.ask__pick {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gain);
}

.ask__age {
  margin-top: 12px;
  font: 400 0.75rem/1.3 var(--mono);
  color: var(--muted);
}

/* Posisi */

.group {
  display: grid;
}

.pos {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.group > .pos:first-child {
  padding-top: 2px;
}

.pos__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.pos__pool {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
  font: 600 1.3125rem/1.2 var(--serif);
  overflow-wrap: anywhere;
}

.pos__mode {
  padding: 1px 6px;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  font: 400 0.625rem/1.4 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transform: translateY(-2px);
}

.pos__pnl {
  font: 400 0.9375rem/1.3 var(--mono);
  color: var(--figure);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pos__value {
  margin-top: 4px;
  font: 400 0.875rem/1.4 var(--mono);
  color: var(--figure);
}

.pos__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.pos__fresh {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--muted);
}

.pos__reason {
  margin-top: 4px;
  font-size: 0.875rem;
}

/* Kegiatan tim */

.feed {
  margin: 0;
  padding: 0;
  list-style: none;
}

.feed__item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}

.feed__item:first-child {
  padding-top: 2px;
}

.feed__time {
  padding-top: 4px;
  font: 400 0.75rem/1.35 var(--mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.feed__body {
  font-size: 0.875rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.feed__who {
  margin-right: 7px;
  font: 600 1.0625rem/1 var(--serif);
}

.more {
  min-height: 44px;
  margin-top: 6px;
  padding: 10px 0;
  border: 0;
  background: none;
  font: 400 0.875rem/1.3 var(--sans);
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--gain);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: pointer;
}

/* Riset dan kabar */

.finding {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.finding__label {
  margin-bottom: 4px;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gain);
}

.finding__label[data-kind="observation"] {
  color: var(--muted);
}

.finding__title {
  font: 600 1.3125rem/1.25 var(--serif);
  overflow-wrap: anywhere;
}

.finding__body {
  max-width: 62ch;
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.news {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.news .empty {
  padding: 8px 0;
}

.news__flag {
  flex: none;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.625rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--loss);
  transform: translateY(-1px);
}

/* Biaya */

.spend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 14px;
}

.spend__value {
  font: 600 2.5rem/1 var(--serif);
  font-variant-numeric: lining-nums;
}

.spend__label {
  font-size: 0.875rem;
  color: var(--muted);
}

.leaders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  padding-top: 6px;
}

.leaders__row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 0;
  font-size: 0.875rem;
}

.leaders__fill {
  flex: 1;
  min-width: 8px;
  border-bottom: 1px dotted var(--rule-strong);
  transform: translateY(-4px);
}

.leaders__value {
  font: 400 0.8125rem/1.3 var(--mono);
  color: var(--figure);
  font-variant-numeric: tabular-nums;
}

.spend__research {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.colophon {
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---------- motion ---------- */

@keyframes breathe {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@keyframes bulb {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.9;
  }
}

/* ---------- gate ---------- */

.gate {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  min-height: 100svh;
  padding: 40px var(--gutter);
  text-align: center;
}

.gate__mark {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1.5px solid var(--gain);
  border-radius: 50%;
}

.gate__mark svg {
  width: 40px;
  height: 52px;
}

.gate__body { fill: #9db4d0; }
.gate__head { fill: #c5d4e5; }
.gate__visor { fill: #10252c; }
.gate__tip { fill: #9db4d0; }
.gate__ant { fill: none; stroke: #7d95b3; stroke-width: 1.3; stroke-linecap: round; }
.gate__sleep { fill: none; stroke: #dcd2c0; stroke-width: 1.2; stroke-linecap: round; }

.gate__title {
  max-width: 16ch;
  font: 600 2.125rem/1.08 var(--serif);
  text-wrap: balance;
}

.gate__sub {
  max-width: 32ch;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}