/* The report (report.js). The sheet is laid out at A4 print size: the base rules are the printed pages (A4, 10 mm
   margins, one column, room to breathe), wide screens show the same page enlarged with zoom, phones get a fluid layout.
   Tokens come from app.css. Responsive rules say "screen" so they never apply to the printed page.
   Dark theme: only the surroundings go dark; the sheet is paper and keeps the light colours (what the PDF shows). */
:root { --r-toolbar: rgba(255, 255, 255, .92); }
@media screen {
  :root[data-theme="dark"] { --r-toolbar: rgba(18, 18, 18, .9); }
  /* The paper: every colour token of app.css at its light value (tests/test_report.py compares the sheet's computed
     colours in both themes, so a token added to app.css and used on the sheet shows up there). */
  :root[data-theme="dark"] .report-sheet {
    --bg: #f1f6f6; --surface: #ffffff; --surface-2: #f7fafa; --ink: #12181c; --ink-2: #48535a; --ink-3: #677278;
    --line: #e1e8e9; --line-2: #cfd8da; --blue: #2d6cf3; --blue-hover: #1f58d6; --blue-soft: #e8effe;
    --ok: #1b7a50; --ok-soft: #e4f3ec; --warn: #9a6200; --warn-soft: #fbf1dc; --bad: #b3261e; --bad-soft: #fbe9e7;
    --accent: #2d6cf3; --accent-hover: #1f58d6; --on-accent: #ffffff; --on-ink: #ffffff;
    --glass: rgba(255, 255, 255, .86); --backdrop: rgba(18, 24, 28, .35);
    --shadow: 0 1px 2px rgba(18, 24, 28, .06), 0 8px 24px rgba(18, 24, 28, .07);
    --shadow-lift: 0 2px 4px rgba(18, 24, 28, .06), 0 18px 40px rgba(18, 24, 28, .12);
    --blue-ink: #1d4fbf; --ok-line: #c6e5d6; --warn-line: #f0dcb2; --bad-line: #f2c6c1; --blue-line: #cddcfb;
    --ok-solid: #1b7a50; --blue-solid: #2d6cf3; --bad-solid: #b3261e; --warn-solid: #d89a16; --on-warn-solid: #12181c;
    --placeholder: #98a2a8; --img-bg: #dde5e7;
    --map-surface: #fbfcfc; --map-stroke: #ffffff; --map-shimmer: #f3f6f6; --map-hatch-bg: #f4f6f6;
    --map-hatch-ink: #aab4b8; --map-control: rgba(255, 255, 255, .94); --map-overlay: rgba(255, 255, 255, .97);
    --map-ring: transparent; --control-shadow: 0 1px 3px rgba(18, 24, 28, .1);
    --tip-bg: var(--ink); --tip-ink: #ffffff; --tip-muted: #c7d0d4; --tip-hint: #98a9b1;
    --swatch-ring: rgba(18, 24, 28, .14);
    --plan-translate: #2a78d6; --plan-store: #eb6834; --plan-skip: #b5bcb9; --plan-supported: #1baf7a;
    --plan-translate-bg: #f3f7fe; --plan-translate-line: #d9e6fb; --plan-store-bg: #fef7f2; --plan-store-line: #f7dfcf;
    --skew-pos: #2a78d6; --skew-neg: #ec9890;
    --src-qloo-bg: #eaf1fe; --src-qloo-ink: #1d4fbf; --src-qloo-line: #d3e1fc; --src-estimate-ink: #7d5200;
    --src-llm-bg: #f3edfd; --src-llm-ink: #5636a3; --src-llm-line: #e1d3f7; --src-ref-bg: #eef2f1;
    --llm-bg: #faf7ff; --llm-line: #8b6ad8;
    color-scheme: light;
  }
}

body[data-view="report"] .frame-top { background: transparent; border-color: transparent; }
.report { padding: 6px 0 8px; }
.report-toolbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  width: min(1000px, 100% - 32px); margin: 0 auto 22px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--r-toolbar); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.report-toolbar .help { margin: 0 auto 0 0; }

/* ---------------------------------------------------------------- the sheet (print size) */
.report-sheet {
  --fs: 12.5px; --fs-s: 12px; --fs-xs: 11px;
  width: 210mm; margin: 0 auto; padding: 10mm; background: #fff; color: var(--ink);  /* paper: white in both themes */
  border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-lift);
  font-size: var(--fs); line-height: 1.5; font-variant-numeric: tabular-nums;
}
:where(.report-sheet) p { margin: 0; }
.report-sheet .src { padding: 0 6px; font-size: var(--fs-xs); line-height: 1.6; }
.report-sheet .badge { gap: 4px; padding: 0 6px; font-size: var(--fs-xs); line-height: 1.6; white-space: nowrap; }
.report-sheet .badge::before { width: 5px; height: 5px; }
.report-sheet .group-tag { padding: 0 8px; font-size: var(--fs-s); line-height: 1.6; background: #fff; }
.report-sheet .group-tag::before { width: 7px; height: 7px; }
.report-sheet .swatch { width: 9px; height: 9px; border-radius: 2px; }
.report-sheet .swatch-hatch { background: repeating-linear-gradient(45deg, #f4f6f6 0 2px, #aab4b8 2px 3px); }

/* header */
.r-head { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.r-brand { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); color: var(--ink-3); }
.r-logo { width: 22px; height: 22px; object-fit: contain; }
.r-brand-name { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.r-brand-doc { margin-left: auto; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-xs); font-weight: 600; }
.r-head-main { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 10px 24px; align-items: end; margin-top: 4px; }
.r-title { margin: 0; font: 400 30px/1.1 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.r-headline { margin-top: 6px; font: 500 18px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--blue-hover); }
.r-meta { display: grid; gap: 3px; margin: 0; font-size: var(--fs-xs); }
.r-meta div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; }
.r-meta dt { color: var(--ink-3); }
.r-meta dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* inputs and totals */
.r-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.r-inputs > div { padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; }
.r-inputs dt { font-size: var(--fs-xs); color: var(--ink-3); }
.r-inputs dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.r-inputs .r-cell-note { font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0; color: var(--ink-3); line-height: 1.35; }
.r-inputs .is-changed { background: var(--blue-soft); }
.r-inputs .is-changed dd:not(.r-cell-note) { color: #1d4fbf; }
.r-alerts { display: grid; gap: 6px; margin-top: 12px; }
.r-alert { padding: 6px 10px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); font-size: var(--fs-s); }
.r-flag { margin-top: 6px; font-size: var(--fs-xs); color: var(--warn); }

/* sections */
.r-section { min-width: 0; margin-top: 16px; }
.r-section-head { margin-bottom: 8px; }
.r-section-head h2 { margin: 0; font: 500 19px/1.2 var(--font-display); letter-spacing: -0.015em; }
.r-help { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.r-help-inline { font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); }

/* the plan table */
.r-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); line-height: 1.4; }
.r-table th, .r-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.r-table thead th { padding-top: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.r-table .num { text-align: right; white-space: nowrap; }
.r-table tbody th.r-lang { font-weight: 600; white-space: nowrap; }
.r-rank { width: 22px; color: var(--ink-3); }
.r-share { font-weight: 600; }
.r-lift, .r-cost { white-space: nowrap; }
.r-lift strong, .r-cost strong { font-weight: 600; }
.r-cost { color: var(--ink-3); }
.r-cost strong { color: var(--ink); }
.r-cost.is-muted strong { color: var(--ink-3); font-weight: 500; }
.r-why { color: var(--ink-2); }
.r-phone-label { display: none; }
.r-group-row th { padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-weight: 400; }
.r-group-translate_game .r-group-row th { background: #f3f7fe; }
.r-group-store_page_only .r-group-row th { background: #fef7f2; }
.r-group-sum { margin: 0 8px 0 8px; font-weight: 600; }
.r-group-blurb { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-3); }
.r-empty { color: var(--ink-3); }
.r-key { margin-top: 8px; font-size: var(--fs-xs); color: var(--ink-3); }
.r-versus { margin-top: 6px; font-size: var(--fs-s); color: var(--ink-2); }

/* the map */
.r-map-view { font-size: var(--fs-xs); color: var(--ink-2); }
.r-figure { max-width: 100mm; margin: 8px 0 0; }
.r-map-svg { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfc; }
.r-map-svg .country, .r-map-svg .country:not(.is-unknown):hover { stroke: #fff; stroke-width: .5; cursor: default; transition: none; }
.r-map-missing { display: grid; place-items: center; min-height: 120px; padding: 12px; border: 1px dashed var(--line-2);
  border-radius: 6px; background: var(--surface-2); text-align: center; font-size: var(--fs-s); color: var(--ink-2); }
.r-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; font-size: var(--fs-xs); color: var(--ink-2); }
.r-legend li { display: inline-flex; align-items: center; gap: 6px; }

/* evidence */
.r-look-list { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; font-size: var(--fs-s); }
.r-look-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.r-look-name { font-weight: 600; }
.r-look-list .is-unused .r-look-name { font-weight: 500; color: var(--ink-2); }
.r-look-detail { font-size: var(--fs-xs); color: var(--ink-3); }
.r-summary { padding: 10px 14px; border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; background: #f3f7fe;
  font: 400 14px/1.5 var(--font-display); }
.r-audience { margin-top: 4px; font-size: var(--fs-s); }
.r-market { margin-top: 10px; font-size: var(--fs-s); }
.r-loves { overflow-wrap: anywhere; }
.r-loves-label { margin-right: 4px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }

/* footer */
.r-foot { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-3); }
.r-foot strong { color: var(--ink-2); font-weight: 600; }

/* ---------------------------------------------------------------- screens (never the measured or printed page) */
@media screen and (min-width: 1180px) {
  .report-sheet { zoom: 1.2; }
}
@media screen and (max-width: 860px) {
  .report-toolbar { position: static; width: calc(100% - 16px); }
  .report-toolbar .help { flex-basis: 100%; order: 3; }
  .report-sheet { --fs: 14px; --fs-s: 13px; --fs-xs: 12px; width: calc(100% - 16px); padding: 20px 16px;
    border-radius: 16px; }
  .report-sheet .r-head-main { grid-template-columns: minmax(0, 1fr); }
  .report-sheet .r-title { font-size: 34px; }
  .report-sheet .r-headline { font-size: 20px; }
  .report-sheet .r-meta div { grid-template-columns: 92px minmax(0, 1fr); }
  .report-sheet .r-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-sheet .r-inputs dd:not(.r-cell-note) { font-size: 18px; }
  .report-sheet .r-section { margin-top: 18px; }
  .report-sheet .r-section-head h2 { font-size: 20px; }
  .report-sheet .r-summary { font-size: 16px; }
  .report-sheet :is(.r-table, .r-table tbody, .r-table th, .r-table td) { display: block; padding: 0; border: 0; }
  .report-sheet .r-table thead { display: none; }
  .report-sheet .r-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 8px;
    padding: 8px 0; border-bottom: 1px solid var(--line); }
  .report-sheet .r-table tr.r-group-row { display: block; margin-top: 10px; padding: 0; border: 0; }
  .report-sheet .r-table .r-group-row th { padding: 8px; border-radius: 8px; }
  .report-sheet .r-group-blurb { display: block; margin-top: 2px; }
  .report-sheet .r-table .r-lift { grid-column: 1 / 3; }
  .report-sheet .r-phone-label { display: inline; color: var(--ink-3); }
  .report-sheet .r-table .r-why { grid-column: 1 / -1; white-space: normal; }
}

/* ---------------------------------------------------------------- print: only the report, one A4 page */
@page { size: A4 portrait; margin: 10mm; }
@media print {
  body[data-view="report"] { background: #fff; overflow: visible; }
  body[data-view="report"] > :not(main), body[data-view="report"] main > :not(#view-report),
  body[data-view="report"] .report-toolbar { display: none !important; }
  body[data-view="report"] .report { padding: 0; }
  .report-sheet { width: 190mm; margin: 0 auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .report-sheet, .report-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .r-table tr, .r-market, .r-figure, .r-summary, .r-look-list li, .r-foot { break-inside: avoid; }
  .r-section-head { break-after: avoid; }
}