/**
 * THE ROAS CALCULATOR'S OWN STYLE, ONCE.
 *
 * Lifted verbatim out of audit-report.html's inline <style> so /calculator can
 * show the same two blocks — the four cost tiles and the ROAS calculation —
 * without a second copy of the rules. The audit still owns the rest of its
 * sheet; only what these two blocks need is here.
 *
 * Shipped the way /adb-roas-model.js is shipped: a plain file under src/pages,
 * served by Workers Assets at its own path, loaded with a <link>.
 */
/* The dark band. On the body rather than on .ar, because the bar at the
   top of the page is painted with the same values and the bar sits
   outside .ar. */
body[data-page="audit-report"] {
  --ar-dark:        #0a1628;
  --ar-dark-soft:   #14243d;
  --ar-on-dark:     #ffffff;
  --ar-on-dark-mut: #9fb0c9;
}
/* THE COMPONENT'S OWN COLOURS, WHEREVER IT IS MOUNTED.
   The audit gives them to .ar, which is also that page's 1,440px column. A
   page that wants only the calculator marks its own box .adb-calc and gets the
   colours without the column. The values are the same in both, so the audit
   renders exactly as it did. */
.ar, .adb-calc {
  --ar-bot:         #d64545;
  --ar-green-wash:  rgba(0, 153, 87, 0.07);
  --ar-green-edge:  rgba(0, 153, 87, 0.22);
  --ar-dark:        #0a1628;
  --ar-dark-soft:   #14243d;
  --ar-on-dark:     #ffffff;
  --ar-on-dark-mut: #9fb0c9;
}
.ar {
  --ar-bot:         #d64545;
  --ar-green-wash:  rgba(0, 153, 87, 0.07);
  --ar-green-edge:  rgba(0, 153, 87, 0.22);
  --ar-gutter: 16px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--ar-gutter) 80px;
}
/* The width the design is drawn at: 1,328px of content inside 56px
   margins at 1440. Every size below is set for that column. */
@media (min-width: 720px) { .ar { --ar-gutter: 32px; } }
@media (min-width: 1100px) { .ar { --ar-gutter: 56px; } }

.ar [hidden], .adb-calc [hidden] { display: none !important; }
.ar-hero > *, .ar-next > *, .ar-snow > *, .ar-calc-cols > *, .ar-tables > *,
.ar-tiles > *, .ar-inputs > *, .ar-toc > * { min-width: 0; }
.ar-tablecard, .ar-card, .ar-revbars > * { min-width: 0; }
.ar h1, .ar h2, .ar h3,
.adb-calc h1, .adb-calc h2, .adb-calc h3 { letter-spacing: -0.02em; line-height: 1.12; }
.ar p, .adb-calc p { line-height: 1.65; }

.ar-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
}

/* ── 6. What bots cost you ──────────────────────────────────── */
.ar-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: 28px;
}
@media (min-width: 720px) { .ar-card { padding: 36px; } }
.ar-cost { margin-top: 48px; }
.ar-cost h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--ink); margin: 6px 0 0; letter-spacing: -0.01em; }
/* The headline on the left, the basis and the way to change it on the
   right, as drawn. Under 900px they stack, which is the phone view. */
.ar-cost-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ar-cost-head > div:first-child { min-width: 0; flex: 1 1 420px; }
.ar-chipline { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.ar-chip {
  display: inline-flex; padding: 10px 18px; border-radius: 999px; font-size: 16px; font-weight: 800;
  background: var(--ar-green-wash); border: 1px solid var(--ar-green-edge); color: #006e48; text-align: center;
}
.ar-jump { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: underline; }
/* Stacked, the chip line is never wider than the card. flex-shrink: 0 keeps
   it whole beside the headline; on a line of its own it held the chip to one
   line, "Based on $10,000 / month in ad spend", 339px in a 253px card at a
   375px screen, and the whole page scrolled sideways (2026-10-03). On
   /calculator the same chip ran 69px past its card and was cut off at the
   screen's edge. Capped at the card's width, the chip wraps inside its border. */
@media (max-width: 899px) {
  .ar-chipline { align-items: flex-start; margin-top: 16px; max-width: 100%; }
}
.ar-tiles { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
@media (min-width: 620px) { .ar-tiles { grid-template-columns: 1fr 1fr; } }
/* THE WIDE ARRANGEMENTS BELONG TO THE AUDIT'S OWN COLUMN.
   A media query asks the window, not the box the section is standing in. The
   audit gives it 1,328px and four tiles across read well; /calculator gives it
   about 615px beside the form, where the same rule made four 125px tiles with a
   36px figure in each. Scoped to .ar, so the audit is exactly as it was and a
   narrower mount keeps the arrangements drawn for a narrow column. */
@media (min-width: 1000px) { .ar .ar-tiles { grid-template-columns: repeat(4, 1fr); } }
.ar-tile { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; background: var(--bg); }
.ar-tile-label { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.ar-tile-value { font-size: clamp(24px, 3.2vw, 36px); font-weight: 900; color: var(--ink); margin: 6px 0 4px; letter-spacing: -1px; }
.ar-tile-note { font-size: 13px; color: var(--ink-muted); }
/* The money lost is red, the money recovered is green: the two figures the
   section exists to put side by side. */
.ar-tile.is-bots .ar-tile-value { color: var(--ar-bot); }
.ar-tile.is-blocked .ar-tile-value { color: var(--accent); }
.ar-tile.is-dark { background: var(--ar-dark); border-color: var(--ar-dark); }
.ar-tile.is-dark .ar-tile-label, .ar-tile.is-dark .ar-tile-note { color: var(--ar-on-dark-mut); }
.ar-tile.is-dark .ar-tile-note { color: #cbd5e1; }
.ar-tile.is-dark .ar-tile-value { color: #00ff88; font-size: clamp(19px, 2.4vw, 30px); white-space: nowrap; }
.ar-tile.is-dark .ar-tile-label { white-space: nowrap; }
.ar-means {
  margin-top: 22px; border-radius: var(--r-lg); padding: 24px;
  background: var(--ar-green-wash); border: 1px solid var(--ar-green-edge);
}
.ar-means-head { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.ar-means-lead { font-size: clamp(22px, 3.4vw, 34px); font-weight: 900; color: var(--ink); margin: 10px 0 12px; letter-spacing: -0.02em; line-height: 1.12; }
.ar-means-body { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; max-width: 86ch; }
.ar-guarantee { font-size: clamp(17px, 2.2vw, 22px); font-weight: 800; line-height: 1.3; color: var(--ink); margin: 0; }
/* The figures a reader is scanning for: gains green, every other figure bold. */
.ar-gain { color: #007a45; }
.ar-means-body strong, .ar-conclusion-body strong { color: var(--ink); font-weight: 800; }

/* ── The numbered sections ──────────────────────────────────── */
.ar-sec { margin-top: 26px; scroll-margin-top: 90px; }

/* The number and the title are one line — "1 · Summary" — not two boxes
   side by side: a flex row put them on separate lines for anything
   reading the page, including the design comparison. */
.ar-sec-title { display: block; font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.ar-sec-num { color: var(--accent); }

/* ── 7 · The ROAS calculation ───────────────────────────────── */
.ar-calc-intro { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.ar-calc-intro p { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin: 6px 0 0; }
/* Sections 7 and 8 lead with their number as a label over a headline,
   not as a heading of their own. */
.ar-sec.is-lead .ar-sec-title {
  font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.ar-sec.is-lead .ar-sec-label { color: var(--accent); }

.ar-reset {
  border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent);
  border-radius: var(--r-sm); padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.ar-inputs { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 820px) { .ar-inputs { grid-template-columns: repeat(3, 1fr); } }
.ar-field { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; background: var(--bg); }
.ar-field-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.ar-field label { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.ar-flag { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--bg-mid); color: var(--ink-muted); border: 1px solid var(--border); }
.ar-flag.is-audit { background: var(--ar-green-wash); border-color: var(--ar-green-edge); color: var(--accent); }
.ar-input-row { display: flex; align-items: center; gap: 8px; }
.ar-input-prefix, .ar-input-suffix { font-size: 20px; font-weight: 800; color: var(--ink-muted); }
.ar-field input[type="number"], .ar-field select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font-size: 19px; font-weight: 800; font-family: inherit; background: var(--surface); color: var(--ink);
}
.ar-field select { font-size: 14px; font-weight: 600; }
/* A box holding something the report did not use says so. The figure
   the calculation stood on is in the badge above it and in the chip
   under the headline either way; what this stops is a box reading
   -5000 beside a report computed on ten thousand, with nothing on
   screen admitting the two disagree. */
.ar-field input[type="number"]:invalid { border-color: var(--ar-bot); box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.14); }
.ar-field input[type="range"] { width: 100%; margin-top: 12px; accent-color: var(--accent); }
.ar-range-read { font-size: 20px; font-weight: 900; color: var(--ink); }

.ar-calc-cols { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 28px; }
@media (min-width: 900px) { .ar .ar-calc-cols { grid-template-columns: 1.1fr 1fr; gap: 34px; } }
.ar-block-head { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; }
.ar-steps { display: block; counter-reset: arstep; }
.ar-steps li {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: baseline;
  font-size: 16px; line-height: 1.55; color: var(--ink-soft);
  padding-block: 12px; border-top: 1px solid var(--border);
}
.ar-steps li:first-child { border-top: 0; padding-top: 0; }
.ar-steps li::before {
  counter-increment: arstep; content: counter(arstep);
  width: 24px; height: 24px; border-radius: 50%; background: none; color: var(--ink);
  border: 1px solid var(--border-strong); transform: translateY(-2px);
  font-size: 12px; font-weight: 800; display: inline-grid; place-items: center;
}
.ar-steps li:last-child::before { background: var(--accent); border-color: var(--accent); color: #ffffff; }
/* The gain keeps its colour inside the steps too: `.ar-steps strong` is one
   weight heavier than `.ar-gain`, so without this the last step's two green
   figures rendered in ink — the mark was written and never seen. */
.ar-steps strong { color: var(--ink); font-weight: 800; }
.ar-steps strong.ar-gain { color: #007a45; }
.ar-split { margin-bottom: 22px; }
.ar-split-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 10px; }
.ar-split-label strong { color: var(--ink); font-weight: 800; }
.ar-split-track { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--bg-mid); }
.ar-split-bot { background: var(--ar-bot); }
.ar-split-human { background: var(--accent); }
.ar-split-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.ar-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.ar-dot.bot { background: var(--ar-bot); }
.ar-dot.human { background: var(--accent); }
.ar-revbars { display: grid; gap: 12px; }
.ar-revbar-label { font-size: 13px; color: var(--ink-soft); margin-bottom: 5px; display: flex; justify-content: space-between; gap: 10px; }
.ar-revbar-label strong { color: var(--ink); font-weight: 800; }
.ar-revbar-track { height: 22px; border-radius: 7px; background: var(--bg-mid); overflow: hidden; }
.ar-revbar-fill { height: 100%; background: var(--accent); border-radius: 7px; min-width: 2px; }
.ar-revbar-fill.is-today { background: var(--ink-muted); }

.ar-tables { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
@media (min-width: 1140px) { .ar .ar-tables { grid-template-columns: 1fr 1fr; } }
.ar-tablecard { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; background: var(--bg); }
.ar-tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0;
  scrollbar-width: thin; scrollbar-color: var(--ink-muted) var(--bg-mid); padding-bottom: 4px;
}
.ar-tablewrap::-webkit-scrollbar { height: 8px; }
.ar-tablewrap::-webkit-scrollbar-track { background: var(--bg-mid); border-radius: 999px; }
.ar-tablewrap::-webkit-scrollbar-thumb { background: var(--ink-muted); border-radius: 999px; }
.ar-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 420px; }
.ar-table th { text-align: right; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding: 8px 10px; border-bottom: 2px solid var(--border-strong); }
.ar-table th:first-child, .ar-table td:first-child { text-align: left; }
.ar-table td { padding: 12px 10px; border-bottom: 1px solid var(--border); color: var(--ink); text-align: right; }
.ar-table tr:last-child td { border-bottom: none; }
.ar-table td:first-child { color: var(--ink-soft); font-weight: 600; }
.ar-table .ar-chg { font-weight: 800; color: var(--accent); }
/* Every change in these tables is good for the reader — less to bots, more to
   people — so every change is green. Red marks the money going to bots today. */
.ar-table td.ar-is-bot { color: var(--ar-bot); }
.ar-table .ar-chg.is-flat { color: var(--ink-muted); }

.ar-conclusion { margin-top: 26px; border-radius: var(--r-lg); padding: 26px; background: var(--ar-green-wash); border: 1px solid var(--ar-green-edge); }
.ar-conclusion-head { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.ar-conclusion-lead { font-size: clamp(22px, 3.4vw, 34px); font-weight: 900; color: var(--ink); margin: 10px 0 12px; letter-spacing: -0.02em; line-height: 1.12; }
.ar-means-lead, .ar-conclusion-lead { text-wrap: balance; }
.ar-conclusion-body { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; max-width: 80ch; }
.ar-conclusion-kicker { font-size: clamp(18px, 2.4vw, 24px); font-weight: 800; line-height: 1.3; color: var(--ink); margin: 0; max-width: 44ch; }
.ar-fine { font-size: 12px; color: var(--ink-muted); margin: 18px 0 0; }

.ar-input-row-gap { margin-top: 10px; }
.ar-split-full { width: 100%; }