:root{
  color-scheme: light;
  --navy-900:#0f2a52;
  --navy-800:#163a6b;
  --blue-600:#2468c0;   /* was #2a78d6 (4.42:1 on white); now 5.5:1 for text, links and borders */
  --blue-500:#3987e5;
  --seq-200:#9ec5f4;
  --seq-400:#2468c0;
  --seq-650:#104281;
  --amber-500:#eda100;
  --amber-600:#c98500;
  --amber-ink:#7a4f00;
  --amber-soft:rgba(237,161,0,0.12);
  --success:#0ca30c;
  --danger:#e34948;
  --surface:#f7f8fa;
  --card:#ffffff;
  --ink:#0b1220;
  --ink-secondary:#52586b;
  --ink-muted:#676c7c;
  --border:rgba(11,18,32,0.12);
  --border-soft:rgba(11,18,32,0.08);
  --shadow: 0 1px 2px rgba(16,24,40,0.06), 0 8px 24px -12px rgba(16,24,40,0.18);
  --focus: #2468c0;
  /* Contrast tokens: anything you can click has a visible edge (3:1+) and text at 4.5:1+ */
  --btn-bg:#2468c0;            /* fills with white text: primary buttons, selected choices (5.5:1) */
  --btn-bg-hover:#163a6b;
  --control-border:#858b9b;    /* edges of inputs, choice, score and icon buttons (3.4:1 on white) */
  --action-tint:#e9f1fc;       /* hover fill for outlined buttons */
  --pending-bg:#ddebfb;        /* empty grid cell waiting for a click */
  --pending-ink:#2468c0;
  --danger-ink:#c22f2e;        /* 5.6:1, readable red for Delete and Remove */
  --success-ink:#087a08;       /* 5.5:1, "Pro unlocked" */
  /* criteria colors: fixed order, validated for color-vision deficiency as adjacent stacked segments */
  --crit-1:#2a78d6; --crit-2:#eb6834; --crit-3:#1baf7a; --crit-4:#eda100; --crit-5:#e87ba4; --crit-6:#008300;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --navy-900:#0a1a33;
    --navy-800:#0f2547;
    --blue-600:#3987e5;
    --blue-500:#5598e7;
    --seq-200:#184f95;
    --seq-400:#2468c0;
    --seq-650:#86b6ef;
    --amber-500:#c98500;
    --amber-600:#eda100;
    --amber-ink:#f5c35c;
    --amber-soft:rgba(237,161,0,0.14);
    --success:#3fcf3f;
    --danger:#f06a69;
    --surface:#0d0e12;
    --card:#171922;
    --ink:#f4f5f7;
    --ink-secondary:#c3c6d1;
    --ink-muted:#8a8f9e;
    --border:rgba(255,255,255,0.14);
    --border-soft:rgba(255,255,255,0.08);
    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.6);
    --focus: #5598e7;
    --btn-bg:#2468c0;            /* white text 5.5:1 (the old #3987e5 was 3.6:1) */
    --btn-bg-hover:#1b56a3;
    --control-border:#737889;    /* 4.0:1 on the dark card */
    --action-tint:#1b2940;
    --pending-bg:#1c283d;
    --pending-ink:#5598e7;       /* 4.9:1 on the pending fill */
    --danger-ink:#f06a69;
    --success-ink:#3fcf3f;
    --crit-1:#3987e5; --crit-2:#d95926; --crit-3:#199e70; --crit-4:#c98500; --crit-5:#d55181; --crit-6:#008300;
  }
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
button, a, summary{ touch-action:manipulation; }
body{
  background:var(--surface);
  color:var(--ink);
  font-family:"Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
/* keep the page still behind open dialogs */
body:has(.modal-backdrop:not([hidden])){ overflow:hidden; }
h1,h2,h3,.font-display{ font-family:"Sora", system-ui, -apple-system, "Segoe UI", sans-serif; text-wrap:balance; }
img{ max-width:100%; }
[hidden]{ display:none !important; }
a{ color:var(--blue-600); }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--navy-900); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:100; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
button{ font-family:inherit; }

.wrap{ max-width:920px; margin:0 auto; }

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:18px; gap:12px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:"Sora"; font-weight:700; font-size:1.05rem; color:var(--ink); text-decoration:none; }
.brand-mark{ width:30px; height:30px; border-radius:8px; background:var(--navy-900); display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; padding:4px; flex:none; }
.brand-mark span{ border-radius:2px; background:var(--seq-200); }
.brand-mark span:nth-child(1),.brand-mark span:nth-child(4){ background:var(--blue-500); }
.site-link-pill{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--control-border); border-radius:999px; padding:8px 14px;
  font-size:0.85rem; font-weight:600; color:var(--ink-secondary); text-decoration:none;
  white-space:nowrap;
}
.site-link-pill:hover{ border-color:var(--blue-600); color:var(--blue-600); }

/* Hero */
.hero{ padding-block: 8px 28px; display:flex; flex-direction:column; gap:24px; }
.hero-media{ order:-1; }
.hero-media img{
  display:block; width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow);
  background:var(--card);
}
.eyebrow{ text-transform:uppercase; letter-spacing:0.08em; font-size:0.75rem; font-weight:700; color:var(--blue-600); margin:0 0 10px; overflow-wrap:anywhere; }
/* A long word with no spaces (a pasted link, a code) wraps instead of pushing the page sideways.
   The custom question appears in these headings, the analysis name in the eyebrow above. */
.card h2, .modal h3, .pair-flow-prompt{ overflow-wrap:anywhere; }
.problem-line{
  font-size:1.05rem; font-weight:600; color:var(--ink); margin:0 0 16px; padding:12px 16px;
  border-left:3px solid var(--blue-600); background:var(--card); border-radius:0 10px 10px 0;
  max-width:64ch; box-shadow:var(--shadow);
}
.hero h1{ font-size:clamp(1.6rem, 4vw, 2.3rem); margin:0 0 10px; color:var(--ink); }
.hero p.lede{ color:var(--ink-secondary); max-width:62ch; margin:0 0 16px; font-size:1.02rem; }
.how-toggle{
  background:var(--card); border:1px solid var(--blue-600); color:var(--blue-600);
  padding:8px 14px; border-radius:8px; font-size:0.88rem; font-weight:600; cursor:pointer;
}
.how-toggle:hover{ background:var(--action-tint); }
.how-panel{
  margin-top:14px; padding:16px 18px; background:var(--card); border:1px solid var(--border-soft);
  border-radius:12px; box-shadow:var(--shadow);
}
.how-panel ol{ margin:0; padding-left:1.2em; color:var(--ink-secondary); }
.how-panel li{ margin-bottom:6px; }
.how-panel li::marker{ font-weight:700; color:var(--blue-600); }
.video-jump-link{ display:inline-block; margin-top:12px; font-size:0.9rem; font-weight:700; }

/* Library bar (saved analyses) */
.library-bar:focus{ outline:none; }
.library-bar{
  background:var(--card); border:1px solid var(--border-soft); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow); margin-bottom:16px;
}
.lib-fields{ display:flex; flex-wrap:wrap; gap:10px 12px; }
.lib-field{ flex:1 1 260px; min-width:0; }
.lib-field-select{ flex:1 1 200px; }
.lib-field label{
  display:block; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink-muted); margin-bottom:4px;
}
.lib-field input, .lib-field select{
  width:100%; min-width:0; padding:10px 12px; border-radius:8px; border:1px solid var(--control-border);
  background:var(--surface); color:var(--ink); font-size:16px; font-family:inherit; min-height:44px;
}
.lib-field input:focus, .lib-field select:focus{ border-color:var(--blue-600); background:var(--card); }
.lib-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.lib-note{
  margin:10px 0 0; font-size:0.82rem; color:var(--ink-muted);
  display:flex; flex-wrap:wrap; gap:4px 16px;
}
.backup-status{ display:inline-flex; align-items:center; gap:6px; }
.backup-wrap{ display:inline-flex; align-items:center; gap:8px; }
.backup-status::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ink-muted); flex:none; }
.backup-status[data-state="ok"]::before{ background:var(--success); }
.backup-status[data-state="none"]::before,
.backup-status[data-state="stale"]::before{ background:var(--amber-500); }
/* Safari can clear site data after 7 days without a visit: unsaved work gets a stronger warning */
.backup-status[data-state="risk"]{ color:var(--amber-ink); font-weight:700; }
.backup-status[data-state="risk"]::before{ background:var(--danger); }
.lib-note .save-error{ color:var(--danger-ink); font-weight:700; }

/* Stepper */
.stepper-nav{ display:flex; gap:8px; margin-bottom:20px; }
.step-pill{
  flex:1; text-align:center; padding:10px 8px; border-radius:10px;
  background:var(--card); border:1px solid var(--border-soft); cursor:pointer;
  font-size:0.85rem; font-weight:700; color:var(--ink-muted);
}
.step-pill .n{ display:block; font-size:0.7rem; font-weight:700; letter-spacing:0.06em; margin-bottom:2px; }
.step-pill[data-active="true"]{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.step-pill[data-done="true"]:not([data-active="true"]){ color:var(--blue-600); border-color:var(--blue-600); }
.step-pill:not(:disabled):not([data-active="true"]):not([data-done="true"]){ border-color:var(--control-border); color:var(--ink-secondary); }
.step-pill:disabled{ cursor:not-allowed; opacity:0.55; }

/* Cards */
.card{
  background:var(--card); border:1px solid var(--border-soft); border-radius:16px;
  padding:22px; box-shadow:var(--shadow); margin-bottom:20px;
}
.card h2{ margin:0 0 4px; font-size:1.25rem; }
.card .sub{ color:var(--ink-secondary); margin:0 0 18px; font-size:0.94rem; }

/* Options list */
.option-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.option-letter{
  flex:none; width:34px; height:34px; border-radius:8px; background:var(--navy-900); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family:"Sora"; font-size:0.9rem;
}

/* Text field + inline "clear text" button */
.input-wrap{ position:relative; flex:1; min-width:0; display:flex; }
.option-row input[type="text"]{
  flex:1; width:100%; min-width:0; padding:10px 12px; border-radius:8px; border:1px solid var(--control-border);
  background:var(--surface); color:var(--ink); font-size:16px;
}
.input-wrap.has-value input[type="text"]{ padding-right:44px; }
.option-row input[type="text"]:focus{ border-color:var(--blue-600); background:var(--card); }
.clear-btn{
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; padding:0; border:none; border-radius:50%; background:transparent;
  color:var(--ink-muted); cursor:pointer;
  display:none; align-items:center; justify-content:center;
}
.clear-btn svg{ width:20px; height:20px; display:block; }
.input-wrap.has-value .clear-btn{ display:flex; }
.clear-btn:hover{ color:var(--ink-secondary); }
.clear-btn:focus-visible{ outline-offset:-4px; }

/* Remove-option (trash) button */
.icon-btn{
  flex:none; width:40px; height:40px; border-radius:8px; border:1px solid var(--control-border); background:var(--card);
  color:var(--ink-secondary); cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;
}
.icon-btn svg{ width:19px; height:19px; display:block; }
.icon-btn:hover, .icon-btn:active{ border-color:var(--danger-ink); color:var(--danger-ink); }
.options-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:9px; font-weight:700; font-size:0.92rem; min-height:44px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
}
.btn-sm{ padding:8px 14px; font-size:0.85rem; min-height:40px; }
.btn-primary{ background:var(--btn-bg); color:#fff; }
.btn-primary:hover{ background:var(--btn-bg-hover); }
.btn-primary:disabled{ background:var(--ink-muted); cursor:not-allowed; }
/* Outlined buttons: blue text and blue edge, so actions never look like fixed text */
.btn-ghost{ background:var(--card); border-color:var(--blue-600); color:var(--blue-600); }
.btn-ghost:hover{ background:var(--action-tint); }
.btn-danger-ghost{ border-color:var(--control-border); color:var(--danger-ink); }
.btn-danger-ghost:hover{ border-color:var(--danger-ink); color:var(--danger-ink); background:var(--card); }
.btn-amber{ background:var(--amber-500); color:#241900; }
.btn-amber:hover{ background:var(--amber-600); }
.btn-group{ display:flex; gap:10px; flex-wrap:wrap; }

.card-footer-actions{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:18px; }

/* Progress bar */
.progress-wrap{ margin-bottom:16px; }
.progress-labels{ display:flex; justify-content:space-between; font-size:0.85rem; color:var(--ink-secondary); margin-bottom:6px; font-weight:600; }
.progress-track{ height:8px; border-radius:999px; background:var(--surface); border:1px solid var(--border-soft); overflow:hidden; }
.progress-fill{ height:100%; background:linear-gradient(90deg, var(--seq-400), var(--blue-600)); border-radius:999px; transition:width .3s ease; }

/* Pair flow (one comparison at a time, used on narrow screens instead of the grid) */
.pair-flow{ display:none; }
.pair-flow-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.pair-nav-btn{
  width:40px; height:40px; border-radius:8px; border:1px solid var(--control-border); background:var(--card);
  color:var(--ink-secondary); font-size:1.1rem; cursor:pointer;
}
.pair-nav-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.pair-nav-btn:not(:disabled):hover{ border-color:var(--blue-600); color:var(--blue-600); }
.pair-flow-count{ font-weight:700; font-size:0.85rem; color:var(--ink-secondary); font-variant-numeric:tabular-nums; }
.pair-flow-prompt{ text-align:center; font-weight:700; font-family:"Sora"; color:var(--ink); margin:0 0 14px; font-size:1.05rem; }
.pair-choice{ margin-bottom:12px; text-align:center; font-size:1.05rem; padding:18px 16px; }
.pair-choice.tie-btn{ padding:12px 16px; font-size:0.92rem; }
.pair-flow-jump{ display:flex; flex-wrap:wrap; gap:0 2px; justify-content:center; margin-top:20px; }
/* 24px tap target with a 12px visible dot */
.pair-dot{ width:24px; height:24px; padding:0; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pair-dot::before{ content:""; width:12px; height:12px; border-radius:50%; border:1px solid var(--control-border); background:var(--card); box-sizing:border-box; }
.pair-dot.answered::before{ background:var(--blue-600); border-color:var(--blue-600); }
.pair-dot.current::before{ outline:2px solid var(--amber-500); outline-offset:2px; }

@media (max-width:700px){
  .grid-scroll{ display:none; }
  .pair-flow{ display:block; }
}

/* Grid */
.grid-scroll{ overflow:auto; border-radius:12px; border:1px solid var(--border-soft); }
table.pc-grid{ border-collapse:separate; border-spacing:0; width:100%; min-width:100%; }
table.pc-grid th, table.pc-grid td{ border-right:1px solid rgba(255,255,255,0.14); border-bottom:1px solid rgba(255,255,255,0.14); }
/* body cells: lines that show on a light card too (the white lines above were invisible there) */
table.pc-grid td.cell:not(.blocked){ border-right-color:var(--border); border-bottom-color:var(--border); }
.corner-cell{
  position:sticky; left:0; top:0; z-index:3; background:var(--navy-900); min-width:96px; width:96px;
}
th.col-head{
  position:sticky; top:0; z-index:2; background:var(--navy-900); color:#fff; padding:10px 8px;
  font-family:"Sora"; font-size:0.78rem; text-align:center; min-width:96px; max-width:120px;
}
th.col-head .letter{ display:block; font-size:1rem; margin-top:2px; }
th.row-head{
  position:sticky; left:0; z-index:1; background:var(--navy-900); color:#fff; padding:10px 10px;
  font-family:"Sora"; font-size:0.78rem; text-align:left; min-width:96px; max-width:140px;
}
th.row-head .letter{ display:block; font-size:1rem; margin-top:2px; }
.cell-label-text{ display:block; overflow-wrap:anywhere; }
td.cell{ min-width:96px; height:64px; text-align:center; padding:0; vertical-align:middle; }
td.cell.blocked{
  background: repeating-linear-gradient(135deg, var(--navy-900) 0px, var(--navy-900) 10px, var(--navy-800) 10px, var(--navy-800) 20px);
}
/* Empty cell waiting for a click: tinted slot, dashed blue edge, blue "+" */
td.cell.pending{ padding:6px; background:var(--card); }
td.cell.pending button{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-height:52px; border:1.5px dashed var(--pending-ink); border-radius:8px;
  background:var(--pending-bg); cursor:pointer; color:var(--pending-ink); font-size:1.4rem; font-weight:700; line-height:1;
}
@media (hover:hover){ td.cell.pending button:hover{ background:var(--seq-200); color:var(--navy-900); border-style:solid; } }
td.cell.answered button{
  width:100%; height:100%; min-height:64px; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:"Sora"; font-weight:700;
}
td.cell.answered.w1 button{ background:var(--seq-200); color:var(--navy-900); }
td.cell.answered.w2 button{ background:var(--seq-400); color:#fff; }
td.cell.answered.w3 button{ background:var(--seq-650); color:#fff; }
td.cell.answered.tie button{ background:var(--surface); color:var(--ink-secondary); }
td.cell.answered .win-letter{ font-size:1.2rem; }
@media (prefers-color-scheme: dark){
  td.cell.answered.w1 button{ color:#fff; }
  td.cell.answered.w3 button{ color:#0a1a33; }
  td.cell.pending button:hover, .choice-btn:hover, .choice-btn.tie-btn:hover{ color:#fff !important; }
  .choice-btn.selected, .choice-btn.tie-btn.selected{ color:#fff; }
}
td.cell.answered .win-weight{ font-size:0.68rem; font-weight:600; opacity:0.9; }

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(8,12,20,0.55); display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:50;
}
.modal{
  background:var(--card); border-radius:16px; padding:24px; max-width:420px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
  max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain;
}
@media (max-height:520px){
  .modal-backdrop{ padding:12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
  .modal{ padding:16px 18px; }
  .modal .modal-sub{ margin-bottom:10px; }
  .modal .modal-sub-tight{ margin:8px 0 6px; }
  .choice-btn{ padding:10px 14px; margin-bottom:8px; }
  .weight-row{ margin-top:8px; }
  .weight-btn{ padding:8px 6px; }
  .modal .note-field{ margin-top:8px; }
  .modal-actions{ margin-top:12px; }
}
.modal h3{ margin:0 0 4px; font-size:1.1rem; }
.modal .modal-sub{ color:var(--ink-secondary); font-size:0.88rem; margin:0 0 16px; }
.modal .modal-sub-tight{ margin:14px 0 8px; }
.choice-btn{
  display:block; width:100%; text-align:left; padding:14px 16px; margin-bottom:10px;
  border-radius:10px; border:1.5px solid var(--control-border); background:var(--surface); color:var(--ink);
  font-weight:700; font-size:0.98rem; cursor:pointer; overflow-wrap:anywhere;
}
@media (hover:hover){ .choice-btn:hover{ border-color:var(--blue-600); background:var(--seq-200); color:var(--navy-900); } }
.choice-btn.selected{ border-color:var(--btn-bg); background:var(--btn-bg); color:#fff; }
.choice-btn.tie-btn{ border-style:dashed; font-weight:700; color:var(--ink-secondary); text-align:center; }
@media (hover:hover){ .choice-btn.tie-btn:hover{ color:var(--navy-900); } }
.choice-btn.tie-btn.selected{ border-style:solid; color:#fff; }

/* Pair modal: progress line and keyboard hints (hints show only with a mouse or trackpad) */
.modal .modal-progress{ margin:0 0 8px; font-size:0.8rem; font-weight:700; color:var(--ink-muted); }
.modal .modal-progress:empty{ display:none; }
.key-hint, .key-help{ display:none; }
@media (hover:hover) and (pointer:fine){
  .choice-btn{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .choice-btn.tie-btn{ justify-content:center; }
  .key-hint{
    display:inline-block; flex:none; min-width:1.7em; padding:1px 6px; border-radius:6px; text-align:center;
    border:1px solid var(--control-border); background:var(--card); color:var(--ink-secondary);
    font:700 0.75rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .choice-btn.selected .key-hint{ border-color:rgba(255,255,255,0.6); background:transparent; color:#fff; }
  .key-help{ display:block; margin:12px 0 0; font-size:0.78rem; color:var(--ink-muted); }
}
.weight-row{ display:flex; gap:8px; margin-top:14px; }
.weight-btn{
  flex:1; padding:12px 6px; border-radius:10px; border:1.5px solid var(--control-border); background:var(--surface);
  color:var(--ink-secondary); font-weight:700; cursor:pointer; font-size:0.85rem;
}
.weight-btn small{ display:block; font-weight:500; font-size:0.68rem; margin-top:2px; }
@media (hover:hover){ .weight-btn:hover{ border-color:var(--blue-600); } }
.weight-btn.selected{ border-color:var(--btn-bg); background:var(--btn-bg); color:#fff; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* Results */
.winner-banner{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:12px;
  background:linear-gradient(135deg, var(--amber-500), var(--amber-600)); color:#241900; margin-bottom:20px;
}
.winner-banner .trophy{ font-size:1.8rem; flex:none; }
.winner-banner .wt{ font-family:"Sora"; font-weight:800; font-size:1.05rem; overflow-wrap:anywhere; }
.winner-banner .ws{ font-size:0.85rem; opacity:0.85; }

/* Verdict: plain-language summary above the bars (free, same text on every surface) */
.verdict{
  margin:0 0 20px; padding:14px 16px; border-radius:12px; background:var(--surface);
  border:1px solid var(--border-soft); border-left:4px solid var(--blue-600);
}
.verdict.is-clear{ border-left-color:var(--amber-500); }
.verdict-label{ display:block; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-muted); margin-bottom:4px; }
.verdict-text{ margin:0; font-size:0.95rem; line-height:1.55; color:var(--ink); overflow-wrap:anywhere; }

.bar-row{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.bar-rank{ flex:none; width:22px; text-align:right; font-family:"Sora"; font-weight:700; color:var(--ink-muted); font-size:0.85rem; }
.bar-name{ flex:none; width:130px; font-weight:700; font-size:0.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ display:block; flex:1; background:var(--surface); border-radius:6px; height:26px; position:relative; overflow:hidden; border:1px solid var(--border-soft); }
.bar-fill{ display:block; height:100%; border-radius:6px; background:var(--blue-600); transition:width .5s ease; }
.bar-fill.is-top{ background:linear-gradient(90deg, var(--amber-500), var(--amber-600)); }
.bar-score{ flex:none; width:74px; text-align:right; font-family:"Sora"; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bar-score small{ font-family:"Karla"; font-weight:600; font-size:0.78rem; color:var(--ink-muted); margin-left:6px; }

table.totals-table{ width:100%; border-collapse:collapse; margin-top:22px; font-size:0.92rem; }
table.totals-table th{ text-align:left; color:var(--ink-muted); font-weight:700; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; padding:8px 10px; border-bottom:1px solid var(--border); }
table.totals-table th.num{ text-align:right; }
table.totals-table td{ padding:10px 10px; border-bottom:1px solid var(--border-soft); overflow-wrap:break-word; }
/* The name column takes the space the number columns leave, and wraps inside it.
   Without this a long unbroken name (a URL, a code) stretches the table past a 320px screen. */
table.totals-table td:first-child{ width:100%; max-width:0; overflow-wrap:anywhere; }
table.totals-table th.num{ white-space:nowrap; }
.table-help{ display:none; }
table.totals-table td.num{ font-variant-numeric:tabular-nums; font-weight:700; text-align:right; white-space:nowrap; }

/* Close calls */
.close-calls{
  margin-top:22px; padding:16px 18px; border-radius:12px;
  background:var(--amber-soft); border:1px solid var(--amber-500);
}
.close-calls h3{ margin:0 0 4px; font-size:1rem; color:var(--amber-ink); }
.cc-intro{ margin:0 0 12px; font-size:0.88rem; color:var(--ink-secondary); }
.cc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.cc-item{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px;
  background:var(--card); border:1px solid var(--border-soft); border-radius:10px; padding:10px 12px;
}
.cc-text{ min-width:0; flex:1 1 220px; font-size:0.9rem; overflow-wrap:anywhere; }
.cc-text strong{ color:var(--ink); }
.cc-h2h{ display:block; font-size:0.8rem; color:var(--ink-muted); margin-top:2px; }

.nudge{
  display:flex; gap:12px; align-items:flex-start; margin-top:22px; padding:16px 18px;
  border-radius:12px; background:var(--surface); border:1px dashed var(--border);
}
.nudge .dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--blue-600); margin-top:8px; }
.nudge p{ margin:0; font-size:0.9rem; color:var(--ink-secondary); }
.nudge a{ font-weight:700; }

.empty-note{ font-size:0.85rem; color:var(--ink-muted); margin-top:10px; max-width:52ch; }

/* FAQ */
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{ border:1px solid var(--border-soft); border-radius:10px; background:var(--surface); overflow:hidden; }
.faq-item summary{
  cursor:pointer; padding:14px 16px; font-weight:700; font-family:"Sora"; font-size:0.96rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ flex:none; color:var(--ink-muted); font-size:1.1rem; transition:transform .2s ease; }
.faq-item[open] summary .chev{ transform:rotate(180deg); }
.faq-item .faq-answer{ margin:0; padding:0 16px 16px; color:var(--ink-secondary); font-size:0.92rem; }
.faq-item .faq-answer p{ margin:0 0 12px; }
.faq-item .faq-answer p:last-child{ margin-bottom:0; }

/* Video facade (click-to-load, keeps the YouTube iframe out of the page until played) */
.yt-facade{
  position:relative; aspect-ratio:16/9; max-width:480px; border-radius:12px; overflow:hidden;
  cursor:pointer; background:#000; margin:4px 0 8px; border:1px solid var(--border-soft);
}
.yt-facade img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0.82; }
.yt-facade .yt-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background:rgba(15,42,82,0.88); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; padding-left:3px;
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
}
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play{ background:var(--btn-bg); }
.yt-iframe{ width:100%; max-width:480px; aspect-ratio:16/9; border-radius:12px; border:0; display:block; margin:4px 0 8px; }
.video-caption{ font-size:0.82rem; color:var(--ink-muted); margin:0; }

/* Footer */
.site-footer{
  margin-top:32px; padding-block:28px; border-top:1px solid var(--border-soft);
}
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; align-items:flex-start; }
.footer-brand p{ color:var(--ink-secondary); font-size:0.88rem; max-width:36ch; margin:6px 0 0; }
.footer-cta{
  display:inline-flex; align-items:center; gap:8px; background:var(--navy-900); color:#fff !important;
  padding:12px 20px; border-radius:9px; font-weight:700; text-decoration:none; font-size:0.92rem; max-width:100%; text-align:center;
}
.footer-cta:hover{ background:var(--btn-bg); }
.footer-fine{ margin-top:22px; font-size:0.78rem; color:var(--ink-muted); display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:space-between; }

/* Toast */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--navy-900); color:#fff;
  padding:12px 20px; border-radius:9px; font-size:0.9rem; font-weight:600; box-shadow:var(--shadow); z-index:60;
  width:max-content; max-width:calc(100vw - 32px); text-align:center;
  bottom:calc(20px + env(safe-area-inset-bottom));
}

@media (min-width:760px){
  .hero{ flex-direction:row; align-items:center; gap:36px; }
  .hero-text{ flex:1.15; min-width:0; }
  .hero-media{ flex:0.85; order:0; min-width:0; }
}

@media (max-width:640px){
  .topbar{ flex-direction:row; }
  .site-link-pill span.long{ display:none; }
  .bar-name{ width:96px; font-size:0.8rem; }
  .bar-row{ gap:8px; }
  .step-pill{ font-size:0.75rem; padding:9px 4px; }
  .footer-grid{ flex-direction:column; }
  .card{ padding:18px 16px; }
  .option-row{ gap:8px; }
  .lib-actions .btn{ flex:1 1 calc(50% - 4px); }
}
@media (max-width:480px){
  table.totals-table{ font-size:0.86rem; }
  table.totals-table th, table.totals-table td{ padding:8px 6px; }
  table.totals-table th .tip{ display:none; }
  .table-help{ display:flex; align-items:center; gap:6px; justify-content:flex-end; margin:14px 0 -12px; font-size:0.8rem; color:var(--ink-muted); }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}


/* ---------- Phase 2: shared bits ---------- */
.label-row{ display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.label-row label{ margin-bottom:0 !important; }
.h-row{ display:flex; align-items:center; gap:8px; margin:0 0 4px; }
.h-row h2, .h-row h3{ margin:0 !important; }
.topbar-actions{ display:flex; align-items:center; gap:8px; }

/* Pro / free visibility */
body:not(.is-pro) .pro-only{ display:none !important; }
body.is-pro .free-only{ display:none !important; }

.pro-chip{
  display:inline-flex; align-items:center; justify-content:center; font-size:0.62rem; font-weight:800; letter-spacing:0.06em;
  padding:2px 6px; border-radius:5px; background:var(--amber-soft); color:var(--amber-ink); border:1px solid var(--amber-500);
  line-height:1.2; font-family:"Karla", system-ui, sans-serif; vertical-align:middle; cursor:inherit;
}
button.pro-chip{ min-height:0; cursor:pointer; }
.pro-pill{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--amber-500); background:var(--amber-soft);
  color:var(--amber-ink); border-radius:999px; padding:8px 14px; font-size:0.85rem; font-weight:700; cursor:pointer; white-space:nowrap;
}
.pro-pill:hover{ background:var(--amber-500); color:#241900; }
body.is-pro .pro-pill{ border-color:var(--success-ink); color:var(--success-ink); background:transparent; }
.question-reset{ display:inline-block; margin-top:8px; font-size:0.88rem; }
.link-btn{ background:none; border:none; padding:0; color:var(--blue-600); font-weight:700; cursor:pointer; font-size:inherit; text-decoration:underline; }
.locked-link{
  display:inline-flex; align-items:center; gap:8px; background:none; border:none; padding:6px 0; margin:2px 0 4px;
  color:var(--blue-600); font-weight:700; font-size:0.88rem; cursor:pointer;
}
.locked-link:hover{ text-decoration:underline; }
.locked-line{ font-size:0.86rem; color:var(--ink-secondary); margin:8px 0 0; }

/* Tooltips */
.tip{
  flex:none; width:22px; height:22px; min-height:0; padding:0; border-radius:50%;
  border:1px solid var(--control-border); background:var(--card); color:var(--ink-secondary);
  font-size:0.72rem; font-weight:800; line-height:1; cursor:help; font-family:"Karla", system-ui, sans-serif;
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; position:relative;
  text-transform:none; letter-spacing:0;
}
/* bigger invisible tap area without changing the look */
.tip::after{ content:""; position:absolute; inset:-8px; }
.tip:hover, .tip[aria-expanded="true"]{ border-color:var(--blue-600); color:var(--blue-600); }
.tip-bubble{
  position:fixed; z-index:80; max-width:min(280px, calc(100vw - 24px)); padding:10px 12px; border-radius:10px;
  background:var(--navy-900); color:#fff; font-size:0.84rem; font-weight:500; line-height:1.45;
  box-shadow:0 10px 30px rgba(0,0,0,0.3); pointer-events:none; text-transform:none; letter-spacing:0;
}
@media (prefers-color-scheme: dark){ .tip-bubble{ background:#f4f5f7; color:#0b1220; } }

/* Comparison question */
.question-row{ margin:0 0 16px; }
.question-row label{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-muted); }
.question-row input{
  width:100%; min-width:0; padding:10px 12px; border-radius:8px; border:1px solid var(--control-border);
  background:var(--surface); color:var(--ink); font-size:16px; font-family:inherit; min-height:44px;
}
.question-row input:focus{ border-color:var(--blue-600); background:var(--card); }
.question-row input:disabled{ opacity:0.7; cursor:not-allowed; }

/* Reason field */
.note-field{ margin:4px 0 6px; }
.note-field label{ font-size:0.78rem; font-weight:700; color:var(--ink-secondary); }
.note-field input{
  width:100%; min-width:0; padding:10px 12px; border-radius:8px; border:1px solid var(--control-border);
  background:var(--surface); color:var(--ink); font-size:16px; font-family:inherit; min-height:44px;
}
.note-field input:focus{ border-color:var(--blue-600); background:var(--card); }
.modal .note-field{ margin-top:14px; }
td.cell.has-note button{ position:relative; }
td.cell.has-note button::after{
  content:""; position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--amber-500);
}

/* Consistency */
.consistency{
  margin-top:16px; padding:16px 18px; border-radius:12px; background:var(--surface); border:1px solid var(--border-soft);
}
.consistency[data-state="ok"]{ border-color:var(--success); }
.consistency[data-state="warn"]{ border-color:var(--danger); }
.consistency h3{ font-size:1rem; }
.cons-summary{ margin:6px 0 0; font-size:0.9rem; color:var(--ink-secondary); }
.consistency .cc-list{ margin-top:12px; }
.cc-more{ font-size:0.84rem; color:var(--ink-muted); padding:2px 4px; }
#confirmBackdrop{ z-index:55; }

/* Decision record */
.decision-record{ margin-top:22px; }
.decision-record h3{ font-size:1rem; }
.memo-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:12px; }
.memo-field{ min-width:0; }
.memo-wide{ grid-column:1 / -1; }
.memo-field label{ display:block; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-muted); margin-bottom:4px; overflow-wrap:anywhere; }
.memo-field input, .memo-field textarea{
  width:100%; min-width:0; padding:10px 12px; border-radius:8px; border:1px solid var(--control-border);
  background:var(--surface); color:var(--ink); font-size:16px; font-family:inherit; min-height:44px; resize:vertical;
}
.memo-field input:focus, .memo-field textarea:focus{ border-color:var(--blue-600); background:var(--card); }
/* Logo (Pro) */
.memo-label{ display:block; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-muted); }
.logo-field .label-row{ margin-bottom:6px; }
.logo-box{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
/* White like the printed page, so a dark or transparent logo previews the way it prints */
.logo-preview{
  flex:none; display:flex; align-items:center; justify-content:center; max-width:100%;
  padding:8px 12px; border-radius:8px; background:#fff; border:1px solid var(--border);
}
.logo-preview img{ display:block; max-height:56px; max-width:min(220px, 100%); width:auto; height:auto; }
.logo-empty{ margin:0; flex:1 1 220px; min-width:0; font-size:0.86rem; color:var(--ink-secondary); }
.logo-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.logo-status{ margin:6px 0 0; font-size:0.8rem; color:var(--ink-muted); min-height:1.2em; overflow-wrap:anywhere; }

.locked-card{
  padding:16px 18px; border-radius:12px; border:1px dashed var(--amber-500); background:var(--amber-soft);
}
.locked-card h3{ margin:0 0 6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.locked-card p{ margin:0 0 12px; font-size:0.9rem; color:var(--ink-secondary); }

/* Wide modals: templates, Pro */
.modal-wide{ max-width:560px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow-y:auto; }
.template-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.template-card{
  text-align:left; padding:12px 14px; border-radius:10px; border:1.5px solid var(--control-border); background:var(--surface);
  color:var(--ink); cursor:pointer; font-family:inherit; min-width:0;
}
.template-card:hover{ border-color:var(--blue-600); }
.template-card .tc-name{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:0.94rem; margin-bottom:2px; }
.template-card .tc-blurb{ display:block; font-size:0.8rem; color:var(--ink-secondary); }
.template-card.is-blank{ border-style:dashed; }
.pro-list{ margin:0 0 14px; padding-left:1.2em; color:var(--ink-secondary); font-size:0.92rem; }
.pro-list li{ margin-bottom:6px; }
.pro-list strong{ color:var(--ink); }
.pro-note{ font-size:0.85rem; color:var(--ink-muted); margin:0 0 14px; }
.pro-buy{ width:100%; margin-bottom:16px; flex-wrap:wrap; row-gap:0; white-space:nowrap; }
.pro-buy span{ font-weight:600; opacity:0.9; white-space:normal; min-width:0; overflow-wrap:anywhere; }
.pro-refund-note{ margin:-8px 0 16px; text-align:center; }
.license-box{ border-top:1px solid var(--border-soft); padding-top:14px; }
.license-box label{ font-weight:700; font-size:0.9rem; }
.license-row{ display:flex; gap:8px; }
.license-row input{
  flex:1; min-width:0; padding:10px 12px; border-radius:8px; border:1px solid var(--control-border);
  background:var(--surface); color:var(--ink); font-size:16px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; min-height:44px;
}
.license-msg{ margin:8px 0 0; font-size:0.86rem; min-height:1.2em; }
.license-msg[data-state="ok"]{ color:var(--success-ink); font-weight:700; }
.license-msg[data-state="error"]{ color:var(--danger-ink); font-weight:700; }

@media (max-width:640px){
  .memo-grid{ grid-template-columns:minmax(0,1fr); }
  .template-grid{ grid-template-columns:minmax(0,1fr); }
  .pro-pill{ padding:7px 10px; font-size:0.78rem; }
  .license-row{ flex-direction:column; }
}
@media (max-width:380px){
  .brand{ font-size:0.95rem; }
  .pro-pill span.free-only{ font-size:0; }
  .pro-pill span.free-only::before{ content:"Pro"; font-size:0.78rem; }
}

/* ---------- Pro section on the page ---------- */
.pro-section{ border-color:var(--amber-500); scroll-margin-top:16px; }
.pro-section .eyebrow{ color:var(--amber-ink); }
.pro-layout{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:start; }
.pro-features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pro-features li{ position:relative; padding-left:24px; font-size:0.93rem; color:var(--ink-secondary); overflow-wrap:anywhere; }
.pro-features li::before{
  content:""; position:absolute; left:3px; top:0.42em; width:10px; height:10px; border-radius:3px; background:var(--amber-500);
}
.pro-features strong{ color:var(--ink); }
.pro-buy-box{
  display:flex; flex-direction:column; align-items:stretch; gap:10px; text-align:center;
  padding:18px 16px; border-radius:12px; background:var(--surface); border:1px solid var(--border-soft); min-width:0;
}
.pro-price{ margin:0; font-family:"Sora", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight:800; font-size:1.35rem; color:var(--ink); overflow-wrap:anywhere; }
.pro-box-note{ margin:0; font-size:0.85rem; color:var(--ink-secondary); overflow-wrap:anywhere; }
.pro-box-unlocked{ color:var(--success-ink); font-weight:700; }
.pro-buy-box .link-btn{ align-self:center; font-size:0.88rem; }
.pro-details{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--border-soft);
}
.pro-details h3{ margin:0 0 8px; font-size:1rem; }
.pro-details ol, .pro-details ul{ margin:0 0 10px; padding-left:1.2em; font-size:0.9rem; color:var(--ink-secondary); }
.pro-details li{ margin-bottom:4px; }
.pro-details p{ margin:0; font-size:0.86rem; color:var(--ink-muted); }
@media (max-width:640px){
  .pro-layout, .pro-details{ grid-template-columns:minmax(0,1fr); }
}


/* ---------- Criteria mode ---------- */
.crit-c1{ background:var(--crit-1); } .crit-c2{ background:var(--crit-2); } .crit-c3{ background:var(--crit-3); }
.crit-c4{ background:var(--crit-4); } .crit-c5{ background:var(--crit-5); } .crit-c6{ background:var(--crit-6); }

/* New analysis: mode choice */
.mode-switch{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:0 0 14px; }
.mode-btn{
  text-align:left; padding:12px 14px; border-radius:10px; border:1.5px solid var(--control-border); background:var(--surface);
  color:var(--ink); cursor:pointer; font-family:inherit; min-width:0;
}
.mode-btn:hover{ border-color:var(--blue-600); }
.mode-btn[aria-pressed="true"]{ border-color:var(--blue-600); box-shadow:inset 0 0 0 1px var(--blue-600); background:var(--card); }
.mode-name{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:0.94rem; margin-bottom:2px; }
.mode-blurb{ display:block; font-size:0.8rem; color:var(--ink-secondary); }

/* Setup: criteria list */
.criteria-setup{ margin-top:24px; padding-top:18px; border-top:1px solid var(--border-soft); }
.criteria-setup h3{ font-size:1.05rem; }
.criteria-setup .sub{ margin-top:4px; }
.crit-letter{ font-size:0.8rem; background:var(--navy-800); }
.criterion-row{ flex-wrap:wrap; }
.dir-select{
  flex:none; min-height:40px; padding:8px 10px; border-radius:8px; border:1px solid var(--control-border);
  background:var(--surface); color:var(--ink); font-size:16px; font-family:inherit; max-width:100%;
}
.dir-select:focus{ border-color:var(--blue-600); background:var(--card); }

/* Scoring stage */
.score-board{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
@media (min-width:760px){ .score-board{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.score-crit{ margin:0; min-width:0; border:1px solid var(--border-soft); border-radius:12px; padding:12px 14px 6px; background:var(--surface); }
.score-crit legend{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:0 4px; font-weight:700; max-width:100%; }
.score-crit-name{ font-family:"Sora", system-ui, sans-serif; font-size:0.98rem; overflow-wrap:anywhere; min-width:0; }
.crit-badge{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:24px; padding:0 6px; border-radius:6px; color:#fff; font-size:0.72rem; font-weight:800; }
.dir-tag{ font-size:0.74rem; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--border); color:var(--ink-secondary); background:var(--card); white-space:nowrap; }
.dir-tag[data-dir="lower"]{ border-color:var(--amber-500); color:var(--amber-ink); background:var(--amber-soft); }
.scale-hint{ margin:6px 0 8px; font-size:0.8rem; color:var(--ink-muted); }
.score-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 10px; padding:8px 0; border-top:1px solid var(--border-soft); }
.score-opt{ min-width:0; font-weight:600; font-size:0.9rem; overflow-wrap:anywhere; display:flex; align-items:center; gap:8px; }
.score-opt-letter{ flex:none; width:22px; height:22px; border-radius:6px; background:var(--navy-900); color:#fff; font-size:0.7rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.score-btns{ display:flex; gap:4px; }
.score-btn{
  width:40px; height:40px; padding:0; border-radius:8px; border:1.5px solid var(--control-border); background:var(--card);
  color:var(--ink-secondary); font-weight:700; font-size:0.95rem; cursor:pointer; font-family:inherit;
}
@media (hover:hover){ .score-btn:hover{ border-color:var(--blue-600); color:var(--blue-600); } }
.score-btn[aria-pressed="true"]{ background:var(--btn-bg); border-color:var(--btn-bg); color:#fff; }
@media (max-width:480px){
  .score-row{ grid-template-columns:minmax(0,1fr); }
  .score-btns .score-btn{ flex:1 1 0; width:auto; min-width:0; }
  .dir-select{ order:4; flex:1 1 100%; margin-left:42px; max-width:calc(100% - 42px); }
}

/* Results: legend and stacked bars */
.bar-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 14px; font-size:0.84rem; color:var(--ink-secondary); }
.legend-item{ display:inline-flex; align-items:center; gap:6px; min-width:0; overflow-wrap:anywhere; }
.legend-swatch{ flex:none; display:inline-block; width:10px; height:10px; border-radius:3px; }
.legend-pct{ color:var(--ink-muted); font-weight:700; font-variant-numeric:tabular-nums; }
.bar-stack{ display:flex; }
.bar-seg{ display:block; height:100%; flex:none; box-shadow:inset -2px 0 0 var(--surface); transition:width .5s ease; }
.bar-seg:first-child{ border-radius:5px 0 0 5px; }

/* Results: criteria weights + score table */
.criteria-results{ margin-top:22px; }
.criteria-results h3{ font-size:1rem; }
.cw-intro{ margin:6px 0 0; font-size:0.88rem; color:var(--ink-secondary); }
.weights-table{ margin-top:10px; }
.weights-table tfoot td{ font-weight:700; border-bottom:none; border-top:1px solid var(--border); }
.weights-table tfoot td.num{ font-variant-numeric:tabular-nums; text-align:right; }
.crit-name{ display:flex; align-items:center; gap:8px; font-weight:700; min-width:0; overflow-wrap:anywhere; }
.dir-note{ display:block; font-size:0.78rem; color:var(--ink-muted); margin-top:2px; }
.adj-note{ display:block; font-size:0.72rem; font-weight:600; color:var(--amber-ink); white-space:normal; }
.stepper{ display:inline-flex; align-items:center; gap:4px; }
.step-btn{
  width:36px; height:36px; padding:0; border-radius:8px; border:1px solid var(--control-border); background:var(--card);
  color:var(--ink-secondary); font-size:1.05rem; font-weight:700; cursor:pointer;
}
.step-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.step-btn:not(:disabled):hover{ border-color:var(--blue-600); color:var(--blue-600); }
.step-val{ min-width:24px; text-align:center; font-variant-numeric:tabular-nums; }
.weights-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.score-table-head{ margin-top:22px !important; }
.score-matrix-wrap{ overflow-x:auto; margin:10px 0 12px; border:1px solid var(--border-soft); border-radius:10px; }
table.score-matrix{ width:100%; border-collapse:collapse; font-size:0.86rem; }
table.score-matrix th, table.score-matrix td{ padding:8px 10px; border-bottom:1px solid var(--border-soft); text-align:left; }
table.score-matrix th{ font-size:0.74rem; color:var(--ink-muted); font-weight:700; vertical-align:bottom; }
table.score-matrix th.num, table.score-matrix td.num{ text-align:center; font-variant-numeric:tabular-nums; }
table.score-matrix tr:last-child td{ border-bottom:none; }
.sm-crit{ display:block; min-width:52px; overflow-wrap:break-word; }
.sm-dir{ display:block; font-size:0.9rem; }
.sm-total{ font-weight:800; }
.sm-missing{ color:var(--ink-muted); }
.missing-note{ font-size:0.74rem; font-weight:700; color:var(--amber-ink); white-space:nowrap; }

.criteria-locked h2{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:1.1rem; margin:0 0 6px; }

@media (max-width:640px){
  .mode-switch{ grid-template-columns:minmax(0,1fr); }
}
/* Criteria bars on phones: name on its own line so the stacked bar gets the full width */
@media (max-width:480px){
  #barChart.is-criteria .bar-row{ flex-wrap:wrap; row-gap:4px; }
  #barChart.is-criteria .bar-name{ flex:1 1 calc(100% - 34px); width:auto; white-space:normal; overflow-wrap:anywhere; }
  #barChart.is-criteria .bar-track{ flex:1 1 0; min-width:0; margin-left:30px; }
  .weights-table th, .weights-table td{ padding:8px 4px; }
  .dir-note{ font-size:0.72rem; }
}
@media (max-width:380px){
  .stepper-nav{ gap:4px; }
  .step-pill{ padding:8px 2px; font-size:0.72rem; }
  .step-pill .n{ font-size:0.62rem; letter-spacing:0.02em; }
  .step-btn{ width:32px; height:32px; }
  .stepper{ gap:2px; }
  .step-val{ min-width:18px; }
  .crit-name{ gap:6px; }
  .weights-table .crit-name .legend-swatch{ display:none; }   /* the chart legend above still shows each color */
}

/* ---------- Share links ---------- */

/* Share dialog */
.share-options{ display:flex; flex-direction:column; gap:8px; margin:0 0 16px; }
.check-row{
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:0.9rem; min-width:0;
}
.check-row input{ flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--blue-600); cursor:pointer; }
.check-row > span{ min-width:0; }
.check-row.is-fixed{ cursor:default; opacity:0.8; }
.check-row input:disabled{ cursor:not-allowed; }
.check-row:has(input:disabled:not(:checked)){ opacity:0.65; cursor:not-allowed; }
.check-note{ display:block; font-size:0.8rem; color:var(--ink-muted); overflow-wrap:anywhere; }
.share-link-label{ display:block; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-muted); margin-bottom:4px; }
.share-link-input{
  width:100%; min-width:0; padding:10px 12px; border-radius:8px; border:1px solid var(--control-border);
  background:var(--surface); color:var(--ink); font-size:16px; min-height:44px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}
.share-link-input:focus{ border-color:var(--blue-600); background:var(--card); }
.share-meta{ margin:6px 0 12px; font-size:0.84rem; color:var(--ink-secondary); min-height:1.3em; }
.share-warn{
  margin:0 0 14px; padding:12px 14px; border-radius:10px; background:var(--amber-soft); border:1px solid var(--amber-500);
}
.share-warn p{ margin:0 0 10px; font-size:0.86rem; color:var(--ink); }
.share-privacy{ margin:0; font-size:0.84rem; color:var(--ink-secondary); }
.share-privacy strong{ color:var(--ink); }
.share-actions{ align-items:center; flex-wrap:wrap; }
.share-preview{ margin-right:auto; font-size:0.9rem; padding:10px 0; }
.btn-primary[aria-disabled="true"]{ background:var(--ink-muted); cursor:progress; }

/* Read-only view of a shared analysis */
body.is-shared .hero,
body.is-shared .library-bar,
body.is-shared .stepper-nav,
body.is-shared #criteriaLockedCard,
body.is-shared #stage-setup,
body.is-shared #stage-compare,
body.is-shared #stage-score,
body.is-shared #stage-results{ display:none !important; }
.shared-view{ border-color:var(--blue-600); }
.shared-view h2:focus{ outline:none; }
.shared-view h2{ overflow-wrap:anywhere; }
.shared-view .sub{ overflow-wrap:anywhere; }
.shared-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 8px; }
.shared-save-note{ margin:0 0 20px; font-size:0.84rem; color:var(--ink-muted); }
.shared-basis{ margin-top:4px !important; }
.shared-record{
  margin:0 0 20px; padding:16px 18px; border-radius:12px; background:var(--surface); border:1px solid var(--border-soft);
}
.shared-record h3{ margin:0 0 10px; font-size:1rem; }
.shared-meta{ display:flex; flex-wrap:wrap; gap:8px 24px; margin:0 0 10px; }
.shared-meta div{ min-width:0; }
.shared-meta dt{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-muted); }
.shared-meta dd{ margin:0; font-weight:700; overflow-wrap:anywhere; }
.shared-block{ margin-top:10px; }
.shared-block h4{ margin:0 0 2px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-muted); font-family:"Karla", system-ui, sans-serif; }
.shared-block p{ margin:0; font-size:0.92rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.shared-pairs{ margin-top:22px; }
.shared-pairs h3{ margin:0; font-size:1rem; }
.shared-pairs .cw-intro{ margin:4px 0 12px; }
.shared-view .criteria-results h3{ margin:0; }
.shared-view .score-table-head{ margin:22px 0 0 !important; }
.shared-privacy{ margin:22px 0 0; font-size:0.86rem; color:var(--ink-secondary); }
.shared-privacy strong{ color:var(--ink); }
.shared-made{ margin:10px 0 0; font-size:0.8rem; color:var(--ink-muted); }
.shared-made a{ font-weight:700; }
@media (max-width:480px){
  .shared-actions .btn{ flex:1 1 100%; }
  .shared-bars.is-criteria .bar-row{ flex-wrap:wrap; row-gap:4px; }
  .shared-bars.is-criteria .bar-name{ flex:1 1 calc(100% - 34px); width:auto; white-space:normal; overflow-wrap:anywhere; }
  .shared-bars.is-criteria .bar-track{ flex:1 1 0; min-width:0; margin-left:30px; }
  .share-actions .btn{ flex:1 1 auto; }
}

/* Print */
#print-report{ display:none; }
@media print{
  html, body{ -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
  body{ background:#fff; color:#000; padding:0; }
  .topbar, .hero, .library-bar, .stepper-nav, #stage-setup, #stage-compare, #stage-score, #stage-results, #criteriaLockedCard, .pro-section, .faq-section, .site-footer, .how-panel, .icon-btn, .toast, .modal-backdrop, .tip-bubble{ display:none !important; }
  .card{ box-shadow:none; border:none; padding:0; }
  #print-report{ display:block; }
  /* A shared link prints its own read-only view, not the viewer's analysis */
  body.is-shared #print-report, .shared-actions, .shared-save-note{ display:none !important; }
  /* A long unbroken word would make the browser shrink the whole memo to fit it */
  #print-report, #print-report *{ overflow-wrap:anywhere; }
  #print-report h1{ font-size:1.4rem; margin-bottom:2px; }
  #print-report .pbrand{ display:flex; align-items:center; gap:14px; margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid #ccc; break-inside:avoid; }
  #print-report .pbrand[hidden]{ display:none !important; }
  #print-report .pbrand img{ display:block; flex:none; max-height:60px; max-width:220px; width:auto; height:auto; }
  #print-report .pbrand span{ font-weight:700; font-size:1.05rem; color:#000; overflow-wrap:anywhere; min-width:0; }
  #print-report h2{ font-size:1.05rem; margin:22px 0 10px; break-after:avoid; page-break-after:avoid; }
  #print-report .meta{ color:#444; font-size:0.85rem; margin-bottom:18px; }
  #print-report table{ width:100%; border-collapse:collapse; margin-bottom:20px; font-size:0.82rem; }
  #print-report th, #print-report td{ border:1px solid #999; padding:6px 8px; text-align:left; }
  #print-report td.num{ text-align:right; font-variant-numeric:tabular-nums; }
  #print-report td.x{ background:#e5e5e5; }
  #print-report .pfoot{ margin-top:24px; font-size:0.78rem; color:#555; border-top:1px solid #ccc; padding-top:10px; }
  #print-report .pcc{ border:1px solid #c98500; background:#fff7e0; padding:10px 12px; margin-bottom:20px; font-size:0.85rem; break-inside:avoid; }
  #print-report .pcc h3{ margin:0 0 6px; font-size:0.95rem; }
  #print-report .pcc ul{ margin:0; padding-left:1.2em; }

  #print-report .verdict{ border:1px solid #999; border-left:4px solid #2a78d6; background:#f3f7fd; padding:10px 12px; margin:0 0 16px; break-inside:avoid; }
  #print-report .verdict.is-clear{ border-left-color:#eda100; background:#fff7e0; }
  #print-report .verdict-label{ display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:#555; font-weight:700; margin-bottom:3px; }
  #print-report .verdict-text{ margin:0; font-size:0.9rem; line-height:1.45; color:#000; }
  #print-report .pbar-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; break-inside:avoid; }
  #print-report .pbar-rank{ flex:none; width:16px; text-align:right; font-weight:700; font-size:0.8rem; color:#555; }
  #print-report .pbar-name{ flex:none; width:150px; font-weight:700; font-size:0.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #print-report .pbar-track{ flex:1; background:#eee; border:1px solid #ccc; border-radius:4px; height:16px; position:relative; overflow:hidden; }
  #print-report .pbar-fill{ display:block; height:100%; background:#2a78d6; }
  #print-report .pbar-fill.is-top{ background:#eda100; }
  #print-report .pbar-score{ flex:none; width:64px; text-align:right; font-weight:700; font-size:0.82rem; white-space:nowrap; }
  #print-report .memo-meta{ display:flex; flex-wrap:wrap; gap:4px 18px; font-size:0.85rem; margin:0 0 14px; color:#222; }
  #print-report .memo-meta strong{ color:#000; }
  #print-report .memo-block{ margin:0 0 12px; font-size:0.9rem; break-inside:avoid; }
  #print-report .memo-block h3{ margin:0 0 4px; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; color:#555; }
  #print-report .memo-block p{ margin:0; white-space:pre-wrap; }
  #print-report .memo-callout{ border:2px solid #eda100; background:#fff7e0; padding:12px 14px; margin:0 0 16px; break-inside:avoid; }
  #print-report .memo-callout .mc-label{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:#7a4f00; font-weight:700; }
  #print-report .memo-callout .mc-top{ font-size:1.15rem; font-weight:800; margin:2px 0 6px; }
  #print-report .memo-callout p{ margin:0; white-space:pre-wrap; }
  #print-report .pcons{ border:1px solid #999; padding:10px 12px; margin-bottom:20px; font-size:0.85rem; break-inside:avoid; }
  #print-report .pcons.warn{ border-color:#c0392b; background:#fdecea; }
  #print-report .pcons h3{ margin:0 0 6px; font-size:0.95rem; }
  #print-report .pcons ul{ margin:6px 0 0; padding-left:1.2em; }
  #print-report tr{ break-inside:avoid; }
  #print-report .plegend{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:0.8rem; margin:0 0 10px; }
  #print-report .pswatch{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
  #print-report .pbar-stack{ display:flex; }
  #print-report .pbar-seg{ display:block; height:100%; flex:none; box-shadow:inset -1px 0 0 #fff; }
  #print-report .pnote{ font-size:0.78rem; color:#555; margin:-12px 0 16px; }
}