@charset "UTF-8";
/* Country Delight Marketing Intelligence v2
   Sidebar SaaS layout, light + dark themes via CSS variables. */

:root {
  --crimson: #c8102e;
  --crimson-dark: #9c0c24;
  --gold: #e8b04b;
  --green: #2f8f57;
  --amber: #d99120;
  --red: #d4413a;
  /* Claymorphism: chunky rounding so surfaces read as soft, moulded clay. */
  --radius: 26px;
  --radius-sm: 15px;
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Light theme (default) - warm oat base so the cream clay cards float above it.
   The signature is the clay shadow: a soft outer drop plus an inset white top
   highlight and an inset warm bottom shadow, which together inflate each
   surface. --clay-accent is the glossy crimson "candy" treatment for buttons. */
[data-theme="light"] {
  --bg: #ece0cf;
  --bg-2: #f4ecdf;
  --sidebar-bg: #f4ecdf;
  --card: #fbf5ec;
  --ink: #241a12;
  --muted: #6b5d50;
  --line: #e2d6c4;
  --line-card: #efe5d5;
  --chip: #efe4d3;
  --grid-line: #e6dccb;
  --hover: #f5eee2;
  --shadow: 0 8px 18px -8px rgba(146,102,64,.35);
  --clay: 0 18px 34px -12px rgba(146,102,64,.40),
          inset 0 -6px 12px rgba(146,102,64,.13),
          inset 0 9px 18px rgba(255,255,255,.85);
  --clay-sm: 0 9px 16px -7px rgba(146,102,64,.34),
             inset 0 -3px 6px rgba(146,102,64,.12),
             inset 0 4px 9px rgba(255,255,255,.80);
  --clay-pressed: inset 0 4px 8px rgba(146,102,64,.30),
                  inset 0 -3px 7px rgba(255,255,255,.65);
  --clay-accent: 0 12px 22px -8px rgba(200,16,46,.50),
                 inset 0 -5px 10px rgba(140,12,36,.55),
                 inset 0 5px 11px rgba(255,255,255,.38);
}

/* Dark theme - warm espresso clay. Highlights come from a faint white top
   inset; depth from black outer and bottom insets. */
[data-theme="dark"] {
  --bg: #1a1410;
  --bg-2: #241b13;
  --sidebar-bg: #241b13;
  --card: #2c2118;
  --ink: #f6efe6;
  --muted: #bcafa0;
  --line: #3d3126;
  --line-card: #382c21;
  --chip: #382c21;
  --grid-line: #2c231b;
  --hover: #34281b;
  --shadow: 0 10px 22px -10px rgba(0,0,0,.55);
  --clay: 0 20px 36px -14px rgba(0,0,0,.62),
          inset 0 -6px 12px rgba(0,0,0,.42),
          inset 0 9px 18px rgba(255,255,255,.055);
  --clay-sm: 0 10px 18px -8px rgba(0,0,0,.55),
             inset 0 -3px 6px rgba(0,0,0,.38),
             inset 0 4px 9px rgba(255,255,255,.05);
  --clay-pressed: inset 0 4px 8px rgba(0,0,0,.55),
                  inset 0 -3px 7px rgba(255,255,255,.04);
  --clay-accent: 0 12px 22px -8px rgba(200,16,46,.55),
                 inset 0 -5px 10px rgba(110,8,26,.6),
                 inset 0 5px 11px rgba(255,255,255,.20);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  /* Nunito 400 reads a touch light; 500 base + 15px makes all body copy more
     legible. Weight cascades, so any text that does not set its own weight
     gets the lift; headings keep their explicit 700-800. */
  font-size: 15px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

/* Theme variables live on .app (data-theme), so background and text colour
   must be set here, not on body, where the variables do not resolve. */
.app { display: flex; min-height: 100vh; background: var(--bg); color: var(--ink); }
#app-content { display: flex; min-height: 100vh; width: 100%; }

/* ---------- login ---------- */
.login-screen {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center;
  justify-content: center; background: var(--bg); padding: 20px;
}
/* Author display:flex above beats the UA [hidden] rule at equal specificity
   unless restated here - without this, el.hidden = true does nothing visible. */
.login-screen[hidden] { display: none; }
#app-content[hidden] { display: none; }
.login-card {
  width: 100%; max-width: 340px; background: var(--card); border-radius: 22px;
  padding: 32px 28px; box-shadow: var(--clay); text-align: center;
}
.login-logo { display: inline-block; margin-bottom: 14px; }
.login-title { font-weight: 800; font-size: 20px; }
.login-sub { font-size: 12.5px; color: var(--muted); margin: 4px 0 22px; }
.login-field {
  display: block; text-align: left; font-size: 12px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 14px;
}
.login-field input {
  display: block; width: 100%; margin-top: 6px; padding: 11px 13px; font: inherit;
  font-size: 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--hover); color: var(--ink); box-sizing: border-box;
}
.login-field input:focus { outline: 2px solid var(--crimson); outline-offset: 1px; }
.login-error {
  font-size: 12.5px; color: var(--red); background: rgba(212,65,58,.12);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; text-align: left;
}
.login-btn {
  width: 100%; padding: 12px; border: 0; border-radius: 14px; background: var(--crimson);
  color: #fff; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
  box-shadow: var(--clay-accent); transition: opacity .15s;
}
.login-btn:disabled { opacity: .6; cursor: default; }
@media print { .login-screen { display: none !important; } }

/* ---------- sidebar ---------- */
.sidebar {
  width: 236px; flex: none; background: var(--sidebar-bg);
  border-right: 0; padding: 20px 14px;
  display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0; height: 100vh;
}
.brandmark { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; }
.logo-dot {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 30%, #fff 0 28%, #ffd7a1 29% 52%, var(--gold) 53%);
  box-shadow: 0 0 0 3px var(--crimson),
    0 8px 14px -4px rgba(200,16,46,.45),
    inset 0 -3px 6px rgba(140,90,20,.4),
    inset 0 4px 7px rgba(255,255,255,.6);
}
.brand-name { font-weight: 800; font-size: 16px; line-height: 1; }
.brand-sub { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }

.nav { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; text-align: left; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--muted);
  padding: 11px 14px; border-radius: 14px; width: 100%;
  transition: background .15s, color .15s;
}
.nav-item .ni { width: 18px; text-align: center; opacity: .8; }
.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav-item.active { background: var(--crimson); color: #fff; box-shadow: var(--clay-accent); }
.nav-item.active .ni { opacity: 1; }
.nav-sep { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); padding: 14px 12px 6px; opacity: .7; }
.side-foot { margin-top: auto; font-size: 11px; color: var(--muted); line-height: 1.6; padding: 12px 10px 0; border-top: 1px solid var(--line); }

/* ---------- VUCA ---------- */
.vuca-card { position: relative; }
.vuca-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px 0 0 4px; }
.vuca-card.high::before { background: var(--red); }
.vuca-card.moderate::before { background: var(--amber); }
.vuca-card.low::before { background: var(--green); }
.vuca-head { display: flex; align-items: baseline; justify-content: space-between; }
.vuca-name { font-weight: 800; font-size: 15px; }
.vuca-score { font-size: 30px; font-weight: 800; line-height: 1; }
.vuca-level { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 9px; border-radius: 20px; }
.vuca-level.high { background: rgba(212,65,58,.15); color: var(--red); }
.vuca-level.moderate { background: rgba(217,145,32,.15); color: var(--amber); }
.vuca-level.low { background: rgba(47,143,87,.15); color: var(--green); }
.vuca-assess { font-size: 13.5px; line-height: 1.5; margin: 8px 0 10px; }
.vuca-signals { margin: 0; padding: 0; list-style: none; }
.vuca-signals li { position: relative; padding: 4px 0 4px 16px; font-size: 12px; color: var(--muted); }
.vuca-signals li::before { content: "•"; position: absolute; left: 2px; color: var(--crimson); }
.index-ring { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.index-num { font-size: 44px; font-weight: 800; line-height: 1; }
.index-label { font-size: 12px; color: var(--muted); }
.index-note { font-size: 13.5px; line-height: 1.6; }
.caveat { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }

/* ---------- KPI tiles (one per tab, "so what" up top) ---------- */
.kpi-tile { border-radius: 18px; padding: 14px 18px; margin-bottom: 16px; background: var(--card); box-shadow: var(--clay-sm); border-left: 5px solid var(--line); }
.kpi-tile.good { border-left-color: var(--green); }
.kpi-tile.warn { border-left-color: var(--amber); }
.kpi-tile.bad { border-left-color: var(--red); }
.kpi-tile-head { font-weight: 800; font-size: 14.5px; line-height: 1.4; }
.kpi-tile-list { margin: 8px 0 0; padding: 0; list-style: none; }
.kpi-tile-list li { position: relative; padding: 3px 0 3px 15px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.kpi-tile-list li::before { content: "•"; position: absolute; left: 2px; color: var(--crimson); }

/* ---------- Reputation hindsight ---------- */
.hindsight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hindsight-col h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.hindsight-col.good h4 { color: var(--green); }
.hindsight-col.bad h4 { color: var(--red); }
.hindsight-col.rec h4 { color: var(--crimson-dark); }
[data-theme="dark"] .hindsight-col.rec h4 { color: #f0a5b0; }
.hindsight-col ul { margin: 0; padding: 0; list-style: none; }
.hindsight-col li { position: relative; padding: 3px 0 3px 14px; font-size: 12.5px; line-height: 1.5; }
.hindsight-col li::before { content: "•"; position: absolute; left: 0; }
@media (max-width: 720px) { .hindsight-grid { grid-template-columns: 1fr; } }

/* ---------- PESTLE / top problems ---------- */
.problems-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.problem-card { display: flex; gap: 12px; border-radius: 16px; padding: 14px; background: var(--hover); border-left: 4px solid var(--crimson); }
.problem-rank { font-size: 22px; font-weight: 800; color: var(--crimson); flex: none; }
.problem-issue { font-weight: 800; font-size: 14px; }
.problem-why { font-size: 12.5px; color: var(--muted); margin: 4px 0 6px; line-height: 1.45; }
.problem-action { font-size: 12.5px; line-height: 1.45; }
@media (max-width: 720px) { .problems-grid { grid-template-columns: 1fr; } }
.pestle-card { position: relative; }
.pestle-head { margin-bottom: 6px; }
.pestle-tag { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 9px; border-radius: 20px; background: rgba(200,16,46,.12); color: var(--crimson-dark); }
[data-theme="dark"] .pestle-tag { color: #f0a5b0; background: rgba(232,85,109,.18); }
.pestle-factor { font-weight: 800; font-size: 14.5px; margin-bottom: 6px; }
.pestle-detail { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.pestle-outlook { font-size: 12.5px; line-height: 1.5; padding-top: 8px; border-top: 1px dashed var(--line); }

/* ---------- Experimentation plan ---------- */
.plan-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.plan-table th, .plan-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.plan-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; background: var(--hover); }
.plan-table td:first-child { font-weight: 700; white-space: nowrap; }

.stimulus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stimulus-card { border-radius: 16px; padding: 18px; background: var(--hover); border: 1px dashed var(--line); }
.stimulus-card.treatment { border: 1px solid var(--crimson); background: rgba(200,16,46,.06); }
.stim-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.stim-brand { font-weight: 800; font-size: 12.5px; letter-spacing: .5px; margin: 10px 0 6px; }
.stim-head { font-weight: 800; font-size: 16px; margin-bottom: 6px; line-height: 1.35; }
.stim-body { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.stim-cta { display: inline-block; font-size: 12px; font-weight: 700; padding: 7px 16px; border-radius: 20px; background: var(--crimson); color: #fff; }
@media (max-width: 720px) { .stimulus-grid { grid-template-columns: 1fr; } }

.exp-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.exp-chain .chain-step { padding: 9px 14px; border-radius: 20px; background: var(--hover); }
.exp-chain .chain-arrow { color: var(--crimson); font-weight: 800; }

.decision-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.decision-card { border-radius: 16px; padding: 14px 16px; border-left: 4px solid var(--line); background: var(--hover); }
.decision-card.go { border-left-color: var(--green); }
.decision-card.iterate { border-left-color: var(--amber); }
.decision-card.segment { border-left-color: #5b7fc4; }
.decision-card.nogo { border-left-color: var(--red); }
.dec-tag { font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }
.decision-card.go .dec-tag { color: var(--green); }
.decision-card.iterate .dec-tag { color: var(--amber); }
.decision-card.segment .dec-tag { color: #5b7fc4; }
.decision-card.nogo .dec-tag { color: var(--red); }
.dec-body { font-size: 13px; line-height: 1.5; margin-top: 4px; }
@media (max-width: 720px) { .decision-grid { grid-template-columns: 1fr; } }

.screens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.screen-card { border-radius: 16px; padding: 16px; background: var(--hover); }
.screen-card h4 { margin: 0 0 10px; font-size: 12.5px; color: var(--crimson-dark); text-transform: uppercase; letter-spacing: .4px; }
[data-theme="dark"] .screen-card h4 { color: #f0a5b0; }
.screen-card ul { margin: 0 0 10px; padding: 0 0 0 16px; font-size: 12.5px; line-height: 1.6; }
.screen-card .screen-key { font-size: 12px; font-weight: 700; padding-top: 8px; border-top: 1px dashed var(--line); }
@media (max-width: 900px) { .screens-grid { grid-template-columns: 1fr; } }

.prompt-block { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.65; background: var(--hover); border-radius: 14px; padding: 14px 16px; white-space: pre-wrap; }

.plan-list { margin: 0; padding: 0; list-style: none; }
.plan-list li { position: relative; padding: 5px 0 5px 18px; font-size: 13px; line-height: 1.5; }
.plan-list li::before { content: "•"; position: absolute; left: 2px; color: var(--crimson); }
.plan-hyp b { color: var(--crimson-dark); }
[data-theme="dark"] .plan-hyp b { color: #f0a5b0; }
.plan-hyp p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; }

/* ---------- Scenario matrix ---------- */
.focal-issue { font-size: 13.5px; line-height: 1.5; padding: 10px 14px; margin-bottom: 10px; border-radius: 14px; background: var(--hover); }
.focal-issue b { color: var(--crimson-dark); }
[data-theme="dark"] .focal-issue b { color: #f0a5b0; }
#scen-axes { font-size: 13px; line-height: 1.7; }
#scen-axes .ax { display: inline-block; margin-right: 18px; }
#scen-axes b { color: var(--crimson-dark); }
[data-theme="dark"] #scen-axes b { color: #f0a5b0; }
.matrix-wrap { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: stretch; }
.y-axis { display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; }
.axis-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; writing-mode: vertical-rl; transform: rotate(180deg); }
.axis-pole { font-size: 10px; color: var(--muted); }
.matrix-main { display: flex; flex-direction: column; gap: 10px; }
.matrix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.x-axis { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
.x-axis .axis-label { writing-mode: horizontal-tb; transform: none; }
.scen { border: 0; border-radius: 20px; padding: 17px; background: var(--card); box-shadow: var(--clay-sm); position: relative; }
.scen h4 { margin: 0 0 4px; font-size: 15px; color: var(--crimson-dark); }
[data-theme="dark"] .scen h4 { color: #f0a5b0; }
.scen .quad-tag { position: absolute; top: 12px; right: 14px; font-size: 10px; color: var(--muted); }
.scen .narr { font-size: 13.5px; line-height: 1.5; margin: 6px 0; }
.scen .row { font-size: 12px; margin-top: 6px; }
.scen .row b { color: var(--ink); }
.scen .imp b { color: var(--amber); }
.scen .strat b { color: var(--green); }
.scen .row ul { margin: 4px 0 0; padding: 0; list-style: none; }
.scen .row li { position: relative; padding: 2px 0 2px 14px; line-height: 1.45; }
.scen .row li::before { content: "•"; position: absolute; left: 2px; }
.scen .imp li::before { color: var(--amber); }
.scen .strat li::before { color: var(--green); }
.warning-signals { margin: 10px 0 0; padding: 0; list-style: none; }
.warning-signals li { position: relative; padding: 6px 0 6px 18px; font-size: 13px; line-height: 1.5; border-bottom: 1px dashed var(--line); }
.warning-signals li:last-child { border-bottom: 0; }
.warning-signals li::before { content: "⚑"; position: absolute; left: 0; color: var(--crimson); font-size: 12px; }

.scrim { display: none; }

/* ---------- main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; background: var(--bg-2);
  border-bottom: 0;
}
.hamburger { display: none; background: none; border: 0; font-size: 22px; color: var(--ink); cursor: pointer; }
.page-title { font-size: 18px; font-weight: 800; }
.topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.filter-drop { position: relative; }
.drop-btn, .pdf-btn, .icon-btn {
  border: 0; background: var(--card); color: var(--ink); box-shadow: var(--clay-sm);
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 13px; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.drop-btn:hover, .icon-btn:hover { transform: translateY(-1px); }
.drop-btn:active, .pdf-btn:active, .icon-btn:active { transform: translateY(1px); box-shadow: var(--clay-pressed); }
.pdf-btn { background: var(--crimson); color: #fff; box-shadow: var(--clay-accent); }
.pdf-btn:hover { transform: translateY(-1px); }
.icon-btn { width: 38px; height: 36px; padding: 0; font-size: 15px; }
.csv-btn { margin-left: auto; border: 0; background: var(--card); color: var(--ink); box-shadow: var(--clay-sm); font: inherit; font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 11px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.csv-btn:hover { transform: translateY(-1px); }
.csv-btn:active { transform: translateY(1px); box-shadow: var(--clay-pressed); }
@media print { .csv-btn { display: none; } }
.drop-menu {
  display: none; position: absolute; right: 0; top: 44px; z-index: 30;
  background: var(--card); border: 0; border-radius: 18px;
  box-shadow: var(--clay); padding: 10px; min-width: 180px;
}
.drop-menu.open { display: block; }
.drop-menu label { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.drop-menu label:hover { background: var(--hover); }
.updated { font-size: 12px; color: var(--muted); }

/* ---------- content + cards ---------- */
.content { padding: 22px; }
.view { display: none; }
.view.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: span 4; }

.card {
  background: var(--card); border: 0;
  border-radius: var(--radius); box-shadow: var(--clay); padding: 20px; min-width: 0;
  margin-bottom: 16px;
}
.grid .card { margin-bottom: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-head h3 { font-size: 15.5px; margin: 0; font-weight: 800; }
.stamp { font-size: 11px; color: var(--muted); white-space: nowrap; }
.stamp.stale { color: var(--amber); font-weight: 600; }

/* Freshness warning shown on Overview when a source is stale or old. */
.data-banner {
  display: flex; align-items: center; gap: 8px;
  background: rgba(217,145,32,.14); border: 0;
  color: var(--amber); border-radius: 16px; box-shadow: var(--clay-sm);
  padding: 11px 16px; margin-bottom: 14px; font-size: 12.5px; font-weight: 700;
}
.data-banner[hidden] { display: none; }
.data-banner .banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.pill { font-size: 10.5px; padding: 2px 9px; border-radius: 20px; background: var(--chip); color: var(--muted); }
.pill.live { background: rgba(47,143,87,.15); color: var(--green); font-weight: 600; }

.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 340px; }
.card-note { font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-card); }
.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.method-grid b { font-size: 12px; color: var(--crimson-dark); }
[data-theme="dark"] .method-grid b { color: #f0a5b0; }
.method-grid p { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 5px 0 0; }
@media (max-width: 1000px) { .method-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .method-grid { grid-template-columns: 1fr; } }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 0; border-radius: var(--radius); box-shadow: var(--clay); padding: 18px 20px; position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 5px; border-radius: 5px; background: var(--crimson); }
.kpi-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.kpi-value { font-size: 30px; font-weight: 800; margin: 6px 0 2px; line-height: 1; }
.kpi-foot { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.trend { font-weight: 700; font-size: 12px; }
.trend.up { color: var(--green); }
.trend.down { color: var(--red); }
.trend.flat { color: var(--muted); }

/* ---------- AI + alerts ---------- */
.ai-card { box-shadow: var(--clay), 0 0 0 2px rgba(200,16,46,.18) inset; }
.ai-list { margin: 0; padding: 0; list-style: none; }
.ai-list li { position: relative; padding: 6px 0 6px 20px; font-size: 14.5px; line-height: 1.55; }
.ai-list li::before { content: "›"; position: absolute; left: 4px; color: var(--crimson); font-weight: 800; }
.ai-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 12px 0 4px; }
.alert-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-card); font-size: 13.5px; }
.alert-item:last-child { border-bottom: 0; }
.alert-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; }
.alert-item.warn .alert-dot { background: var(--red); }
.alert-item.good .alert-dot { background: var(--green); }
.alert-item.info .alert-dot { background: var(--amber); }
.alert-title { font-weight: 700; }
.alert-detail { color: var(--muted); font-size: 13px; }

/* ---------- rating cards ---------- */
.rating-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rc { border: 0; border-radius: 18px; padding: 15px; background: var(--card); box-shadow: var(--clay-sm); }
.rc.self { box-shadow: var(--clay-sm), 0 0 0 2px var(--crimson) inset; }
.rc-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.rc-badge { font-size: 10px; background: var(--crimson); color: #fff; padding: 1px 6px; border-radius: 20px; }
.rc-stars { color: var(--gold); font-size: 15px; letter-spacing: 1px; margin-top: 6px; }
.rc-rating { font-size: 26px; font-weight: 800; margin-top: 2px; }
.rc-count { font-size: 11.5px; color: var(--muted); }
.rc-dist { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.rc-dist-row { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--muted); }
.rc-dist-bar { flex: 1; height: 6px; background: var(--chip); border-radius: 4px; overflow: hidden; }
.rc-dist-bar i { display: block; height: 100%; background: var(--gold); }
.rc-dist-pct { width: 30px; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.rc-apple { font-size: 11.5px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }

/* ---------- voice of customer ---------- */
.voc { display: block; }
.voc-search-row { margin-bottom: 12px; }
.voc-search { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink); padding: 11px 15px; border: 0; border-radius: 16px; background: var(--card); box-shadow: var(--clay-pressed); outline: none; }
.voc-search::placeholder { color: var(--muted); }
.voc-search:focus { box-shadow: var(--clay-pressed), 0 0 0 2px var(--crimson); }
/* One search-highlight style everywhere (reviews, news, food safety). Without
   this, non-review marks fell back to the browser's yellow, which clashes with
   the theme. On-theme tint, keeps the normal text colour so it stays readable. */
mark { background: rgba(200, 16, 46, .20); color: inherit; border-radius: 3px; padding: 0 2px; }
[data-theme="dark"] mark { background: rgba(240, 165, 176, .28); }

/* Dark-mode readability: the semantic red/green are fine as fills (dots, bars,
   borders) but too dark as small TEXT on the dark card (~3.4:1, below WCAG AA).
   Lift just the text usages, the same way crimson text is lifted to #f0a5b0. */
[data-theme="dark"] .voc-col.bad h4,
[data-theme="dark"] .vuca-level.high,
[data-theme="dark"] .trend.down { color: #f08a84; }
[data-theme="dark"] .voc-col.good h4,
[data-theme="dark"] .vuca-level.low,
[data-theme="dark"] .pill.live,
[data-theme="dark"] .outlet-tag,
[data-theme="dark"] .scen .strat b,
[data-theme="dark"] .trend.up,
[data-theme="dark"] .rq-v.rise { color: #5cc98a; }
.fssai-lede { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; max-width: 78ch; }
.fssai-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fssai-count { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.fssai-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; background: var(--crimson); color: #fff; padding: 1px 8px; border-radius: 20px; margin-right: 8px; vertical-align: middle; }
.brand-self { color: var(--crimson); font-weight: 800; }
/* Raw crimson is too dark to read on the dark card; lift it like other crimson
   text does (matches #scen-axes b, .scen h4, .method-grid b). */
[data-theme="dark"] .brand-self { color: #f0a5b0; }
.brand-rival { font-weight: 700; }
.voc-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.voc-filter { font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 20px; cursor: pointer; border: 0; background: var(--card); color: var(--muted); box-shadow: var(--clay-sm); transition: transform .12s; user-select: none; }
.voc-filter:hover { transform: translateY(-1px); }
.voc-filter.active { background: var(--crimson); color: #fff; box-shadow: var(--clay-accent); }
.voc-filter:focus-visible, .news-tab:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.voc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.voc-summary { margin-bottom: 16px; padding: 16px 18px; border-radius: 18px; background: var(--card); box-shadow: var(--clay-sm); }
.voc-split { display: flex; height: 12px; border-radius: 8px; overflow: hidden; box-shadow: var(--clay-pressed); }
.voc-split span { display: block; height: 100%; }
.voc-split .vs-good { background: var(--green); }
.voc-split .vs-bad { background: var(--red); }
.voc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.voc-stat { text-align: center; }
.vs-num { font-size: 26px; font-weight: 800; line-height: 1; }
.voc-stat.good .vs-num { color: var(--green); }
.voc-stat.bad .vs-num { color: var(--red); }
.voc-stat.text .vs-num { font-size: 18px; margin-top: 5px; }
.vs-lab { font-size: 11px; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .4px; }
@media (max-width: 560px) { .voc-stats { grid-template-columns: 1fr 1fr; } }
/* Sentiment by aspect: one diverging bar per topic. */
.asp-headline { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.asp-rows { display: flex; flex-direction: column; gap: 13px; }
.asp-row { display: grid; grid-template-columns: 150px 1fr 52px; align-items: center; gap: 14px; }
.asp-label { font-size: 13px; font-weight: 700; display: flex; flex-direction: column; line-height: 1.3; }
.asp-count { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.asp-bar { display: flex; height: 14px; border-radius: 8px; overflow: hidden; box-shadow: var(--clay-pressed); }
.asp-bar span { display: block; height: 100%; }
.asp-neg { background: var(--red); }
.asp-neu { background: var(--amber); }
.asp-pos { background: var(--green); }
.asp-net { font-size: 15px; font-weight: 800; text-align: right; }
.asp-net.good { color: var(--green); }
.asp-net.bad { color: var(--red); }
.asp-net.flat { color: var(--muted); }
.asp-legend { display: flex; gap: 18px; margin-top: 16px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.asp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.asp-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
@media (max-width: 560px) { .asp-row { grid-template-columns: 104px 1fr 44px; gap: 10px; } }
/* Ratings across Indian review platforms */
.platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plat-tile { padding: 16px; border-radius: 14px; background: var(--card-2, rgba(0,0,0,.02)); box-shadow: var(--clay-pressed); }
.plat-tile.out { opacity: .7; }
.plat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.plat-name { font-size: 14px; font-weight: 800; }
.plat-kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.plat-kind.employer { color: var(--brand, #2f6db0); background: rgba(47,109,176,.14); }
.plat-kind.consumer { color: var(--amber); background: rgba(217,145,32,.14); }
.plat-rating { font-size: 30px; font-weight: 900; line-height: 1; }
.plat-rating.good { color: var(--green); }
.plat-rating.warn { color: var(--amber); }
.plat-rating.bad { color: var(--red); }
.plat-rating.flat { color: var(--muted); }
.plat-scale { font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.plat-count { font-size: 12px; color: var(--muted); margin-top: 5px; }
.plat-recent { list-style: none; margin: 12px 0 0; padding: 0; }
.plat-recent li { font-size: 12px; color: var(--muted); padding: 4px 0 4px 14px; position: relative; line-height: 1.4; }
.plat-recent li::before { content: "!"; position: absolute; left: 2px; color: var(--red); font-weight: 800; }
.plat-unavail { font-size: 12.5px; color: var(--muted); padding: 8px 0; }
.plat-link { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--brand, #2f6db0); text-decoration: none; }
.plat-link:hover { text-decoration: underline; }
@media (max-width: 700px) { .platforms { grid-template-columns: 1fr; } }
/* Growth: app shipping cadence rows */
.cadence { display: flex; flex-direction: column; gap: 8px; }
.cad-row { display: grid; grid-template-columns: 1fr 90px 110px 120px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--card-2, rgba(0,0,0,.02)); }
.cad-row.self { box-shadow: inset 0 0 0 1.5px var(--green); }
.cad-brand { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cad-you { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--green); background: rgba(47,143,87,.14); padding: 2px 7px; border-radius: 20px; }
.cad-ver, .cad-date { font-size: 12px; color: var(--muted); }
.cad-badge { font-size: 12px; font-weight: 700; text-align: right; }
.cad-badge.good { color: var(--green); }
.cad-badge.warn { color: var(--amber); }
.cad-badge.bad { color: var(--red); }
.cad-badge.flat { color: var(--muted); }
@media (max-width: 620px) { .cad-row { grid-template-columns: 1fr auto; } .cad-ver, .cad-date { display: none; } }
/* Growth: momentum headline lists */
.momentum { display: flex; flex-direction: column; gap: 2px; }
.mom-item { display: block; padding: 11px 4px; border-bottom: 1px solid var(--line-card); text-decoration: none; color: inherit; }
.mom-item:last-child { border-bottom: 0; }
.mom-item:hover .mom-title { text-decoration: underline; }
.mom-kind { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 20px; margin-right: 8px; }
.mom-kind.funding { color: var(--green); background: rgba(47,143,87,.14); }
.mom-kind.expansion { color: var(--brand, #2f6db0); background: rgba(47,109,176,.14); }
.mom-kind.product { color: var(--amber); background: rgba(217,145,32,.14); }
.mom-title { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.mom-meta { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.voc-col h4 { margin: 0 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }
/* Keep the panel compact even with several months of reviews: scroll inside. */
#voc-list-bad, #voc-list-good { max-height: 460px; overflow-y: auto; padding-right: 6px; }
.voc-col.bad h4 { color: var(--red); }
.voc-col.good h4 { color: var(--green); }
.rev { border-left: 3px solid var(--line); padding: 6px 0 6px 10px; margin-bottom: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink); opacity: 1; }
.rev.bad { border-color: var(--red); }
.rev.good { border-color: var(--green); }
.rev .theme { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; background: var(--chip); color: var(--muted); padding: 1px 7px; border-radius: 20px; margin-bottom: 3px; }

/* ---------- keyword cloud ---------- */
.keywords { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 6px 2px; }
.kw { color: var(--crimson-dark); font-weight: 600; line-height: 1; }
[data-theme="dark"] .kw { color: #f0a5b0; }
.kw-praise { color: #2f7d4f; }
[data-theme="dark"] .kw-praise { color: #5cc98a; }

/* ---------- compare table ---------- */
.table-wrap { overflow-x: auto; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.cmp th, .cmp td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--line-card); }
.cmp td { white-space: nowrap; }
.cmp th:first-child, .cmp td:first-child { padding-left: 4px; }
.cmp th:last-child, .cmp td:last-child { padding-right: 4px; }
.cmp th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; vertical-align: bottom; }
.cmp tr.self td { background: var(--hover); font-weight: 600; }
.cmp .barcell { display: flex; align-items: center; gap: 6px; }
.cmp .minibar { height: 7px; border-radius: 4px; background: var(--crimson); }
.cmp .minibar.track { background: var(--chip); width: 44px; }
.muted-cell { color: var(--muted); cursor: help; }

/* ---------- competitor release notes ---------- */
.releases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.release { border: 0; border-radius: 18px; padding: 13px 15px; background: var(--card); box-shadow: var(--clay-sm); }
.release.self { box-shadow: var(--clay-sm), 0 0 0 2px var(--crimson) inset; }
.release-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.release-name { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.release-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }
.release-notes { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 1000px) { .releases { grid-template-columns: 1fr; } }

/* ---------- news ---------- */
.outlet-tag { font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; background: rgba(47,143,87,.14); color: var(--green); padding: 1px 6px; border-radius: 20px; font-weight: 700; }
.news-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.news-tab { font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 20px; cursor: pointer; border: 0; background: var(--card); color: var(--muted); box-shadow: var(--clay-sm); transition: transform .12s; }
.news-tab:hover { transform: translateY(-1px); }
.news-tab.active { background: var(--crimson); color: #fff; box-shadow: var(--clay-accent); }
.news-list { display: grid; gap: 2px; }
.news-item { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 11px 4px; border-bottom: 1px solid var(--line-card); text-decoration: none; color: inherit; }
.news-item:hover { background: var(--hover); }
.news-title { font-size: 14.5px; font-weight: 600; }
.news-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.news-title { min-width: 0; overflow-wrap: anywhere; }
/* On phones the title|meta row is too cramped side by side and the nowrap meta
   pushes past the screen edge; stack them and let the meta wrap. */
@media (max-width: 560px) {
  .news-item { flex-direction: column; gap: 3px; align-items: stretch; }
  .news-meta { white-space: normal; }
}
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.dot.positive { background: var(--green); }
.dot.negative { background: var(--red); }
.dot.neutral { background: var(--amber); }

/* ---------- reddit + youtube ---------- */
.buzz-stat { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.buzz-stat .big { font-size: 30px; font-weight: 800; }
.senti-bar { display: flex; height: 12px; border-radius: 8px; overflow: hidden; margin: 6px 0 4px; }
.senti-bar i { display: block; height: 100%; }
.senti-bar .pos { background: var(--green); }
.senti-bar .neu { background: var(--amber); }
.senti-bar .neg { background: var(--red); }
.senti-legend { font-size: 11.5px; color: var(--muted); display: flex; gap: 12px; }
.rd-item { font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--line-card); display: block; text-decoration: none; color: inherit; }
.rd-item:hover { color: var(--crimson-dark); }
.rd-sub { color: var(--muted); font-size: 11px; }
.yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.yt-card { border: 1px solid var(--line-card); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; background: var(--bg-2); }
.yt-card img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; background: var(--chip); }
.yt-meta { padding: 8px 10px; }
.yt-title { font-size: 12px; font-weight: 600; line-height: 1.3; max-height: 2.7em; overflow: hidden; }
.yt-stats { font-size: 11px; color: var(--muted); margin-top: 5px; }

.disabled-note { font-size: 12.5px; color: var(--muted); background: var(--bg-2); border: 1px dashed var(--line); border-radius: 10px; padding: 14px; }
.disabled-note b { color: var(--ink); }
.empty-note { font-size: 12.5px; color: var(--muted); padding: 8px 0; }

/* ---------- news article count line ---------- */
.news-count { font-size: 11.5px; color: var(--muted); margin: -4px 0 10px; }

/* ---------- related searches (Google Trends) ---------- */
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.related-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 8px; }
.related-list { list-style: none; margin: 0; padding: 0; counter-reset: rq; }
.related-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-card); font-size: 13px; }
.related-list li::before { counter-increment: rq; content: counter(rq); font-size: 11px; color: var(--muted); width: 16px; flex: none; text-align: right; }
.rq-q { flex: 1; }
.rq-bar { width: 44px; height: 6px; border-radius: 4px; background: var(--chip); overflow: hidden; flex: none; }
.rq-bar i { display: block; height: 100%; background: var(--gold); }
.rq-v { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rq-v.rise { color: var(--green); font-weight: 700; }
@media (max-width: 560px) { .related-grid { grid-template-columns: 1fr; } }

/* ---------- source & method (per-card provenance) ---------- */
.src { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line-card); }
.src-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.src-toggle { font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); background: none; border: 0;
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 5px; text-align: left; }
.src-toggle::before { content: "\25B8"; font-size: 9px; transition: transform .15s; }
.src-toggle.open::before { transform: rotate(90deg); }
.src-toggle:hover { color: var(--ink); }
.src-detail { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 7px;
  background: var(--bg-2); border: 0; border-radius: 14px; padding: 11px 13px; box-shadow: var(--clay-pressed); }
.src-detail b { color: var(--ink); font-weight: 600; }

/* ---------- skeleton loaders ---------- */
.skeleton { position: relative; overflow: hidden; background: var(--chip); border-radius: 8px; min-height: 14px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); animation: shimmer 1.3s infinite; }
[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .grid, .kpis { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-4 { grid-column: span 2; }
  .rating-cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%); transition: transform .25s; }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 35; }
  .hamburger { display: block; }
  .voc-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid, .kpis { grid-template-columns: 1fr; }
  .span-2, .span-4 { grid-column: span 1; }
  .yt-grid { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .updated { display: none; }
  .matrix-grid { grid-template-columns: 1fr; }
}

/* Screen-only hint next to the filters; header for the printed report. */
.filter-hint { font-size: 11px; color: var(--muted); }
@media (max-width: 1100px) { .filter-hint { display: none; } }
.print-header { display: none; }

/* Respect users who ask for less motion: drop the transitions and view fade. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- print / PDF ---------- */
@media print {
  .sidebar, .topbar, .scrim, .data-banner { display: none !important; }
  /* Interactive search inputs would print as empty boxes; hide them on paper.
     The filter chips stay (their counts are informative in the report). */
  .voc-search-row { display: none !important; }
  /* Print a sample of the review lists, not all 1000 rows - the summary tile and
     column headers above still state the true totals, so it reads as a report. */
  #voc-list-bad .rev:nth-of-type(n+7), #voc-list-good .rev:nth-of-type(n+7),
  #voc-list-bad .empty-note, #voc-list-good .empty-note { display: none !important; }
  /* Same for the other long lists: print a sample, not every item. */
  #news-list .news-item:nth-of-type(n+9),
  #fssai-list .news-item:nth-of-type(n+9),
  .yt-grid .yt-card:nth-of-type(n+7) { display: none !important; }
  .news-count, .fssai-count { display: none !important; }
  .app, #app-content { display: block; }
  .print-header { display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 2px solid #c8102e; padding-bottom: 8px; margin-bottom: 16px; }
  .print-header .ph-title { font-size: 16px; font-weight: 800; }
  .print-header .ph-meta { font-size: 11px; color: #666; }
  .view { display: block !important; page-break-inside: avoid; }
  /* Each section starts on its own page so the PDF reads like a report. */
  .view + .view { page-break-before: always; margin-top: 20px; }
  .view.js-empty { display: none !important; }
  .content { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  /* Clay shadows do not print well; flatten every soft surface to a hairline. */
  .kpi, .rc, .release, .scen, .news-tab, .data-banner, .src-detail, .voc-summary {
    box-shadow: none !important; border: 1px solid #ddd !important; }
  body, [data-theme] { --bg: #fff; --bg-2: #fff; --card: #fff; --ink: #000; }
  .chart-box { height: 240px; }
  /* Provenance must be visible on paper: force every source note open, drop the toggle. */
  .src-toggle { display: none !important; }
  .src-detail { display: block !important; border: 1px solid #ddd; }
}