/* web/mint.css — Empire Mint v4 (2026-09-23): liquid glass on obsidian, the deck's gold, motion that means something.
   Six pages, one question each. Red beats content: body[data-lamp=red]. Every dynamic style is a CSS variable set from
   JS (the CSP allows no inline style attributes). Reduced motion turns every animation off. */
:root {
  --bg: #07090E; --bg2: #0D1017; --ink: #F3F1EA; --muted: #A2A9B8; --dim: #6C7484;
  --glass: rgba(255, 255, 255, .045); --glass-2: rgba(255, 255, 255, .07); --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16);
  --gold: #E4C46A; --gold-2: #B8923A; --gold-glow: rgba(228, 196, 106, .28);
  --teal: #5FC9C9; --green: #5BCB9A; --purple: #8C7DEA; --coral: #E27A78; --amber: #E7B75B; --red: #E05A57; --grey: #5B6274;
  /* the partners' categorical slots — fixed order faisal · salah · brahim · yusuf, validated on this surface (dataviz) */
  --p0: #c98500; --p1: #3987e5; --p2: #d95926; --p3: #199e70; --p4: #9085e9; --p5: #d55181;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --r: 18px; --r-s: 10px; --pad: 20px; --ease: cubic-bezier(.2, .8, .2, 1);
  --mx: 50%; --my: 50%;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
[hidden] { display: none !important; }

/* ---- the backdrop: the Higgsfield art (assets/backdrop.webp, when present) under three drifting light blobs and grain ---- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-art { position: absolute; inset: -6%; background: url('/assets/backdrop.webp') center / cover no-repeat; opacity: .7; filter: saturate(1.1) blur(1px); transform: translate3d(calc(var(--px, 0) * -1), calc(var(--py, 0) * -1), 0); transition: transform .8s var(--ease); }
.bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 0%, rgba(7, 9, 14, 0), rgba(7, 9, 14, .7) 70%), linear-gradient(180deg, rgba(7, 9, 14, .2), rgba(7, 9, 14, .9)); }
.blob { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .28; mix-blend-mode: screen; animation: drift 46s ease-in-out infinite alternate; }
.b1 { left: -20vmax; top: -30vmax; background: radial-gradient(circle at 40% 40%, #E4C46A, transparent 60%); }
.b2 { right: -25vmax; top: 10vmax; background: radial-gradient(circle at 60% 40%, #2E6BC9, transparent 60%); animation-duration: 58s; animation-delay: -12s; }
.b3 { left: 20vmax; bottom: -35vmax; background: radial-gradient(circle at 50% 50%, #5FC9C9, transparent 60%); animation-duration: 64s; animation-delay: -30s; opacity: .18; }
@keyframes drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(8vmax, 6vmax, 0) scale(1.08); } 100% { transform: translate3d(-6vmax, 10vmax, 0) scale(.96); } }
.grain { position: absolute; inset: 0; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.top, .wrap, .banner, .strip, .drawer { position: relative; z-index: 1; }

/* ---- glass ---- */
.glass { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--line); }
.card { position: relative; isolation: isolate; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--line); border-radius: var(--r); padding: var(--pad); min-width: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 20px 60px -30px rgba(0, 0, 0, .9); transition: transform .5s var(--ease), border-color .3s ease, box-shadow .5s var(--ease); }
.card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .08), transparent 45%); opacity: 0; transition: opacity .4s ease; }
.card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 35%, transparent 65%, rgba(255, 255, 255, .08)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; }
.card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 30px 70px -30px rgba(0, 0, 0, .95); }
.card:hover::before { opacity: 1; }
.card.gold { border-color: rgba(228, 196, 106, .45); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 0 0 1px rgba(228, 196, 106, .08), 0 24px 70px -30px rgba(228, 196, 106, .35); }
.card.gold::after { background: linear-gradient(135deg, rgba(228, 196, 106, .6), transparent 40%, transparent 60%, rgba(228, 196, 106, .18)); }
.card.teal { border-color: rgba(95, 201, 201, .4); } .card.coral { border-color: rgba(226, 122, 120, .4); } .card.purple { border-color: rgba(140, 125, 234, .4); }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head.sub { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.card-head .eyebrow::before { display: none; }
.meta { color: var(--dim); font-size: 12px; text-align: right; }
.line { margin: 10px 0 0; color: var(--muted); font-size: 13px; }

/* ---- entrance motion: the page's cards rise in, staggered ---- */
.page.enter .card, .page.enter .tile { animation: rise .7s var(--ease) both; }
.page.enter > :nth-child(2) .card, .page.enter > .card:nth-child(2) { animation-delay: 60ms; }
.page.enter > :nth-child(3) .card, .page.enter > .card:nth-child(3) { animation-delay: 120ms; }
.page.enter > :nth-child(4) .card, .page.enter > .card:nth-child(4) { animation-delay: 180ms; }
.page.enter > :nth-child(5) .card, .page.enter > .card:nth-child(5) { animation-delay: 240ms; }
.page.enter > :nth-child(6) .card, .page.enter > .card:nth-child(6) { animation-delay: 300ms; }
.page.enter .tiles .tile:nth-child(2) { animation-delay: 90ms; } .page.enter .tiles .tile:nth-child(3) { animation-delay: 150ms; } .page.enter .tiles .tile:nth-child(4) { animation-delay: 210ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
[data-tween].is-tweening { color: var(--gold); transition: color .6s ease; }

/* ---- top bar ---- */
.top { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; height: 62px; padding: 0 22px; border-width: 0 0 1px; border-radius: 0; }
.brand { display: flex; align-items: center; gap: 10px; }
.mark svg { width: 28px; height: 28px; display: block; filter: drop-shadow(0 0 10px var(--gold-glow)); }
.mark rect { fill: rgba(255, 255, 255, .06); stroke: var(--gold); stroke-width: 2; }
.mark path { fill: var(--gold); }
.wordmark { font-size: 13px; letter-spacing: .24em; color: var(--ink); font-weight: 500; }
.wordmark b { color: var(--gold); font-weight: 600; }
.tabs { display: flex; justify-content: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); justify-self: center; }
.tabs a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; color: var(--muted); font-weight: 500; font-size: 13px; transition: color .25s ease, background .35s var(--ease); }
.tabs a i { font-style: normal; font-size: 12px; opacity: .7; transition: color .25s ease, opacity .25s ease; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06)); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 18px -10px rgba(0, 0, 0, .9); }
.tabs a.on i { color: var(--gold); opacity: 1; }
.status { display: flex; align-items: center; gap: 10px; }
.clock { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ghost { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 12px; transition: border-color .25s ease, color .25s ease, background .25s ease; }
.ghost:hover { color: var(--ink); border-color: var(--line-2); background: rgba(255, 255, 255, .05); }

.lamp { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); font-size: 12px; }
.lamp i { width: 9px; height: 9px; border-radius: 50%; background: var(--grey); box-shadow: 0 0 0 3px rgba(91, 98, 116, .25); transition: background .4s ease; }
.lamp b { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.lamp span { color: var(--muted); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lamp[data-colour="green"] i { background: var(--green); box-shadow: 0 0 0 3px rgba(91, 203, 154, .25), 0 0 14px rgba(91, 203, 154, .5); animation: breathe 4s ease-in-out infinite; }
.lamp[data-colour="amber"] i { background: var(--amber); box-shadow: 0 0 0 3px rgba(231, 183, 91, .25), 0 0 12px rgba(231, 183, 91, .45); }
.lamp[data-colour="red"] i { background: var(--red); box-shadow: 0 0 0 3px rgba(224, 90, 87, .3), 0 0 16px rgba(224, 90, 87, .7); animation: blink 1s steps(2) infinite; }
.lamp[data-colour="red"] { border-color: var(--red); }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 3px rgba(91, 203, 154, .25), 0 0 14px rgba(91, 203, 154, .5); } 50% { box-shadow: 0 0 0 7px rgba(91, 203, 154, .08), 0 0 22px rgba(91, 203, 154, .7); } }
@keyframes blink { 50% { opacity: .3; } }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--grey); }
.pill[data-state="green"] { color: var(--ink); border-color: rgba(91, 203, 154, .45); } .pill[data-state="green"]::before { background: var(--green); box-shadow: 0 0 8px rgba(91, 203, 154, .7); }
.pill[data-state="amber"] { color: var(--ink); border-color: rgba(231, 183, 91, .5); } .pill[data-state="amber"]::before { background: var(--amber); }
.pill[data-state="red"] { color: var(--ink); border-color: rgba(224, 90, 87, .6); } .pill[data-state="red"]::before { background: var(--red); }
.pill.mode { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }

/* ---- banners ---- */
.banner { display: flex; gap: 14px; align-items: baseline; padding: 12px 22px; background: rgba(224, 90, 87, .14); border-bottom: 1px solid rgba(224, 90, 87, .5); color: var(--ink); backdrop-filter: blur(12px); }
.banner b { color: var(--red); letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.banner.soft { border: 1px solid rgba(231, 183, 91, .4); background: rgba(231, 183, 91, .08); border-radius: var(--r-s); padding: 10px 16px; }
.banner.soft b { color: var(--amber); }
.strip { display: grid; grid-template-columns: auto auto 1fr auto; gap: 14px; align-items: center; padding: 10px 22px; background: rgba(224, 90, 87, .1); border-bottom: 1px solid rgba(224, 90, 87, .4); font-size: 13px; backdrop-filter: blur(12px); }
.strip b { color: var(--red); letter-spacing: .1em; font-size: 11px; }
.strip .mono { color: var(--muted); font-size: 12px; }
.strip.herald { background: rgba(228, 196, 106, .08); border-bottom-color: rgba(228, 196, 106, .4); }
.strip.herald b { color: var(--gold); }
.strip.herald #hs-kind { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.rows .v[data-k="gold"] { color: var(--gold); }

/* ---- layout ---- */
.wrap { max-width: 1220px; margin: 0 auto; padding: 26px 22px 90px; }
.page { display: grid; gap: 18px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); margin-right: 10px; vertical-align: 1px; box-shadow: 0 0 10px var(--gold-glow); }
.eyebrow-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.hint { color: var(--dim); font-size: 12px; }
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack { display: grid; gap: 18px; align-content: start; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; }

/* ---- the hero figure (one per view) and the tiles ---- */
.hero { display: grid; gap: 12px; align-content: start; }
.hero-num { display: block; font-size: 56px; line-height: 1; font-weight: 500; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 30px rgba(228, 196, 106, .15); }
.hero-num small { font-size: 26px; color: var(--muted); vertical-align: top; margin-left: 1px; }
.hero-num em { font-style: normal; font-size: 14px; color: var(--gold); margin-left: 10px; letter-spacing: .12em; vertical-align: middle; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.tile { display: grid; gap: 6px; padding: 16px 18px 14px; border-radius: 16px; }
.tile .label, .card .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.num { font-size: 28px; line-height: 1.1; font-weight: 500; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.num small { font-size: 16px; color: var(--muted); vertical-align: top; margin-left: 1px; }
.num em { font-style: normal; font-size: 13px; color: var(--muted); margin-left: 8px; letter-spacing: .06em; }
.num.small { font-size: 22px; }
.num[data-k="green"] { color: var(--green); } .num[data-k="red"] { color: var(--coral); }
.tile .sub, .card .sub { color: var(--dim); font-size: 12px; display: block; }

/* ---- the mind ---- */
.now { margin: 0 0 12px; font-size: 20px; line-height: 1.35; font-weight: 500; color: var(--ink); }
.counts { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 12px; }
.count { display: grid; gap: 2px; }
.count .label { font-size: 11px; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.count b { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.count small { color: var(--dim); font-size: 12px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- gauge (the tripwire) ---- */
.gauge { --w: 0%; }
.gauge .track { position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); overflow: visible; margin: 8px 0 10px; }
.gauge .fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, rgba(224, 90, 87, .75), var(--amber) 55%, var(--teal)); box-shadow: 0 0 16px rgba(95, 201, 201, .35); transition: width .9s var(--ease); }
.gauge .marker { position: absolute; top: -5px; width: 2px; height: 18px; background: var(--ink); left: var(--w); box-shadow: 0 0 0 2px var(--bg2), 0 0 10px rgba(255, 255, 255, .6); transition: left .9s var(--ease); }
.gauge .ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-family: var(--mono); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; }
.facts.wide { grid-template-columns: repeat(2, max-content 1fr); column-gap: 28px; }
.facts span { color: var(--dim); }
.facts b { font-weight: 500; color: var(--ink); text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- organs ---- */
.organs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.organ { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; border-radius: var(--r-s); background: rgba(255, 255, 255, .04); font-size: 11px; color: var(--muted); }
.organ i { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); }
.organ[data-state="ok"] i { background: var(--green); box-shadow: 0 0 8px rgba(91, 203, 154, .6); } .organ[data-state="down"] i { background: var(--red); box-shadow: 0 0 8px rgba(224, 90, 87, .7); } .organ[data-state="down"] { color: var(--ink); }
.organ small { font-size: 9px; font-family: var(--mono); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.organ[data-relight="relit"] i { box-shadow: 0 0 0 3px rgba(91, 203, 154, .35); } .organ[data-relight="relit"] small { color: var(--green); }
.organ[data-relight="failed"] i, .organ[data-relight="exhausted"] i, .organ[data-relight="refused"] i { box-shadow: 0 0 0 3px rgba(224, 90, 87, .35); }
.organ[data-relight="failed"] small, .organ[data-relight="exhausted"] small, .organ[data-relight="refused"] small { color: var(--coral); }
.words { display: flex; flex-wrap: wrap; gap: 8px; }
.word { display: inline-flex; gap: 8px; align-items: baseline; padding: 5px 10px; border-radius: var(--r-s); background: rgba(255, 255, 255, .04); font-size: 12px; color: var(--muted); border-left: 2px solid var(--grey); }
.word b { color: var(--ink); font-weight: 500; font-family: var(--mono); }
.word[data-state="green"] { border-left-color: var(--green); } .word[data-state="amber"] { border-left-color: var(--amber); } .word[data-state="red"] { border-left-color: var(--red); }

/* ---- positions ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.pos { display: grid; gap: 10px; }
.pos .head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pos .coin { font-size: 18px; font-weight: 600; }
.pos .strat { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.pos .pnl { font-size: 22px; font-weight: 500; font-family: var(--mono); }
.pos .pnl[data-k="green"] { color: var(--green); } .pos .pnl[data-k="red"] { color: var(--coral); }
.bar { position: relative; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); margin: 6px 0 2px; --px: 0%; }
.bar .entry { position: absolute; top: -4px; left: 62.5%; width: 2px; height: 14px; background: var(--muted); }
.bar .px { position: absolute; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--bg2), 0 0 10px rgba(255, 255, 255, .5); left: var(--px); transition: left .9s var(--ease); }
.bar .stopfill { position: absolute; left: 0; top: 0; bottom: 0; width: 62.5%; border-radius: 999px; background: linear-gradient(90deg, rgba(224, 90, 87, .5), rgba(224, 90, 87, .05)); }
.ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); font-family: var(--mono); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11px; color: var(--muted); background: rgba(255, 255, 255, .04); }
.chip[data-k="green"] { color: var(--green); border-color: rgba(91, 203, 154, .4); } .chip[data-k="amber"] { color: var(--amber); border-color: rgba(231, 183, 91, .4); }
.chip[data-k="red"] { color: var(--coral); border-color: rgba(226, 122, 120, .5); } .chip[data-k="gold"] { color: var(--gold); border-color: rgba(228, 196, 106, .5); }
.chip[data-k="purple"] { color: var(--purple); border-color: rgba(140, 125, 234, .5); } .chip[data-k="teal"] { color: var(--teal); border-color: rgba(95, 201, 201, .5); }
.empty { color: var(--dim); font-size: 13px; padding: 14px 0; }

/* ---- bar flags ---- */
.scan { display: grid; gap: 10px; }
.scan .group { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; }
.scan .group .name { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.scan .cells { display: flex; flex-wrap: wrap; gap: 6px; }
.cell { padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 11px; font-family: var(--mono); color: var(--dim); }
.cell[data-lit="entry"] { color: var(--green); border-color: rgba(91, 203, 154, .5); box-shadow: 0 0 12px -4px rgba(91, 203, 154, .6); } .cell[data-lit="exit"] { color: var(--amber); border-color: rgba(231, 183, 91, .5); } .cell[data-open] { color: var(--ink); background: rgba(255, 255, 255, .09); }

/* ---- the books ---- */
.ring-card { display: grid; grid-template-rows: auto 1fr; }
.ring-card .ring-wrap { align-self: center; }
.ring-wrap { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.ring { width: 150px; height: 150px; display: block; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .5)); }
.ring circle.seg { fill: none; stroke-width: 12; stroke-linecap: butt; transition: stroke-dasharray .9s var(--ease), stroke-dashoffset .9s var(--ease); }
.ring circle.track { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 12; }
.ring text { fill: var(--ink); font-family: var(--mono); font-size: 13px; text-anchor: middle; font-weight: 500; }
.ring text.sub { fill: var(--dim); font-size: 7px; font-family: var(--sans); letter-spacing: .12em; }
.ring-legend { display: grid; gap: 8px; }
.ring-legend .lg { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.ring-legend .lg i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px -2px var(--c); }
.ring-legend .lg b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.ring-legend .lg span { color: var(--muted); text-transform: capitalize; }
.partner { display: grid; gap: 8px; --c: var(--grey); }
.partner .head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.partner .name { font-size: 17px; font-weight: 600; text-transform: capitalize; display: inline-flex; align-items: center; gap: 10px; }
.partner .name::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 12px -2px var(--c); }
.partner .share { font-family: var(--mono); font-size: 24px; font-weight: 500; }
.partner .meter { position: relative; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; --w: 0%; }
.partner .meter i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--c); border-radius: 999px; transition: width .9s var(--ease); }
.partner[data-slot="0"] { --c: var(--p0); } .partner[data-slot="1"] { --c: var(--p1); } .partner[data-slot="2"] { --c: var(--p2); } .partner[data-slot="3"] { --c: var(--p3); } .partner[data-slot="4"] { --c: var(--p4); } .partner[data-slot="5"] { --c: var(--p5); }
.ring-legend .lg[data-slot="0"] { --c: var(--p0); } .ring-legend .lg[data-slot="1"] { --c: var(--p1); } .ring-legend .lg[data-slot="2"] { --c: var(--p2); } .ring-legend .lg[data-slot="3"] { --c: var(--p3); } .ring-legend .lg[data-slot="4"] { --c: var(--p4); } .ring-legend .lg[data-slot="5"] { --c: var(--p5); }
.rows .v[data-k="in"] { color: var(--green); } .rows .v[data-k="out"] { color: var(--amber); } .rows .v[data-k="pending"] { color: var(--coral); }
.rows .t code { font-family: var(--mono); font-size: 11px; color: var(--gold); background: rgba(228, 196, 106, .08); padding: 1px 6px; border-radius: 4px; display: inline-block; margin-top: 4px; user-select: all; }
.alloc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.alloc span { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .05); border-left: 2px solid var(--c); text-transform: capitalize; --c: var(--grey); }
.alloc span[data-slot="0"] { --c: var(--p0); } .alloc span[data-slot="1"] { --c: var(--p1); } .alloc span[data-slot="2"] { --c: var(--p2); } .alloc span[data-slot="3"] { --c: var(--p3); }
.log.small { max-height: 40vh; font-size: 11px; }
.log.small li { grid-template-columns: 1fr; padding: 6px 0; }

/* ---- council ---- */
.ladder { display: grid; gap: 8px; }
.rung { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-s); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); transition: background .3s ease; }
.rung:hover { background: rgba(255, 255, 255, .07); }
.rung .t { font-family: var(--mono); font-weight: 600; font-size: 15px; }
.rung[data-tier="4"] { border-color: rgba(228, 196, 106, .6); } .rung[data-tier="4"] .t { color: var(--gold); }
.rung[data-tier="3"] { border-color: rgba(231, 183, 91, .45); } .rung[data-tier="3"] .t { color: var(--amber); }
.rung[data-tier="2"] { border-color: rgba(140, 125, 234, .45); } .rung[data-tier="2"] .t { color: var(--purple); }
.rung[data-tier="1"] { border-color: rgba(95, 201, 201, .4); } .rung[data-tier="1"] .t { color: var(--teal); }
.rung .who { display: grid; gap: 2px; min-width: 0; }
.rung .who b { font-weight: 600; }
.rung .who span { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rung .n { font-family: var(--mono); color: var(--muted); font-size: 12px; text-align: right; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { padding: 10px 12px; border-radius: var(--r-s); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); display: grid; gap: 2px; }
.stat .label { font-size: 10px; }
.stat b { font-family: var(--mono); font-size: 20px; font-weight: 500; }
.stat[data-k="green"] b { color: var(--green); } .stat[data-k="red"] b { color: var(--coral); } .stat[data-k="amber"] b { color: var(--amber); } .stat[data-k="gold"] b { color: var(--gold); }

.rows { list-style: none; margin: 0; padding: 0; display: grid; }
.rows li { display: grid; grid-template-columns: 74px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.rows li:first-child { border-top: 0; }
.rows .v { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.rows .v[data-k="green"] { color: var(--green); } .rows .v[data-k="red"] { color: var(--coral); } .rows .v[data-k="amber"] { color: var(--amber); } .rows .v[data-k="grey"] { color: var(--dim); }
.rows .t { min-width: 0; color: var(--ink); }
.rows .t b { font-weight: 600; }
.rows .t small { display: block; color: var(--dim); font-size: 12px; font-family: var(--mono); margin-top: 2px; }
.rows.council li { grid-template-columns: 74px 1fr auto; }
.rows.council .who { display: grid; gap: 4px; justify-items: end; }
.rows.council .who small { color: var(--dim); font-size: 11px; font-family: var(--mono); white-space: nowrap; }

/* ---- log ---- */
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 12px; transition: all .25s ease; }
.filters button.on { color: var(--ink); background: rgba(255, 255, 255, .08); border-color: var(--line-2); }
.log { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow: auto; font-size: 12px; }
.log li { display: grid; grid-template-columns: 118px 150px 1fr; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--line); align-items: baseline; }
.log li:first-child { border-top: 0; }
.log li.is-new { animation: fadein 1.2s ease-out; }
@keyframes fadein { from { background: rgba(228, 196, 106, .16); } to { background: transparent; } }
.log .ts { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .log .ts b { color: var(--ink); font-weight: 500; }
.log .tags { display: flex; gap: 6px; min-width: 0; }
.log .tag { padding: 1px 7px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log .tag.kind[data-k="green"] { color: var(--green); border-color: rgba(91, 203, 154, .4); } .log .tag.kind[data-k="amber"] { color: var(--amber); border-color: rgba(231, 183, 91, .4); }
.log .tag.organ[data-organ="executor"] { color: var(--gold); border-color: rgba(228, 196, 106, .4); } .log .tag.organ[data-organ="sentinel"] { color: var(--teal); border-color: rgba(95, 201, 201, .4); }
.log .msg { color: var(--ink); font-family: var(--sans); min-width: 0; overflow-wrap: anywhere; }
.jump { position: absolute; right: 16px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: var(--gold); color: #1A1A1A; font-size: 12px; font-weight: 600; box-shadow: 0 8px 24px -8px var(--gold-glow); }

/* ---- rest ---- */
.rest { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 12px; }
.rest dt { color: var(--dim); font-family: var(--mono); } .rest dd { margin: 0; color: var(--muted); font-family: var(--mono); overflow-wrap: anywhere; white-space: pre-wrap; }

/* ---- footer, drawer ---- */
.foot { display: flex; justify-content: space-between; gap: 12px; padding: 24px 4px 0; color: var(--dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.drawer { position: fixed; inset: auto 0 0 0; max-height: 70vh; z-index: 30; border-width: 1px 0 0; border-radius: 0; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.drawer pre { margin: 0; padding: 16px 22px; overflow: auto; font-size: 11px; color: var(--muted); }

/* ---- red beats content ---- */
body[data-lamp="red"] .card, body[data-lamp="red"] .tile { border-color: rgba(224, 90, 87, .45); }
body[data-lamp="red"] .wrap { filter: saturate(.55); }
body[data-lamp="red"] .now { color: var(--coral); }
body[data-lamp="red"] .b1 { background: radial-gradient(circle at 40% 40%, #E05A57, transparent 60%); }

/* ---- phone ---- */
/* ---- the two voices (2026-09-23): a chat card on Books (the accountant) and on the Herald's page ---- */
.chat { display: grid; gap: 12px; }
.chat .thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 420px; overflow: auto; scroll-behavior: smooth; overscroll-behavior: contain; }
.chat .thread li { display: grid; gap: 4px; max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; animation: rise .5s var(--ease) both; }
.chat .thread li[data-role="user"] { justify-self: end; background: rgba(228, 196, 106, .14); border: 1px solid rgba(228, 196, 106, .3); border-bottom-right-radius: 4px; }
.chat .thread li[data-role="assistant"] { justify-self: start; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat .thread li[data-role="assistant"][data-err] { border-color: rgba(226, 122, 120, .5); color: var(--coral); }
.chat .thread li[data-role="assistant"][data-pending] { color: var(--muted); }
.chat .thread li[data-role="assistant"][data-pending]::after { content: '···'; letter-spacing: .3em; animation: pulse 1.2s ease-in-out infinite; }
.chat .thread li small { font-size: 10px; color: var(--dim); font-family: var(--mono); letter-spacing: .04em; }
.chat .thread li[dir="rtl"] { text-align: right; }
.chat .thread .empty { color: var(--dim); font-size: 13px; }
.chat .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chat .chips button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 12px; transition: all .25s ease; background: rgba(255, 255, 255, .02); }
.chat .chips button:hover { color: var(--ink); border-color: var(--line-2); background: rgba(255, 255, 255, .07); }
.chat .ask { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.chat .ask input { min-width: 0; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--ink); font: 500 14px var(--sans); outline: none; transition: border-color .25s ease, box-shadow .25s ease; }
.chat .ask input:focus { border-color: rgba(228, 196, 106, .55); box-shadow: 0 0 0 3px rgba(228, 196, 106, .12); }
.chat .ask input::placeholder { color: var(--dim); }
.chat .ask button { padding: 0 18px; border-radius: 14px; border: 1px solid rgba(228, 196, 106, .45); background: linear-gradient(180deg, rgba(228, 196, 106, .22), rgba(228, 196, 106, .1)); color: var(--gold); font-weight: 600; font-size: 13px; letter-spacing: .06em; transition: all .25s ease; }
.chat .ask button:hover { background: rgba(228, 196, 106, .28); }
.chat .ask button:disabled { opacity: .5; cursor: wait; }
.chat .line.small { font-size: 11px; margin-top: 0; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---- the Herald's page: the statistics grid and the share bars ---- */
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.stats-grid .stat { min-height: 92px; }
.stats-grid .stat small { font-size: 11px; color: var(--muted); }
.bars { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 10px; font-size: 13px; --c: var(--grey); --w: 0%; }
.bar .name { text-transform: capitalize; display: inline-flex; align-items: center; gap: 8px; } .bar .name::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.bar .track { position: relative; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bar .track i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--c); border-radius: 999px; transition: width .9s var(--ease); }
.bar b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.bar[data-slot="0"] { --c: var(--p0); } .bar[data-slot="1"] { --c: var(--p1); } .bar[data-slot="2"] { --c: var(--p2); } .bar[data-slot="3"] { --c: var(--p3); } .bar[data-slot="4"] { --c: var(--p4); } .bar[data-slot="5"] { --c: var(--p5); }

@media (max-width: 900px) {
  /* no backdrop-filter on the bar here: a filtered ancestor would pin the fixed tab bar to the header instead of the screen */
  .top { grid-template-columns: auto 1fr; height: 54px; padding: 0 16px; gap: 10px; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(7, 9, 14, .92); }
  .tabs { position: fixed; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 25; justify-content: space-around; gap: 0; padding: 5px; border-radius: 22px; background: rgba(13, 16, 23, .78); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); }
  .tabs a { flex-direction: column; gap: 2px; padding: 6px 6px; font-size: 10px; border-radius: 16px; }
  .tabs a i { font-size: 15px; }
  .status { gap: 6px; justify-self: end; } .clock, #signout, #raw-toggle { display: none; }
  .wordmark { white-space: nowrap; font-size: 12px; letter-spacing: .18em; }
  .lamp { padding: 0 9px 0 8px; gap: 6px; } .lamp span { white-space: nowrap; }
  .strip { grid-template-columns: auto 1fr; padding: 10px 16px; row-gap: 4px; } .strip #strip-msg { grid-column: 1 / -1; } .strip .mono { text-align: right; }
  .banner { padding: 10px 16px; flex-direction: column; gap: 2px; }
  .wrap { padding: 16px 16px 110px; }
  .hero-row, .grid.two, .grid.three { grid-template-columns: 1fr; }
  .tiles, .stats, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat .thread li { max-width: 96%; } .bar { grid-template-columns: 70px 1fr auto; }
  .hero-num { font-size: 44px; } .num { font-size: 24px; }
  .facts.wide { grid-template-columns: max-content 1fr; }
  .organs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rung { grid-template-columns: 36px 1fr auto; }
  .log li { grid-template-columns: 1fr; gap: 4px; }
  .rows.council li { grid-template-columns: 74px 1fr; } .rows.council .who { justify-items: start; }
  .scan .group { grid-template-columns: 1fr; }
  .ring-wrap { grid-template-columns: 120px 1fr; } .ring { width: 120px; height: 120px; }
  .card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .blob { display: none; }
}