/* ==========================================================================
   Panchami Group ERP — Aurum

   Built on the house brand rather than beside it: the warm near-black, the
   gold, and Fraunces, all carried over from panchamihub.com.

   Four rules hold it together:

   1. No boxes inside boxes. Content sits on the field; hairlines and space
      do the work borders used to. Where a plane is needed it is defined by
      a warm light catching its top edge, not by a rectangle drawn round it.
   2. One gold. Every workspace uses the same accent, so the system reads as
      one company rather than four products. Zeus alone sits above it, at the
      white-hot end of the same ramp.
   3. Display figures are set in Fraunces; data columns are set in the mono.
      A hero number should look like money. A column of forty should line up.
   4. Warm on both sides. Light mode is ivory paper and ink, not grey — the
      same brand under different lighting.
   ========================================================================== */

/* ==========================================================================
   TOKENS — dark, which is where this brand lives
   ========================================================================== */

:root {
  --void:    #08080A;
  --field:   #0B0B0E;
  --plane:   #131318;
  --plane-2: #1A1A21;
  --plane-3: #22222A;

  --hair:   rgba(243, 241, 236, .075);
  --hair-2: rgba(243, 241, 236, .042);
  --edge:   rgba(243, 241, 236, .145);

  --ink:   #F5F3EE;
  --ink-2: #B8B5AE;
  --ink-3: #8A8780;
  --ink-4: #605D58;

  --gold:      #C6A15B;
  --gold-lit:  #EBCE93;
  --gold-deep: #8A6D34;
  --gold-soft: rgba(198, 161, 91, .14);
  --gold-line: rgba(198, 161, 91, .30);
  --gold-glow: rgba(198, 161, 91, .42);
  --on-gold:   #17130A;

  --zeus:      #FFF6E2;
  --zeus-soft: rgba(255, 246, 226, .10);
  --zeus-line: rgba(255, 246, 226, .28);

  --good: #4ADE9E; --good-soft: rgba(74, 222, 158, .11); --good-line: rgba(74, 222, 158, .30);
  --warn: #F0B95F; --warn-soft: rgba(240, 185, 95, .11); --warn-line: rgba(240, 185, 95, .30);
  --bad:  #F0787F; --bad-soft:  rgba(240, 120, 127, .11); --bad-line: rgba(240, 120, 127, .30);

  /* One accent for the whole house. [data-module] varies only the tint that
     lights the rail, so which room you are in still reads. */
  --accent:      var(--gold);
  --accent-lit:  var(--gold-lit);
  --accent-soft: var(--gold-soft);
  --accent-line: var(--gold-line);
  --accent-glow: var(--gold-glow);
  --accent-ink:  var(--on-gold);
  --tint: rgba(198, 161, 91, .10);

  --display: Fraunces, Georgia, "Times New Roman", serif;
  --sans:    Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mark:    "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", var(--display);

  --rail-w: 64px; --nav-w: 206px; --top-h: 62px; --people-w: 290px; --tile-min: 172px;
  --r-sm: 8px; --r-md: 11px; --r-lg: 15px; --r-xl: 20px; --r-pill: 999px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --lift: 0 18px 44px -26px rgba(0, 0, 0, .95);
}

[data-module="customers"] { --tint: rgba(150, 190, 255, .085); }
[data-module="people"]    { --tint: rgba(255, 170, 120, .085); }
[data-module="admin"]     { --tint: rgba(200, 200, 220, .07); }
[data-module="home"]      { --tint: rgba(255, 246, 226, .10); }

/* ==========================================================================
   TOKENS — light. Ivory paper and ink; the gold darkens to hold on white.
   ========================================================================== */

[data-theme="light"] {
  --void:    #EFEBE1;
  --field:   #F7F4ED;
  --plane:   #FFFDF8;
  --plane-2: #F1EDE2;
  --plane-3: #E7E2D4;

  --hair:   rgba(26, 20, 7, .10);
  --hair-2: rgba(26, 20, 7, .052);
  --edge:   rgba(26, 20, 7, .19);

  --ink:   #17130A;
  --ink-2: #4A443A;
  --ink-3: #6E685C;
  --ink-4: #938C7E;

  --gold:      #8A6D34;
  --gold-lit:  #6E5527;
  --gold-deep: #C6A15B;
  --gold-soft: rgba(138, 109, 52, .10);
  --gold-line: rgba(138, 109, 52, .30);
  --gold-glow: rgba(138, 109, 52, .28);
  --on-gold:   #FFFDF8;

  --zeus:      #6E5527;
  --zeus-soft: rgba(110, 85, 39, .09);
  --zeus-line: rgba(110, 85, 39, .30);

  --good: #0E7A57; --good-soft: rgba(14, 122, 87, .10); --good-line: rgba(14, 122, 87, .30);
  --warn: #96671B; --warn-soft: rgba(150, 103, 27, .10); --warn-line: rgba(150, 103, 27, .30);
  --bad:  #B33344; --bad-soft:  rgba(179, 51, 68, .10);  --bad-line: rgba(179, 51, 68, .30);

  --tint: rgba(138, 109, 52, .07);
  --lift: 0 16px 38px -24px rgba(26, 20, 7, .38);
}
[data-theme="light"][data-module="customers"] { --tint: rgba(40, 90, 160, .06); }
[data-theme="light"][data-module="people"]    { --tint: rgba(180, 80, 30, .06); }
[data-theme="light"][data-module="admin"]     { --tint: rgba(60, 60, 80, .05); }
[data-theme="light"][data-module="home"]      { --tint: rgba(138, 109, 52, .08); }

/* ==========================================================================
   BASE
   ========================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--field); color: var(--ink);
  font: 400 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1 { font: 300 30px/1.14 var(--display); letter-spacing: -.02em; margin: 0; }
h2 { font: 400 17px/1.25 var(--display); letter-spacing: -.01em; margin: 0; }
h3 { font: 400 16px/1.3 var(--display); margin: 0; }
a { color: var(--gold-lit); text-decoration: none; }
a:hover { color: var(--ink); }
::selection { background: var(--gold-soft); color: var(--gold-lit); }

/* The eyebrow is the brand's voice: mono, wide, small, gold. */
.eyebrow, .nav-group, .people-group, thead th, .tile .label, label,
.sheet-head .meta, .chat-list .head b {
  font-family: var(--mono); font-size: 9.5px; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
}

/* Display figures wear the display face. Data columns wear the mono, because
   forty of them have to line up. */
.fig, .tile .value, .balance-strip .v, .work-clock, .need b, .stat-value {
  font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 400;
}
.num, td.num, th.num, .code, .deal .val {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.code { font-size: 11.5px; letter-spacing: -.01em; color: var(--ink-3); }
.negative { color: var(--bad); }

/* The ambient field: a warm light above and behind everything. It is the
   only decoration in the interface and it never crosses a number. */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 660px at 78% -12%, var(--tint), transparent 62%),
    radial-gradient(900px 560px at 4% 104%, var(--gold-soft), transparent 58%);
}
.ambient i { display: none; }

/* ==========================================================================
   SHELL
   ========================================================================== */

.app { display: none; position: relative; z-index: 1; }
.app.ready { display: block; }

.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 50;
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 0 16px; gap: 3px;
}
.rail .brand {
  width: 38px; height: 38px; flex-shrink: 0; margin-bottom: 18px; padding: 0; border: 0;
  border-radius: var(--r-md); display: grid; place-items: center; cursor: pointer;
  font: 600 19px/1 var(--mark); color: var(--on-gold);
  background: linear-gradient(150deg, #F6E4BC, var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 6px 22px -6px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.rail .brand:hover { transform: translateY(-1px); box-shadow: 0 9px 28px -6px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.45); }
.rail .brand.on { box-shadow: 0 0 0 2px var(--field), 0 0 0 3px var(--gold-line), 0 8px 26px -6px var(--gold-glow); }

.rail-btn {
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--r-md);
  background: transparent; cursor: pointer; color: var(--ink-3);
  display: grid; place-items: center; position: relative;
  transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.rail-btn svg { width: 17px; height: 17px; }
.rail-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rail-btn:hover { color: var(--ink); background: var(--plane); transform: none; box-shadow: none; }
.rail-btn.on {
  color: var(--gold-lit); background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.rail-btn.on svg { filter: none; }
.rail .spacer { flex: 1; }
.rail-btn.soon { opacity: .35; }
.rail-btn.soon:hover { opacity: .65; }

/* The nav is type on the field. No panel, no border — the space is the edge. */
.nav {
  position: fixed; top: 0; bottom: 0; left: var(--rail-w); width: var(--nav-w); z-index: 40;
  overflow-y: auto; padding: 0 12px 24px 6px;
}
.nav-head { padding: 22px 12px 4px; }
.nav-head b { font: 500 15px/1.2 var(--display); letter-spacing: -.01em; display: block; }
.nav-head span {
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep); margin-top: 7px; display: block;
}
.nav-group { padding: 26px 12px 9px; color: var(--ink-4); }
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 11px; border-radius: var(--r-sm); font-size: 13.5px;
  color: var(--ink-2); cursor: pointer; text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-item:hover { background: var(--plane); color: var(--ink); text-decoration: none; }
.nav-item.active {
  color: var(--ink); font-weight: 500;
  background: linear-gradient(90deg, var(--gold-soft), transparent);
  box-shadow: inset 2px 0 0 var(--gold);
}
.nav-badge {
  background: var(--gold); color: var(--on-gold); font-family: var(--mono);
  font-size: 10px; font-weight: 500; min-width: 19px; height: 18px;
  border-radius: var(--r-pill); display: grid; place-items: center; padding: 0 6px;
}

.top {
  position: fixed; top: 0; right: 0; height: var(--top-h); z-index: 30;
  left: calc(var(--rail-w) + var(--nav-w));
  display: flex; align-items: center; gap: 13px; padding: 0 24px;
}
.top .entity { font-size: 12.5px; color: var(--ink-3); }
.top .entity b { color: var(--ink-2); font-weight: 500; }
.top .spacer { flex: 1; }
.burger { display: none; background: none; border: 0; padding: 6px 8px; cursor: pointer; color: var(--ink-2); font-size: 17px; }

main {
  padding: calc(var(--top-h) + 10px) 26px 72px calc(var(--rail-w) + var(--nav-w) + 20px);
  max-width: 1800px; position: relative; z-index: 1;
}

.page-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head .grow { flex: 1; min-width: 240px; }
.page-head p { margin: 10px 0 0; color: var(--ink-3); font-size: 13px; max-width: 72ch; line-height: 1.7; }

/* ==========================================================================
   CONTROLS
   ========================================================================== */

button, .btn {
  font: 500 12.5px/1 var(--sans); padding: 9px 17px; border-radius: var(--r-sm);
  border: 0; cursor: pointer; color: var(--on-gold);
  background: linear-gradient(140deg, var(--gold-lit), var(--gold));
  box-shadow: 0 5px 20px -8px var(--gold-glow);
  transition: filter .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
button:hover, .btn:hover { filter: brightness(1.07); transform: translateY(-1px); text-decoration: none; }
button:active { transform: none; filter: brightness(.96); }
button.quiet, button.secondary {
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge);
}
button.quiet:hover, button.secondary:hover { background: var(--plane); filter: none; box-shadow: inset 0 0 0 1px var(--edge); }
button.danger { background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad-line); }
button.danger:hover { background: var(--bad); color: var(--field); filter: none; }
button:disabled { opacity: .35; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }
button.link { background: none; color: var(--gold-lit); padding: 0; text-decoration: underline; font-size: inherit; box-shadow: none; }
button.link:hover { filter: none; transform: none; color: var(--ink); }

input, select, textarea {
  font: 400 13.5px/1.5 var(--sans); padding: 10px 13px; border-radius: var(--r-sm);
  border: 0; background: var(--plane); color: var(--ink); width: 100%;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow .2s var(--ease), background .2s var(--ease);
}
input:hover, select:hover, textarea:hover { box-shadow: inset 0 0 0 1px var(--edge); }
input:focus, select:focus, textarea:focus {
  outline: none; background: var(--plane-2);
  box-shadow: inset 0 0 0 1px var(--gold-line), 0 0 0 3px var(--gold-soft);
}
input[readonly] { opacity: .6; }
input.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
select option { background: #131318; color: var(--ink); }
[data-theme="light"] select option { background: #FFFDF8; color: var(--ink); }
label { display: block; color: var(--ink-4); margin-bottom: 7px; }
label .hint { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--ink-4); }
.field { margin-bottom: 16px; }
.field-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }

.chip-check {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; text-transform: none; letter-spacing: 0;
  color: var(--ink-2); margin: 0; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--plane); box-shadow: inset 0 0 0 1px var(--hair);
}
.chip-check:hover { box-shadow: inset 0 0 0 1px var(--edge); }
.chip-check input { width: auto; margin: 0; accent-color: var(--gold); box-shadow: none; }

.toolbar { display: flex; gap: 11px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 22px; }
.toolbar .field { margin: 0; min-width: 140px; }
.toolbar .search { min-width: 240px; flex: 1; max-width: 400px; }

/* ==========================================================================
   PLANES — a surface is a warm light catching an edge, not a rectangle
   ========================================================================== */

.sheet, .glass {
  background: linear-gradient(180deg, var(--plane), var(--plane) 60%, var(--field));
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), inset 0 0 0 1px var(--hair), var(--lift);
}
[data-theme="light"] .sheet, [data-theme="light"] .glass {
  background: var(--plane);
  box-shadow: inset 0 0 0 1px var(--hair), var(--lift);
}
.sheet-head {
  padding: 16px 20px; display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--hair-2);
}
.sheet-head h2 { flex: 1; }
.sheet-head .meta { color: var(--ink-4); }
.sheet-head a.meta { color: var(--gold-deep); text-decoration: none; }
.sheet-head a.meta:hover { color: var(--gold-lit); }
.sheet-body { padding: 20px; }
.sheet-foot {
  padding: 14px 20px; border-top: 1px solid var(--hair-2);
  font-size: 11.5px; color: var(--ink-4); line-height: 1.7;
}

.empty { padding: 58px 24px; text-align: center; }
.empty h3 { font-size: 17px; margin-bottom: 9px; }
.empty p { margin: 0 auto 20px; max-width: 46ch; font-size: 13px; color: var(--ink-3); line-height: 1.7; }

.skeleton { padding: 26px 22px; }
.skeleton div {
  height: 11px; border-radius: var(--r-pill); margin-bottom: 13px; background: var(--plane-2);
  animation: shimmer 1.6s ease-in-out infinite;
}
.skeleton div:nth-child(2) { width: 78%; } .skeleton div:nth-child(3) { width: 56%; }
@keyframes shimmer { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Figures live on the field, divided by hairlines, never boxed. */
.tiles {
  display: grid; gap: 0; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), 1fr));
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.tile {
  padding: 18px 22px 20px; text-align: left; color: inherit; font-family: inherit;
  background: transparent; border: 0; border-radius: 0; box-shadow: inset 1px 0 0 var(--hair-2);
  transition: background .2s var(--ease);
}
.tile:first-child { box-shadow: none; }
.tile:hover { background: var(--plane); filter: none; transform: none; }
.tile:disabled { cursor: default; opacity: 1; }
.tile:disabled:hover { background: transparent; }
.tile .label { color: var(--ink-4); display: block; }
.tile .value { font-size: 27px; line-height: 1.1; letter-spacing: -.02em; margin-top: 12px; color: var(--ink); display: block; }
.tile .value.negative { color: var(--bad); }
.tile .sub { font-size: 10.5px; color: var(--ink-4); margin-top: 9px; }

.callout {
  border-radius: var(--r-md); padding: 14px 17px; font-size: 13px; line-height: 1.7;
  color: var(--ink-2); margin-bottom: 18px;
  background: linear-gradient(140deg, var(--gold-soft), transparent);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.callout b { font-weight: 500; color: var(--ink); }
.callout ul { margin: 9px 0 0; padding-left: 18px; }
.callout.warn   { background: linear-gradient(140deg, var(--warn-soft), transparent); box-shadow: inset 0 0 0 1px var(--warn-line); }
.callout.danger { background: linear-gradient(140deg, var(--bad-soft), transparent);  box-shadow: inset 0 0 0 1px var(--bad-line); }
.callout.ok     { background: linear-gradient(140deg, var(--good-soft), transparent); box-shadow: inset 0 0 0 1px var(--good-line); }

.tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--r-pill); background: var(--plane-2); color: var(--ink-3);
}
.tag.posted  { background: var(--good-soft); color: var(--good); }
.tag.pending { background: var(--warn-soft); color: var(--warn); }
.tag.blocked, .tag.reversed, .tag.rejected { background: var(--bad-soft); color: var(--bad); }
.tag.neutral { background: var(--plane-2); color: var(--ink-3); }
.tag.info    { background: var(--gold-soft); color: var(--gold-lit); }

.kv { display: grid; grid-template-columns: 176px 1fr; gap: 11px 20px; font-size: 13px; }
.kv dt { color: var(--ink-4); font-size: 12px; }
.kv dd { margin: 0; color: var(--ink); }

.split   { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; align-items: start; }
.split-3 { display: grid; gap: 22px; grid-template-columns: 2fr 1fr; align-items: start; }
.jump    { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-bottom: 24px; }
.jump a {
  display: block; padding: 17px 19px; border-radius: var(--r-lg); text-decoration: none; color: inherit;
  background: var(--plane); box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.jump a:hover { box-shadow: inset 0 0 0 1px var(--gold-line), var(--lift); transform: translateY(-2px); text-decoration: none; }
.jump b { display: block; font: 400 15px/1.3 var(--display); }
.jump span { display: block; font-size: 11.5px; color: var(--ink-4); margin-top: 6px; line-height: 1.6; }

/* ==========================================================================
   TABLES
   ========================================================================== */

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; padding: 11px 20px; white-space: nowrap;
  color: var(--ink-4); border-bottom: 1px solid var(--hair);
}
thead th.num, th.num { text-align: right; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--gold); }
th.sortable.asc::after  { content: ' \2191'; color: var(--gold); }
th.sortable.desc::after { content: ' \2193'; color: var(--gold); }
tbody td {
  padding: 12px 20px; font-size: 13px; color: var(--ink-2);
  border-bottom: 1px solid var(--hair-2); vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
td.num { text-align: right; color: var(--ink); white-space: nowrap; }
td.primary { color: var(--ink); }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--plane-2); }
tr.section td {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); border-top: 1px solid var(--gold-line); border-bottom: 0;
  padding-top: 20px; padding-bottom: 8px;
}
tr.subtotal td { border-top: 1px solid var(--hair); color: var(--ink); font-weight: 500; }
tr.grand td {
  border-top: 1px solid var(--gold-line); border-bottom: 0; color: var(--gold-lit);
  font-family: var(--display); font-size: 17px; padding-top: 16px;
}

@media (max-width: 768px) {
  table.reflow thead { display: none; }
  table.reflow tbody tr {
    display: block; border-radius: var(--r-md); margin-bottom: 10px;
    background: var(--plane); box-shadow: inset 0 0 0 1px var(--hair); padding: 6px 0;
  }
  table.reflow tbody td { display: flex; justify-content: space-between; gap: 14px;
                          border: 0; padding: 7px 15px; text-align: right; }
  table.reflow tbody td::before {
    content: attr(data-label); font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-4); text-align: left; flex-shrink: 0;
  }
  th.hide-sm, td.hide-sm { display: none; }
}

/* ==========================================================================
   TOP BAR PARTS
   ========================================================================== */

.jumpbox { position: relative; flex: 1; max-width: 520px; }
.jumpbox input { padding: 11px 52px 11px 15px; font-size: 13.5px; border-radius: var(--r-md); }
.jumpbox kbd {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); pointer-events: none;
}
.jump-list {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: var(--plane); border-radius: var(--r-md); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--edge), 0 24px 60px -18px rgba(0,0,0,.85);
}
[data-theme="light"] .jump-list { box-shadow: inset 0 0 0 1px var(--hair), 0 20px 48px -16px rgba(26,20,7,.3); }
.jump-list.open { display: block; }
.jump-list button {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px;
  background: none; border-radius: 0; padding: 10px 14px; cursor: pointer; box-shadow: none;
  font: 400 13px/1 var(--sans); color: var(--ink-2); text-align: left;
}
.jump-list button span { font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .12em; }
.jump-list button:hover, .jump-list button.on { background: var(--gold-soft); color: var(--ink); filter: none; transform: none; }
.jump-none { padding: 14px; font-size: 12.5px; color: var(--ink-4); }

.period-pill {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border-radius: var(--r-pill); padding: 6px 12px; background: var(--plane);
}
.period-pill.on { color: var(--good); background: var(--good-soft); }

.presence-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px;
  border-radius: var(--r-pill); background: var(--plane); box-shadow: inset 0 0 0 1px var(--hair);
  font: 400 11.5px/1 var(--sans); color: var(--ink-2); cursor: pointer;
}
.presence-pill:hover { color: var(--ink); filter: none; transform: none; box-shadow: inset 0 0 0 1px var(--edge); }
.presence-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.presence-pill .dot.s-active { background: var(--good); box-shadow: 0 0 8px var(--good); }
.presence-pill .dot.s-online { background: var(--good); opacity: .6; }
.presence-pill .dot.s-idle   { background: var(--warn); }
.presence-pill .dot.s-dnd    { background: var(--bad); }
.presence-pill .count { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }

.theme-btn, .avatar {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-sm); padding: 0;
  background: var(--plane); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hair);
  display: grid; place-items: center; font: 500 11px/1 var(--sans); cursor: pointer;
}
.theme-btn:hover, .avatar:hover { color: var(--ink); filter: none; transform: none; box-shadow: inset 0 0 0 1px var(--edge); }
.avatar { color: var(--gold-lit); }

.banner {
  position: fixed; top: calc(var(--top-h) + 6px); right: 20px; z-index: 25;
  left: calc(var(--rail-w) + var(--nav-w) + 20px); border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--warn-soft), transparent);
  box-shadow: inset 0 0 0 1px var(--warn-line);
  color: var(--ink); padding: 12px 18px; font-size: 12.5px;
}
.banner code { font-family: var(--mono); background: var(--plane-2); padding: 2px 6px; border-radius: 4px; font-size: 11.5px; }
body.has-banner main { padding-top: calc(var(--top-h) + 64px); }

.crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
          font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
          text-transform: uppercase; color: var(--ink-4); }
.crumbs button { background: none; box-shadow: none; padding: 0; color: var(--gold-deep); font: inherit; cursor: pointer; }
.crumbs button:hover { color: var(--gold-lit); filter: none; transform: none; }
.crumbs span { color: var(--ink-4); }
.crumbs .now { color: var(--ink-2); }

/* ==========================================================================
   DIALOGS AND TOASTS
   ========================================================================== */

.scrim {
  position: fixed; inset: 0; z-index: 100; background: rgba(4, 4, 6, .76);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh 18px 24px; overflow-y: auto;
}
[data-theme="light"] .scrim { background: rgba(26, 20, 7, .36); }
.dialog {
  width: 100%; max-width: 640px; background: var(--plane); border-radius: var(--r-xl);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px var(--edge),
              0 40px 90px -24px rgba(0,0,0,.9);
  animation: fadeUp .3s var(--ease) both;
}
[data-theme="light"] .dialog { box-shadow: inset 0 0 0 1px var(--hair), 0 30px 70px -20px rgba(26,20,7,.3); }
.dialog.narrow { max-width: 450px; }
.dialog.wide { max-width: 1040px; }
.dialog-head { padding: 20px 24px; border-bottom: 1px solid var(--hair-2); display: flex; align-items: center; gap: 14px; }
.dialog-head h2 { flex: 1; font-size: 19px; }
.x, .people-head .x {
  background: none; box-shadow: none; padding: 0 4px; color: var(--ink-4);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.x:hover, .people-head .x:hover { color: var(--ink); background: none; filter: none; transform: none; }
.dialog-body { padding: 22px 24px; max-height: 68vh; overflow-y: auto; }
.dialog-foot {
  padding: 16px 24px; border-top: 1px solid var(--hair-2);
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
}
.dialog-foot .grow { flex: 1; }

#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex;
          flex-direction: column; gap: 10px; max-width: 420px; }
.toast {
  background: var(--plane); border-radius: var(--r-md); padding: 14px 17px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--edge), 0 24px 56px -18px rgba(0,0,0,.85);
  animation: fadeUp .35s var(--ease) both;
}
[data-theme="light"] .toast { box-shadow: inset 0 0 0 1px var(--hair), 0 18px 44px -16px rgba(26,20,7,.26); }
.toast.ok  { box-shadow: inset 0 0 0 1px var(--good-line), inset 3px 0 0 var(--good), 0 24px 56px -18px rgba(0,0,0,.85); }
.toast.err { box-shadow: inset 0 0 0 1px var(--bad-line),  inset 3px 0 0 var(--bad),  0 24px 56px -18px rgba(0,0,0,.85); }
.toast ul { margin: 9px 0 0; padding-left: 18px; }
.toast li { margin-bottom: 5px; color: var(--ink-2); }

/* ==========================================================================
   LOGIN
   ========================================================================== */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; z-index: 1; }
.login {
  width: 100%; max-width: 400px; background: var(--plane); border-radius: var(--r-xl);
  padding: 38px 34px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px var(--hair), var(--lift);
}
.login .mark { display: flex; align-items: center; gap: 12px; font: 500 17px/1 var(--display); letter-spacing: -.01em; }
.login .mark i {
  width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; font-style: normal;
  font: 600 18px/1 var(--mark); color: var(--on-gold);
  background: linear-gradient(150deg, #F6E4BC, var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 6px 22px -6px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.4);
}
.login .org { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
              color: var(--gold-deep); margin: 14px 0 0; }
.login h1 { font-size: 24px; margin: 24px 0 22px; }
.login-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair-2);
              font-size: 11px; line-height: 1.8; color: var(--ink-4); }
.login-note b { color: var(--ink-2); font-weight: 500; }

/* ==========================================================================
   PIPELINE BOARD
   ========================================================================== */

.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 16px; align-items: flex-start; }
.col-stage { width: 272px; flex-shrink: 0; border-radius: var(--r-lg); background: var(--plane);
             box-shadow: inset 0 0 0 1px var(--hair); }
.col-stage.over { box-shadow: inset 0 0 0 1px var(--gold-line), 0 0 0 3px var(--gold-soft); }
.col-head { padding: 13px 15px; border-bottom: 1px solid var(--hair-2); }
.col-head b { font: 400 13.5px/1.25 var(--display); display: block; }
.col-head .sum { font-family: var(--mono); font-size: 10px; color: var(--ink-4); margin-top: 5px; display: block; }
.col-head .bar { height: 3px; background: var(--hair); margin-top: 10px; display: block; border-radius: 2px; }
.col-head .bar i { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-lit)); }
.col-head .bar i.over { background: var(--warn); }
.col-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; min-height: 70px; }
.col-empty { padding: 22px 8px; text-align: center; font-size: 11px; color: var(--ink-4); }

.deal { background: var(--plane-2); border-radius: var(--r-md); padding: 12px 13px; cursor: grab;
        box-shadow: inset 0 0 0 1px var(--hair-2); transition: box-shadow .2s var(--ease); }
.deal:hover { box-shadow: inset 0 0 0 1px var(--gold-line); }
.deal.dragging { opacity: .35; }
.deal b { display: block; font: 400 13px/1.4 var(--display); margin-bottom: 7px; }
.deal .meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
              font-size: 10.5px; color: var(--ink-4); }
.deal .val { font-size: 12px; color: var(--ink); white-space: nowrap; }
.deal .chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.deal .chip { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
              padding: 2px 7px; border-radius: var(--r-pill); background: var(--plane-3); color: var(--ink-4); }
.deal .chip.stale { color: var(--warn); background: var(--warn-soft); }
.deal .chip.late  { color: var(--bad);  background: var(--bad-soft); }

/* ==========================================================================
   CHARTS AND SMALL MARKS
   ========================================================================== */

.bars { display: flex; align-items: flex-end; gap: 12px; height: 206px; padding: 16px 6px 6px; }
.bars .col { flex: 1; height: 100%; min-width: 0; display: flex; flex-direction: column;
             justify-content: flex-end; align-items: center; gap: 8px; }
.bars .stack { height: calc(100% - 22px); width: 100%; display: flex; align-items: flex-end; gap: 4px; }
.bars .bar { flex: 1; min-height: 3px; border-radius: 3px 3px 1px 1px; transition: filter .2s var(--ease); }
.bars .bar.rev { background: linear-gradient(180deg, var(--gold-lit), var(--gold-deep)); }
.bars .bar.exp { background: linear-gradient(180deg, var(--plane-3), var(--plane-2)); }
.bars .col:hover .bar { filter: brightness(1.2); }
.bars .cap { font-family: var(--mono); font-size: 9px; color: var(--ink-4); letter-spacing: .06em;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--ink-4); padding: 0 6px 6px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }

.contrib-bar { height: 3px; background: var(--hair); width: 100%; display: block; border-radius: 2px; }
.contrib-bar i { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-lit)); }

.balance-strip {
  display: flex; gap: 30px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 20px;
  border-radius: var(--r-lg); background: var(--plane); box-shadow: inset 0 0 0 1px var(--hair);
}
.balance-strip .k { font-family: var(--mono); font-size: 9px; color: var(--ink-4);
                    letter-spacing: .16em; text-transform: uppercase; display: block; }
.balance-strip .v { font-size: 19px; margin-top: 7px; display: block; color: var(--ink); }
.balance-strip .v.ok  { color: var(--good); }
.balance-strip .v.off { color: var(--bad); }

/* ==========================================================================
   JOURNAL ENTRY GRID
   ========================================================================== */

.entry-grid { width: 100%; border-collapse: collapse; }
.entry-grid th { text-align: left; padding: 9px 8px; font-family: var(--mono); font-size: 9px;
                 letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4);
                 border-bottom: 1px solid var(--hair); }
.entry-grid td { padding: 5px 4px; border-bottom: 1px solid var(--hair-2); vertical-align: top; }
.entry-grid input, .entry-grid select { padding: 8px 10px; font-size: 12.5px; }
.entry-grid .del { background: transparent; color: var(--ink-4); padding: 6px 10px;
                   font-size: 13px; cursor: pointer; border-radius: var(--r-sm);
                   box-shadow: inset 0 0 0 1px var(--hair); }
.entry-grid .del:hover { color: var(--bad); background: var(--bad-soft); filter: none; transform: none;
                         box-shadow: inset 0 0 0 1px var(--bad-line); }

/* ==========================================================================
   TIMELINE AND CHECKLIST
   ========================================================================== */

.timeline { padding: 4px 0 4px 6px; }
.timeline .ev { position: relative; padding: 0 0 18px 24px; box-shadow: inset 1px 0 0 var(--hair); }
.timeline .ev:last-child { box-shadow: none; padding-bottom: 0; }
.timeline .ev::before {
  content: ''; position: absolute; left: -4px; top: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px var(--field);
}
.timeline .ev.sys::before { background: var(--ink-4); }
.timeline .ev .what { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.timeline .ev .when { font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); margin-top: 5px; }

.check-row { display: flex; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--hair-2); align-items: flex-start; }
.check-row:last-child { border-bottom: 0; }
.check-mark { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; border-radius: 50%;
              box-shadow: inset 0 0 0 1px var(--edge); display: grid; place-items: center;
              font-size: 10px; color: transparent; }
.check-row.done .check-mark { background: var(--good); color: var(--field); box-shadow: none; }
.check-row.na .check-mark { box-shadow: inset 0 0 0 1px var(--hair); }
.check-title { font-size: 13.5px; color: var(--ink); }
.check-row.done .check-title { color: var(--ink-3); }
.check-meta { font-size: 11.5px; color: var(--ink-4); margin-top: 4px; line-height: 1.6; }

/* ==========================================================================
   THE ROOM
   ========================================================================== */

.people {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--people-w); z-index: 35;
  overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(243,241,236,.022), rgba(243,241,236,.004));
  box-shadow: inset 1px 0 0 var(--hair);
  transform: translateX(100%); transition: transform .32s var(--ease);
}
[data-theme="light"] .people { background: linear-gradient(180deg, rgba(26,20,7,.022), rgba(26,20,7,.005)); }
body.people-open .people { transform: none; }
body.people-open .top    { right: var(--people-w); }
body.people-open main    { padding-right: calc(var(--people-w) + 22px); }
body.people-open .banner { right: calc(var(--people-w) + 20px); }

.people-head { padding: 22px 22px 14px; position: sticky; top: 0; z-index: 2;
               background: var(--field); display: flex; align-items: flex-start; gap: 8px; }
.people-head b { font: 400 9px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
                 color: var(--ink-4); display: block; }
.people-head span { font-size: 11px; color: var(--ink-4); margin-top: 7px; display: block; }
.people-head .x { margin-left: auto; }

.people-group { padding: 18px 22px 9px; color: var(--ink-4); }
.people-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 7px 22px; background: none; border: 0; border-radius: 0; box-shadow: none;
  cursor: pointer; text-align: left; transition: background .18s var(--ease);
}
.people-row:hover { background: var(--plane); filter: none; transform: none; }
.people-row .who { min-width: 0; flex: 1; }
.people-row .who b { display: block; font: 400 12.5px/1.3 var(--sans); color: var(--ink);
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people-row .who i { display: block; font: 400 10.5px/1.4 var(--sans); font-style: normal;
                     color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.people-row.off { opacity: .52; }
.people-row.off .who b { color: var(--ink-3); }

.av {
  width: 30px; height: 30px; flex-shrink: 0; position: relative; border-radius: var(--r-md);
  display: grid; place-items: center; font: 500 11px/1 var(--sans); color: var(--gold-lit);
  background: var(--plane-2); box-shadow: inset 0 0 0 1px var(--hair);
}
.av::after {
  content: ''; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--ink-4); box-shadow: 0 0 0 2.5px var(--field);
}
[data-theme="light"] .av::after { box-shadow: 0 0 0 2.5px var(--field); }
.av.s-active::after  { background: var(--good); box-shadow: 0 0 0 2.5px var(--field), 0 0 10px var(--good); }
.av.s-online::after  { background: var(--good); opacity: .55; }
.av.s-idle::after    { background: var(--warn); }
.av.s-dnd::after     { background: var(--bad); }
.av.s-offline::after { background: var(--ink-4); }
.av.s-inactive::after{ background: transparent; box-shadow: 0 0 0 2.5px var(--field), inset 0 0 0 1px var(--ink-4); }
.av.lg { width: 36px; height: 36px; font-size: 12px; }

.people-me { position: sticky; bottom: 0; margin-top: 14px; padding: 16px 20px 18px;
             background: var(--field); border-top: 1px solid var(--hair-2); }
.people-me .line { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.people-me .line b { font: 500 13px/1.2 var(--sans); display: block; }
.people-me .line i { font-style: normal; font-size: 10.5px; color: var(--ink-4); display: block; margin-top: 3px; }
.people-me button { width: 100%; padding: 8px 12px; font-size: 11.5px; }
.people-me .note { font-size: 10.5px; color: var(--ink-4); line-height: 1.6; margin-top: 11px; }

.dot-active, .dot-online, .dot-idle, .dot-dnd, .dot-offline, .dot-inactive {
  width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--ink-4);
}
.dot-active  { background: var(--good); box-shadow: 0 0 8px var(--good); }
.dot-online  { background: var(--good); opacity: .55; }
.dot-idle    { background: var(--warn); }
.dot-dnd     { background: var(--bad); }
.dot-inactive{ background: transparent; box-shadow: inset 0 0 0 1px var(--ink-4); }

/* ==========================================================================
   WORK
   ========================================================================== */

.work-now {
  border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 22px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(150deg, var(--gold-soft), transparent);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.work-now .grow { flex: 1; min-width: 220px; }
.work-now h3 { font: 400 17px/1.3 var(--display); margin: 0 0 6px; }
.work-now p  { margin: 0; font-size: 11.5px; color: var(--ink-4); }
.work-clock { font-size: 28px; color: var(--gold-lit); letter-spacing: -.02em; line-height: 1; }
.work-clock small { display: block; font: 400 8.5px/1.4 var(--mono); color: var(--ink-4);
                    letter-spacing: .2em; text-transform: uppercase; margin-top: 8px; }

.task { display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--hair-2); }
.task:last-child { border-bottom: 0; }
.task .grow { flex: 1; min-width: 0; }
.task h4 { font: 400 14px/1.4 var(--display); margin: 0 0 5px; }
.task .sub { font-size: 11px; color: var(--ink-4); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.task .acts { display: flex; gap: 8px; flex-shrink: 0; }
.task .acts button { padding: 7px 13px; font-size: 11.5px; }
.task.running { background: linear-gradient(90deg, var(--gold-soft), transparent); }
.task.done h4 { color: var(--ink-4); text-decoration: line-through; }
.pri { width: 2px; align-self: stretch; border-radius: 2px; background: var(--ink-4); flex-shrink: 0; }
.pri.urgent { background: var(--bad); } .pri.high { background: var(--warn); }
.pri.normal { background: var(--gold); } .pri.low { background: var(--ink-4); opacity: .5; }

.need {
  display: flex; align-items: baseline; gap: 11px; padding: 13px 17px;
  border-radius: var(--r-md); text-decoration: none; color: var(--ink);
  background: var(--plane); box-shadow: inset 0 0 0 1px var(--hair), inset 2px 0 0 var(--gold);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.need:hover { transform: translateY(-2px); text-decoration: none;
              box-shadow: inset 0 0 0 1px var(--gold-line), inset 2px 0 0 var(--gold), var(--lift); }
.need b { font-size: 22px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.need span { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.need.warn { box-shadow: inset 0 0 0 1px var(--hair), inset 2px 0 0 var(--warn); }
.need.warn b { color: var(--warn); }
.need.bad { box-shadow: inset 0 0 0 1px var(--hair), inset 2px 0 0 var(--bad); }
.need.bad b { color: var(--bad); }

/* ==========================================================================
   CHAT
   ========================================================================== */

.chat-wrap { display: grid; grid-template-columns: 244px 1fr; gap: 20px; align-items: start; }
.chat-list { border-radius: var(--r-lg); background: var(--plane); overflow: hidden;
             box-shadow: inset 0 0 0 1px var(--hair); }
.chat-list .head { padding: 16px 16px 11px; display: flex; align-items: center; gap: 8px; }
.chat-list .head b { color: var(--ink-4); flex: 1; }
.chat-list .head button { padding: 5px 11px; font-size: 10.5px; }
.chan {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px;
  background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; text-align: left;
}
.chan:hover { background: var(--plane-2); filter: none; transform: none; }
.chan.on { background: linear-gradient(90deg, var(--gold-soft), transparent); box-shadow: inset 2px 0 0 var(--gold); }
.chan .grow { flex: 1; min-width: 0; }
.chan b { display: block; font: 400 12.5px/1.35 var(--sans); color: var(--ink-2);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan.on b { color: var(--ink); font-weight: 500; }
.chan i { display: block; font: 400 10.5px/1.35 var(--sans); font-style: normal; color: var(--ink-4);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chan .unread { background: var(--gold); color: var(--on-gold); font-family: var(--mono);
                font-size: 10px; min-width: 19px; height: 18px; border-radius: var(--r-pill);
                display: grid; place-items: center; padding: 0 6px; }

.chat-room { border-radius: var(--r-lg); background: var(--plane); display: flex; flex-direction: column;
             height: calc(100vh - var(--top-h) - 108px); min-height: 420px; overflow: hidden;
             box-shadow: inset 0 0 0 1px var(--hair); }
.chat-room .head { padding: 16px 20px; border-bottom: 1px solid var(--hair-2); display: flex; align-items: center; gap: 12px; }
.chat-room .head > div { min-width: 0; }
.chat-room .head b { font: 400 15px/1.2 var(--display); display: block; }
.chat-room .head span { font-size: 11px; color: var(--ink-4); display: block; margin-top: 4px;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-log { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 3px; }
.msg { display: flex; gap: 12px; padding: 5px 0; }
.msg.cont { padding-top: 0; }
.msg.cont .av { visibility: hidden; height: 0; }
.msg .body { flex: 1; min-width: 0; }
.msg .by { font: 500 12.5px/1.3 var(--sans); }
.msg .by span { font-family: var(--mono); font-weight: 400; font-size: 9.5px; color: var(--ink-4); margin-left: 9px; }
.msg .txt { font-size: 13px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap;
            word-wrap: break-word; overflow-wrap: anywhere; }
.msg .txt .at { color: var(--gold-lit); background: var(--gold-soft); border-radius: 4px; padding: 0 4px; }
.msg.sys { justify-content: center; }
.msg.sys .txt { font-family: var(--mono); font-size: 10px; color: var(--ink-4); text-align: center; letter-spacing: .06em; }
.chat-send { padding: 14px 16px; border-top: 1px solid var(--hair-2); display: flex; gap: 11px; align-items: flex-end; }
.chat-send textarea { flex: 1; resize: none; min-height: 40px; max-height: 140px; }
.chat-held { padding: 10px 18px; font-size: 11.5px; line-height: 1.6; color: var(--warn);
             background: var(--warn-soft); border-top: 1px solid var(--warn-line); }

/* ==========================================================================
   ZEUS — the only thing allowed to be brighter than the gold
   ========================================================================== */

.zeus-mark { display: inline-flex; align-items: center; gap: 9px; }
.zeus-mark svg { width: 15px; height: 15px; color: var(--zeus); }
.zeus-mark b { font-family: var(--mono); font-size: 9.5px; font-weight: 400;
               letter-spacing: .28em; text-transform: uppercase; color: var(--zeus); }

.rail-btn.zeus { color: var(--zeus); box-shadow: inset 0 0 0 1px var(--zeus-line); }
.rail-btn.zeus.on, .rail-btn.zeus:hover {
  color: var(--zeus); background: var(--zeus-soft);
  box-shadow: inset 0 0 0 1px var(--zeus-line), 0 0 26px -6px var(--zeus-line);
}
.rail-btn.zeus .pip {
  position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bad); box-shadow: 0 0 0 2px var(--field); clip: auto;
}

.zeus-card {
  border-radius: var(--r-lg); padding: 20px 20px 18px; position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--zeus-soft), var(--gold-soft) 90%);
  box-shadow: inset 0 0 0 1px var(--zeus-line), var(--lift);
}
.zeus-card::after {
  content: ''; position: absolute; top: -44px; right: -44px; width: 140px; height: 140px;
  border-radius: 50%; background: radial-gradient(circle, var(--zeus-soft), transparent 68%);
  pointer-events: none;
}
.zeus-card .head { display: flex; align-items: center; gap: 10px; position: relative; }
.zeus-card .state { margin-left: auto; font-family: var(--mono); font-size: 9px;
                    letter-spacing: .12em; text-transform: uppercase; color: var(--good); }
.zeus-card .state.warn { color: var(--warn); } .zeus-card .state.bad { color: var(--bad); }
.zeus-card p { margin: 15px 0 0; font: 400 14px/1.65 var(--display); color: var(--ink); position: relative; }
.zeus-card .acts { display: flex; gap: 9px; margin-top: 16px; position: relative; flex-wrap: wrap; }
.zeus-card .acts button { padding: 8px 14px; font-size: 11.5px; }
.zeus-card .acts button.quiet { box-shadow: inset 0 0 0 1px var(--edge); }

/* Wins against .page-head p, which would otherwise shrink it to a caption. */
.zeus-said, .page-head .zeus-said, .page-head p.zeus-said {
  font: 300 27px/1.4 var(--display); letter-spacing: -.015em; color: var(--ink);
  margin: 18px 0 0; max-width: 36ch;
}
/* The state sits beside the mark wherever the mark goes, not only on a card. */
.zeus-mark + .state, .zeus-card .state {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--good); margin-left: 12px;
}
.zeus-mark + .state.warn, .zeus-card .state.warn { color: var(--warn); }
.zeus-mark + .state.bad,  .zeus-card .state.bad  { color: var(--bad); }
.zeus-card .state { margin-left: auto; }
.zeus-watch { display: flex; gap: 28px; flex-wrap: wrap; padding: 15px 0; margin: 24px 0;
              border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
              align-items: center; }
.zeus-watch .k { font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
                 text-transform: uppercase; color: var(--ink-4); }
.zeus-watch .n { font-size: 11.5px; color: var(--ink-3); }
.zeus-watch .n b { font-family: var(--display); font-size: 15px; font-weight: 400; color: var(--ink); margin-right: 5px; }

.finding { border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 14px; position: relative;
           box-shadow: inset 0 0 0 1px var(--hair); background: var(--plane); }
.finding.stop  { background: linear-gradient(150deg, var(--bad-soft), transparent);  box-shadow: inset 0 0 0 1px var(--bad-line); }
.finding.drift { background: linear-gradient(150deg, var(--gold-soft), transparent); box-shadow: inset 0 0 0 1px var(--gold-line); }
.finding .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.finding .sev { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
                padding: 4px 9px; border-radius: 5px; background: var(--plane-3); color: var(--ink-3); }
.finding.stop  .sev { background: var(--bad); color: var(--field); }
.finding.drift .sev { background: var(--gold-soft); color: var(--gold-lit); }
.finding .where { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
                  text-transform: uppercase; color: var(--ink-3); }
.finding .when { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); }
.finding p { margin: 14px 0 0; font: 400 15px/1.6 var(--display); color: var(--ink); }
.finding .ev { display: flex; gap: 24px; margin-top: 15px; font-size: 11.5px; color: var(--ink-3); flex-wrap: wrap; }
.finding .ev .ref { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.finding .acts { display: flex; gap: 9px; margin-top: 17px; flex-wrap: wrap; }
.finding .acts button { padding: 8px 14px; font-size: 11.5px; }

.leash { border-radius: var(--r-lg); padding: 18px 20px 16px; background: linear-gradient(170deg, var(--plane), transparent);
         box-shadow: inset 0 0 0 1px var(--hair); }
.leash-row { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.leash-row:first-of-type { margin-top: 16px; }
.leash-row .txt { flex: 1; font-size: 12.5px; color: var(--ink); }
.leash-row.off { opacity: .5; }
.leash-row.off .txt { color: var(--ink-2); }
.leash-row .why { font-size: 10.5px; color: var(--ink-4); margin-top: 2px; display: block; }
.sw { width: 30px; height: 17px; border-radius: var(--r-pill); background: var(--hair); position: relative;
      flex-shrink: 0; border: 0; padding: 0; cursor: pointer; box-shadow: none; transition: background .2s var(--ease); }
.sw:hover { filter: none; transform: none; }
.sw i { position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%;
        background: var(--ink-4); transition: transform .2s var(--ease), background .2s var(--ease); }
.sw.on { background: var(--good-soft); }
.sw.on i { transform: translateX(13px); background: var(--good); }
.sw:disabled { cursor: not-allowed; opacity: .55; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1500px) {
  body.people-open .split, body.people-open .split-3 { grid-template-columns: 1fr; }
  body.people-open { --tile-min: 150px; }
  body.people-open .jumpbox { max-width: 260px; }
}
@media (max-width: 1240px) { .presence-pill .count { display: none; } }
@media (max-width: 1180px) { .split, .split-3 { grid-template-columns: 1fr; } }

@media (max-width: 1024px) {
  .burger { display: block; }
  .rail { transform: translateX(-100%); transition: transform .3s var(--ease); background: var(--void); }
  .nav  { transform: translateX(calc(-100% - var(--rail-w))); transition: transform .3s var(--ease); background: var(--void); }
  body.nav-open .rail, body.nav-open .nav { transform: none; }
  .top { left: 0; }
  .top .entity { display: none; }
  main { padding-left: 18px; padding-right: 18px; }
  body.people-open .top  { right: 0; }
  body.people-open main  { padding-right: 18px; }
  body.people-open .banner { right: 20px; }
  .banner { left: 20px; }
  .people { z-index: 60; background: var(--void); box-shadow: -20px 0 56px -18px rgba(0,0,0,.75); }
}
@media (max-width: 900px) {
  .chat-wrap { grid-template-columns: 1fr; }
  .chat-room { height: auto; min-height: 340px; }
  .chat-log  { max-height: 52vh; }
}
@media (max-width: 768px) {
  h1 { font-size: 24px; }
  main { padding-top: calc(var(--top-h) + 8px); padding-bottom: 48px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile { box-shadow: inset 1px 0 0 var(--hair-2), inset 0 1px 0 var(--hair-2); }
  .kv { grid-template-columns: 1fr; gap: 3px 0; }
  .kv dd { margin-bottom: 11px; }
  .people { width: auto; left: 0; }
  .work-now { padding: 16px; }
  .task { flex-wrap: wrap; }
  .task .acts { width: 100%; }
  .jumpbox, .period-pill { display: none; }
  .top { gap: 9px; padding: 0 14px; }
  .zeus-said { font-size: 21px; }
  .zeus-watch { gap: 16px; }
  #toasts { right: 14px; left: 14px; max-width: none; }
}

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

@media print {
  .rail, .nav, .top, .people, .toolbar, .crumbs, .ambient, .banner, button, #toasts { display: none !important; }
  main { padding: 0; max-width: none; }
  body { background: #fff; color: #000; }
  .sheet { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* ==========================================================================
   FIELDS THAT REMEMBER, AND THE VENTURE SPLIT
   ========================================================================== */

.combo { position: relative; }
.combo-list {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70;
  background: var(--plane); border-radius: var(--r-md); overflow: hidden; max-height: 260px;
  overflow-y: auto; box-shadow: inset 0 0 0 1px var(--edge), 0 24px 56px -18px rgba(0,0,0,.85);
}
[data-theme="light"] .combo-list { box-shadow: inset 0 0 0 1px var(--hair), 0 18px 44px -16px rgba(26,20,7,.26); }
.combo-list.open { display: block; }
.combo-list button {
  display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 12px;
  background: none; border-radius: 0; padding: 9px 13px; cursor: pointer; box-shadow: none;
  font: 400 13px/1.3 var(--sans); color: var(--ink-2); text-align: left;
}
.combo-list button span { font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); }
.combo-list button:hover, .combo-list button.on { background: var(--gold-soft); color: var(--ink); filter: none; transform: none; }
.combo-list .combo-new { flex-wrap: wrap; color: var(--gold-lit); box-shadow: inset 0 1px 0 var(--hair-2); }
/* The note about what will happen sits under the word, never squeezed beside it. */
.combo-list .combo-new span { flex-basis: 100%; margin-top: 2px; color: var(--gold-deep); }

.split-rows { display: flex; flex-direction: column; gap: 8px; }
.split-row { display: flex; align-items: center; gap: 9px; }
.split-row .vs-pc { flex: 1; min-width: 0; max-width: 340px; }
.split-row .vs-pct { width: 78px; flex-shrink: 0; }
.split-row .vs-pc-mark { font-family: var(--mono); font-size: 11px; color: var(--ink-4); margin-left: -4px; }
.split-row .vs-del {
  width: 30px; height: 30px; flex-shrink: 0; padding: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-4); font-size: 16px; line-height: 1;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.split-row .vs-del:hover { color: var(--bad); background: var(--bad-soft); filter: none; transform: none;
                           box-shadow: inset 0 0 0 1px var(--bad-line); }
.split-foot { display: flex; align-items: center; gap: 14px; margin-top: 11px; }
.split-foot button { padding: 6px 13px; font-size: 11.5px; }
.split-sum { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-4); }
.split-sum.ok  { color: var(--good); }
.split-sum.off { color: var(--warn); }

.venture-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.venture-chips .vc {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--gold-soft); color: var(--gold-lit); font-size: 11px;
}
.venture-chips .vc i { font-style: normal; font-family: var(--mono); font-size: 9.5px; opacity: .75; }

/* ==========================================================================
   ZEUS HAS A BODY

   A core that shows what it is doing rather than a logo that sits there:
   it breathes when idle, spins its ring while sweeping, and burns red when
   it is holding something that should stop everything else.
   ========================================================================== */

.zeus-core { width: 74px; height: 74px; flex-shrink: 0; position: relative; }
.zeus-core svg { width: 100%; height: 100%; display: block; overflow: visible; }
.zeus-core .ring   { transform-origin: 50% 50%; animation: zRing 9s linear infinite; }
.zeus-core .ring-2 { transform-origin: 50% 50%; animation: zRing 14s linear infinite reverse; }
.zeus-core .core   { transform-origin: 50% 50%; animation: zPulse 3.4s var(--ease) infinite; }
.zeus-core .bolt   { transform-origin: 50% 50%; }
.zeus-core .spark  { opacity: 0; animation: zSpark 3.4s var(--ease) infinite; }

@keyframes zRing  { to { transform: rotate(360deg); } }
@keyframes zPulse { 0%, 100% { opacity: .55; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes zSpark { 0%, 72%, 100% { opacity: 0; } 78%, 88% { opacity: 1; } }

.zeus-core.scanning .ring   { animation-duration: 1.1s; }
.zeus-core.scanning .ring-2 { animation-duration: 1.7s; }
.zeus-core.scanning .core   { animation-duration: .8s; }
.zeus-core.alert .core      { animation-duration: 1.1s; }
.zeus-core.blind .ring, .zeus-core.blind .ring-2, .zeus-core.blind .core,
.zeus-core.blind .spark { animation: none; opacity: .3; }

.zeus-head { display: flex; align-items: center; gap: 20px; }
.zeus-head .grow { flex: 1; min-width: 0; }

/* ------------------------------------------------------------- ask Zeus */

.ask { position: relative; margin: 22px 0 6px; }
.ask input {
  padding: 13px 108px 13px 44px; font-size: 14px; border-radius: var(--r-md);
  background: var(--plane); box-shadow: inset 0 0 0 1px var(--zeus-line);
}
.ask input:focus { box-shadow: inset 0 0 0 1px var(--zeus), 0 0 0 4px var(--zeus-soft); }
.ask .bolt-in { position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
                width: 15px; height: 15px; color: var(--zeus); pointer-events: none; }
.ask button { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); padding: 8px 15px; font-size: 12px; }
.ask button:hover { transform: translateY(-50%); filter: brightness(1.07); }

.ask-hints { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.ask-hints button {
  background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hair);
  padding: 6px 12px; font-size: 11.5px; font-weight: 400;
}
.ask-hints button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold-line); filter: none; }

.answer {
  margin-top: 16px; padding: 20px 22px; border-radius: var(--r-lg); position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--zeus-soft), var(--gold-soft) 92%);
  box-shadow: inset 0 0 0 1px var(--zeus-line);
  animation: fadeUp .3s var(--ease) both;
}
.answer .said { font: 400 17px/1.55 var(--display); color: var(--ink); }
.answer .figs { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 16px; }
.answer .figs .f { min-width: 0; }
.answer .figs .k { font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
                   text-transform: uppercase; color: var(--ink-4); display: block; }
.answer .figs .v { font: 400 17px/1.2 var(--display); color: var(--ink); margin-top: 6px; display: block;
                   font-variant-numeric: tabular-nums; }
.answer .go { margin-top: 16px; display: inline-block; }

/* ==========================================================================
   THE FIRST MINUTE

   Zeus introduces itself before it introduces anything else, because the
   thing standing watch over a company's books should say who it is and who
   built it before it starts talking about features. Shown once per person,
   and repeatable from the avatar menu for anyone who wants it again.
   ========================================================================== */

.intro {
  position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--void), var(--field) 55%, var(--void));
  overflow: hidden; animation: introIn .5s var(--ease) both;
}
@keyframes introIn { from { opacity: 0; } to { opacity: 1; } }
.intro.leaving { animation: introOut .5s var(--ease) both; }
@keyframes introOut { to { opacity: 0; transform: scale(1.02); } }

/* A single warm source behind everything, so the dark reads as lit rather
   than as switched off. */
.intro::before {
  content: ''; position: absolute; left: 50%; top: 42%; width: 140vmax; height: 140vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--zeus-soft) 0%, transparent 46%);
  opacity: 0; animation: introGlow 1.6s var(--ease) .2s both; pointer-events: none;
}
@keyframes introGlow { to { opacity: 1; } }

/* Centred when it fits, scrollable when it does not. `margin: auto` rather than
   `align-items: center`, because a centred flex item taller than its container
   has its top cut off and cannot be scrolled back to. */
.intro-stage {
  flex: 1; min-height: 0; display: flex; overflow-y: auto;
  padding: 40px 24px; position: relative; -webkit-overflow-scrolling: touch;
}
.intro-pane {
  width: min(760px, 100%); text-align: center; position: relative;
  margin: auto; display: none;
}
.intro-pane.on { display: block; animation: paneIn .72s var(--ease) both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.intro .zeus-core { width: 132px; height: 132px; margin: 0 auto 30px; }
.intro .zeus-core.igniting .ring   { animation: zRing 2.4s linear infinite, coreIn 1.5s var(--ease) both; }
.intro .zeus-core.igniting .ring-2 { animation: zRing 3.6s linear infinite reverse, coreIn 1.5s var(--ease) .12s both; }
.intro .zeus-core.igniting .core   { animation: zPulse 2.2s var(--ease) infinite, coreIn 1.7s var(--ease) .2s both; }
.intro .zeus-core.igniting .bolt   { animation: boltIn 1.1s var(--ease) .5s both; }
@keyframes coreIn { from { opacity: 0; transform: scale(.55) rotate(-40deg); } to { opacity: 1; } }
@keyframes boltIn { 0% { opacity: 0; transform: scale(.4); } 55% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }

.intro .eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
}
.intro h1 {
  font-family: var(--display); font-weight: 300; letter-spacing: -.02em; line-height: 1.04;
  font-size: clamp(38px, 7vw, 76px); color: var(--ink); margin: 0 0 18px;
}
.intro h1 em { font-style: normal; color: var(--gold-lit); }
.intro .lede {
  font-size: clamp(15px, 2.1vw, 19px); line-height: 1.62; color: var(--ink-2);
  max-width: 60ch; margin: 0 auto;
}
.intro .lede + .lede { margin-top: 15px; }
.intro .intro-leash + .lede, .intro .intro-points + .lede,
.intro .intro-figures + .lede { margin-top: 30px; }
.intro .lede b { color: var(--ink); font-weight: 500; }

/* The three things it does, and the figures it is doing them against. */
.intro-points { display: grid; gap: 16px; margin-top: 38px; text-align: left; }
@media (min-width: 720px) { .intro-points { grid-template-columns: repeat(3, 1fr); } }
.intro-points div {
  padding: 18px 20px; border-radius: var(--r-md); background: var(--plane);
  box-shadow: inset 0 1px 0 var(--hair-2);
  animation: paneIn .6s var(--ease) both;
}
.intro-points div:nth-child(2) { animation-delay: .1s; }
.intro-points div:nth-child(3) { animation-delay: .2s; }
.intro-points b {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px; font-weight: 500;
}
.intro-points span { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

.intro-figures {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin-top: 36px;
}
.intro-figures div { animation: paneIn .6s var(--ease) both; }
.intro-figures div:nth-child(2) { animation-delay: .08s; }
.intro-figures div:nth-child(3) { animation-delay: .16s; }
.intro-figures div:nth-child(4) { animation-delay: .24s; }
.intro-figures b {
  display: block; font-family: var(--display); font-weight: 300;
  font-size: clamp(26px, 4vw, 38px); color: var(--gold-lit); line-height: 1;
}
.intro-figures span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4); margin-top: 7px; display: block;
}

/* The leash, stated plainly, because it is the part that should reassure. */
.intro-leash { display: grid; gap: 10px; margin-top: 34px; text-align: left; max-width: 520px; margin-inline: auto; }
.intro-leash div {
  display: flex; align-items: baseline; gap: 13px; padding: 12px 16px;
  border-radius: var(--r-sm); background: var(--plane); box-shadow: inset 0 1px 0 var(--hair-2);
  font-size: 13.5px; color: var(--ink-2);
}
.intro-leash i {
  font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; flex-shrink: 0; width: 42px;
}
.intro-leash .yes i { color: var(--good); }
.intro-leash .no  i { color: var(--bad); }

/* --------------------------------------------------------------- controls */

.intro-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px clamp(20px, 4vw, 44px) calc(22px + env(safe-area-inset-bottom));
  position: relative;
}
.intro-dots { display: flex; gap: 8px; }
.intro-dots button {
  width: 7px; height: 7px; padding: 0; border-radius: 50%; background: var(--hair-2);
  box-shadow: none; transition: background .3s var(--ease), width .3s var(--ease);
}
.intro-dots button:hover { background: var(--ink-4); transform: none; filter: none; }
.intro-dots button.on { background: var(--gold); width: 22px; border-radius: 4px; }
.intro-foot .skip {
  background: transparent; color: var(--ink-4); box-shadow: none; padding: 8px 4px; font-size: 12.5px;
}
.intro-foot .skip:hover { color: var(--ink-2); background: transparent; transform: none; filter: none; }
/* A fixed width, so the dots do not shuffle sideways when the label changes
   from Continue to Take me in on the last pane. */
.intro-foot .go { padding: 11px 24px; min-width: 132px; }

@media (max-width: 560px) {
  .intro .zeus-core { width: 88px; height: 88px; margin-bottom: 20px; }
  .intro-stage { padding: 26px 20px; }
  .intro h1 { font-size: clamp(30px, 8.4vw, 40px); margin-bottom: 14px; }
  .intro .lede { font-size: 14.5px; line-height: 1.58; }
  .intro .eyebrow { margin-bottom: 15px; letter-spacing: .22em; }
  .intro-points, .intro-leash { margin-top: 24px; gap: 10px; }
  .intro-points div { padding: 14px 16px; }
  .intro-figures { gap: 14px 26px; margin-top: 26px; }
  .intro-foot { padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); }
  .intro-foot .go { min-width: 0; padding: 10px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro, .intro.leaving, .intro::before, .intro-pane.on,
  .intro-points div, .intro-figures div,
  .intro .zeus-core.igniting .ring, .intro .zeus-core.igniting .ring-2,
  .intro .zeus-core.igniting .core, .intro .zeus-core.igniting .bolt { animation: none; opacity: 1; }
  .intro-pane.on { transform: none; }
}