/* ReplaSurvey — the page your customers see.
   Defaults come from the Repla family tokens. Each scorecard can override the
   three brand colours, injected as inline custom properties on :root, so an
   account can look like itself rather than like us. */

:root{
  --paper:#F6F7FB;            /* --rp-bg */
  --paper-raised:#FFFFFF;     /* --rp-surface */
  --ink:#171A2B;              /* --rp-text */
  --ink-soft:#5A6280;         /* --rp-text-2 */
  --muted:#8A90A8;            /* --rp-text-3, labels and timestamps only */
  --line:#E5E8F0;             /* --rp-border */
  --line-strong:#D3D8E6;      /* --rp-border-2 */
  --accent:#0094F3;           /* --rp-accent: decoration, never under words */
  --accent-strong:#006CB4;    /* --rp-accent-strong: words sit here */
  --accent-ink:#FFFFFF;
  --accent-tint:#F1F8FF;      /* --rp-accent-soft */
  --track:#E5E8F0;
  --focus:#006CB4;
  --shadow:0 1px 2px rgba(20,22,43,.05), 0 4px 16px rgba(20,22,43,.06);
  --radius-lg:12px; --radius-md:12px; --radius-sm:8px;
  --display:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper); color:var(--ink); font-family:var(--body);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh;
}
h1,h2,h3{ font-family:var(--display); font-weight:640; letter-spacing:-.015em; color:var(--ink); text-wrap:balance; margin:0; }
a{ color:var(--accent-strong); }
button{ font-family:inherit; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.shell{ max-width:900px; margin:0 auto; padding:28px 20px 64px; }
.brand-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
.brand{
  display:flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:600; font-size:15px; color:var(--ink-soft); text-decoration:none;
}
.brand img{ max-height:34px; width:auto; display:block; }
.brand-mark{ width:24px; height:24px; flex:0 0 auto; display:block; color:var(--accent); }
.pill{
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 12px; white-space:nowrap;
}

.rail{ height:6px; border-radius:999px; background:var(--track); overflow:hidden; margin:0 0 28px; }
.rail-fill{ height:100%; background:var(--accent); border-radius:999px; transition:width .35s ease; width:0%; }

.card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:40px 36px;
}
@media (max-width:560px){ .card{ padding:26px 20px; } .shell{ padding:20px 16px 56px; } }

.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent-strong); margin:0 0 10px;
}
.lede{ color:var(--ink-soft); font-size:16.5px; margin-top:14px; max-width:56ch; }
.meta-row{ display:flex; gap:20px; flex-wrap:wrap; margin-top:24px; }
.meta{ font-size:13.5px; color:var(--muted); }
.meta b{ display:block; font-family:var(--display); font-size:19px; color:var(--ink); font-weight:600; }

.q-count{ color:var(--muted); font-size:13px; font-weight:600; margin-bottom:10px; }
.q-cat{ color:var(--muted); font-size:13px; font-weight:600; margin-bottom:6px; }
.q-text{ font-family:var(--display); font-weight:500; font-size:25px; line-height:1.32; margin:4px 0 10px; text-wrap:balance; }
@media (max-width:560px){ .q-text{ font-size:21px; } }
.q-help{ color:var(--muted); font-size:14px; margin:0 0 22px; }

.options{ display:flex; flex-direction:column; gap:10px; }
.option{
  text-align:left; display:flex; align-items:center; gap:14px; padding:15px 18px;
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--paper);
  color:var(--ink); font-size:15.5px; cursor:pointer; width:100%;
  transition:border-color .15s ease, background .15s ease;
}
.option:hover{ border-color:var(--line-strong); }
.option:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.option .dot{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--line-strong); display:grid; place-items:center;
}
.option .dot.square{ border-radius:6px; }
.option .dot::after{
  content:""; width:10px; height:10px; border-radius:50%; background:var(--accent);
  opacity:0; transform:scale(.4); transition:all .12s ease;
}
.option .dot.square::after{ border-radius:2px; }
.option.selected{ border-color:var(--accent); background:var(--accent-tint); }
.option.selected .dot{ border-color:var(--accent); }
.option.selected .dot::after{ opacity:1; transform:scale(1); }

.scale-wrap{ margin-top:8px; }
.scale-row{ display:flex; gap:7px; flex-wrap:wrap; }
.scale-btn{
  flex:1 1 44px; min-width:44px; height:48px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  font-size:15px; font-weight:600; cursor:pointer; font-variant-numeric:tabular-nums;
}
.scale-btn:hover{ border-color:var(--line-strong); }
.scale-btn.selected{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.scale-ends{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-top:8px; }

textarea, input[type=text], input[type=email], input[type=tel]{
  width:100%; font-family:inherit; font-size:15.5px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-md); padding:13px 16px; line-height:1.5;
}
textarea{ resize:vertical; min-height:104px; }
textarea:focus-visible, input:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
label.fl{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin:0 0 8px; }
.field{ margin-bottom:20px; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); }
.consent input{ margin-top:3px; accent-color:var(--accent); }

.btn-row{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; align-items:center; }
.btn{
  appearance:none; border:none; cursor:pointer; border-radius:999px; font-weight:700; font-size:15px;
  padding:13px 26px; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  transition:transform .08s ease, opacity .12s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent-strong); color:var(--accent-ink); }
.btn-primary:disabled{ opacity:.4; cursor:not-allowed; }
.btn-ghost{ background:transparent; color:var(--ink-soft); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--line-strong); }

/* ---------- shared answer scale ---------- */
.scale-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); gap:9px; margin-top:14px;
}
@media (max-width:640px){ .scale-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:380px){ .scale-grid{ grid-template-columns:1fr; } }
.scale-card{
  display:flex; flex-direction:column; gap:5px; text-align:left;
  padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--paper); color:var(--ink); cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.scale-card:hover{ border-color:var(--line-strong); }
.scale-card:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.scale-label{ font-size:14.5px; font-weight:700; line-height:1.25; }
.scale-hint{ font-size:12.5px; color:var(--muted); line-height:1.35; }
.scale-card.selected{ border-color:var(--accent); background:var(--accent-tint); }
.scale-card.selected .scale-hint{ color:var(--ink-soft); }

/* ---------- a page per category ---------- */
.q-block{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:24px 26px; margin-top:14px;
}
@media (max-width:560px){ .q-block{ padding:20px 16px; } }
.q-head{ display:flex; gap:13px; align-items:flex-start; }
.q-num{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; margin-top:1px;
  background:var(--track); color:var(--muted); display:grid; place-items:center;
  font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
.q-title{ font-size:17px; font-weight:600; line-height:1.35; color:var(--ink); }
.q-head .q-help{ margin:5px 0 0; }

.page-foot{
  position:sticky; bottom:0; z-index:5; margin-top:18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 18px; border-radius:var(--radius-lg);
  background:var(--paper-raised); border:1px solid var(--line); box-shadow:var(--shadow);
}
.foot-count{ font-size:13.5px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.nav-row{ margin-top:22px; }

/* ---------- results ---------- */
.hero-chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.grade-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-strong); color:var(--accent-ink);
  border-radius:999px; padding:5px 15px 5px 12px; font-size:13px; font-weight:600;
}
.grade-badge b{ font-family:var(--display); font-size:19px; font-weight:700; line-height:1; }
.pct-chip{
  font-size:13px; font-weight:700; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:5px 13px;
  font-variant-numeric:tabular-nums;
}

.card + .card{ margin-top:16px; }
.sec-head{ font-family:var(--display); font-size:20px; font-weight:600; margin:0 0 4px; }
.sec-head-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.sec-meta{ font-size:13px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.sec-note{ font-size:13.5px; color:var(--muted); margin:2px 0 18px; max-width:64ch; }

.bottleneck{ border-color:var(--accent); background:var(--accent-tint); }
.bn-head{ font-family:var(--display); font-size:23px; line-height:1.28; margin:0 0 10px; }
.bn-body{ color:var(--ink-soft); font-size:15.5px; margin:0; max-width:64ch; }
.bn-note{
  margin:14px 0 0; padding-top:14px; border-top:1px solid var(--accent);
  color:var(--ink); font-size:15px; max-width:64ch;
}

.area-split{ display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:center; margin-top:14px; }
@media (max-width:860px){ .area-split{ grid-template-columns:1fr; gap:8px; } }
.radar{ width:100%; max-width:320px; margin:0 auto; }
/* Clipped, not visible: a stray label must never overlap the bars beside it. */
.radar-svg{ width:100%; height:auto; display:block; overflow:hidden; }
/* Inside the split the name column has less room, so let it flex. */
.area-split .cat-row{ grid-template-columns:minmax(96px,1.1fr) minmax(70px,1.4fr) auto; gap:12px; }
.radar-ring{ fill:none; stroke:var(--line); stroke-width:1; }
.radar-spoke{ stroke:var(--line); stroke-width:1; }
.radar-shape{ fill:var(--accent); fill-opacity:.22; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; }
.radar-dot{ fill:var(--accent); stroke:var(--paper-raised); stroke-width:1.5; }
.radar-label{ font-family:var(--body); font-size:11.5px; font-weight:600; fill:var(--ink-soft); }
.radar-value{ font-family:var(--body); font-size:11.5px; font-weight:700; fill:var(--accent-strong); }

.mini-grade{
  display:inline-block; margin-right:7px; font-weight:700; color:var(--ink-soft);
  font-family:var(--display); font-size:13px;
}

.matrix{ list-style:none; margin:0; padding:0; counter-reset:mx; }
.mx-item{ display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line); }
.mx-item:first-child{ border-top:none; padding-top:4px; }
.mx-num{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; margin-top:2px;
  background:var(--accent-strong); color:var(--accent-ink); display:grid; place-items:center;
  font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
.mx-main{ flex:1; min-width:0; }
.mx-title{ font-size:15.5px; font-weight:600; line-height:1.4; color:var(--ink); }
.mx-sub{ font-size:13px; color:var(--muted); margin:4px 0 0; }
.mx-why{ font-size:13.5px; color:var(--ink-soft); margin:7px 0 0; max-width:62ch; }
.mx-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; border-radius:999px; padding:3px 10px;
  background:var(--track); color:var(--muted); white-space:nowrap;
}
.tag em{ font-style:normal; opacity:.75; }
.tag b{ font-weight:700; }
.tag-impact.tag-high{ background:#ECFDF5; color:#047857; }
.tag-impact.tag-medium{ background:#F6F7FB; color:#5A6280; }
.tag-effort.tag-low{ background:#ECFDF5; color:#047857; }
.tag-effort.tag-high{ background:#FFFBEB; color:#B45309; }
.tag-time{ background:transparent; border:1px solid var(--line); }

.score-hero{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.donut{ flex:0 0 auto; position:relative; width:148px; height:148px; }
.donut svg{ width:100%; height:100%; transform:rotate(-90deg); }
.donut-track{ fill:none; stroke:var(--track); stroke-width:13; }
.donut-fill{ fill:none; stroke:var(--accent); stroke-width:13; stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.donut-label{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; line-height:1.1;
}
.donut-num{ font-family:var(--display); font-weight:700; font-size:34px; font-variant-numeric:tabular-nums; }
.donut-of{ font-size:12.5px; color:var(--muted); font-weight:600; }
.hero-copy{ flex:1; min-width:230px; }
.band-pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--accent-tint); color:var(--accent-strong);
  border-radius:999px; padding:7px 16px; font-weight:700; font-size:14px; margin-bottom:10px;
}
.band-head{ font-size:26px; line-height:1.25; }
.band-copy{ color:var(--ink-soft); font-size:16px; max-width:58ch; margin-top:10px; }

.cat-row{ display:grid; grid-template-columns:200px 1fr 62px; align-items:center; gap:16px; padding:12px 0; }
@media (max-width:560px){ .cat-row{ grid-template-columns:1fr; gap:6px; } }
.cat-name{ font-size:14.5px; font-weight:600; color:var(--ink-soft); }
.cat-name .flag{
  display:inline-block; margin-left:8px; font-size:10.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--accent-strong); border:1px solid var(--accent);
  border-radius:999px; padding:2px 8px; vertical-align:middle;
}
.cat-bar{ height:10px; border-radius:999px; background:var(--track); overflow:hidden; }
.cat-bar-fill{ height:100%; border-radius:999px; background:var(--accent); transition:width .8s ease; }
.cat-score{ font-variant-numeric:tabular-nums; font-size:13.5px; color:var(--muted); text-align:right; }

.priority{ background:var(--accent-tint); border-color:var(--accent); }
.priority p{ margin:0; color:var(--ink); font-size:15px; }

.recap-item{ margin-bottom:16px; }
.recap-item .cq{ font-size:13.5px; font-weight:600; color:var(--muted); margin-bottom:4px; }
.recap-item .ca{ font-size:15px; color:var(--ink); }
.recap-item .ca.empty{ color:var(--muted); font-style:italic; }

.cta-card{ text-align:center; }

footer.note{ max-width:900px; margin:18px auto 0; padding:0 20px; color:var(--muted); font-size:12.5px; }
footer.note a{ color:var(--muted); text-decoration:underline; }

.err{ color:#B91C1C; font-size:13.5px; margin-top:10px; font-weight:600; }
.hidden{ display:none !important; }

/* ---------- the 30-day plan ---------- */
.weeks{ display:grid; gap:12px; margin-top:16px; }
.week{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.week-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:11px 16px; background:var(--accent-tint); border-bottom:1px solid var(--line);
}
.week-n{ font-weight:700; font-size:13px; color:var(--accent-strong); }
.week-focus{ flex:1; font-size:14.5px; font-weight:600; color:var(--ink); }
.week-time{ font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.week-items{ list-style:none; margin:0; padding:12px 16px; display:grid; gap:9px; }
.week-items li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.45; }
.tick{
  flex:0 0 auto; width:15px; height:15px; margin-top:3px;
  border:1.5px solid var(--line-strong); border-radius:4px;
}

.save-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; }
.save-hint{ font-size:12.5px; color:var(--muted); }

/* ---------- printing, which is also how a PDF gets made ---------- */
@media print{
  @page{ margin:14mm; }
  html,body{ background:#fff !important; }
  .no-print, .rail, .pill{ display:none !important; }
  .shell{ max-width:none; padding:0; }
  .card, .week, .q-block{
    box-shadow:none !important;
    border:1px solid #ccc !important;
    break-inside:avoid; page-break-inside:avoid;
  }
  .card{ margin-bottom:10px; padding:16px 18px; }
  .mx-item, .cat-row, .week{ break-inside:avoid; page-break-inside:avoid; }
  .sec-head, .bn-head, .band-head{ break-after:avoid; page-break-after:avoid; }
  /* Bars and the donut are drawn with colour; keep it when printing. */
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:10px; color:#666; }
}