/* ============================================================
   PMA — Lighting Value Index calculator.
   Layers on top of styles-dark.css; reuses its tokens, buttons,
   header/footer and lightfield. Only tool-specific chrome here.
   ============================================================ */

:root {
  --gold: #F4C95D;
  --field: rgba(255,255,255,.05);
  --field-line: rgba(255,255,255,.16);
  /* Same frosted glass as the home page's .card / .acc-content. */
  --panel: rgba(255,255,255,.045);
  --panel-line: rgba(255,255,255,.14);
  --bad: #ED6A60;
}

/* The tool sets its own vertical rhythm — the site's 96px section gap is
   far too airy for a form this dense. */
.lvi-main section { padding: 0; }
.lvi-main { padding-bottom: 96px; }

/* ---- icons -------------------------------------------------- */
.ic { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.14em; }
.ic-g { color: var(--gold); }
.ic-b { color: var(--sky); }
.ic-m { color: var(--muted); }
/* Sprite symbols inherit these via currentColor + the stroke preset. */
.i-stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- hero --------------------------------------------------- */
/* Generous top padding clears the sticky header; the bottom padding is the
   gap between the report tip and the first row of form fields.
   Needs the .lvi-main prefix to outrank `.lvi-main section { padding: 0 }`. */
.lvi-main .lvi-hero { padding: 84px 0 62px; text-align: center; }
.lvi-hero .eyebrow { justify-content: center; }
.lvi-hero h1 { font-size: 52px; }
.lvi-hero .lead { max-width: 760px; margin: 20px auto 0; }
.lvi-tip {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 26px;
  padding: 12px 22px; border-radius: var(--r-pill); font-size: 15px; color: var(--text);
  background: rgba(244,201,93,.07); border: 1px solid rgba(244,201,93,.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lvi-tip .ic { width: 18px; height: 18px; }

/* ---- shared frosted panel ---------------------------------- */
.lvi-panel {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-card);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* ---- project info bar --------------------------------------- */
.project-bar { padding: 22px; margin-bottom: 26px; }
.project-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ---- form controls ------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
/* flex-wrap matters: without it a label's min-content is the sum of its parts
   on one line, which forces the card grid's tracks wider than the container. */
.field > label,
.field-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0;
  font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--text);
}
.field-label .unit { color: var(--muted); font-weight: 400; }
.field input[type="text"],
.field input[type="number"] {
  width: 100%; font-family: var(--font); font-size: 15px; line-height: 1.4; color: var(--text);
  background: var(--field); border: 1px solid var(--field-line); border-radius: 10px;
  padding: 11px 13px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.field input::placeholder { color: rgba(156,161,184,.65); }
.field input:focus {
  outline: none; border-color: var(--sky); background: rgba(59,155,224,.08);
  box-shadow: 0 0 0 3px rgba(59,155,224,.14);
}
.field input.invalid { border-color: var(--bad); background: rgba(237,106,96,.08); }
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spin { -moz-appearance: textfield; }

/* ---- info tooltips ------------------------------------------ */
/* margin-left:auto parks the icon at the right end of its flex line, so the
   right-anchored tooltip below always lands inside the card — even once the
   label wraps on narrow screens. */
.info { position: relative; display: inline-flex; margin-left: auto; cursor: help; color: var(--muted); }
.info:hover, .info:focus-visible { color: var(--sky); outline: none; }
.info .ic { width: 14px; height: 14px; }
/* Right-aligned to the icon rather than centred on it: the info icon always
   sits at the end of a label, so this keeps the tooltip inside its card in
   every grid column without needing per-column nudges. */
/* Frosted glass with a gold outline. Same two layers as the panels below —
   the panel's white frosting over the site canvas — so it reads as the same
   material, just denser (the canvas layer is opaque enough to keep the copy
   legible over whatever form content the tooltip happens to cover). Blur is
   heavier than the panels' 10px for the same reason. */
.tip {
  position: absolute; bottom: calc(100% + 9px); right: 0; transform: translateY(4px);
  width: 228px; padding: 13px 15px; border-radius: 12px; z-index: 40;
  background: linear-gradient(var(--panel), var(--panel)), rgba(13,10,31,.80);
  -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%);
  border: 1px solid rgba(244,201,93,.5);
  box-shadow: 0 20px 48px -14px rgba(0,0,0,.72), 0 0 26px -8px rgba(244,201,93,.22);
  font-size: 12.5px; font-weight: 400; line-height: 1.55; color: var(--text); text-align: left;
  letter-spacing: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.tip strong { color: #fff; font-weight: 600; }
.tip em { color: var(--sky); font-style: normal; display: block; margin-top: 6px; }
.info:hover .tip, .info:focus-visible .tip { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }

/* ---- luminaire cards ---------------------------------------- */
.lum-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
/* Beyond four cards the auto-fit columns get too narrow to read, so cap the
   track count and let the grid wrap onto a second row instead. minmax(0,1fr)
   rather than 1fr so a track can never be widened past its share by content. */
.lum-grid.cols-5, .lum-grid.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lum-grid.cols-7, .lum-grid.cols-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lum-card { padding: 0; min-width: 0; overflow: visible; display: flex; flex-direction: column; transition: border-color .18s; }
.lum-card:focus-within { border-color: rgba(59,155,224,.45); }
.lum-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 16px;
  border-bottom: 1px solid var(--hairline);
}
.lum-letter {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: var(--gold);
  background: rgba(244,201,93,.12); border: 1px solid rgba(244,201,93,.4);
  text-shadow: 0 0 10px rgba(244,201,93,.45);
}
.lum-name { flex: 1; min-width: 0; }
.lum-name input {
  width: 100%; font-family: var(--font); font-size: 16px; font-weight: 500; color: #fff;
  background: transparent; border: none; border-bottom: 1px solid transparent;
  padding: 2px 0; transition: border-color .15s;
}
.lum-name input::placeholder { color: rgba(255,255,255,.5); }
.lum-name input:focus { outline: none; border-bottom-color: var(--sky); }
.lum-name .hint { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); margin-top: 3px; }
.lum-name .hint .ic { width: 10px; height: 10px; }
.lum-remove {
  flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: transparent; border: 1px solid var(--hairline);
  color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.lum-remove:hover { color: var(--bad); border-color: rgba(237,106,96,.55); background: rgba(237,106,96,.1); }
.lum-remove .ic { width: 13px; height: 13px; }
.lum-body { padding: 18px; display: grid; gap: 15px; }

/* Derived (read-only) value box — same geometry as a text input so it lines up
   with the fields above and below it, but blue-tinted to read as calculated. */
.derived-val {
  width: 100%; font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1.4;
  color: var(--sky); background: rgba(59,155,224,.07);
  border: 1px solid rgba(59,155,224,.28); border-radius: 10px; padding: 11px 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* L/B pair — no wrapper box: the group label sits at card level like every
   other field label, with the two inputs side by side beneath it. */
.lxby-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.lxby-inputs .field-label { font-size: 12.5px; color: var(--muted); }
.lxby-eg { font-size: 11.5px; line-height: 1.5; color: var(--muted); }

.wcf-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px;
  padding-top: 13px; border-top: 1px solid var(--hairline); font-size: 12.5px; color: var(--muted);
}
.wcf-row strong { color: var(--gold); font-weight: 600; font-size: 14px; }

/* ---- action bar --------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.actions .right { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 9px; }
.btn .ic { width: 17px; height: 17px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-quiet { background: transparent; color: var(--muted); border-color: var(--hairline); }
.btn-quiet:hover { background: rgba(255,255,255,.06); color: var(--text); border-color: rgba(255,255,255,.3); }
.btn-gold { background: rgba(244,201,93,.12); color: var(--gold); border-color: rgba(244,201,93,.42); }
.btn-gold:hover { background: rgba(244,201,93,.2); border-color: var(--gold); color: var(--gold); }

.form-msg {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px;
  padding: 13px 20px; border-radius: 12px; font-size: 14.5px; font-weight: 500;
  background: rgba(237,106,96,.1); border: 1px solid rgba(237,106,96,.45); color: #F7A49D;
}
.form-msg .ic { width: 18px; height: 18px; color: var(--bad); }

/* ---- results ------------------------------------------------ */
/* scroll-margin-top clears the sticky header: calculate() scrolls this into
   view with block:'start', which would otherwise tuck the heading underneath. */
.results { margin-top: 44px; scroll-margin-top: 96px; opacity: 0; transform: translateY(14px); }
.results.visible { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .results { opacity: 1; transform: none; } .results.visible { transition: none; } }
.results-head { text-align: center; margin-bottom: 30px; }
.results-head h2 { font-size: 34px; }
.results-head p { color: var(--muted); margin-top: 10px; }
.sub-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; color: var(--heading); margin-bottom: 16px; }
.sub-title .ic { width: 19px; height: 19px; }

.score-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.score-card { padding: 20px 18px; text-align: center; transition: border-color .2s, box-shadow .2s; }
/* Even halo on all four sides. The gold glow must stay at 0 0 with no y-offset
   — offsetting it pools the light along the bottom edge and leaves the top
   dark, which reads as a lopsided border rather than a glow. Depth comes from
   a separate neutral shadow, where an offset is fine. */
.score-card.is-winner {
  border-color: rgba(244,201,93,.6);
  box-shadow: 0 0 0 1px rgba(244,201,93,.25),
              0 0 28px rgba(244,201,93,.3),
              0 16px 34px -22px rgba(0,0,0,.7);
}
.score-name { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 16px; word-break: break-word; }
.score-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.score-val { font-size: 40px; font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: #fff; margin-top: 4px; }
.score-val--lwvi { color: var(--gold); text-shadow: 0 0 22px rgba(244,201,93,.35); }
.score-tag { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.score-sep { height: 1px; background: var(--hairline); margin: 16px 0; }

.winner {
  display: flex; align-items: center; gap: 20px; margin-top: 22px; padding: 22px 26px;
  border-radius: var(--r-card); border: 1px solid rgba(244,201,93,.42);
  background: linear-gradient(90deg, rgba(244,201,93,.13) 0%, rgba(244,201,93,.05) 55%, rgba(255,255,255,.03) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.winner .ic { width: 40px; height: 40px; color: var(--gold); filter: drop-shadow(0 0 12px rgba(244,201,93,.6)); animation: lvi-glow 3.4s ease-in-out infinite; }
@keyframes lvi-glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .winner .ic { animation: none; opacity: 1; } }
.winner-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.winner-name { display: block; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: #fff; margin: 3px 0 2px; }
.winner-basis { font-size: 13px; color: var(--muted); }

.block { margin-top: 40px; }
.table-scroll { overflow-x: auto; border-radius: 12px; border: 1px solid var(--panel-line);
  background: var(--panel); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.metrics { width: 100%; border-collapse: collapse; font-size: 14px; }
.metrics th, .metrics td { padding: 11px 15px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--hairline); }
.metrics thead th { background: rgba(255,255,255,.06); color: #fff; font-weight: 600; font-size: 13px; }
.metrics thead th:first-child { color: var(--muted); font-weight: 500; }
.metrics tbody td { color: var(--text); }
.metrics tbody td:first-child { color: var(--muted); }
.metrics tbody tr:last-child td { border-bottom: none; }
.metrics tr.hl td { background: rgba(59,155,224,.07); color: #fff; }
.metrics tr.hl td:first-child { color: var(--sky); }
.metrics tr.primary td { background: rgba(244,201,93,.08); font-weight: 600; color: var(--gold); }
.metrics tr.primary td:first-child { color: var(--gold); }
.metrics td.col-winner { background: rgba(244,201,93,.2) !important; box-shadow: inset 0 0 0 1px rgba(244,201,93,.35); }

/* ---- chart -------------------------------------------------- */
.chart-wrap { padding: 22px 18px 14px; }
.lvi-chart { width: 100%; max-width: 860px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.ch-grid { stroke: rgba(255,255,255,.09); stroke-width: 1; }
.ch-axis { stroke: rgba(255,255,255,.22); stroke-width: 1; }
.ch-tick { fill: var(--muted); font: 400 11px var(--font); }
.ch-name { fill: #fff; font: 500 12px var(--font); }
.ch-kind { fill: var(--muted); font: 400 10px var(--font); letter-spacing: .06em; }
.ch-val { fill: #fff; font: 600 11px var(--font); }
.ch-ytitle { fill: var(--muted); font: 400 11px var(--font); }
.chart-note { font-size: 13px; color: var(--muted); text-align: center; margin-top: 12px; }
.chart-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.chart-key span { display: inline-flex; align-items: center; gap: 8px; }
.key-swatch { width: 22px; height: 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,.3); }
.key-swatch.solid { background: var(--sky); }
.key-swatch.striped { background: repeating-linear-gradient(135deg, var(--sky) 0 3px, transparent 3px 6px); }

.summary {
  display: flex; gap: 18px; margin-top: 40px; padding: 24px 26px;
  border-radius: var(--r-card); background: rgba(255,255,255,.04);
  border: 1px solid var(--hairline); border-left: 3px solid var(--gold);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.summary .ic { width: 24px; height: 24px; color: var(--gold); flex: 0 0 auto; margin-top: 3px; }
.summary h3 { font-size: 20px; margin-bottom: 10px; }
.summary p { color: var(--text); font-size: 15.5px; line-height: 1.65; }
.summary strong { color: #fff; font-weight: 600; }

.print-action { text-align: center; margin-top: 40px; }
.print-hint { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin-top: 14px; }
.print-hint .ic { width: 15px; height: 15px; color: var(--gold); }

/* ---- methodology -------------------------------------------- */
.method { margin-top: 56px; }
.method-toggle {
  width: 100%; display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 20px 24px; border-radius: var(--r-card); font-family: var(--font);
  font-size: 17px; font-weight: 500; color: var(--heading); text-align: left;
  background: var(--panel); border: 1px solid var(--panel-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .15s, background .15s;
}
.method-toggle:hover { border-color: rgba(59,155,224,.45); background: rgba(59,155,224,.07); }
.method-toggle .ic { width: 20px; height: 20px; }
.method-toggle .chev { margin-left: auto; width: 16px; height: 16px; color: var(--muted); transition: transform .25s ease; }
.method-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .method-toggle .chev { transition: none; } }
.method-body { height: 0; overflow: hidden; transition: height .4s ease; }
@media (prefers-reduced-motion: reduce) { .method-body { transition: none; } }
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-top: 20px; }
.method-card { padding: 26px; min-width: 0; }
.method-card h4 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; color: var(--heading); margin-bottom: 12px; }
.method-card h4 .ic { width: 18px; height: 18px; }
.method-card p, .method-card li { color: var(--muted); font-size: 15px; line-height: 1.6; }
.method-card p + p { margin-top: 10px; }
.method-card ul, .method-card ol { margin: 10px 0 0 20px; display: grid; gap: 6px; }
.method-card strong { color: var(--text); font-weight: 500; }
.formula {
  margin-top: 14px; padding: 14px 16px; border-radius: 10px;
  background: rgba(0,0,0,.28); border: 1px solid var(--hairline);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.7; color: var(--sky); overflow-x: auto;
}
.formula code { display: block; white-space: nowrap; }
.eg-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.eg-table th, .eg-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--hairline); }
.eg-table th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.eg-table td { color: var(--text); }
.eg-note { font-size: 13.5px; color: var(--muted); margin-top: 10px; font-style: italic; }

/* ---- disclaimer --------------------------------------------- */
.disclaimer {
  display: flex; gap: 18px; margin-top: 44px; padding: 26px 28px;
  border-radius: var(--r-card); background: rgba(244,201,93,.045);
  border: 1px solid rgba(244,201,93,.24);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.disclaimer > .ic { width: 24px; height: 24px; color: var(--gold); flex: 0 0 auto; margin-top: 2px; }
.disclaimer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .09em; color: var(--gold); font-weight: 500; margin-bottom: 12px; }
.disclaimer p, .disclaimer li { font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.disclaimer p + p { margin-top: 10px; }
.disclaimer ul { margin: 12px 0 12px 20px; display: grid; gap: 5px; }
.disclaimer .liability { color: var(--text); font-weight: 500; }
.disclaimer .ip { font-size: 13px; padding-top: 14px; margin-top: 14px; border-top: 1px solid rgba(244,201,93,.22); }
.disclaimer .ip .ic { width: 13px; height: 13px; margin-right: 5px; }

/* ---- responsive --------------------------------------------- */
/* Drop the fixed 3/4-track layouts before the cards get narrower than a
   tooltip (236px + padding), otherwise the tips overhang the card. */
@media (max-width: 1180px) {
  .lum-grid.cols-5, .lum-grid.cols-6, .lum-grid.cols-7, .lum-grid.cols-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .project-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .lvi-hero h1 { font-size: 36px; }
  .lvi-main .lvi-hero { padding: 52px 0 40px; }
  .results-head h2 { font-size: 26px; }
  .winner-name { font-size: 21px; }
}
@media (max-width: 680px) {
  .project-fields { grid-template-columns: minmax(0, 1fr); }
  .lum-grid, .lum-grid.cols-5, .lum-grid.cols-6, .lum-grid.cols-7, .lum-grid.cols-8 { grid-template-columns: minmax(0, 1fr); }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .right { flex-direction: column; }
  .actions .btn { justify-content: center; }
  .winner { flex-direction: column; text-align: center; gap: 12px; }
  .summary, .disclaimer { flex-direction: column; gap: 12px; }
  .tip { width: min(228px, calc(100vw - 76px)); }
}


/* ============================================================
   PRINT REPORT — light, A4, client-facing. Lives hidden in the
   DOM and is the only thing that survives @media print.
   ============================================================ */
@media print {
  body > *:not(#printReport) { display: none !important; }
  /* Side margins come from @page so they repeat on every sheet; the top and
     bottom breathing room comes from padding here. */
  #printReport { display: block !important; padding: 13mm 0 14mm; }

  /* A zero top/bottom page margin is what suppresses the browser's own header
     and footer — the page title, URL and date/time are drawn in that margin,
     so removing it leaves nowhere for them to go. Left/right stay non-zero so
     continuation pages keep proper side margins. */
  @page { size: A4 portrait; margin: 0 14mm; }

  /* Stop blocks and table rows splitting across a page break. */
  .pr-score, .pr-winner, .pr-summary, .pr-method, .pr-disclaimer, .pr-foot { break-inside: avoid; }
  .pr-table tr { break-inside: avoid; }
  .pr-title, .pr-head { break-after: avoid; }
}

.print-report {
  display: none; font-family: var(--font); font-size: 12px; color: #1A1A2E;
  background: #fff; line-height: 1.55;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.print-report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.pr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  padding-bottom: 11px; margin-bottom: 14px; border-bottom: 2.5px solid #F4C95D; }
.pr-logo { height: 46px; width: auto; display: block; margin-bottom: 6px; }
.pr-sub { font-size: 12px; font-weight: 600; color: #221452; }
.pr-badge { text-align: right; font-size: 10px; color: #6A7086; line-height: 1.5; }
.pr-badge strong { display: block; color: #221452; font-size: 11px; }

.pr-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 15px;
  padding: 11px 14px; background: #F5F7FB; border: 1px solid #D8DEEA; border-radius: 6px; }
.pr-meta span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: #6A7086; }
.pr-meta strong { display: block; font-size: 11.5px; color: #221452; margin-top: 2px; word-break: break-word; }

.pr-title { font-size: 11px; font-weight: 600; color: #221452; text-transform: uppercase; letter-spacing: .08em;
  margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1.5px solid #E2E6F0; }
.pr-title:first-of-type { margin-top: 0; }

.pr-table { width: 100%; border-collapse: collapse; font-size: 10.5px; margin-bottom: 10px; }
.pr-table th { background: #221452; color: #fff; padding: 6px 9px; text-align: left; font-weight: 600; white-space: nowrap; }
.pr-table td { padding: 5px 9px; border-bottom: 1px solid #E2E6F0; white-space: nowrap; }
.pr-table tbody tr:nth-child(even) td { background: #F7F9FC; }
.pr-table td.lbl { font-weight: 500; color: #3A4157; }
.pr-table tr.hl td { background: #EEF5FC; }
.pr-table tr.primary td { background: #FDF6E3; font-weight: 600; color: #8A6A12; }
.pr-table td.col-winner { background: #F8E7B0 !important; font-weight: 600; }

.pr-scores { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); margin-bottom: 12px; }
.pr-score { border: 1.2px solid #D8DEEA; border-radius: 6px; padding: 11px 9px; text-align: center; background: #FAFBFE; }
.pr-score.is-winner { border-color: #D9A929; border-width: 1.8px; background: #FFFBF0; }
.pr-score-name { font-size: 10.5px; font-weight: 600; color: #221452; margin-bottom: 8px; word-break: break-word; }
.pr-score-lbl { font-size: 8px; text-transform: uppercase; letter-spacing: .07em; color: #6A7086; }
.pr-score-val { font-size: 22px; font-weight: 600; color: #221452; line-height: 1.05; }
.pr-score-val.lwvi { font-size: 19px; color: #8A6A12; }
.pr-score-tag { font-size: 8px; color: #6A7086; }
.pr-score-sep { height: 1px; background: #E2E6F0; margin: 7px 0; }

.pr-winner { background: #221452; border-radius: 6px; padding: 11px 15px; margin-bottom: 10px; }
.pr-winner-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.pr-winner-name { font-size: 14px; font-weight: 600; color: #F4C95D; margin-top: 2px; }

.pr-chart { text-align: center; margin: 8px 0; }
/* Explicit max-width rather than max-height: with preserveAspectRatio a height
   clamp would letterbox the chart inside a full-page-width box instead of
   shrinking it. */
.pr-chart svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
.pr-chart .ch-grid { stroke: #E2E6F0; }
.pr-chart .ch-axis { stroke: #B8BFD0; }
.pr-chart .ch-tick, .pr-chart .ch-kind, .pr-chart .ch-ytitle { fill: #6A7086; }
.pr-chart .ch-name, .pr-chart .ch-val { fill: #221452; }
.pr-chart-note { font-size: 9.5px; color: #6A7086; text-align: center; margin-top: 3px; }

.pr-summary { padding: 11px 15px; background: #F5F7FB; border-left: 3px solid #F4C95D; border-radius: 4px;
  margin-bottom: 12px; font-size: 11px; line-height: 1.65; color: #3A4157; }
.pr-summary strong { color: #221452; }

.pr-method { margin-top: 12px; padding-top: 10px; border-top: 1.5px solid #E2E6F0; }
.pr-method h4 { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #221452; margin-bottom: 5px; }
.pr-method p { font-size: 10.5px; color: #3A4157; line-height: 1.6; margin-bottom: 3px; }

.pr-disclaimer { margin-top: 11px; padding: 10px 14px; background: #FFFCF3;
  border: 1px solid #EFDCA8; border-left: 3px solid #F4C95D; border-radius: 4px;
  font-size: 10px; color: #5B4A22; line-height: 1.55; }
.pr-disclaimer h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #6B5312; margin-bottom: 4px; }
.pr-disclaimer ul { padding-left: 14px; margin: 4px 0; }
.pr-disclaimer p { margin-bottom: 3px; }

.pr-foot { margin-top: 16px; padding-top: 9px; border-top: 2px solid #F4C95D;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  font-size: 9.5px; color: #6A7086; }
.pr-foot strong { color: #221452; font-size: 10.5px; }
.pr-foot .mid { text-align: center; flex: 1; font-size: 8.5px; }