/* spring-vow-kit.css — mid-century brand kit. Flat, hairline, legible. No glow/blur/gradient. */
/* Tokens on :root so body-appended portals (the detail modal) inherit them too. */
:root, .spring-vow-nl, .sv-scope {
  --sv-bone:#EFE6D2; --sv-paper:#F7F1E4; --sv-ink:#17150F; --sv-char:#2B2823; --sv-soft:#6E675A;
  --sv-spring:#0E8E68; --sv-spring-br:#19B584; --sv-rust:#C8452E; --sv-gold:#E3A92B; --sv-navy:#1C3A4B; --sv-line:#D8CDB4;
  --sv-disp:'Toronto Subway','Arial Narrow',sans-serif;
  --sv-body:'Inter',system-ui,sans-serif;
  --sv-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* section furniture */
.sv-sec-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 26px;padding-top:12px;border-top:2px solid var(--sv-ink)}
.sv-sec-head h2{font-family:var(--sv-disp);font-weight:700;font-size:24px;letter-spacing:.03em;text-transform:uppercase;margin:0;color:var(--sv-ink)}
.sv-sec-head .sv-n{font-family:var(--sv-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sv-soft)}
.sv-kicker{font-family:var(--sv-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--sv-rust);display:flex;align-items:center;gap:12px}
.sv-kicker::before{content:"";width:32px;height:2px;background:var(--sv-rust)}

/* transit devices */
.sv-bullet{width:11px;height:11px;border-radius:50%;background:var(--sv-spring);flex:none;display:inline-block}
.sv-line-tag{font-family:var(--sv-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--sv-rust);border:1.5px solid var(--sv-rust);padding:2px 6px}
.sv-diagram{display:flex;align-items:center;gap:0;margin-top:22px}
.sv-diagram .sv-seg{height:5px;flex:1;background:var(--sv-ink)}
.sv-diagram .sv-stop{width:14px;height:14px;border-radius:50%;border:3px solid var(--sv-ink);background:var(--sv-bone);flex:none;margin:0 -2px;position:relative;z-index:2}
.sv-diagram .sv-stop.is-on{background:var(--sv-spring)}

/* button / ticket */
.sv-ticket{font-family:var(--sv-disp);font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--sv-ink);
  background:transparent;border:2px solid var(--sv-ink);padding:6px 14px;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s;text-decoration:none;display:inline-block}
.sv-ticket:hover{background:var(--sv-ink);color:var(--sv-bone)}
.sv-btn-solid{font-family:var(--sv-disp);text-transform:uppercase;letter-spacing:.06em;font-size:15px;color:var(--sv-bone);
  background:var(--sv-ink);border:0;padding:0 30px;cursor:pointer;transition:background .15s}
.sv-btn-solid:hover{background:var(--sv-spring)}

/* chip */
.sv-chip{display:inline-flex;align-items:center;gap:9px;font-family:var(--sv-mono);font-size:12px;letter-spacing:.03em;
  padding:6px 9px 6px 13px;border:1.5px solid var(--sv-ink);background:var(--sv-paper);color:var(--sv-ink)}
.sv-chip__x{width:16px;height:16px;display:grid;place-items:center;background:var(--sv-ink);color:var(--sv-bone);border-radius:50%;font-size:10px;cursor:pointer;border:0}
.sv-chip--area{background:var(--sv-spring);border-color:var(--sv-ink);color:#fff}
.sv-chip--area .sv-chip__x{background:#fff;color:var(--sv-spring)}
.sv-chip--soon{border-style:dashed;border-color:#b6ab92;color:#9a8f78;background:transparent}

/* card */
.sv-card{border:2px solid var(--sv-ink);background:var(--sv-paper);display:flex;flex-direction:column;cursor:pointer;transition:transform .15s;text-decoration:none;color:inherit}
.sv-card:hover{transform:translateY(-3px)}
.sv-card__top{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:2px solid var(--sv-ink)}
.sv-card__station{font-family:var(--sv-disp);font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--sv-ink)}
.sv-card__top .sv-line-tag{margin-left:auto}
.sv-photo{position:relative;aspect-ratio:16/10;border-bottom:2px solid var(--sv-ink);overflow:hidden;background:var(--sv-navy)}
.sv-photo img{display:block;width:100%;height:100%;object-fit:cover}
.sv-photo--empty{background:var(--sv-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='400' height='250' fill='%231C3A4B'/%3E%3Ccircle cx='312' cy='85' r='30' fill='%23E3A92B'/%3E%3Cline x1='0' y1='50' x2='400' y2='50' stroke='%2319B584' stroke-width='4'/%3E%3Ccircle cx='200' cy='50' r='8' fill='%231C3A4B' stroke='%2319B584' stroke-width='4'/%3E%3Cpath d='M-12 250 L-12 150 L20 120 L52 150 L52 250 Z M60 250 L60 140 L96 108 L132 140 L132 250 Z M140 250 L140 160 L170 132 L200 160 L200 250 Z M208 250 L208 138 L246 106 L284 138 L284 250 Z M292 250 L292 158 L324 128 L356 158 L356 250 Z M364 250 L364 146 L400 116 L436 146 L436 250 Z' fill='%2317150F'/%3E%3C/svg%3E") center/cover no-repeat}
.sv-photo__flag{position:absolute;top:10px;left:10px;font-family:var(--sv-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--sv-ink);background:var(--sv-gold);padding:3px 8px}
.sv-photo__note{position:absolute;bottom:7px;right:9px;font-family:var(--sv-mono);font-size:8px;letter-spacing:.08em;color:rgba(247,241,228,.85)}
.sv-card__plate{padding:15px 16px 4px}
.sv-price{font-family:var(--sv-disp);font-size:34px;line-height:.95;letter-spacing:.01em;color:var(--sv-ink);font-variant-numeric:tabular-nums}
.sv-card__addr{font-family:var(--sv-body);font-weight:700;font-size:15px;color:var(--sv-ink);margin-top:4px}
.sv-spec{font-family:var(--sv-mono);font-size:11px;letter-spacing:.02em;color:var(--sv-soft);margin-top:11px;padding-top:11px;border-top:1.5px solid var(--sv-line);display:flex;gap:8px;flex-wrap:wrap}
.sv-spec i{font-style:normal;color:var(--sv-ink)}
.sv-card__foot{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 15px;margin-top:auto}
.sv-brk{font-family:var(--sv-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--sv-soft);max-width:54%}

/* focus visibility — covers focusable descendants incl. the card anchor */
.spring-vow-nl :focus-visible{outline:2px solid var(--sv-ink);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.sv-card:hover{transform:none}}

/* --- CMA --- */
.sv-cma{max-width:820px;margin:0 auto;padding:2rem 1rem}
.sv-cma__band{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0}
.sv-cma__scenario{border:1px solid var(--sv-line);padding:1rem;text-align:center;border-radius:2px}
.sv-cma__scenario--target{border-width:2px;border-color:var(--sv-rust)}
.sv-cma__label{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.sv-cma__val{display:block;font-size:1.4rem;font-weight:600;margin-top:.25rem}
.sv-cma__comp{border-left:3px solid var(--sv-line);padding:.75rem 1rem;margin:.5rem 0}
.sv-cma__comp--anchor{border-left-color:var(--sv-rust)}
.sv-cma__comp-price{font-weight:600}
.sv-cma__comp-meta{font-size:.85rem;opacity:.75}
.sv-cma__comp-why{font-size:.8rem;opacity:.6;margin-top:.25rem}
.sv-cma-panel{border:1px solid var(--sv-line);padding:1rem;border-radius:2px;margin:1rem 0}