/* One stylesheet, no framework, no CDN.
   Mobile first: he opens this on a phone. Colour carries meaning only
   alongside a word -- BLOCK/WARN/INFO are always spelled out, never red/amber
   alone, because a printed or colour-blind read must survive. */

:root {
  color-scheme: light dark;
  --bg: #f7f7f5;
  --card: #ffffff;
  --ink: #16181d;
  --muted: #5c6270;
  --line: #e2e2df;
  --accent: #1c4f8f;
  --block-bg: #fdeceb; --block-ink: #8c1d16; --block-line: #e9b7b2;
  --warn-bg: #fdf5e3;  --warn-ink: #7a5405; --warn-line: #e8d5a3;
  --info-bg: #eef2f7;  --info-ink: #3c4a5a; --info-line: #ccd6e3;
  --ok-bg: #ecf6ef;    --ok-ink: #1c6435;  --ok-line: #b8ddc4;
  /* A tinted panel that is NOT a card, and the two directional colours.
     Added 2026-09-08: these three were hardcoded in the rules, so dark
     mode never reached them and panels rendered dark grey on black. */
  --panel: #fafafa; --panel-line: #eaeaea;
  --pos: #15803d; --neg: #b91c1c;
  /* What sits ON a filled accent or a filled warning. In dark mode the
     accent is a PALE blue, so white on it is barely legible. */
  --on-accent: #ffffff; --on-neg: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a; --card: #1c1f25; --ink: #e9eaec; --muted: #9aa1ad;
    --line: #2c3038; --accent: #7fb0ee;
    --block-bg: #2e1614; --block-ink: #ff9d93; --block-line: #5c2b26;
    --warn-bg: #2c2410; --warn-ink: #f0c565; --warn-line: #574518;
    --info-bg: #1b2029; --info-ink: #a9bcd4; --info-line: #2e3947;
    --ok-bg: #14261a;   --ok-ink: #82d39c;  --ok-line: #275437;
    --panel: #23262d; --panel-line: #333842;
    --pos: #82d39c; --neg: #ff9d93;
    --on-accent: #10243c; --on-neg: #3a100b;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 780px; margin: 0 auto; padding: 0 18px 64px; }

/* ---------------------------------------------------------------- WIDTH ---
   The page was a 780px column at every screen size. On a 1366 laptop that
   leaves ~40% of the window empty; on a 1920 monitor ~60%. There were no
   width media queries at all -- the only @media rules in this file were
   prefers-color-scheme.

   The column does NOT simply grow, because a 1300px line of prose is harder
   to read than a 780px one, not easier. What grows is the stuff that is
   genuinely wide -- the per-product table (six columns, forty rows), the
   ladder, the opportunity tables -- while running text stays at a readable
   measure via .lede/.note/p caps below.

   Breakpoints are picked for real screens, not round numbers:
     1366x768  -> ~1350 viewport. The SHORTEST common screen: ~630px usable
                  height, so vertical stacking costs the most here.
     1440x900  -> ~1425 viewport.
     1920x1080 -> ~1900 viewport.                                          */
@media (min-width: 1100px) { .wrap { max-width: 1060px; } }
@media (min-width: 1400px) { .wrap { max-width: 1240px; } }
@media (min-width: 1750px) { .wrap { max-width: 1380px; } }

/* Running text keeps a readable measure no matter how wide the column gets.
   Tables, cards and the figure strip are exempt -- they are what the extra
   width is FOR. */
p, .note, .fineprint, .verdict p { max-width: 74ch; }
table p, table .note, .split .note, .opp .note { max-width: none; }

/* The channel P&L and the ads confidence, side by side above 1100px and
   stacked below it. `align-items: start` so a short right column does not
   stretch to match a tall left one. */
.split { display: grid; gap: 0 30px; align-items: start; }
.split > section { min-width: 0; }
.split > section:empty { display: none; }
@media (min-width: 1100px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1400px) { .split { grid-template-columns: 7fr 5fr; } }
/* The h2 that opens each column must sit on the same baseline. */
.split > section > h2:first-child { margin-top: 26px; }

header.bar {
  border-bottom: 1px solid var(--line); background: var(--card);
  position: sticky; top: 0; z-index: 5;
}
header.bar .wrap {
  padding: 12px 18px; display: flex; align-items: baseline; gap: 12px;
}
header.bar b { font-size: 16px; letter-spacing: -0.01em; }
header.bar span { color: var(--muted); font-size: 13px; }
header.bar a.right { margin-left: auto; font-size: 13px; }

a { color: var(--accent); }
h1 { font-size: 25px; line-height: 1.25; margin: 26px 0 6px; letter-spacing: -0.02em; }
h2 { font-size: 17px; margin: 30px 0 10px; letter-spacing: -0.01em; }
p.sub { color: var(--muted); margin: 0 0 20px; }
small.note { color: var(--muted); font-size: 13px; display: block; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px; margin: 14px 0;
}

/* ---- the verdict. The one thing he reads first (C2.3) ---- */
.verdict { border-radius: 10px; padding: 20px; margin: 20px 0 8px; border: 1px solid; }
.verdict .tag {
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  display: block; margin-bottom: 8px; opacity: 0.85;
}
.verdict p { margin: 0; font-size: 19px; line-height: 1.42; font-weight: 500; }
.verdict.BLOCKED { background: var(--block-bg); color: var(--block-ink); border-color: var(--block-line); }
.verdict.WARN    { background: var(--warn-bg);  color: var(--warn-ink);  border-color: var(--warn-line); }
.verdict.OK      { background: var(--ok-bg);    color: var(--ok-ink);    border-color: var(--ok-line); }

/* ---- numbers ---- */
.figs { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.fig {
  flex: 1 1 150px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 15px;
}
.fig .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.fig .v { font-size: 22px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* ---- findings ---- */
.sev-head {
  display: flex; align-items: center; gap: 9px; margin: 26px 0 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.pill { border-radius: 999px; padding: 2px 9px; font-size: 12px; border: 1px solid; }
.pill.BLOCK { background: var(--block-bg); color: var(--block-ink); border-color: var(--block-line); }
.pill.WARN  { background: var(--warn-bg);  color: var(--warn-ink);  border-color: var(--warn-line); }
.pill.INFO  { background: var(--info-bg);  color: var(--info-ink);  border-color: var(--info-line); }

.finding { border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px;
           background: var(--card); padding: 15px 16px; margin: 9px 0; }
.finding.BLOCK { border-left-color: var(--block-ink); }
.finding.WARN  { border-left-color: var(--warn-ink); }
.finding.INFO  { border-left-color: var(--info-line); }
.finding h3 { margin: 0 0 6px; font-size: 16.5px; line-height: 1.35; }
.finding p { margin: 6px 0; }
.finding .where { color: var(--muted); font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.finding .fix { border-top: 1px dashed var(--line); margin-top: 11px; padding-top: 11px; }
.finding .escalated { color: var(--block-ink); font-size: 13.5px; margin-top: 8px; }

.owner { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; padding: 2px 7px;
         border-radius: 4px; border: 1px solid var(--line); background: var(--bg); }

/* ---- forms ---- */
label.file { display: block; margin: 14px 0; }
label.file .lab { font-weight: 600; display: block; }
label.file .why { color: var(--muted); font-size: 13.5px; display: block; margin-bottom: 6px; }
input[type=file] { width: 100%; font-size: 15px; }
input[type=date], input[type=password] {
  font: inherit; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--card); color: var(--ink); width: 100%;
}
.dates { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.dates > div { flex: 1 1 150px; }
.dates label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 4px; }

button, .btn {
  font: inherit; font-weight: 600; background: var(--accent);
  color: var(--on-accent);
  border: 0; border-radius: 8px; padding: 13px 20px; cursor: pointer;
  text-decoration: none; display: inline-block; text-align: center;
}
button:disabled { opacity: 0.55; cursor: progress; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.wide { width: 100%; }

.flash { border-radius: 8px; padding: 12px 14px; margin: 14px 0; border: 1px solid; }
.flash.block { background: var(--block-bg); color: var(--block-ink); border-color: var(--block-line); }
.flash.info  { background: var(--info-bg);  color: var(--info-ink);  border-color: var(--info-line); }

table.runs { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.runs th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px;
                text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 8px; }
table.runs td { padding: 9px 8px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }

footer { color: var(--muted); font-size: 13px; margin-top: 42px;
         border-top: 1px solid var(--line); padding-top: 16px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }

/* ------------------------------------------------------------------ demo -
   The demo is a different kind of visit and the page should say so without
   shouting. One tinted strip under the header, one tag in it, and otherwise
   the same page the owner sees -- a trial that looks like a lesser product
   sells a lesser product. */
.tag {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); margin-left: 8px;
}
.demoline {
  background: var(--info-bg); border: 1px solid var(--info-line); border-radius: 8px;
  padding: 10px 14px; margin: 14px 0 0; font-size: 13px; line-height: 1.55;
  color: var(--info-ink);
}
.demoline b { color: var(--info-ink); }
.demoline a { margin-left: 6px; }

.note-card {
  background: var(--panel); font-size: 13px; line-height: 1.6; color: var(--muted);
}

.lede { font-size: 16px; line-height: 1.65; color: var(--ink); max-width: 62ch; }

/* A plain two-column table for prose, not for numbers: no zebra striping and
   a left column that reads as a label rather than a heading. */
table.plain { width: 100%; border-collapse: collapse; margin: 14px 0 22px; }
table.plain th {
  text-align: left; vertical-align: top; width: 34%; padding: 10px 14px 10px 0;
  font-weight: 600; color: var(--ink); border-top: 1px solid var(--panel-line);
}
table.plain td {
  vertical-align: top; padding: 10px 0; line-height: 1.6; color: var(--muted);
  border-top: 1px solid var(--panel-line);
}

button.go {
  font-size: 15px; font-weight: 600; padding: 11px 20px; border: 0;
  border-radius: 7px; background: var(--ink); color: var(--bg); cursor: pointer;
}
button.go:hover { background: var(--panel); }

.stats { display: flex; gap: 26px; flex-wrap: wrap; margin: 0 0 8px; }
.stats div { min-width: 92px; }
.stats .n { font-size: 22px; font-weight: 700; color: var(--ink); display: block; }
.stats .k { font-size: 12px; color: var(--muted); }

/* A template link sits inside a field label, so it must read as secondary to
   the field name rather than competing with it. */
a.tmpl {
  font-weight: 400; font-size: 12px; margin-left: 10px; color: var(--accent);
  text-decoration: none; border-bottom: 1px dotted #1d4ed8;
}
a.tmpl:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ----------------------------------------------------- what to do about it -
   The opportunity block is the part of the page a founder came for, so it
   sits above the findings and the money is the first thing in each row. */
.opp-head { margin: 6px 0 2px; }
.opp-total {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
}
.opp-sub { font-size: 14px; color: var(--muted); margin-left: 8px; }

.opp {
  border: 1px solid var(--line); border-left: 3px solid #1d4ed8;
  border-radius: 8px; padding: 14px 16px; margin: 12px 0; background: var(--card);
}
.opp-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.opp-amt {
  font-size: 19px; font-weight: 700; color: var(--accent); white-space: nowrap;
}
.opp h3 { margin: 0; font-size: 15px; font-weight: 600; }
.opp-do { margin: 8px 0 10px; font-size: 14px; line-height: 1.6; }
.opp-tbl { font-size: 13px; }
.opp-tbl td, .opp-tbl th { padding: 6px 8px; }
.basis { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }

td.r, th.r { text-align: right; white-space: nowrap; }
td.muted, .muted { color: var(--muted); }
td.neg { color: var(--neg); font-weight: 600; }

/* The withheld rows. Honest rather than teasing: it says how many and how
   much, because a number you cannot check is not a reason to buy. */
tr.locked td {
  background: var(--panel); color: var(--muted); font-size: 13px; line-height: 1.6;
  border-top: 1px dashed var(--line);
}

.cta { border-left: 3px solid #1d4ed8; }
.cta .btn { display: inline-block; margin-top: 8px; }

/* The rupee size of a finding, so the reader can tell a Rs 50,000 problem
   from a Rs 9 one without reading either. */
.impact {
  display: inline-block; font-weight: 700; font-size: 15px; color: var(--ink);
  margin: 2px 0 4px;
}

/* Figures from a run we do not trust. Shown, but never quietly. */
.untrusted {
  border: 1px solid #fca5a5; border-radius: 8px; padding: 12px 16px;
  margin-top: 12px; background: var(--block-bg);
}
.untrusted .tag {
  background: var(--neg); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  color: var(--on-neg); font-weight: 700;
}

/* Cycle-on-cycle movement, under each headline figure. */
.fig .d { font-size: 12px; margin-top: 3px; font-weight: 600; }
.fig .d span { font-weight: 400; color: var(--muted); }
.fig .d.up { color: var(--pos); }
.fig .d.down { color: var(--neg); }

@media (prefers-color-scheme: dark) {
  .opp-total, .opp h3 { color: var(--ink); }
  tr.locked td { background: var(--panel); color: var(--muted); }
  .untrusted { background: var(--block-bg); border-color: var(--block-line); }
  .impact { color: var(--ink); }
}

/* Fine print. Present, readable, and not a wall. */
.fineprint {
  font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 68ch;
  margin: 10px 0 0;
}
.fineprint a { color: var(--muted); }
@media (prefers-color-scheme: dark) { .fineprint, .fineprint a { color: var(--muted); } }

/* Everything below the materiality floor, on one line. Present and checkable,
   not four paragraphs of identical boilerplate for forty-six rupees. */
.minor {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px;
  margin: 12px 0; font-size: 13px; line-height: 1.6; color: var(--muted);
  background: var(--card);
}
.minor b { color: var(--ink); }
@media (prefers-color-scheme: dark) { .minor b { color: var(--ink); } }

/* The channel P&L. A ladder, so the eye can run down it: label left, money
   right, share of net revenue last. */
table.ladder { width: 100%; border-collapse: collapse; font-size: 14px; }
table.ladder td { padding: 7px 10px; border-bottom: 1px solid var(--line); }
table.ladder td.lbl { color: var(--ink); }
table.ladder td.amt, table.ladder td.pc {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
table.ladder td.pc { color: var(--muted); width: 72px; }
table.ladder tr.cost td.lbl { padding-left: 26px; color: var(--muted); }
table.ladder tr.cost td.amt { color: var(--neg); }
table.ladder tr.credit td.lbl { padding-left: 26px; color: var(--muted); }
table.ladder tr.total td {
  font-weight: 700; font-size: 16px; border-top: 2px solid var(--ink);
  border-bottom: none; padding-top: 10px;
}
table.ladder tr.sub td.lbl { font-weight: 600; }
@media (prefers-color-scheme: dark) {
  table.ladder tr.total td { border-top-color: var(--ink); }
}

/* How much of the ad spend is genuinely traced. A number a reader can act on
   beats a per-product ad column presented as if every row were equally sure. */
.conf {
  border: 1px solid var(--line); border-left: 3px solid #1d4ed8;
  border-radius: 8px; padding: 12px 16px; margin: 14px 0; background: var(--card);
}
.conf.good { border-left-color: var(--pos); }
.conf.none { border-left-color: var(--warn-ink); }
.conf-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.conf-n { font-size: 22px; font-weight: 700; color: var(--ink); }
.conf.good .conf-n { color: var(--pos); }
.conf.none .conf-n { color: var(--warn-ink); }
.conf-bar {
  height: 6px; border-radius: 3px; background: var(--line); margin: 8px 0;
  overflow: hidden;
}
.conf-bar i { display: block; height: 100%; background: var(--accent); }
.conf.good .conf-bar i { background: var(--pos); }
.conf small { font-size: 12px; line-height: 1.6; color: var(--muted); display: block; }
@media (prefers-color-scheme: dark) {
  .conf-n { color: var(--ink); }
  .conf-bar { background: var(--panel); }
}

/* ------------------------------------------------- the cross-cycle page ---
   One row per product, and where a product sold under more than one set of
   terms, its own rows underneath. The sub-rows have to read as EVIDENCE for
   the row above rather than as more products, so they sit on the tinted
   surface and lose the strong top border that separates products.

   Every colour here is a token. Thirty-five rules in this file once spelled a
   colour as hex, which is how dark grey text ended up on a black background
   on the owner's phone -- tests/test_contrast.py asserts the arithmetic now,
   and nothing new gets to bypass it. */
table.hist { min-width: 660px; }
table.hist tr.p > td {
  border-top: 2px solid var(--line); padding-top: 12px; vertical-align: top;
}
table.hist tr.p b { font-size: 15px; }
table.hist .sub2 {
  color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 400;
  margin-top: 2px;
}

/* A segment: one cycle's worth of one product under one category and one
   band. Indented, tinted, and never bolder than its parent. */
table.hist tr.seg > td {
  background: var(--panel); border-top: 1px solid var(--panel-line);
  font-size: 13.5px; color: var(--muted); padding-top: 7px; padding-bottom: 7px;
}
table.hist tr.seg > td.segname { padding-left: 22px; }

/* A segment from the download that was left out of the totals. Present,
   legible, and unmistakably set aside. */
table.hist tr.seg.out > td {
  background: var(--warn-bg); color: var(--warn-ink);
  border-top-color: var(--warn-line);
}
table.hist tr.seg.out .sub2 { color: var(--warn-ink); }

/* The sentence that says what actually happened between two segments: they
   handed over on a date, or they ran together. Full width, because it is a
   sentence and not a number. */
table.hist tr.why > td {
  background: var(--info-bg); color: var(--info-ink);
  border-top: 1px solid var(--info-line); font-size: 13px; line-height: 1.6;
  padding: 9px 12px 9px 22px;
}
table.hist tr.why.naive > td { padding-left: 12px; }
table.hist tr.dropped > td { color: var(--muted); }

/* Why this product is on the page at all. */
.chip {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 7px; border-radius: 999px; border: 1px solid; margin: 4px 4px 0 0;
}
.chip.band { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.chip.cat  { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }

/* What was left out of the totals, and why. Above the tables, never a
   footnote: a download dropped from the aggregate is a fact about every
   number on the page. */
.excluded {
  background: var(--warn-bg); color: var(--warn-ink);
  border: 1px solid var(--warn-line); border-radius: 10px;
  padding: 16px 18px; margin: 18px 0;
}
.excluded p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; }
.excluded p.last { font-size: 13px; }
.excluded .tag { margin-left: 0; }
/* The unresolved case: two downloads share days and neither contains the
   other, so nothing can be dropped and the totals really do count twice. */
.excluded.warn-double {
  background: var(--block-bg); color: var(--block-ink);
  border-color: var(--block-line);
}
.excluded.warn-double .tag { background: var(--neg); color: var(--on-neg); }