/* Wander Within • Compass vNext — Clean base */

/* ===========================
   TOKENS
   =========================== */
:root{
  /* brand palette */
  --ink-900:#2a3a48;
  --ink-800:#344355;
  --sand-50:#f3f2ee;
  --sage-400:#85a79b;
  --gold-500:#b89b62;

  /* theme */
  --bg: var(--sand-50);
  --text: #1f2937;
  --card: #ffffff;
  --muted: #576578;
  --border: #e5e5e0;

  /* fx */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);

  /* type */
  --font-body: "PT Serif", serif;
  --font-heading: "Marcellus", serif;
}

[data-theme="dark"]{
  --bg: #0f141a;
  --text: #e7ecf2;
  --card: #151b22;
  --muted: #a7b2c2;
  --border: #243040;
}

/* ===========================
   BASE
   =========================== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.55 var(--font-body);
}
h1,h2,h3,h4{ font-family: var(--font-heading); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ===========================
   FIXED PILL HEADER + MAIN
   =========================== */
.app-header{
  position: fixed;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1100px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  z-index: 10000;
}
.brand{ display:flex; align-items:center; gap:12px; }
#brandMark{ height:72px; width:auto; display:block; }
@media (max-width:520px){ #brandMark{ height:34px; } }
#themeToggle{ font-family: var(--font-body); font-weight:600; }

main{
  padding-top: 120px;              /* room for the fixed header */
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 24px; padding-right: 24px;
}

/* ===========================
   CARDS, BUTTONS, INPUTS
   =========================== */
.card{
  background:var(--card);
  border:2px solid var(--sage-400);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

.row{ display:flex; gap:12px; align-items:center; }
.row.space-between{ justify-content:space-between; }

.btn{
  border:1px solid var(--ink-800);
  background:var(--ink-800);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
}
.btn:hover{ filter:brightness(1.03); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
}

input[type="text"]{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  margin:10px 0 16px;
}

/* ===========================
   INSTRUCTION CONTENT
   =========================== */
.instructions h2{
  text-align:left;
  font-size:1.6rem;
  margin-bottom:1.2rem;
}
.instruction-block{
  background: color-mix(in srgb, var(--bg) 92%, white 8%);
  border:2px solid var(--sage-400);
  border-radius:12px;
  padding:1rem 1.25rem;
  margin-bottom:1rem;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.instruction-block.info{
  background: color-mix(in srgb, var(--bg) 88%, white 12%);
}
.instruction-block h3{
  font-family:var(--font-heading);
  font-size:1.1rem;
  margin:0 0 .4rem;
}
.instruction-block p,
.instruction-block ul{ margin:0; line-height:1.6; }
.instruction-block ul{ list-style:disc; padding-left:1.5rem; margin-top:.25rem; }
.instruction-block li{ margin-bottom:.3rem; }

.instruction-actions{ display:flex; gap:.75rem; justify-content:flex-start; margin-top:1rem; }

/* ===========================
   LOGIN POLISH (logo in white card)
   =========================== */
#screen-login .logo-hero{
  background:transparent; border:0; padding-top:12px;
  text-align:center; margin-bottom:36px;  /* extra space under logo */
}
#screen-login .logo-hero .hero-logo{
  display:block; margin:12px auto 0; max-width:420px; width:100%; height:auto;
}
.login-btn{ margin-top:1.5rem; }

/* Phase toggle */
.phase-toggle{ display:flex; gap:.75rem; }
.phase-btn{
  flex:1;
  padding:.6rem 1rem;
  border-radius:999px;
  border:1px solid var(--sage-400);
  background:transparent;
  color:var(--sage-400);
  font-family:var(--font-body);
  font-weight:800;                       /* bold by default */
  cursor:pointer;
  transition: all .18s ease-in-out;
}
.phase-btn:hover{ background: color-mix(in srgb, var(--sage-400) 15%, white); }
.phase-btn.active{
  background: var(--sage-400);
  color:#fff;
  border-color:var(--sage-400);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  font-weight:900;                       /* extra-bold when active */
}

/* ===========================
   WATERMARK
   (intro + assessment screens)
   =========================== */
.screen.use-watermark > .card{
  position:relative; overflow:hidden;
}
.screen.use-watermark > .card::before{
  content:"";
  position:absolute; top:50%; left:50%;
  width:80vmin; height:80vmin;
  transform:translate(-50%,-50%);
  background:center/contain no-repeat var(--wm-url);
  opacity:.06; filter:saturate(.7);
  pointer-events:none; z-index:0;
}
.screen.use-watermark > .card > *{ position:relative; z-index:1; }

/* Also apply to any id that starts with screen-assessment (safety) */
.screen[id^="screen-assessment"] > .card{ position:relative; overflow:hidden; }
.screen[id^="screen-assessment"] > .card::before{
  content:""; position:absolute; top:50%; left:50%;
  width:80vmin; height:80vmin; transform:translate(-50%,-50%);
  background:center/contain no-repeat var(--wm-url);
  opacity:.06; filter:saturate(.7); pointer-events:none; z-index:0;
}
.screen[id^="screen-assessment"] > .card > *{ position:relative; z-index:1; }

/* ===========================
   ASSESSMENT ITEMS
   =========================== */
.items{ display:grid; gap:14px; margin:12px 0 16px; }

/* tan container with sage outline */
.item{
  background: var(--bg);
  border: 2px solid var(--sage-400);
  border-radius: 12px;
  padding: 12px;
}

.item-row{
  display:grid;
  grid-template-columns: 1fr repeat(5, minmax(48px, 96px));
  align-items:center;
  gap:10px;
}
.item-row .stem{ padding-right:12px; }

/* pill labels */
.item-row label{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:10px;
  padding:8px 10px; cursor:pointer;
  background:transparent; color:var(--text);
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* radios are visually hidden but accessible */
.item-row input{ position:absolute; opacity:0; pointer-events:none; }

/* selected */
.item-row label:has(input:checked){
  background: var(--sage-400); border-color: var(--sage-400);
  color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.item-row label:has(input:checked) span{ font-weight:700; color:#fff; }

/* focus */
.item-row label:has(input:focus-visible){ outline:2px solid var(--sage-400); outline-offset:2px; }

/* ===========================
   CHARTS & LEGEND
   =========================== */
.chart{ width:100%; height:500px; margin:0 auto; }
@media (max-width:600px){ .chart{ height:400px; } }

/* Ensure overlay chart (#chartCompare) follows the same mobile-friendly
   rules as #chartPost so labels and sizing behave correctly on phones. */
#chartCompare, #chartPost {
  overflow: visible !important;
  width: 100% !important;
  margin: 0 auto;
}
@media (max-width: 550px){
  #chartCompare, #chartPost{
    height: 360px !important;
  }
  #chartCompare canvas, #chartPost canvas{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* let labels overhang chart bounds */
#chartPre.chart,
#chartPost.chart,
#chartPreCompare.chart,
.charts-compare .chart{ overflow:visible; }

.legend{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:8px 16px; margin:12px 0 16px; width:100%;
  justify-content: center; text-align:center; margin:8px auto 0;
}
.legend .chip{ display:inline-flex; align-items:center; gap:8px; font-size:.95rem; white-space:nowrap; }
.legend .dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }

/* Ensure legend (key) is centered under chart wrappers across viewports */
.chart + .legend,
.chart-wrap .legend,
.chart-wrap > .legend{
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}


/* ===========================
   RESULTS PANELS
   =========================== */
.narratives{ display:grid; gap:12px; }
.narratives .panel{ border:1px solid var(--border); border-radius:12px; padding:12px; }
.panel-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.panel-header .left{ display:flex; align-items:center; gap:10px; }
.pill{ padding:4px 10px; border:1px solid currentColor; border-radius:999px; font-size:.9rem; font-weight:600; line-height:1; }
.band-move{ font-size:.95rem; font-weight:600; opacity:.9; }

/* ===========================
   VISIBILITY
   =========================== */
.screen{ display:none !important; }
.screen.active{ display:block !important; }

/* ===========================
   FOOTER & SMALL TEXT
   =========================== */
.small{ font-size:12px; line-height:1.4; color:#94a3b8; }
.disclaimer{ margin-top:12px; text-align:center; }

#siteFooter{
  margin-top:24px; text-align:center; color:#94a3b8;
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
}
#siteFooter .divider{ margin:0 4px; }

/* ===========================
   PRINT
   =========================== */
@media print{
  .app-header{ box-shadow:none; border:none; }
  #siteFooter{ display:block !important; position:fixed; bottom:0; left:0; right:0; padding:8px 12px; text-align:center; font-size:12px; color:#64748b; }
  .disclaimer, .methodology{ display:block; break-inside:avoid; }
}

/* ===========================
   POLISH: logos, methodology, results emphasis, headings
   =========================== */

/* Instruction pages: logo smaller and aligned from the right */
#screen-intro-pre  .hero-logo,
#screen-intro-post .hero-logo{
  display:block;
  max-width:260px;     /* significantly smaller */
  width:100%;
  height:auto;
  margin: 8px 0 28px auto; /* push to the right, with breathing room below */
}

/* Center the methodology line in instruction cards */
.methodology.small{
  text-align:center;
  margin-top: 8px;
}

/* Results: emphasize Greatest Strength / Needs More Support */
.narratives .panel.emphasis{
  border-width: 3px;                     /* thicker border */
  box-shadow: 0 1px 6px rgba(0,0,0,.06); /* a touch more definition */
}
.narratives .panel.emphasis .kicker{
  display:block;
  font-weight: 800;
  font-size: 1.05rem;                    /* draw attention */
  margin-bottom: .35rem;
}
.narratives .panel.emphasis h4{
  font-size: 1.25rem;                    /* bigger domain title */
}

/* Results: emphasize Greatest Improvement */
.narratives .panel.gi{
  border-width: 3px;                     /* bold border like emphasis */
}
.narratives .panel .kicker-gi{
  display:inline-block;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: .35rem;
}

/* Center the "Before vs. Now" heading above the compare chart */
.chart-wrap h3{
  text-align: center;
  font-size: 1.1rem;
  margin: 0 0 12px;
}

/* ===========================
   FINAL POLISH: logo centering + change arrows
   =========================== */

/* Center instruction logos again */
#screen-intro-pre  .hero-logo,
#screen-intro-post .hero-logo{
  display:block;
  margin: 8px auto 28px auto;   /* centered horizontally */
  max-width:260px;
  width:100%;
  height:auto;
}

/* Add arrows to change pills on Post Results page */
.band-move{
  display: inline-flex;
  align-items: center;
  gap: 6px;                     /* space between arrow and text */
  font-weight: 600;
  font-size: 0.95rem;
}

/* Up = increase, Down = decrease, Side = no change */
.band-move.increase::before{
  content: "↑";
  color: var(--sage-400);
  font-weight: 700;
}
.band-move.decrease::before{
  content: "↓";
  color: #b85c5c;               /* subtle red tone */
  font-weight: 700;
}
.band-move.nochange::before{
  content: "→";
  color: var(--gold-500);
  font-weight: 700;
}

/* ===========================
   PRINT — Results only, crisp charts, no awkward breaks
   =========================== */
@media print {
  /* Exact colors on paper */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Page setup */
  @page {
    size: auto;          /* respect printer default (Letter/A4) */
    margin: 16mm;        /* comfortable margins for charts */
  }

  /* Hide chrome we don't want on paper */
  .app-header,
  #screen-login,
  #screen-intro-pre,
  #screen-intro-post,
  #siteFooter,
  .legend + .instruction-actions,
  .instruction-actions,
  .phase-toggle,
  .btn,
  .btn-ghost { display: none !important; }

  /* Only show the active results screen */
  .screen { display: none !important; }
  #screen-results-pre.active,
  #screen-results-post.active { display: block !important; }

  /* Card fills the printable space nicely */
  .card {
    border: none;
    box-shadow: none;
    padding: 0;
    background: #fff;
  }

  /* Title spacing and sizes for print */
  .card > h2 {
    margin: 0 0 8mm;
    font-size: 22pt;
  }
  .chart-wrap h3 {
    font-size: 14pt;
    margin: 0 0 5mm;
  }

  /* Chart output: crisp & unbroken */
  .chart {
    height: auto !important;
    min-height: 120mm;          /* ensures good density */
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 8mm;
  }
  .chart canvas {
    max-width: 100% !important;
    height: auto !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    background: #fff;           /* avoid gray tints on some printers */
  }

  /* Legends and narrative blocks shouldn’t split across pages */
  .legend,
  .narratives,
  .narratives .panel,
  .methodology,
  .disclaimer,
  #ownershipLine,
  #ownershipLine2 {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Add a comfortable gap after legends before narratives */
  .legend { margin-bottom: 6mm; }

  /* Emphasis panels hold together with a little space around */
  .narratives .panel { margin-bottom: 5mm; }

  /* If you ever include both results screens in one print run,
     force a clean new page before the second. (Safe if only one). */
  #screen-results-post { page-break-before: always; }
}

/* Status pill arrows (post results) */
.pill.change{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:800;
}
.pill.change.increased::before{ content:"↑"; color:var(--sage-400); font-weight:900; }
.pill.change.decreased::before{ content:"↓"; color:#b85c5c;   font-weight:900; }
.pill.change.nochange::before{  content:"→"; color:var(--gold-500); font-weight:900; }

/* ============================================================
   HTML2PDF DOWNLOAD MODE (canvas capture) — fixes:
   - removes first blank page (no top margins)
   - constrains width to printable area so charts/narratives don’t overflow
   - keeps donut + legend together; narratives flow to next page
   ============================================================ */
body.pdf-mode{
  background:#fff !important;
}
body.pdf-mode .app-header{ display:none !important; }
body.pdf-mode main{ padding-top:0 !important; }
body.pdf-mode .card{
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  background:#fff !important;
  width:7.5in;              /* printable width inside Letter with ~0.5in margins */
  max-width:7.5in;
  margin:0 auto !important;
}
body.pdf-mode .card > *:first-child{ margin-top:0 !important; } /* avoid blank first page */
body.pdf-mode .card > h2{
  margin:0 0 4mm !important;
  font-size:22pt !important;
}

body.pdf-mode .chart{
  width:100% !important;
  height:auto !important;
  /* reduce the enforced min-height in PDF mode so charts don't force a large
     blank region above them; allow the chart to size naturally but keep a
     reasonable minimum so very small canvases don't collapse. */
  min-height:56mm !important;
  margin:0 0 4mm 0 !important;
  overflow:visible !important;      /* keep labels visible */
}
body.pdf-mode .chart canvas{
  display:block;
  max-width:100% !important;
  height:auto !important;
  background:#fff !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

body.pdf-mode .legend{ margin-bottom:6mm !important; }
body.pdf-mode .narratives,
body.pdf-mode .narratives .panel,
body.pdf-mode .methodology,
body.pdf-mode .disclaimer,
body.pdf-mode #ownershipLine,
body.pdf-mode #ownershipLine2{
  break-inside: avoid;
  page-break-inside: avoid;
}
body.pdf-mode .narratives .panel{ margin-bottom:5mm !important; }

/* Force narratives to start on a new page after the donut+legend when needed */
.results-first-page-break{
  break-before: page;
  page-break-before: always;
}

/* PDF mode: ensure chart-cards are top-aligned to avoid large vertical gaps
   caused by vertical centering in normal browsing. This pulls charts up on
   the first page so the donut + legend appear closer to the heading. */
body.pdf-mode .chart-card{
  justify-content: flex-start !important;
  padding-top: 0 !important;
}

/* Remove any wrapper padding above charts in PDF mode so the visual spacing
   between the page heading and the charts is minimal. */
body.pdf-mode .chart-wrap{
  padding-top: 0 !important;
}

/* Further tighten legend spacing so it can fit directly beneath the charts
   on the first page. */
body.pdf-mode .chart-wrap + .legend,
body.pdf-mode .chart + .legend,
body.pdf-mode .legend{
  margin-top: 4px !important;
  margin-bottom: 4mm !important;
}

/* Shrink chart heights specifically for PDF capture so two charts + a
   compact legend comfortably fit on the first page. These rules override
   large-desktop height rules when PDF mode is active. */
body.pdf-mode .chart-card .chart{
  /* increase post chart size slightly so side-by-side charts are more prominent */
  height: 420px !important;
  max-height: 520px !important;
}

/* Ensure side-by-side cards don't create extra vertical space in PDF mode */
body.pdf-mode .chart-wrap.side-by-side .chart{
  /* side-by-side charts in POST view should be a bit larger in PDF exports */
  height: 420px !important;
}

/* Give the single (PRE) results chart extra vertical room in PDF mode so
   it remains prominent on its page while compare (POST) charts stay
   compact side-by-side. This only affects PDF captures and does not
   change on-screen browsing. */
body.pdf-mode #screen-results-pre .chart{
  height: 520px !important;
  max-height: 760px !important;
  min-height: 360px !important;
}

/* ===== MOBILE POLISH (≤550px) ===== */
@media (max-width: 550px){
  /* keep header from overlapping + tighten padding */
   /* keep header fixed + centered like desktop */
  .app-header{
  position: fixed;
  /* center within safe gutters; no transform math */
  left: 12px;
  right: 12px;
  top: 8px;
  width: auto;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 14px;
  z-index: 10000;
  transform: none;
}

  /* cards + legend + chart */
  .card{ padding:16px; }
  .legend{ justify-content:flex-start; gap:8px 12px; font-size:.92rem; }
  .chart{ height: 360px; }        /* smaller canvas on phones */

  /* Likert items: statement on top, choices below */
  .item-row{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .item-row .stem{
    flex: 1 1 100%;               /* full-width first row */
    padding-right: 0;
  }
  .item-row label{
    flex: 1 1 calc(20% - 8px);    /* 5 across; will wrap if needed */
    min-width: 64px;
    justify-content: center;
    padding: 8px 6px;
    font-size: 12px;
  }
  .item-row label span{
    font-size: 12px;
    line-height: 1.2;
    word-break: break-word;
  }
  /* ensure long text (Strongly Disagree / Agree) is centered in button */
.item-row label span{
  width: 100%;
  text-align: center;
  display: inline-block;
}
}

/* very small phones: allow 3 pills per row so text fits */
@media (max-width: 400px){
  .item-row label{ flex: 1 1 calc(33.333% - 8px); }
}
/* ===== MOBILE POLISH (<=550px) ===== */
@media (max-width: 550px){
  /* Make the header STICKY (not fixed) so it doesn't drift/overlap on scroll */
  .app-header{
    position: sticky;     /* was fixed */
    top: 8px;
    width: calc(100% - 16px);
    padding: 10px 12px;
    z-index: 10000;
    margin: 0 auto;
  }

  /* Reserve clear space above content; keeps header from covering first card */
  main{
    padding-top: 24px;    /* smaller because sticky stays in flow */
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Charts & legends a bit tighter on phones */
  .card{ padding:16px; }
  .chart{ height: 340px; }          /* shorter canvas prevents clipping */
  .legend{ justify-content:flex-start; gap:8px 12px; font-size:.92rem; }

  /* Stack stem on top, choices below */
  .item-row{
    display:flex; flex-wrap:wrap; gap:8px;
  }
  .item-row .stem{
    flex: 1 1 100%; padding-right:0;
  }
  .item-row label{
    flex: 1 1 calc(20% - 8px);       /* 5 across at wider phones */
    min-width: 60px;
    justify-content:center;
    padding: 8px 6px;
    font-size: 12px;
  }
  .item-row label span{
    font-size:12px; line-height:1.2; word-break:break-word;
  }
}

/* Under ~440px, switch to 3-per-row so you never get a huge single last pill */
@media (max-width: 440px){
  .item-row label{ flex: 1 1 calc(33.333% - 8px); min-width: 0; }
}

/* Ultra-small phones: allow 2-per-row for comfort */
@media (max-width: 360px){
  .item-row label{ flex: 1 1 calc(50% - 8px); }
}

/* fix donut chart clipping on narrow phones */
@media (max-width: 550px){
  #chartPre, #chartPost{
    width: 100% !important;
    height: 360px !important;
    margin: 0 auto;
    overflow: visible !important;
  }
  #chartPre canvas, #chartPost canvas{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ensure nothing trims the pie labels on results */
#screen-results-pre .card,
#screen-results-post .card,
#screen-results-pre .chart-wrap,
#screen-results-post .chart-wrap,
#chartPre, #chartPost{
  overflow: visible !important;
}

/* mobile: guarantee full width for canvas and a comfortable height */
@media (max-width: 550px){
  #chartPre, #chartPost{
    width: 100% !important;
    height: 340px !important;
    margin: 0 auto;
  }
  #chartPre canvas, #chartPost canvas{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Add a little side padding around the chart on narrow viewports */
@media (max-width: 730px){
  #screen-results-pre .chart-wrap,
  #screen-results-post .chart-wrap{
    padding: 0 16px;   /* gives outer labels some breathing room */
  }
}

/* extra side room for labels at your failing widths */
@media (max-width: 730px){

}
@media (max-width: 520px){

}

/* extra left gutter so left-side labels never clip */
@media (max-width: 730px){

}
@media (max-width: 520px){

}

/* PRE: extra left room when <520px so left labels never clip */
@media (max-width: 520px){
  #chartPre{ height: 320px !important; }
}

/* POST: extra left room from 700px down, and a touch more under 520px */
@media (max-width: 700px){
  #chartPost{ height: 340px !important; }
}
@media (max-width: 520px){
  #chartPost{ height: 320px !important; }
}

/* --- FINAL MOBILE CENTERING FIX --- */
@media (max-width: 730px){
  #chartPre,
  #chartPost{
    display: block;
    margin: 0 auto;             /* center canvas */
    width: 100% !important;
    max-width: 340px;           /* keeps proportions */
    height: auto !important;
  }

  /* center the ECharts canvas inside its parent */
  #chartPre canvas,
  #chartPost canvas{
    margin: 0 auto !important;
    display: block !important;
    transform: translateX(0) !important;
  }

  /* make sure the wrapper lets it breathe evenly */
  #screen-results-pre .chart-wrap,
  #screen-results-post .chart-wrap{
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
}

/* Side-by-side compare layout for desktop: two charts sit next to each other
   inside the same .chart-wrap. On mobile this class is removed so charts
   stack vertically. */
@media (min-width: 731px){
  .chart-wrap.side-by-side .chart{
    display: inline-block;
    width: 48%;
    vertical-align: top;
    box-sizing: border-box;
  }
  .chart-wrap.side-by-side .chart + .chart{ margin-left: 4%; }
}

/* Desktop-only: tighten the post result chart cards so charts sit nearer
   the top and consume more vertical space (reduces the big white gap). */
@media (min-width: 1000px){
  /* Only affect cards inside the compare wrapper (post results) to avoid
     changing other card styles elsewhere. */
  .chart-wrap.side-by-side .chart-card{
    padding: 6px 12px !important;     /* small vertical padding */
    justify-content: flex-start !important; /* push chart toward top */
    min-height: 0 !important;
  }

  /* Reduce the header spacing so it doesn't create a large top gap */
  .chart-wrap.side-by-side .chart-card h4{
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    padding-top: 0 !important;
    font-size: .98rem !important;
  }

  /* Ensure the inner chart fills the available vertical space */
  .chart-wrap.side-by-side .chart-card .chart{
    margin-top: 0 !important;
    /* Use explicit desktop heights so the chart container has a concrete
       size. calc(100% - 44px) made the height unresolved when the card
       had no set height, causing the canvas to collapse. */
    height: 680px !important; /* default for 1000px+ screens */
    max-height: 820px !important; /* hard cap so it doesn't become massive */
  }
}

/* Remove the visual boxed card chrome for POST results only. Keeps the
   inner chart size and spacing but removes border, background and shadow
   so the cards appear seamless with the page. */
#screen-results-post .chart-wrap .chart-card{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove the small header inside post chart-cards (we no longer need the
   H4 titles: the page heading and legend are sufficient). Hiding via CSS
   keeps DOM intact but removes the visual gap. */
#screen-results-post .chart-wrap .chart-card h4{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

/* Ensure stacked layout (default) keeps charts full-width on mobile */
@media (max-width: 730px){
  .chart-wrap .chart{ display:block; width:100% !important; }
}

/* Card style around each chart in the compare view */
.chart-card{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 6px; /* remove vertical padding so chart can grow; narrower horizontal padding */
  box-shadow: 0 6px 14px rgba(0,0,0,0.04);
  background: var(--card);
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* center chart so it fills available space */
  margin: 4px 0;          /* tighten vertical spacing further */
  min-height: 0;         /* allow the card to shrink to content */
}
.chart-card h4{
  margin: 0 0 4px 0;
  font-family: var(--font-heading);
  font-size: .98rem;
  color: var(--text);
  padding-top: 0; /* removed extra top padding */
}

@media (min-width: 731px){
  .chart-wrap.side-by-side .chart-card{ display:inline-block; width:48%; vertical-align:top; }
  .chart-wrap.side-by-side .chart-card + .chart-card{ margin-left:4%; }
}

@media (max-width: 730px){
  .chart-card{ margin-bottom: 8px; }
}

/* Make chart canvases inside the compare cards larger on desktop so
   NOW and BEFORE donuts are visually prominent. Also ensure on mobile
   we force stacking and full-width cards (override any inline styles). */
@media (min-width: 1200px){
  /* very large desktop: make charts prominent */
  .chart-card .chart{ height: 760px !important; }
}
@media (min-width: 1000px) and (max-width:1199px){
  .chart-card .chart{ height: 680px !important; }
}
@media (min-width: 731px) and (max-width: 999px){
  .chart-card .chart{ height: 560px !important; }
}

/* Make the inner chart container wider so its min(width,height) grows
   and pie slices can scale to a larger radius. This helps when cards are
   side-by-side and the card height is greater than its width. */
@media (min-width: 731px){
  .chart-card .chart{ width: 98% !important; max-width: 1100px; }
}
@media (max-width: 730px){
  /* Force stacked cards and full-width on small viewports (override inline JS sizing) */
  .chart-wrap .chart-card{ display:block !important; width:100% !important; }
  .chart-card .chart{ height: 360px !important; }
}

/* Center legend under chart-wrap on small viewports so key is centered */
@media (max-width: 550px){
  .chart-wrap + .legend,
  .chart-wrap .legend,
  .chart + .legend {
    justify-content: center !important;
  }
}

/* Ensure the legend doesn't push the cards down unexpectedly */
.chart-wrap + .legend{ margin-top: 8px !important; }

/* --- restore explicit height for ECharts containers on mobile --- */
@media (max-width: 730px){
  /* The container elements MUST have a fixed height */
  #chartPre,
  #chartPost,
  .chart{
    height: 340px !important;      /* pick 320–360 if you prefer */
  }

  /* Center the canvas without killing its size */
  #chartPre,
  #chartPost{
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 360px;               /* optional: adjust to taste */
  }

  #chartPre canvas,
  #chartPost canvas{
    display: block !important;
    margin: 0 auto !important;
    /* remove any previous height:auto overrides */
    height: auto !important;        /* canvas will size to container height */
    max-width: 100% !important;
  }

  /* wrapper can be centered; do NOT set overflow:hidden or height:auto here */
  #screen-results-pre .chart-wrap,
  #screen-results-post .chart-wrap{
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    overflow: visible !important;
  }
}

/* narrow iPhone band (~414px): give labels a hair more room on the left */
@media (min-width: 390px) and (max-width: 430px){
  #screen-results-pre .chart-wrap,
  #screen-results-post .chart-wrap{
    padding-left: 14px;
    padding-right: 6px;
  }
}

/* --- normalize chart padding on small vs. mid phones --- */
@media (max-width: 730px){
  #screen-results-pre .chart-wrap,
  #screen-results-post .chart-wrap{
    padding-left: 8px;   /* narrower gutters */
    padding-right: 8px;
  }
}

@media (min-width: 501px) and (max-width: 650px){
  #screen-results-pre .chart-wrap,
  #screen-results-post .chart-wrap{
    padding-left: 4px;   /* even tighter for 520–600px band */
    padding-right: 4px;
  }
}

@media (max-width: 650px){
  .card{
    padding: 12px;
  }
}

@media (max-width: 390px){
  #screen-results-pre .chart-wrap,
  #screen-results-post .chart-wrap{
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* Let ECharts pie labels extend if needed on very small widths */
@media (max-width: 520px){
  #screen-results-post .chart-wrap { overflow: visible; }
}

/* Extra horizontal breathing room for labels on narrow phones (<=460px) */
@media (max-width: 480px){
  #screen-results-pre .chart-wrap,
  #screen-results-post .chart-wrap{
    padding-left: 22px;
    padding-right: 22px;
    box-sizing: border-box;
  }
  /* small increase to the chart canvas container so right-side labels don't clip */
  #chartPre, #chartPost, #chartCompare{ padding-left: 10px; padding-right: 10px; }
}

/* Safety net: ensure POST chart never clips on very small screens */
@media (max-width: 500px){
  #screen-results-post .chart-wrap{
    overflow: visible;            /* allow labels outside canvas if any */
    transform: none;              /* remove shrink that caused tiny/blurry look */
    transform-origin: center top;
  }
}