/* Rimaja Equity — capital-firm skin. Light / Dark: the top-bar switch, else the device's setting. */
:root {
  color-scheme: light dark;
  --surface-1: #fcfcfb;
  --page: #f4f4f1;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --good-text: #006300;
  --bad: #d03b3b;
  --warning: #fab219;
  --status-good: #0ca30c;
  --good-bg: rgba(12, 163, 12, 0.12);
  --bad-bg: rgba(208, 59, 59, 0.12);
  --win: #2a78d6;
  --win-bg: rgba(42, 120, 214, 0.10);
  --navy1: #0b1524; --navy2: #132540; --navy3: #1b3355;
  --gold: #c9a227; --gold-soft: #e3c66b;
  --hero-ink: #f2f0ea; --hero-sub: #aebacb;
}
/* Light / Dark: a viewer can pick either with the switch in the top bar (cookie
   "theme" -> <html data-theme>); with no choice the device decides. */
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    /* "Midnight" - the dark mode (Jakob, 12 Oct 2026): the hero's navy carried
       down the page, gold kept as the accent, colours a step brighter for contrast */
    --surface-1: #121c2b;
    --page: #0a111c;
    --text-primary: #eef1f6;
    --text-secondary: #b6c0cf;
    --muted: #7e899a;
    --grid: #22314a;
    --baseline: #354764;
    --border: rgba(255, 255, 255, 0.09);
    --series-1: #4a94ec;
    --series-2: #e47c46;
    --good-text: #3fbf5a;
    --bad: #e35d5d;
    --status-good: #3fbf5a;
    --good-bg: rgba(63, 191, 90, 0.15);
    --bad-bg: rgba(227, 93, 93, 0.17);
    --win: #4a94ec;
    --win-bg: rgba(74, 148, 236, 0.17);
    color-scheme: dark;
  } }
:root[data-theme="dark"] {
    /* "Midnight" - the dark mode (Jakob, 12 Oct 2026): the hero's navy carried
       down the page, gold kept as the accent, colours a step brighter for contrast */
    --surface-1: #121c2b;
    --page: #0a111c;
    --text-primary: #eef1f6;
    --text-secondary: #b6c0cf;
    --muted: #7e899a;
    --grid: #22314a;
    --baseline: #354764;
    --border: rgba(255, 255, 255, 0.09);
    --series-1: #4a94ec;
    --series-2: #e47c46;
    --good-text: #3fbf5a;
    --bad: #e35d5d;
    --status-good: #3fbf5a;
    --good-bg: rgba(63, 191, 90, 0.15);
    --bad-bg: rgba(227, 93, 93, 0.17);
    --win: #4a94ec;
    --win-bg: rgba(74, 148, 236, 0.17);
    color-scheme: dark;
  }

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--text-primary); background: var(--page);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.45;
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--series-1); text-decoration: none; }
a:hover { text-decoration: underline; }
.serif { font-family: Georgia, "Times New Roman", serif; letter-spacing: .01em; }

/* ---------------- hero band ---------------- */
.hero {
  color: var(--hero-ink); position: relative; padding-bottom: 58px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='420' viewBox='0 0 1200 420'><g fill='none' stroke='%23ffffff' stroke-opacity='0.055' stroke-width='1.4'><path d='M-40 340 C 200 290 380 360 620 300 S 1040 210 1260 260'/><path d='M-40 300 C 220 250 420 320 660 255 S 1060 165 1260 215'/><path d='M-40 260 C 240 215 460 275 700 210 S 1080 125 1260 170'/><path d='M-40 220 C 260 180 500 235 740 170 S 1100 85 1260 130'/><path d='M-40 180 C 280 145 540 195 780 135 S 1120 50 1260 92'/></g><g fill='none' stroke='%23c9a227' stroke-opacity='0.28' stroke-width='1.6'><path d='M-40 385 C 230 330 430 395 670 330 S 1070 235 1260 290'/></g><g fill='%23ffffff' fill-opacity='0.05'><circle cx='1050' cy='80' r='150'/><circle cx='120' cy='60' r='90'/></g></svg>") right top/cover no-repeat,
    linear-gradient(135deg, var(--navy1), var(--navy2) 55%, var(--navy3));
}
.hero.slim { padding-bottom: 42px; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 28px; border-bottom: 1px solid rgba(255,255,255,.09); flex-wrap: wrap; gap: 8px;
}
.brand { font-size: 19px; color: var(--hero-ink); }
.brand:hover { text-decoration: none; }
.brand small {
  display: block; font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-soft); font-family: system-ui, sans-serif; margin-top: 1px;
}
.nav-links { display: flex; align-items: center; margin-left: auto; }
.nav-links a { margin-left: 20px; color: var(--hero-sub); font-size: 14px; }
.nav-tools { display: flex; align-items: center; gap: 16px; margin-left: 20px; }
.nav-tools > a { color: var(--hero-sub); font-size: 14px; white-space: nowrap; }
.nav-tools > a:hover { color: #fff; text-decoration: none; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-links a.on { color: #fff; border-bottom: 2px solid var(--gold); padding-bottom: 4px; }
.hero-inner {
  max-width: 1100px; margin: 0 auto; padding: 30px 20px 0;
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px;
}
.hero-inner h1 { font-size: 29px; font-weight: 400; margin: 0; }
.hero-sub { color: var(--hero-sub); font-size: 13.5px; margin-top: 6px; }
.goldline { width: 64px; height: 3px; background: var(--gold); margin-top: 14px; border-radius: 2px; }
.fundtabs { max-width: 1100px; margin: 24px auto 0; padding: 0 20px; display: flex; gap: 26px; }
.fundtabs a { color: var(--hero-sub); padding: 9px 2px; border-bottom: 2px solid transparent; font-size: 14.5px; }
.fundtabs a:hover { color: #fff; text-decoration: none; }
.fundtabs a.on { color: #fff; font-weight: 600; border-bottom-color: var(--gold); }

/* hero status pill (light-on-navy) */
.status-pill {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--hero-ink); border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  padding: 4px 13px; background: rgba(255,255,255,.07); white-space: nowrap;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot.online { background: var(--status-good); }
.dot.offline { background: var(--bad); }

/* ---------------- content ---------------- */
.below-hero { flex: 1; display: flex; flex-direction: column; }
.container { max-width: 1100px; margin: -42px auto 0; padding: 0 20px 40px; width: 100%; flex: 1; position: relative; z-index: 1; }
h1 { font-size: 20px; font-weight: 650; margin: 8px 0 16px; }
h2 { font-size: 15px; font-weight: 650; margin: 28px 0 10px; color: var(--text-secondary); }
.nowrap { white-space: nowrap; }

/* Ten tiles, five to a row — two even rows on a desktop. The count is fixed
   rather than auto-fit so the second row lines up under the first. */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.tile {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; box-shadow: 0 8px 22px rgba(11, 21, 36, 0.10);
}
.tile .label { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.tile .value { font-size: 23px; font-weight: 650; }
.tile .sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }

/* Global watch: four desks stacked inside one tile, in place of a big number */
.clocktile .clocks { display: grid; gap: 3px; margin-top: 5px; }
.clk { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; }
.clk .city { font-size: 12.5px; color: var(--text-secondary); }
.clk b { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.clk .dot { display: inline-block; width: 7px; height: 7px; }

/* ---------------- capital flow ---------------- */
.capfigs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; }
.capfigs > div { display: flex; flex-direction: column; gap: 2px; }
.capfigs .spacer { flex: 1 1 auto; }
.capfigs b { font-size: 19px; font-weight: 650; }
.capmoves { width: 100%; margin-top: 10px; }
.capmoves td { padding: 5px 10px 5px 0; font-size: 13px; border-top: 1px solid var(--border); }
.capmoves td.amt { font-variant-numeric: tabular-nums; }
.capmoves tr:first-child td { border-top: 1px solid var(--border); }
.capmode { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.capmode .mode { white-space: nowrap; }

/* laptops and tablets: still five across, just tighter */
@media (max-width: 1040px) {
  .tiles { gap: 9px; }
  .tile { padding: 12px 12px; }
  .tile .value { font-size: 19px; }
  .tile .label, .tile .sub { font-size: 11.5px; }
  .clk .city { font-size: 11px; }
  .clk b { font-size: 12.5px; }
}
.value.pos, .pos { color: var(--good-text); }
.value.neg, .neg { color: var(--bad); }

.card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px;
}
.chart-wrap { position: relative; height: 320px; }

/* fund cards on the overview */
.fundgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 12px; }
.fundcard {
  display: block; color: inherit; background: var(--surface-1); border: 1px solid var(--border);
  border-top: 3px solid var(--gold); border-radius: 10px; padding: 15px 17px;
  box-shadow: 0 8px 22px rgba(11, 21, 36, 0.08); transition: border-color .15s;
}
.fundcard:hover { border-color: var(--series-1); border-top-color: var(--gold); text-decoration: none; }
.fundcard .minis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0 6px; }
.fundcard .pillmini {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
}

/* ---------------- calendar ---------------- */
.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cal .dow {
  font-size: 11.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; text-align: center; padding-bottom: 2px;
}
.day {
  border: 1px solid var(--grid); border-radius: 8px; min-height: 58px; padding: 6px 8px;
  display: flex; flex-direction: column; justify-content: space-between; background: var(--surface-1);
}
.day .d { font-size: 11.5px; color: var(--muted); }
.day .p { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.day.win { background: var(--good-bg); border-color: var(--good-text); }
.day.win .p { color: var(--good-text); }
/* max open profit (top) and max open drawdown (bottom): plain ink, not bold;
   the day's result between them is the bold, coloured one (Jakob, 12 Oct) */
.day .mx { font-size: 12px; font-weight: 400; color: var(--text-primary);
           font-variant-numeric: tabular-nums; text-align: right; line-height: 1.25; }
.day .p { font-weight: 700; line-height: 1.3; font-size: 16px; }
.day.loss { background: var(--bad-bg); border-color: var(--bad); }
.day.loss .p { color: var(--bad); }
.day.off { background: transparent; border-style: dashed; }
.day.off .p { color: var(--muted); font-weight: 400; }
.day.other { opacity: .40; }
/* future days stay readable now that they carry the day's budget (12 Oct 2026) */
.day.future { border-style: dashed; }
.day.future .d { color: var(--muted); opacity: .7; }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-secondary); margin-top: 12px; flex-wrap: wrap; }
.sw { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; }
.calhead { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }

/* ---------------- tables ---------------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; color: var(--muted); font-weight: 500;
  border-bottom: 1px solid var(--baseline); padding: 6px 8px;
}
td { padding: 7px 8px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }
td.pos { color: var(--good-text); }
td.neg { color: var(--bad); }
/* BUY / SELL in plain ink - only the P/L columns carry colour (Jakob, 2026-09-15) */
.type-buy, .type-sell { color: var(--text-primary); font-weight: 600; letter-spacing: .02em; }

/* ---------------- forms ---------------- */
.form-card { max-width: 420px; margin: 3vh auto 0; }
label { display: block; font-size: 13px; color: var(--text-secondary); margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: 9px 10px; border: 1px solid var(--baseline);
  border-radius: 8px; background: var(--page); color: var(--text-primary); font-size: 14px;
}
button {
  margin-top: 16px; padding: 9px 18px; border: none; border-radius: 8px;
  background: var(--navy2); color: #fff; font-size: 14px; font-weight: 550; cursor: pointer;
}
button:hover { background: var(--navy3); }
button.danger { background: var(--bad); }
button.ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--baseline); }
.error { color: var(--bad); font-size: 13.5px; margin-top: 10px; }
.ok-msg { color: var(--good-text); font-size: 13.5px; margin-top: 10px; }
.hint { color: var(--muted); font-size: 12.5px; }
.row-inline { display: flex; gap: 10px; align-items: center; }

/* traffic light */
.tl {
  display: flex; flex-direction: column; gap: 6px; align-self: center;
  background: linear-gradient(180deg, #252a31, #121519); border-radius: 14px; padding: 8px 7px;
  border: 1px solid rgba(0, 0, 0, .45);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .10), 0 4px 10px rgba(11, 21, 36, .30);
}
.tl .lamp { width: 26px; height: 26px; border-radius: 50%; background: #2b3037;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .65); position: relative; }
.tl .lamp::after { content: ""; position: absolute; left: 22%; top: 14%; width: 38%; height: 24%;
  border-radius: 50%; background: rgba(255, 255, 255, .10); }
.tl .lamp.red.on { background: radial-gradient(circle at 35% 30%, #ff9d94, #e53935 55%, #7f120d);
  box-shadow: 0 0 16px 4px rgba(229, 57, 53, .55), inset 0 -2px 4px rgba(0, 0, 0, .35);
  animation: glowpulse 1.5s infinite; }
.tl .lamp.amber.on { background: radial-gradient(circle at 35% 30%, #ffe28a, #f9a825 55%, #7c5400);
  box-shadow: 0 0 16px 4px rgba(249, 168, 37, .55), inset 0 -2px 4px rgba(0, 0, 0, .35); }
.tl .lamp.green.on { background: radial-gradient(circle at 35% 30%, #a8f0b6, #3fa04b 55%, #155724);
  box-shadow: 0 0 16px 4px rgba(63, 160, 75, .50), inset 0 -2px 4px rgba(0, 0, 0, .35); }
.tl .lamp.on::after { background: rgba(255, 255, 255, .45); }
@keyframes glowpulse { 50% { box-shadow: 0 0 26px 8px rgba(229, 57, 53, .75), inset 0 -2px 4px rgba(0, 0, 0, .35); } }
.tl.mini { flex-direction: row; padding: 4px; border-radius: 9px; display: inline-flex; vertical-align: middle; }
.tl.mini .lamp { width: 15px; height: 15px; }
.tl.mini .lamp.red.on { animation: none; }

/* ---------------- battery governor ---------------- */
.fundcard .govline { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
.govcard { border-top: 3px solid var(--gold); }
.gov-main { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; align-items: center; }
.gov-name { font-size: 22px; font-weight: 700; letter-spacing: .02em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gov-green { color: var(--good-text); } .gov-yellow { color: #b57e00; } .gov-red { color: var(--bad); } .gov-off { color: var(--muted); font-weight: 500; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gov-yellow { color: #fab219; } }
:root[data-theme="dark"] .gov-yellow { color: #fab219; }
.gov-mult { font-size: 14px; color: var(--text-secondary); margin-top: 2px; }
.gov-mult b { font-size: 26px; font-weight: 700; color: var(--text-primary); margin: 0 6px 0 4px; font-variant-numeric: tabular-nums; }
.gov-mult small { color: var(--muted); }
.mode { font-size: 11px; font-weight: 700; letter-spacing: .06em; border-radius: 999px; padding: 3px 10px; }
.mode.compound { background: rgba(42, 120, 214, .14); color: var(--series-1); }
.mode.freeze { background: rgba(201, 162, 39, .18); color: #8c6a10; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mode.freeze { color: var(--gold-soft); } }
:root[data-theme="dark"] .mode.freeze { color: var(--gold-soft); }
.gauges { display: flex; gap: 14px 26px; flex-wrap: wrap; margin-top: 12px; }
.gauge .label { font-size: 11.5px; color: var(--muted); }
.gauge .value { font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; }
.gauge .value small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.gauge .hint { font-size: 11.5px; }
.ladder { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--grid); }
.ladder-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.ladder-head span:last-child { color: var(--text-secondary); font-weight: 600; }
.rungs { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.rung { border: 1px solid var(--grid); border-radius: 7px; padding: 6px 8px; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rung .k { display: block; font-size: 10.5px; letter-spacing: .06em; }
.rung .v { display: block; font-weight: 650; color: var(--text-secondary); }
.rung.done { background: var(--good-bg); border-color: var(--good-text); }
.rung.done .v { color: var(--good-text); }
.rung.on { border: 2px solid var(--series-1); color: var(--series-1); }
.rung.on .v { color: var(--series-1); }
.rung.on.frozen { border-color: var(--gold); background: rgba(201, 162, 39, .14); }
.rung.on.frozen .v, .rung.on.frozen .k { color: #8c6a10; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rung.on.frozen .v, :root:not([data-theme="light"]) .rung.on.frozen .k { color: var(--gold-soft); } }
:root[data-theme="dark"] .rung.on.frozen .v, :root[data-theme="dark"] .rung.on.frozen .k { color: var(--gold-soft); }
.skimbar { height: 8px; border-radius: 4px; background: var(--grid); margin: 10px 0 6px; overflow: hidden; }
.skimbar .fill { height: 100%; background: var(--gold); border-radius: 4px; }
.skimbar .fill.climb { background: var(--series-1); }
.colstrip-wrap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--grid); }
.colstrip { display: flex; gap: 1px; height: 18px; }
.colstrip i { flex: 1 1 0; min-width: 1px; border-radius: 1px; background: var(--grid); }
.colstrip i.green { background: #3fa04b; } .colstrip i.yellow { background: #f9a825; } .colstrip i.red { background: #e53935; }
@media (max-width: 640px) { .rung .v { font-size: 10.5px; } .gov-main { grid-template-columns: auto 1fr; } }

/* ---------------- study iframes ---------------- */
iframe.study { width: 100%; height: 900px; border: 0; display: block; }

/* ---------------- footer ---------------- */
.footer {
  margin-top: 44px; background: var(--navy1); color: var(--hero-sub); font-size: 12px;
  padding: 16px 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.footer b { color: var(--gold-soft); font-weight: 500; }

@media (max-width: 720px) {
  .hero-inner h1 { font-size: 23px; }

  /* header: brand + controls on one row, page links on their own scrolling row */
  .topbar {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "brand tools" "links links";
    align-items: center; row-gap: 12px; column-gap: 12px; padding: 13px 18px;
  }
  .brand { grid-area: brand; font-size: 17px; }
  .brand small { letter-spacing: .2em; font-size: 9.5px; white-space: nowrap; }
  .nav-links {
    grid-area: links; margin-left: 0; overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    margin: 0 20px 0 0; font-size: 13.5px; white-space: nowrap;
  }
  .nav-links a:last-child { margin-right: 0; }
  .nav-links a.on { padding-bottom: 3px; }
  .nav-tools { grid-area: tools; margin-left: 0; gap: 14px; justify-self: end; }
  .nav-tools > a { font-size: 13px; }
  .curswitch a { padding: 4px 12px; }

  /* tiles: two to a row on a phone, so ten tiles read as five tidy pairs */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 12px 13px; }
  .tile .value { font-size: 18px; letter-spacing: -.01em; }
  .clk .city { font-size: 11.5px; }
  .clk b { font-size: 13px; }

  /* governor card: smaller headline + gauges so nothing clips on a phone */
  .gov-name { font-size: 17px; gap: 8px; }
  .gov-mult b { font-size: 22px; }
  .gauges { gap: 12px 18px; }
  .gauge .value { font-size: 18px; }
  h2 { font-size: 14.5px; }
  .tile .label, .tile .sub { font-size: 12px; }
  .container { padding: 0 14px 32px; }
}

/* ---------------- display-currency switch ---------------- */
.curswitch {
  display: inline-flex; margin-left: 20px; border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px; overflow: hidden; vertical-align: middle;
}
.curswitch a {
  margin: 0; padding: 3px 11px; font-size: 12.5px; line-height: 1.5;
  color: var(--hero-sub); border: 0;
}
.curswitch a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .07); }
.curswitch a.on {
  color: var(--navy1); background: var(--gold-soft); font-weight: 600;
  border-bottom: 0; padding-bottom: 3px;
}

/* very narrow phones: keep a seven-figure amount and its currency on one line */
@media (max-width: 420px) {
  .tile { padding: 11px 12px; }
  .tile .value { font-size: 16.5px; }
  .tile .sub { font-size: 11.5px; }
}

/* ---------------- market-state banner ---------------- */
.marketline {
  background: var(--surface-1); border: 1px solid var(--border); border-left: 3px solid var(--baseline);
  border-radius: 8px; padding: 9px 13px; margin: 0 0 12px;
  font-size: 13px; color: var(--text-secondary);
}
.marketline.frozen { border-left-color: var(--bad); color: var(--bad); font-weight: 550; }
.dot.quiet { background: var(--muted); }


/* ---------------- spread watch: the weekly hour grid ---------------- */
.weeknav {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 14px; margin: 0 0 14px; font-size: 13.5px;
}
.weeknav b { font-weight: 650; }
.spreadcard { padding: 14px 16px; }
.budgetbar {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--grid);
}
.budgetbar .spacer { flex: 1; }
.budgetbar .bignum { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.gridwrap { overflow-x: auto; }

.hourgrid { width: auto; border-collapse: separate; border-spacing: 2px; font-size: 13px; }
.hourgrid th {
  font-weight: 550; color: var(--muted); border: 0; padding: 4px 6px;
  text-align: center; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
}
.hourgrid th.hcol {
  text-align: right; width: 54px; font-variant-numeric: tabular-nums;
  text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--text-secondary);
}
.hourgrid td {
  text-align: center; padding: 5px 6px; border: 0; border-radius: 5px;
  font-variant-numeric: tabular-nums; background: var(--page);
  color: var(--text-secondary); min-width: 76px; width: 76px;
}
.hourgrid tr.empty td, .hourgrid tr.empty th.hcol { opacity: .45; }
.hourgrid td.ok { background: var(--surface-1); color: var(--text-primary); }
.hourgrid td.over {
  background: rgba(208, 59, 59, .14); color: var(--bad); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(208, 59, 59, .30);
}
.hourgrid td.bad {
  background: rgba(208, 59, 59, .30); color: var(--bad); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--bad);
}
.hourgrid td.bad .mark { font-style: normal; font-size: 10px; vertical-align: 1px; }
.hourgrid td .none { color: var(--muted); }
.hourgrid tfoot td, .hourgrid tfoot th { border-top: 2px solid transparent; }
.hourgrid td.daymed { font-weight: 650; color: var(--text-primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hourgrid td.over { background: rgba(208, 59, 59, .22); } :root:not([data-theme="light"]) .hourgrid td.bad { background: rgba(208, 59, 59, .38); } }
:root[data-theme="dark"] .hourgrid td.over { background: rgba(208, 59, 59, .22); } :root[data-theme="dark"] .hourgrid td.bad { background: rgba(208, 59, 59, .38); }
.sw.cell-ok { background: var(--surface-1); border: 1px solid var(--baseline); }
.sw.cell-over { background: rgba(208, 59, 59, .14); border: 1px solid rgba(208, 59, 59, .40); }
.sw.cell-bad { background: rgba(208, 59, 59, .30); border: 1px solid var(--bad); }

@media (max-width: 720px) {
  .hourgrid { font-size: 12px; border-spacing: 1px; }
  .hourgrid td { min-width: 52px; padding: 4px 3px; }
  .hourgrid th.hcol { width: 40px; font-size: 11px; }
}
td.stroke { font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }

/* ---------------- surveillance center ---------------- */
.rc-family { display: grid; grid-template-columns: 150px 1fr; gap: 10px 14px; align-items: start; margin: 0 0 10px; }
.rc-name { font-size: 13px; font-weight: 650; color: var(--text-secondary); padding-top: 12px; }
.rc-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rc-tile {
  background: var(--surface-1); border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 8px; padding: 9px 11px 10px; min-height: 64px;
}
.rc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rc-top b { font-size: 14px; }
.rc-state { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rc-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.rc-note { font-size: 11.5px; color: var(--text-secondary); margin-top: 5px; line-height: 1.35; }
.rc-tile.s-ok { border-left-color: var(--status-good); }
.rc-tile.s-ok .rc-state { color: var(--good-text); }
.rc-tile.s-attached { border-left-color: var(--series-1); }
.rc-tile.s-attached .rc-state { color: var(--series-1); }
.rc-tile.s-check { border-left-color: var(--warning); background: rgba(250, 178, 25, .07); }
.rc-tile.s-check .rc-state { color: #8c6a10; }
.rc-tile.s-fault { border-left-color: var(--bad); background: var(--bad-bg); }
.rc-tile.s-fault .rc-state { color: var(--bad); }
.legend .sw.s-ok { background: var(--status-good); } .legend .sw.s-attached { background: var(--series-1); }
.legend .sw.s-check { background: var(--warning); } .legend .sw.s-fault { background: var(--bad); }
.rc-comment { padding: 10px 0; border-top: 1px solid var(--border); }
.rc-comment:first-child { border-top: 0; padding-top: 0; }
.rc-comment p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; }
.rc-comment.off p { color: var(--muted); font-style: italic; }
.rc-chead { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.rc-pre { margin: 0; white-space: pre-wrap; font: 12.5px/1.5 ui-monospace, Consolas, monospace; color: var(--text-primary); }
.rc-pre.small { font-size: 11.5px; color: var(--text-secondary); }
.marketline.quiet { border-left-color: var(--status-good); }
@media (max-width: 720px) { .rc-family { grid-template-columns: 1fr; gap: 4px; } .rc-name { padding-top: 6px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rc-tile.s-check .rc-state { color: var(--gold-soft); } }
:root[data-theme="dark"] .rc-tile.s-check .rc-state { color: var(--gold-soft); }

/* ---------------------------------------------------------------- live-vs-model gauges
   Colours reuse the house series palette so the dials sit inside the skin
   rather than beside it; the needles are the two series colours, the tails of
   the dial the good/bad pair already used for money. */
:root { --gauge-money: var(--series-2); --gauge-pf: var(--series-1);
        --pos: var(--status-good); --neg: var(--bad); }
.gaugewrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
             gap: 16px; margin: 0 0 20px; }
.gaugecard { padding: 16px 16px 12px; }
.gauge-h { font-size: 14px; font-weight: 650; margin: 0 0 2px; }
.gauge-what { color: var(--text-secondary); font-size: 12.5px; margin: 0 0 8px; }
.dial { width: 100%; height: auto; display: block; }
.gauge-val { font-size: 28px; font-weight: 650; letter-spacing: -.5px; line-height: 1.15; }
.gauge-val.small { font-size: 20px; }
.gauge-val small { font-size: 12.5px; color: var(--text-secondary); font-weight: 400; margin-left: 6px; }
.gauge-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px;
                color: var(--text-secondary); margin-top: 6px; }
.gauge-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
                  margin-right: 5px; vertical-align: -1px; }
.gauge-table { border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.gauge-table td { padding: 2px 10px 2px 0; border: 0; color: var(--text-secondary); }
.gauge-table td b { color: var(--text-primary); font-weight: 650; }
.gauge-foot { font-size: 12px; color: var(--text-secondary); margin-top: 10px;
              border-top: 1px solid var(--grid); padding-top: 8px; line-height: 1.5; }

/* ---------------------------------------------------------------- engine heat-grid */
.heatgrid th.r, .heatgrid td.r { text-align: right; }
.heatgrid .th-note { display: block; font-weight: 400; font-size: 10.5px; color: var(--muted); }
.heatgrid td { font-variant-numeric: tabular-nums; }
.h-bad2 { background: rgba(208, 59, 59, 0.26); }
.h-bad1 { background: rgba(208, 59, 59, 0.13); }
.h-flat { background: rgba(137, 135, 129, 0.10); }
.h-ok1  { background: rgba(12, 163, 12, 0.13); }
.h-ok2  { background: rgba(12, 163, 12, 0.26); }

/* the fund-bank field on the Total capital tile (admins only) */
.bankform { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.bankform label { margin: 0; font-size: 11.5px; color: var(--muted); }
.bankform input { width: 96px; padding: 3px 6px; font-size: 12.5px; font-variant-numeric: tabular-nums;
                  border: 1px solid var(--grid); border-radius: 6px; background: var(--page);
                  color: var(--text-primary); }
.bankform button { padding: 3px 9px; font-size: 12px; border: 1px solid var(--grid);
                   border-radius: 6px; background: var(--surface-1); color: var(--text-secondary);
                   cursor: pointer; }
.bankform button:hover { color: var(--text-primary); border-color: var(--baseline); }
.gauge-info { font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; }
.gauge-info .hint { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* The first heading in the content block sits right under the navy hero; Firefox
   gives the h2's top margin to the hero rather than the page, so the heading
   lands on the dark band. An explicit padding-top keeps it on the white. */
h2.firstheading { margin-top: 0; padding-top: 26px; }

/* ---------------------------------------------------------------- pole gauge */
.polebars { display: grid; gap: 12px; margin-top: 12px; }
.polebar-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
               font-size: 12.5px; color: var(--text-secondary); }
.polebar-top b { color: var(--text-primary); font-weight: 650; }
.polebar-track { position: relative; height: 10px; margin: 5px 0 3px;
                 background: linear-gradient(90deg,
                   var(--bad-bg) 0%, var(--grid) 18%, var(--grid) 82%, var(--good-bg) 100%);
                 border-radius: 5px; }
.polebar-mid { position: absolute; left: 50%; top: -2px; width: 1px; height: 14px;
               background: var(--baseline); }
.polebar-dot { position: absolute; top: -3px; width: 12px; height: 16px; margin-left: -6px;
               border-radius: 3px; background: var(--text-primary); }
.polebar-dot.low { background: var(--bad); }
.polebar-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.gauge-flag { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
              background: var(--bad-bg); color: var(--text-primary);
              border: 1px solid rgba(208, 59, 59, 0.35); }
.gauge-flag.both { background: rgba(250, 178, 25, 0.14); border-color: rgba(250, 178, 25, 0.40); }

/* A sub-line carrying a gain or loss must show it. ".tile .sub" (specificity
   0,2,0) was beating a bare ".pos" (0,1,0), so the classes were being applied
   and then painted over in grey — the Fund capital balance tile's % gain was
   the visible case (Jakob, 2026-09-28). */
.tile .sub.pos { color: var(--good-text); }
.tile .sub.neg { color: var(--bad); }
/* a tile carrying two full-size figures: breathing room between them */
.tile .value + .sub + .value, .tile .sub + .value { margin-top: 8px; }

/* STOOD DOWN: the piston refused a stale signal after a restart - correct
   behaviour, so it must not read as a fault (Jakob + strategy chat, 29 Sep).
   Blue-grey: deliberate, informational, between ok and CHECK. */
.rc-tile.s-stood-down { border-left-color: var(--gauge-pf); }
.rc-tile.s-stood-down .rc-state { color: var(--gauge-pf); }
i.sw.s-stood-down { background: var(--gauge-pf); }

/* The Battery (v18.17): the group badge on a roll-call tile */
.rc-grp { font-size: 10px; font-weight: 650; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px;
          margin-left: 4px; margin-right: auto; background: var(--surface-1); color: var(--text-secondary);
          border: 1px solid var(--baseline); white-space: nowrap; }
.rc-grp.g-a1 { color: var(--good-text); border-color: var(--status-good); }
.rc-grp.g-a2 { color: var(--good-text); }
.rc-grp.g-shadow { color: var(--muted); border-style: dashed; }

/* Max DD % this month / ever on the Drawdown & margin tile (12 Oct 2026) */
.tile .ddrec { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px;
               color: var(--text-secondary); margin-top: 3px; }
.tile .ddrec b { font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.tile .ddrec b.neg { color: var(--bad); }
.tile .ddrec + .value { margin-top: 8px; }

/* Weekly Service: the Saturday task list (12 Oct 2026) */
.tasklist { list-style: none; margin: 0; padding: 0; }
.tasklist li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
               padding: 9px 0; border-bottom: 1px solid var(--grid); }
.tasklist li:last-child { border-bottom: 0; }
.tasklist .tickform, .tasklist .delform { margin: 0; display: inline-flex; }
.tasklist input[type=checkbox] { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--win); }
.tasklist .tasktext { flex: 1 1 220px; font-size: 14.5px; margin: 0; cursor: pointer; color: var(--text-primary); }
.tasklist li.done .tasktext { color: var(--muted); text-decoration: line-through; }
.tasklist .tasklink { font-size: 13px; white-space: nowrap; }
.tasklist .taskstamp { font-size: 12px; white-space: nowrap; }
.tasklist .delform button { margin: 0; padding: 1px 8px; font-size: 12px; }
.addtask { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.addtask input { flex: 1 1 240px; margin: 0; }
.addtask button { margin: 0; }
.wkhist { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.wkhist span { border: 1px solid var(--grid); border-radius: 6px; padding: 3px 8px; color: var(--text-secondary);
               font-variant-numeric: tabular-nums; }
.wkhist span.all { border-color: var(--win); color: var(--win); }
.wkhist span.none { border-style: dashed; color: var(--muted); }

/* Spread watch: the pistons' clocks on the right of each grid (12 Oct 2026) */
.hourgrid th.pcol { text-align: left; color: var(--text-secondary); font-weight: 600; min-width: 220px; }
.hourgrid td.pcol { text-align: left; background: transparent; padding: 2px 4px 2px 8px; min-width: 220px;
                    width: auto; white-space: normal; vertical-align: middle; }
.hourgrid tr.empty td.pcol { opacity: 1; }
.hourgrid td.pcol.area { border-left: 3px solid var(--gold); }
.hourgrid th.hcol.hit { color: var(--text-primary); font-weight: 700; }
.pm { display: inline-block; font-size: 11.5px; line-height: 1.35; padding: 1px 6px; margin: 1px 3px 1px 0;
      border-radius: 5px; white-space: nowrap; border: 1px solid var(--grid); color: var(--text-primary);
      background: var(--surface-1); }
.pm.in { border-color: var(--win); color: var(--win); }
.pm.out { border-color: var(--series-2); color: var(--series-2); }
.pm.area { border-color: var(--gold); color: var(--text-secondary); white-space: normal; }
.pm i { font-style: normal; font-weight: 650; }

/* Governor: the mode gauge - Compound mode (left half) / Dam & Skimming (right
   half), replacing the traffic light (Jakob, 12 Oct 2026) */
.modewrap { width: 230px; max-width: 100%; }
.modegauge { width: 100%; height: auto; display: block; }
.modegauge .arc { fill: none; stroke-width: 18; opacity: .22; }
.modegauge .arc.compound { stroke: var(--win); }
.modegauge .arc.dam { stroke: var(--gold); }
.modegauge .arc.on { opacity: .40; }
.modegauge .fill { fill: none; stroke-width: 18; }
.modegauge .fill.compound { stroke: var(--win); }
.modegauge .fill.dam { stroke: var(--gold); }
.modegauge .damtick { stroke: var(--text-primary); stroke-width: 2.5; }
.modegauge .needle { stroke: var(--text-primary); stroke-width: 4; stroke-linecap: round; }
.modegauge .hub { fill: var(--text-primary); }
.modegauge .lbl { font-size: 11px; fill: var(--muted); text-anchor: start; font-family: system-ui, sans-serif; }
.modegauge .lbl.mid { text-anchor: middle; font-weight: 700; fill: var(--text-secondary); }
.modegauge .lbl.end { text-anchor: end; }
.modename { font-size: 22px; font-weight: 750; letter-spacing: .04em; }
.modename.compound { color: var(--win); }
.modename.dam { color: #a8841a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .modename.dam { color: var(--gold-soft); } }
:root[data-theme="dark"] .modename.dam { color: var(--gold-soft); }
.modetext { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin: 6px 0 8px; max-width: 640px; }
.modetext b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .gov-main { grid-template-columns: 1fr; }
  .gov-main .modewrap { margin: 0 auto 10px; }
}

/* trades vs tickets (12 Oct 2026): the ticket count under a trade count */
.tk-note { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }

/* Back-test page: the piston table (12 Oct 2026) */
.pbtable { font-size: 12.5px; width: auto; }
.pbtable td.pbv, .pbtable td.nowrap { white-space: nowrap; }
.pbtable th, .pbtable td { padding: 6px 6px; vertical-align: top; }
.pbtable th .th-note { display: block; font-weight: 400; font-size: 10.5px; color: var(--muted); }
.pbtable td.r, .pbtable th.r { text-align: right; }
.pbv { font-variant-numeric: tabular-nums; font-weight: 650; border-radius: 5px; }
.pbv.good { background: var(--good-bg); color: var(--good-text); }
.pbv.bad { background: var(--bad-bg); color: var(--bad); }
span.pbv { padding: 0 5px; }
.pbv .bt { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); }
.pbup { min-width: 104px; max-width: 160px; font-size: 12px; }
.pbup a { word-break: break-all; }
.pbactions { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.upform { margin: 0; display: inline-flex; }
.upl { display: inline-block; margin: 0; font-size: 12px; color: var(--series-1); cursor: pointer;
       border: 1px dashed var(--baseline); border-radius: 6px; padding: 1px 8px; white-space: nowrap; }
.upl:hover { border-color: var(--series-1); }
button.upx { margin: 0; padding: 0 7px; font-size: 11.5px; }
.tk-note.neg { color: var(--bad); }

/* Monthly review: the review document in its month's row (12 Oct 2026) */
td.revcell { min-width: 170px; font-size: 12.5px; }
.revfile { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.revfile a { word-break: break-all; }

/* the Surveillance page's log-tailer line: the currency switch's yellow (Jakob, 12 Oct 2026) */
.marketline.tailer { background: var(--gold-soft); color: var(--navy1); border-color: var(--gold);
                     border-left-color: var(--gold); font-weight: 550; }
.marketline.tailer b.neg { color: #8f1d1d; }

/* trade notes (12 Oct 2026): the last column of the open positions and closed trades */
td.tnote { min-width: 260px; max-width: 420px; white-space: normal; font-size: 12.5px; line-height: 1.4;
           color: var(--text-secondary); }
td.tnote.muted { color: var(--muted); }

/* the Light / Dark switch in the top bar - the currency switch's twin */
.themeswitch { display: inline-flex; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px;
               overflow: hidden; vertical-align: middle; }
.themeswitch a { margin: 0; padding: 3px 11px; font-size: 12.5px; line-height: 1.5; color: var(--hero-sub);
                 border: 0; white-space: nowrap; }
.themeswitch a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .07); }
.themeswitch a.on { color: var(--navy1); background: var(--gold-soft); font-weight: 600; }
@media (max-width: 720px) {
  .themeswitch .tw { display: none; }
  .themeswitch a { padding: 4px 9px; }
  .nav-tools { gap: 8px; }
  .nav-tools .curswitch { margin-left: 0; }
  .nav-tools .curswitch a { padding: 4px 9px; }
  .topbar { column-gap: 8px; padding-left: 14px; padding-right: 14px; }
  .brand small { letter-spacing: .12em; }
}

/* Battery net profit tile: Deposit total and Gain % under the net (12 Oct 2026) */
.tile .label.tsub { margin-top: 10px; }
.tile .value.v2 { font-size: 20px; }
.tile .value.v2.plain { font-weight: 500; }

/* the dashboard's Governor mode box (12 Oct 2026) - the Governor page's gauge, small */
a.tile.govtile { color: inherit; text-decoration: none; display: block; }
a.tile.govtile:hover { border-color: var(--gold); }
.modewrap.mini { width: 150px; max-width: 100%; margin: 4px 0 2px; }
.modename.mini { font-size: 15px; letter-spacing: .03em; }


/* the calendar's daily budget to the next dam, left of the day's numbers (12 Oct 2026) */
.day .dayrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; flex: 1; }
.day .nums { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.day .bud { font-size: 12px; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.day.future .bud { color: var(--text-secondary); }
.cal { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .day { padding: 5px 5px; min-width: 0; }
  .day .bud { font-size: 9.5px; white-space: normal; text-align: right; line-height: 1.15; }
  .day .dayrow { flex-direction: column; align-items: flex-end; }
  .day .p { font-size: 12.5px; }
  .day .mx { font-size: 10.5px; }
}

/* Admin's Office: each user's default display mode (12 Oct 2026) */
.themetable td.modepick { white-space: nowrap; }
.themetable td.modepick label { display: inline-flex; align-items: center; gap: 5px; margin: 0 14px 0 0; font-size: 13.5px;
                                color: var(--text-primary); cursor: pointer; }
.themetable td.modepick input { margin: 0; accent-color: var(--win); }
@media (max-width: 720px) { .themetable td.modepick { white-space: normal; } .themetable td.modepick label { margin: 2px 10px 2px 0; } }

/* ---------------- Budget page: the weekly path to the dams (12 Oct 2026) ---------------- */
.budhead { margin-bottom: 16px; }
.budmodes { display: inline-flex; border: 1px solid var(--baseline); border-radius: 999px; overflow: hidden; }
.budmodes a { padding: 5px 14px; font-size: 13px; color: var(--text-secondary); }
.budmodes a:hover { text-decoration: none; background: var(--page); }
.budmodes a.on { background: var(--navy1); color: var(--gold-soft); font-weight: 650; }
.budtiles { margin-top: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.budtiles .tile { box-shadow: none; background: var(--page); }
.budtiles .value small { font-size: 13px; font-weight: 500; color: var(--muted); }
@media (max-width: 720px) { .budtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.damstrip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.damchip { display: inline-flex; flex-direction: column; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--gold);
           background: rgba(201, 162, 39, .10); color: var(--text-primary); font-size: 12.5px; }
.damchip:hover { text-decoration: none; background: rgba(201, 162, 39, .2); }
.damchip span { color: var(--text-secondary); font-size: 11.5px; }
.damchip span.dc1 { color: var(--text-primary); font-size: 12.5px; white-space: nowrap; }
.damchip.final { background: rgba(201, 162, 39, .22); }
.budgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.bw { border: 1px solid var(--grid); border-radius: 8px; padding: 6px 8px; background: var(--surface-1); font-size: 11.5px;
      font-variant-numeric: tabular-nums; scroll-margin-top: 16px; }
.bw.future { border-style: dashed; }
.bw.over { background: var(--good-bg); border-color: var(--good-text); }
.bw.under { background: var(--bad-bg); border-color: var(--bad); }
.bw.now { border: 2px solid var(--gold); }
.bw.dam { box-shadow: inset 0 0 0 1px var(--gold); }
.bwh { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 3px; }
.bwh b { color: var(--text-primary); }
.bwr { display: flex; justify-content: space-between; gap: 6px; color: var(--text-secondary); }
.bwr b { color: var(--text-primary); font-weight: 650; }
.bw.over .bwr.act b { color: var(--good-text); }
.bw.under .bwr.act b { color: var(--bad); }
.bwt { margin-top: 3px; color: var(--muted); font-size: 10.5px; text-align: right; }
.bwdam { margin-top: 4px; color: #8c6a10; font-weight: 650; font-size: 11px; }
:root[data-theme="dark"] .bwdam { color: var(--gold-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bwdam { color: var(--gold-soft); } }

/* "Months to next dam" with its percentile (12 Oct 2026): 6,4 @ 23rd percentile */
#t-todam { white-space: nowrap; }
#t-todam .pct-at { font-size: .6em; font-weight: 500; color: var(--text-secondary); margin: 0 4px 0 7px; }
#t-todam .pct-n { font-size: .8em; font-weight: 750; }
#t-todam .pct-suf { font-size: 11px; font-weight: 500; color: var(--text-secondary); margin-left: 1px; letter-spacing: -.1px; }
.budnote { margin: 8px 0 0; color: var(--bad); font-size: 13px; }
.budpaths { margin: 8px 0 0; }
.budpaths b.on { color: var(--text-primary); }

/* Admin's Office: Add user + Telegram side by side (the Admin page folded in, 12 Oct 2026) */
.officepair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 760px) { .officepair { grid-template-columns: minmax(0, 1fr); } }

/* The R-logo left of the name (Jakob, 12 Oct 2026) - the app icon, as in the home-screen icon */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand .brandmark { width: 40px; height: 40px; border-radius: 6px; flex: none; display: block;
                    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.brand .brandtext { display: block; line-height: 1.2; }
@media (max-width: 720px) {
  .brand { gap: 8px; }
  .brand .brandmark { width: 32px; height: 32px; border-radius: 5px; }
}
@media (max-width: 440px) {          /* the logo, the name and the three controls on one phone row */
  .brand { gap: 7px; font-size: 15.5px; }
  .brand .brandmark { width: 28px; height: 28px; }
  .brand small { font-size: 8.5px; letter-spacing: .07em; }
  .topbar { column-gap: 6px; padding-left: 12px; padding-right: 12px; }
  .nav-tools { gap: 6px; margin-left: 0; }
  .nav-tools .curswitch a, .themeswitch a { padding: 4px 7px; }
  .nav-tools > a { font-size: 13px; }
}

/* the calendar's daily result bigger (Jakob, 12 Oct 2026) */
.day .p { font-size: 20px; line-height: 1.25; letter-spacing: -.2px; }
@media (max-width: 720px) { .day .p { font-size: 13px; letter-spacing: -.4px; } }

/* the fund tabs scroll sideways on a phone instead of widening the page */
@media (max-width: 720px) {
  .fundtabs { overflow-x: auto; flex-wrap: nowrap; gap: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fundtabs::-webkit-scrollbar { display: none; }
  .fundtabs a { white-space: nowrap; flex: none; }
}

/* Deposit total a touch smaller than the figures around it (Jakob, 12 Oct 2026) */
#t-deposits.value.v2 { font-size: 17px; }

/* Surveillance roll-call on a phone: long piston names + group + state wrap inside the tile
   instead of pushing the page wider (Android and iPhone check, 12 Oct 2026) */
.rc-tile { min-width: 0; }
.rc-top { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.rc-top b { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 720px) {
  .rc-family { grid-template-columns: minmax(0, 1fr); }
  .rc-units { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
}
@media (max-width: 400px) {
  #t-todam .pct-at { margin: 0 3px 0 5px; }
  #t-todam .pct-suf { font-size: 10px; }
}

/* Budget vs actual: the month's budget and the actual so far, large, above the chart (12 Oct 2026) */
.bvastats { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 56px; margin: 2px 0 12px; }
.bvastat { text-align: center; min-width: 0; }
.bvastat .bvl { font-size: 13px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 7px; }
.bvastat .bvv { display: block; font-size: 26px; font-weight: 750; line-height: 1.2; margin-top: 2px;
                font-variant-numeric: tabular-nums; color: var(--text-primary); }
.bvastat .bvv.pos, .bvastat .bvs.pos { color: var(--status-good); }
.bvastat .bvv.neg, .bvastat .bvs.neg { color: var(--bad); }
.bvastat .bvs { font-size: 12.5px; color: var(--text-secondary); margin-top: 1px; }
.bvastat .sw { display: inline-block; width: 22px; height: 0; border-top: 2px dashed var(--gold); }
.bvastat .sw.sw-act { border-top: 3px solid var(--status-good); }
@media (max-width: 720px) {
  .bvastats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
  .bvastat .bvl { font-size: 11.5px; gap: 5px; }
  .bvastat .sw { width: 14px; }
  .bvastat .bvv { font-size: 18px; }
  .bvastat .bvs { font-size: 11px; line-height: 1.3; }
}
/* the 30-day result beside "Trading result - last 30 days" */
.eqhead .eqfig { font-size: 24px; font-weight: 750; margin-left: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eqhead .eqfig.pos { color: var(--status-good); }
.eqhead .eqfig.neg { color: var(--bad); }
@media (max-width: 720px) { .eqhead .eqfig { display: block; margin: 4px 0 0; font-size: 20px; } }
/* the month's budget in the calendar heading */
.calhead .calbud b { color: var(--text-primary); }
.calhead b { white-space: nowrap; }

/* Budget page: the calendar's week numbers, with the year as a divider (Jakob, 12 Oct 2026) */
.budgrid .bwyear { grid-column: 1 / -1; font-size: 15px; font-weight: 750; color: var(--text-primary);
                   padding: 8px 2px 2px; border-bottom: 2px solid var(--gold); margin-bottom: 2px; }
.budgrid .bwyear:first-child { padding-top: 0; }

/* Spread Watch: each piston mark carries its tested budget and this week's live % of it (12 Oct 2026) */
.pm b { font-weight: 700; }
.pm .pmr { font-weight: 700; margin-left: 2px; }
.pm.s-covered { background: var(--good-bg); }
.pm.s-watch { background: rgba(201, 162, 39, .18); }
.pm.s-over { background: var(--bad-bg); }
.pm.s-over .pmr { color: var(--bad); }
.pm.s-covered .pmr { color: var(--good-text); }
.pm.s-watch .pmr { color: #8c6a10; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pm.s-watch .pmr { color: var(--gold-soft); } }
:root[data-theme="dark"] .pm.s-watch .pmr { color: var(--gold-soft); }
.hourgrid td.pcol .pm.area { display: block; margin-bottom: 2px; }
/* the budget figure in the gold of its dashed line (Jakob, 12 Oct 2026) */
#bva-budget.bvv { color: var(--gold); }
.bvastat .sw.sw-bud { border-top-width: 3px; }

/* THE BUDGET = the MC 5 % path (16 Oct 2026): the strip under the chart, the page's tables */
.bvstrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 12px; margin-top: 10px;
           padding-top: 10px; border-top: 1px solid var(--grid); }
.bvs1 { display: flex; flex-direction: column; min-width: 0; }
.bvs1 .bvsl { font-size: 11.5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.bvs1 b { font-size: 17px; font-weight: 750; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.bvs1 b.pos { color: var(--status-good); }
.bvs1 b.neg { color: var(--bad); }
.bvs1 .bvss { font-size: 11.5px; color: var(--text-secondary); line-height: 1.3; }
@media (max-width: 720px) { .bvstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bvs1.fund { grid-column: 1 / -1; } }
.budtiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .budtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.budtiles .value small { font-size: 13px; font-weight: 600; margin-left: 4px; }
.budtables { display: grid; grid-template-columns: 3fr 2fr; gap: 0 16px; }
@media (max-width: 900px) { .budtables { grid-template-columns: minmax(0, 1fr); } }
.budtab { width: 100%; font-size: 13px; }
.budtab th.r, .budtab td.r { text-align: right; font-variant-numeric: tabular-nums; }
.budtab tr.done td { color: var(--text-primary); }
.budtab tr.over td:nth-child(6) b { color: var(--good-text); }
.budtab tr.under td:nth-child(6) b { color: var(--bad); }
.day .bud.neg { color: var(--text-secondary); }
.day .bud.neg::after { content: ""; }

/* the running budget week in the capital tile (16 Oct 2026) */
/* This week / This month against the budget: two tiles stacked in one column of
   the top row, in the gold frame of the Budget page's running week (Jakob, 16 Oct 2026) */
.tilestack { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; min-width: 0; }
a.tile.budtile { display: block; color: inherit; text-decoration: none; border: 2px solid var(--gold); padding: 11px 14px; }
a.tile.budtile:hover { text-decoration: none; box-shadow: 0 0 0 2px rgba(201, 162, 39, .25); }
.tile.budtile .value { font-size: 21px; }
.tile.budtile .value.pos { color: var(--good-text); }
.tile.budtile .value.neg { color: var(--bad); }
.tile.budtile .sub.range { color: var(--muted); margin-top: 4px; }
@media (max-width: 1040px) { .tilestack { gap: 9px; } a.tile.budtile { padding: 10px 11px; } .tile.budtile .value { font-size: 17px; } }
@media (max-width: 720px) { .tilestack { gap: 10px; } a.tile.budtile { padding: 11px 12px; } .tile.budtile .value { font-size: 17px; } }

/* the ladder rungs in capital, the W under each (16 Oct 2026) */
.rung .w { display: block; font-size: 10.5px; color: var(--text-secondary); font-weight: 500; }

/* Family stake sizing table on the Governor page (16 Oct 2026) */
.famtab { width: 100%; font-size: 12.5px; }
.famtab th.r, .famtab td.r { text-align: right; font-variant-numeric: tabular-nums; }
.famtab td.famcell { vertical-align: top; border-top: 2px solid var(--grid); }
.famtab tr.famfirst td { border-top: 2px solid var(--grid); }
.famtab .book { display: inline-block; font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.famtab .book.full { background: var(--good-bg); color: var(--good-text); }
.famtab .book.q { background: var(--page); color: var(--text-secondary); border: 1px solid var(--grid); }
.famtab tr.quarter td { color: var(--text-secondary); }
.famtab tr.quarter td b { color: var(--text-primary); }

/* The Budget page's year-ahead chart (Jakob, 17 Oct 2026) */
.yearcard { margin-top: 16px; }
.yearwrap { height: 420px; }
.yastrip { margin: 4px 0 12px; }
@media (max-width: 720px) { .yearwrap { height: 300px; } }