:root {
  color-scheme: light;
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --line: #e4e7ef;
  --text: #0f1729;
  --text-2: #4a5468;
  --muted: #6b7489;
  --brand: #1f4fd1;
  --brand-2: #4f7cff;
  --brand-soft: #e8eeff;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --good: #0f8a5f;
  --good-soft: #e3f6ee;
  --warn: #b25e00;
  --warn-soft: #fff3e0;
  --bad: #c62f2f;
  --bad-soft: #fde8e8;
  --shadow: 0 1px 2px rgba(15, 23, 41, .04), 0 8px 24px rgba(15, 23, 41, .06);
  --radius: 16px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c111c; --surface: #141b2a; --surface-2: #192234; --line: #263149;
  --text: #edf1f9; --text-2: #b9c2d6; --muted: #8b96ad;
  --brand: #6d8dff; --brand-2: #8ea6ff; --brand-soft: #1c2747;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70;
  --good: #3ccf91; --good-soft: #10291f; --warn: #f0a649; --warn-soft: #2d2010;
  --bad: #f17171; --bad-soft: #2f1517;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h3 { font-size: 1.02rem; font-weight: 700; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: .82rem; margin: 10px 0 0; }
[hidden] { display: none !important; }
b, .emi, td, .stats b { font-variant-numeric: tabular-nums; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 800; font-size: 1.05rem; }
.brand-accent { color: var(--brand); }
.brand small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted); }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 1.2rem;
  background: linear-gradient(135deg, #1f4fd1, #4f7cff); box-shadow: 0 4px 12px rgba(31, 79, 209, .35); }
.topnav { display: flex; align-items: center; gap: 4px; }
.topnav a { text-decoration: none; color: var(--text-2); font-weight: 600; font-size: .9rem; padding: 8px 12px; border-radius: 8px; }
.topnav a:hover { background: var(--brand-soft); color: var(--brand); }
.icon-btn { position: relative; border: 1px solid var(--line); background: var(--surface); color: var(--text); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; }

/* Theme toggle: the sun (light) and moon (dark) swap with a turn and fade. */
.theme-icon { position: absolute; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .25s; }
.theme-icon.moon { opacity: 0; transform: rotate(-90deg) scale(.4); }
:root[data-theme="dark"] .theme-icon.sun { opacity: 0; transform: rotate(90deg) scale(.4); }
:root[data-theme="dark"] .theme-icon.moon { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .theme-icon { transition: opacity .15s; } }

/* Loan type bar */
.typebar { position: sticky; top: 60px; z-index: 15; background: var(--bg); border-bottom: 1px solid var(--line); }
.types { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.types::-webkit-scrollbar { display: none; }
/* Edge fades and arrows hint that more items (loan types, tool tabs) sit off-screen. */
.scroller { position: relative; }
.scroller [data-scroll-row] { scroll-behavior: smooth; }
.scroller::before, .scroller::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 56px; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .15s; }
.scroller::before { left: 0; background: linear-gradient(to right, var(--bg) 25%, transparent); }
.scroller::after { right: 0; background: linear-gradient(to left, var(--bg) 25%, transparent); }
.scroller.can-left::before, .scroller.can-right::after { opacity: 1; }
.scroller-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 700 1.2rem/1 var(--font); cursor: pointer;
  display: grid; place-items: center; padding: 0 0 3px; box-shadow: var(--shadow); }
.scroller-arrow:hover { border-color: var(--brand-2); color: var(--brand); }
.scroller-arrow[data-dir="-1"] { left: 0; }
.scroller-arrow[data-dir="1"] { right: 0; }
@media (hover: none) { .scroller-arrow { display: none; } }
.type { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-2); font: 600 .88rem var(--font); cursor: pointer; white-space: nowrap; }
.type:hover { border-color: var(--brand-2); color: var(--text); }
.type.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(31, 79, 209, .3); }

/* Hero */
.hero { display: flex; align-items: center; gap: 16px; padding: 28px 0 20px; }
.hero-icon { width: 56px; height: 56px; flex: none; border-radius: 16px; display: grid; place-items: center; font-size: 1.8rem;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero h1 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
.hero p { margin: 4px 0 0; color: var(--text-2); }

/* Layout */
.layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; }
.layout > * { min-width: 0; }
@media (max-width: 960px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.card h3 { margin-bottom: 12px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.card-head h3 { margin: 0; }
.card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 16px; }
.inputs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inputs-head .card-title { margin: 0; }
.head-actions { display: flex; gap: 6px; }
.btn.small { padding: 5px 10px; font-size: .78rem; border-radius: 8px; }
.saved-note { font-size: .75rem; color: var(--muted); margin: 6px 0 16px; min-height: 1em; }
.empty-state { display: none; text-align: center; padding: 40px 20px; }
.empty-state h3 { margin-bottom: 6px; }
.empty-state p { margin: 0 auto; max-width: 420px; }
.results.is-empty .empty-state { display: block; }
.results.is-empty > :not(.empty-state) { display: none !important; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 20px; transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: 14px;
  background: #111a2e; color: #f3f6fc; border: 1px solid #2c3854; padding: 10px 12px 10px 16px; border-radius: 12px; font-size: .88rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: calc(100vw - 32px); }
.toast button { border: 0; background: transparent; color: #8ea6ff; font: 700 .88rem var(--font); cursor: pointer; padding: 4px 6px; }
.inputs { position: sticky; top: 130px; }
@media (max-width: 960px) { .inputs { position: static; } }

/* Fields */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field label, .field > label { font-weight: 600; font-size: .88rem; color: var(--text-2); display: block; }
/* Fields that share a line only while each label fits on one line with its info button; otherwise they stack. */
.row-fit { display: flex; flex-wrap: wrap; column-gap: 12px; }
.row-fit > .field { flex: 1 1 0; min-width: max-content; }
.row-fit > .field label { white-space: nowrap; }
/* The amount box takes the field's width instead of setting it, so the label decides when to stack. */
.row-fit .num.block { width: 0; min-width: 100%; }
.field-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.num { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 0 10px; transition: border-color .15s, box-shadow .15s; }
.num:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.num input { border: 0; background: transparent; color: var(--text); font: 700 1rem var(--font); width: 120px; padding: 8px 0; text-align: right; outline: none; min-width: 0; }
.num.block { margin-top: 6px; }
.num.block input { width: 100%; text-align: left; }
.num .pre, .num .post { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.num .pre { margin-right: 4px; }
.num .post { margin-left: 6px; }
.block-input { width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); padding: 9px 10px; font: 600 .95rem var(--font); }
.hint { font-size: .8rem; color: var(--muted); margin-top: 6px; min-height: 1em; }
.hint b { color: var(--text-2); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex !important; align-items: center; gap: 8px; margin-top: 10px; font-weight: 500 !important; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--brand); }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--brand) 0 var(--fill, 50%), var(--line) var(--fill, 50%) 100%); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent); }

.seg { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-top: 12px; }
.seg button { flex: 1; border: 0; background: transparent; color: var(--text-2); font: 600 .82rem var(--font); padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--brand); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.seg.small { margin: 0; }

.btn { border: 1px solid var(--brand); background: var(--brand); color: #fff; font: 600 .85rem var(--font); padding: 8px 14px; border-radius: 10px; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--brand); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--brand); background: var(--brand-soft); }
.btn.link { border: 0; background: none; color: var(--muted); padding: 4px 6px; }

/* Summary */
.summary { display: grid; grid-template-columns: 1fr 220px; gap: 20px; align-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--surface)), var(--surface) 60%); }
@media (max-width: 640px) { .summary { grid-template-columns: 1fr; } }
.summary .label { color: var(--text-2); font-weight: 600; font-size: .85rem; }
.emi { font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 800; letter-spacing: -.03em; color: var(--brand); line-height: 1.1; margin-top: 2px; }
.summary .sub { color: var(--muted); font-size: .85rem; margin-top: 4px; min-height: 1.2em; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stats div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.stats span { display: block; font-size: .75rem; color: var(--muted); font-weight: 600; }
.stats b { font-size: 1rem; }
.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.donut { width: 150px; height: 150px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--text-2); }
.donut-wrap .legend { flex-direction: column; align-items: flex-start; }
.legend b { color: var(--text); margin-left: 2px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sw.s1 { background: var(--series-1); } .sw.s2 { background: var(--series-2); } .sw.s3 { background: var(--series-3); }
.sw.line { height: 3px; border-radius: 2px; width: 14px; vertical-align: 3px; }
.sw.dash { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px); }

/* Tabs */
.tabs-scroller { margin: 4px 0 16px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; border: 0; background: none; color: var(--text-2); font: 600 .9rem var(--font); padding: 10px 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--brand); border-bottom-color: var(--brand); }

/* Insight tiles */
.insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.tile .k { font-size: .78rem; font-weight: 600; color: var(--muted); }
.tile .v { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.tile .d { font-size: .8rem; color: var(--text-2); margin-top: 4px; }
.tile.accent { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.tile.good .v { color: var(--good); }

/* Compare columns */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.col { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); position: relative; }
.col.best { border: 2px solid var(--good); }
.col .badge { position: absolute; top: -10px; right: 12px; background: var(--good); color: #fff; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.col h4 { margin: 0 0 4px; font-size: .95rem; display: flex; align-items: center; gap: 6px; }
.col .big { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 10px; }
.col .big small { font-size: .78rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.kv { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: .86rem; }
.kv span { color: var(--muted); }
.kv b.good { color: var(--good); } .kv b.bad { color: var(--bad); }

/* Callouts */
.callouts:empty { display: none; }
.callouts { display: grid; gap: 10px; margin-bottom: 16px; }
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: .9rem; border: 1px solid transparent; }
.callout .ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #fff; }
.callout.info { background: var(--brand-soft); } .callout.info .ic { background: var(--brand); }
.callout.good { background: var(--good-soft); } .callout.good .ic { background: var(--good); }
.callout.warn { background: var(--warn-soft); } .callout.warn .ic { background: var(--warn); }
.callout.bad { background: var(--bad-soft); } .callout.bad .ic { background: var(--bad); }

/* Forms in tool panels */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.form-grid .field { margin: 0; }
.rc-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 12px; }
.rc-row .field { margin: 0; }
@media (max-width: 520px) { .rc-row { grid-template-columns: 1fr 1fr; } .rc-row .btn.link { grid-column: span 2; justify-self: start; } }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.select { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-2); font-weight: 600; }
.select select { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); padding: 7px 8px; font: 600 .85rem var(--font); max-width: 260px; }

/* Tables */
.table-wrap { overflow: auto; max-height: 560px; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { padding: 9px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: .78rem; z-index: 1; backdrop-filter: blur(6px); }
tbody tr:hover td { background: color-mix(in srgb, var(--brand) 4%, transparent); }
tr.yr { cursor: pointer; font-weight: 600; }
tr.yr td:first-child::before { content: '▸'; display: inline-block; width: 16px; color: var(--muted); transition: transform .15s; }
tr.yr.open td:first-child::before { transform: rotate(90deg); }
tr.mo td { color: var(--text-2); font-size: .82rem; background: var(--surface-2); }
tr.mo td:first-child { padding-left: 28px; }
tr.yrhead td { background: var(--brand-soft); font-weight: 700; color: var(--brand); font-size: .78rem; }
tr.hl td { background: color-mix(in srgb, var(--series-3) 12%, transparent); }
td.pp { color: var(--good); font-weight: 600; }
.data td.pos { color: var(--bad); } .data td.neg { color: var(--good); }
.data tr.cur td { font-weight: 700; background: var(--brand-soft); }
.mini { margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mini { table-layout: fixed; }
.mini td, .mini th { white-space: normal; text-align: left; overflow-wrap: anywhere; }

/* Charts */
.chart { position: relative; width: 100%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.chart svg { touch-action: pan-y; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .axis text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .lbl { font-size: 11px; font-weight: 600; fill: var(--text-2); font-family: var(--font); }
.tooltip { position: fixed; z-index: 50; pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; font-size: .8rem; box-shadow: 0 10px 30px rgba(0,0,0,.18); min-width: 150px; }
.tooltip .t { font-weight: 700; margin-bottom: 4px; }
.tooltip .r { display: flex; justify-content: space-between; gap: 14px; }
.tooltip .r span { color: var(--text-2); }

/* Guide */
.guide { padding: 24px 0 8px; }
.guide h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.guide > .muted { margin: 6px 0 16px; }
details.acc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; box-shadow: var(--shadow); }
details.acc summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: '+'; font-size: 1.3rem; color: var(--brand); font-weight: 500; line-height: 1; }
details.acc[open] summary::after { content: '−'; }
details.acc .body { padding: 0 18px 16px; color: var(--text-2); }
details.acc .body p { margin: 0 0 10px; }
details.acc .body ul { margin: 0 0 10px; padding-left: 20px; }
details.acc .body li { margin-bottom: 6px; }
details.acc .body b { color: var(--text); }
.tip { background: var(--brand-soft); border-left: 3px solid var(--brand); padding: 10px 12px; border-radius: 8px; color: var(--text) !important; }

.footer { border-top: 1px solid var(--line); margin-top: 32px; padding: 24px 0 40px; font-size: .82rem; color: var(--text-2); }
.footer p { margin: 0 0 8px; max-width: 860px; }

@media (max-width: 520px) {
  .card { padding: 16px; }
  .hero { padding: 20px 0 14px; }
  .num input { width: 100px; }
  .insights { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 12px; }
  .tile .v { font-size: 1.1rem; }
  .tile .d { font-size: .75rem; }
  tr.yr .muted { display: none; }
}

/* ---------- shared additions ---------- */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--brand); color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
.narrow { max-width: 760px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.topnav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
.btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.btn.big { padding: 12px 20px; font-size: 1rem; border-radius: 12px; }
.btn.danger { color: var(--bad); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.spacer { flex: 1; }

.repo-banner { background: var(--brand-soft); border-bottom: 1px solid var(--line); font-size: .86rem; }
.repo-banner .wrap { display: flex; align-items: center; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
.repo-banner [data-text] { flex: 1; }
.repo-banner a { font-weight: 600; white-space: nowrap; }

/* glossary */
.term { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--muted); background: transparent;
  color: var(--muted); font: italic 700 10px/1 Georgia, serif; cursor: pointer; padding: 0; vertical-align: 1px; margin-left: 2px; }
.term:hover, .term[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
.glossary-pop { position: fixed; z-index: 70; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 12px 32px rgba(0,0,0,.2); font-size: .86rem; }
.glossary-pop p { margin: 4px 0 0; color: var(--text-2); }

/* calculator additions */
.summary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.shared-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; font-size: .9rem; }
.shared-actions { display: flex; gap: 8px; }
/* Print dialog: summary or detailed, and the sections of the detailed report */
.print-kinds { display: grid; gap: 8px; margin: 14px 0; }
.choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.choice input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.choice b { display: block; }
.choice small { display: block; color: var(--text-2); font-size: .82rem; margin-top: 2px; }
.print-sections { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 14px; }
.print-sections legend { font-weight: 600; font-size: .85rem; color: var(--text-2); padding: 0; }
.print-sections .check { margin-top: 8px; font-size: .88rem; }
.insights.tight { margin: 12px 0 0; }
.insights.tight:empty { display: none; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.offer { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.offer legend { padding: 0 4px; }
.offer legend input { border: 0; border-bottom: 1px dashed var(--muted); background: transparent; color: var(--text); font: 700 .95rem var(--font); width: 140px; padding: 2px 0; }
.offer .field { margin: 0; }
.offer .seg { margin: 0; }
td.best-col, th.best-col { background: color-mix(in srgb, var(--good) 9%, transparent); }
.badge-inline { display: inline-block; background: var(--good); color: #fff; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-left: 4px; vertical-align: 1px; }
details.acc summary h3 { display: inline; font-size: 1rem; font-weight: 700; margin: 0; }
.src { font-size: .78rem; color: var(--muted); margin-top: 8px !important; }
.chart .marker { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(8, 12, 22, .55); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; width: min(560px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.35); max-height: calc(100vh - 32px); overflow-y: auto; }
.modal-card .card-head { margin-bottom: 4px; }
.modal-card .form-grid { margin: 14px 0; }
.modal-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.form-error { color: var(--bad); font-size: .85rem; min-height: 1em; margin: 4px 0 0; }
.share-text { white-space: pre-wrap; word-break: break-all; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px;
  font: .82rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; max-height: 200px; overflow: auto; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.whatsapp { background: #1f8f4e; border-color: #1f8f4e; }
details.optional { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; }
details.optional summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--brand); }

/* landing */
.landing-hero { text-align: center; padding: 40px 0 28px; max-width: 820px; margin: 0 auto; }
.landing-hero h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
h1, h2 { text-wrap: balance; }
.lead { font-size: 1.08rem; color: var(--text-2); margin: 14px auto 22px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.continue { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: .92rem; }
.continue a { font-weight: 600; }
.section-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin: 24px 0 14px; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.calc-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); text-decoration: none; color: var(--text); transition: transform .15s, border-color .15s; }
.calc-card:hover { transform: translateY(-2px); border-color: var(--brand-2); }
.calc-icon { font-size: 1.7rem; }
.calc-name { font-weight: 700; font-size: 1.05rem; }
.calc-line { color: var(--text-2); font-size: .86rem; }
.calc-eg { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); font-size: .8rem; color: var(--muted); }
.calc-eg b { color: var(--brand); }
.repo-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), var(--surface)); }
.repo-card h2 { font-size: 1.15rem; }
.repo-card p { margin: 6px 0 0; color: var(--text-2); max-width: 680px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.feature h3 { margin: 8px 0 6px; }
.feature p { margin: 0; color: var(--text-2); font-size: .9rem; }
.f-ic { font-size: 1.5rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 16px; }
.footer-links a { color: var(--text-2); text-decoration: none; font-size: .82rem; }
.footer-links a:hover { color: var(--brand); text-decoration: underline; }

/* my loans */
.ml-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.file-btn { position: relative; overflow: hidden; cursor: pointer; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ml-empty { display: block; }
.ios-hint { margin-bottom: 16px; }
.ios-hint .btn.link { margin-left: auto; }
.loan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.loan-card { text-align: left; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); cursor: pointer; color: var(--text); font: inherit; }
.loan-card:hover, .loan-card.on { border-color: var(--brand); }
.lc-head { display: flex; align-items: center; gap: 10px; }
.lc-icon { font-size: 1.5rem; }
.lc-name { font-weight: 700; flex: 1; min-width: 0; }
.lc-name small { display: block; font-weight: 500; color: var(--muted); font-size: .78rem; }
.pill { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); white-space: nowrap; }
.pill.good { background: var(--good-soft); color: var(--good); }
.progress { display: block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--series-1); border-radius: 99px; }
.lc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lc-stats small { display: block; color: var(--muted); font-size: .72rem; }
.lc-stats b { font-size: .95rem; }
.detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.detail-head h2 { font-size: 1.2rem; }
.detail-head p { margin: 4px 0 0; font-size: .85rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.events { list-style: none; margin: 0; padding: 0; }
.events li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: .9rem; }
.ev-date { font-weight: 600; min-width: 100px; }
.events li .btn.link { margin-left: auto; }
.data tr.paid td { color: var(--muted); }
details.sched-box summary { cursor: pointer; list-style: none; }
details.sched-box summary::-webkit-details-marker { display: none; }
details.sched-box summary h3 { display: inline; }
details.sched-box[open] summary { margin-bottom: 12px; }
details.sched-box summary::after { content: ' ▸'; color: var(--muted); }
details.sched-box[open] summary::after { content: ' ▾'; }

@media (max-width: 520px) {
  .repo-banner { font-size: .8rem; }
  .lc-stats b { font-size: .88rem; }
  .landing-hero { padding-top: 24px; }
}

/* ---------- print / PDF report ---------- */
/* app.js cuts the report into fixed-size pages, each with the LoanSense header and
   footer, so every browser prints the same pages. These sizes are used to measure the
   report off screen and again on paper, so they must not depend on @media print or on
   the screen width. See the paging notes in app.js for how pages differ between
   Chromium browsers and Safari or Firefox. */
.print-report { position: absolute; left: -10000px; top: 0; width: 210mm; visibility: hidden; pointer-events: none;
  font-size: 10pt; line-height: 1.45; color: var(--text); }
html:not(:lang(en)) .print-report { line-height: 1.6; }
/* Measured at the width of a page's content (A4 minus the side margins). */
.print-report .rp-stream { width: 182mm; }
/* Chrome and Edge: a full A4 sheet with its margins and footer inside it. Safari and
   Firefox: the printed page has the top and bottom margins, so a page is just its content. */
.print-report .sheet { box-sizing: border-box; width: 210mm; padding: 0 14mm; }
.print-report.full .sheet { height: 296mm; padding: 11mm 14mm 9mm; display: flex; flex-direction: column; overflow: hidden; }
.print-report.full .sheet-body { flex: 1; min-height: 0; overflow: hidden; }
.sheet-head, .sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 7.5pt; color: var(--muted); }
.sheet-head { border-bottom: 1px solid var(--line); padding-bottom: 1.5mm; margin-bottom: 4mm; }
.sheet-foot { flex: none; border-top: 1px solid var(--line); padding-top: 1.5mm; margin-top: 3mm; }
.sheet-head b { color: var(--text); font-size: 8.5pt; font-weight: 800; }
.sheet-site { color: var(--brand); font-weight: 700; }
.sheet-head .sheet-no { color: var(--text); font-weight: 600; }
/* Only bottom margins, so block heights add up exactly when paging. */
.print-report .rp-sec { margin: 0; padding: 0; }
.print-report .rp-sec > * { margin-top: 0; margin-bottom: 3mm; }
.print-report .sheet-body > * { margin-top: 0; margin-bottom: 3mm; }
.print-report .term { display: none !important; }
.print-brand { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--brand); }
.print-brand .brand-mark, .print-end .brand-mark { width: 30px; height: 30px; font-size: 1rem; box-shadow: none; flex: none; }
.print-brand-name b { display: block; font-size: 14pt; font-weight: 800; line-height: 1.1; }
.print-brand-name small { display: block; font-size: 8pt; color: var(--muted); }
.print-site { margin-left: auto; font-weight: 700; color: var(--brand); font-size: 11pt; }
.print-report h2 { font-size: 14pt; line-height: 1.25; padding-top: 2mm; }
.print-report h2.rp-title { font-size: 16pt; padding-top: 0; }
.print-report h3 { font-size: 11pt; padding-top: 2mm; }
.print-report .rp-intro { font-size: 9pt; color: var(--text-2); }
.print-report .mini { font-size: 9.5pt; }
.print-report .mini td { padding: 6px 10px; }
.print-report .card { padding: 12px; box-shadow: none; }
.print-report .card-head { margin-bottom: 6px; }
.print-report .insights { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.print-report .tile { padding: 9px 11px; box-shadow: none; }
.print-report .tile .k { font-size: 8pt; }
.print-report .tile .v { font-size: 13pt; }
.print-report .tile .d { font-size: 8pt; }
.print-report .compare { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.print-report .col { padding: 10px 12px; box-shadow: none; }
.print-report .col .big { font-size: 13pt; margin: 4px 0 6px; }
.print-report .callouts { gap: 6px; }
.print-report .callout { padding: 7px 10px; font-size: 8.5pt; }
.print-report .callout .ic { width: 18px; height: 18px; font-size: 7pt; }
.rp-table { font-size: 7.5pt; line-height: 1.3; }
.rp-table th, .rp-table td { padding: 3px 5px; }
.rp-table thead th { position: static; backdrop-filter: none; white-space: normal; vertical-align: bottom; font-size: 7pt; }
.rp-table tr.grp th { text-align: center; color: var(--text); border-bottom: 1px solid var(--muted); }
.rp-table tr.sub td, .rp-table tfoot td { font-weight: 700; background: var(--surface-2); }
.rp-table tr.yrhead td { padding: 4px 5px; }
.rp-table td .muted { font-size: 6.5pt; margin-left: 4px; }
.rp-table .pos { color: var(--bad); } .rp-table .neg, .rp-table b.good { color: var(--good); }
.rp-toc { margin: 0; padding-left: 20px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; gap: 2px 28px; font-size: 9.5pt; }
.rp-toc li span:first-child { margin-right: 6px; }
.rp-toc .pg { float: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-check { list-style: none; padding: 0; font-size: 9.5pt; display: grid; gap: 7px; }
.rp-check li { position: relative; padding-left: 22px; }
.rp-check li::before { content: ''; position: absolute; left: 0; top: 2px; width: 11px; height: 11px; border: 1.5px solid var(--text-2); border-radius: 2px; }
.rp-gloss { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; font-size: 9pt; }
.rp-gloss dt { font-weight: 700; }
.rp-gloss dd { margin: 0; color: var(--text-2); }
.print-end { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--brand); border-radius: 12px; background: var(--brand-soft); }
.print-end b { font-size: 12pt; font-weight: 800; }
.print-end p { margin: 2px 0 0; font-size: 9pt; }
.print-link { color: var(--brand); word-break: break-all; font-size: 7.5pt; }
.print-report .rp-legal { font-size: 8pt; color: var(--text-2); }
.sheet-back .sheet-body { display: flex; flex-direction: column; justify-content: center; padding: 0 12mm; }
.sheet-back .print-end { padding: 18px 20px; }
.sheet-back .print-end b { font-size: 16pt; }
.sheet-back .print-end p { font-size: 10pt; }

@media print {
  @page { size: A4; margin: 0; }
  /* Paper is always light, even in dark mode (which would otherwise win on specificity). */
  :root, :root[data-theme] { color-scheme: light; --bg: #fff; --surface: #fff; --surface-2: #f6f7fa; --text: #000; --text-2: #222; --muted: #555; --line: #ccc; --shadow: none;
    --brand: #1f4fd1; --brand-2: #4f7cff; --brand-soft: #e8eeff; --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a;
    --good: #0f8a5f; --good-soft: #e3f6ee; --warn: #b25e00; --warn-soft: #fff3e0; --bad: #c62f2f; --bad-soft: #fde8e8; }
  body { background: #fff; font-size: 11pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Never print floating widgets added to the page (preview toolbars, chat bubbles, extensions). */
  html > :not(head):not(body), body > :not(main):not(footer) { display: none !important; }
  /* Printing a report: only its pages. */
  body.print-mode > :not(main), body.print-mode main > :not(.print-report) { display: none !important; }
  body.print-mode main { padding: 0; margin: 0; max-width: none; }
  body.print-mode .print-report { position: static; visibility: visible; margin: 0; }
  .print-report .sheet + .sheet { break-before: page; }
  .print-report .sheet { break-inside: avoid; }
  /* Printing the page itself (browser menu) */
  .topbar, .typebar, .repo-banner, .inputs, .tabs-scroller, .summary-actions, .toolbar, .guide, .footer-links, .shared-banner, .toast, .tooltip,
  .glossary-pop, .modal, .term, .note, .skip, #installBtn, .lang-note, .i18n-skip-note { display: none !important; }
  .layout { display: block; }
  .card, .tile { box-shadow: none; break-inside: avoid; }
  .table-wrap { max-height: none; overflow: visible; }
  .table-wrap table { font-size: 8pt; table-layout: auto; }
  .table-wrap th, .table-wrap td { padding: 4px 5px; }
  .table-wrap thead th { position: static; backdrop-filter: none; white-space: normal; vertical-align: bottom; font-size: 7.5pt; }
  tr.yr td:first-child::before { display: none; }
  .insights { grid-template-columns: repeat(3, 1fr); }
  a { color: inherit; text-decoration: none; }
  .footer { border: 0; margin-top: 12px; }
}

a.type { text-decoration: none; }
.empty-state h2 { font-size: 1.1rem; margin-bottom: 6px; }

/* ---------- regional languages (experimental) ---------- */
/* Inter keeps Latin digits and ₹ consistent; Noto covers each script. Indic text gets a little more size and line height. */
html:lang(hi) { --font: Inter, "Noto Sans Devanagari", system-ui, sans-serif; }
html:lang(ta) { --font: Inter, "Noto Sans Tamil", system-ui, sans-serif; }
html:lang(te) { --font: Inter, "Noto Sans Telugu", system-ui, sans-serif; }
html:lang(ml) { --font: Inter, "Noto Sans Malayalam", system-ui, sans-serif; }
html:lang(kn) { --font: Inter, "Noto Sans Kannada", system-ui, sans-serif; }
html:lang(bn) { --font: Inter, "Noto Sans Bengali", system-ui, sans-serif; }
html:not(:lang(en)) body { font-size: 15.5px; line-height: 1.7; }
html:not(:lang(en)) h1, html:not(:lang(en)) h2, html:not(:lang(en)) h3 { line-height: 1.4; letter-spacing: 0; }
html:not(:lang(en)) .emi, html:not(:lang(en)) .tile .v, html:not(:lang(en)) .col .big { letter-spacing: 0; }
html:not(:lang(en)) .tabs button, html:not(:lang(en)) .type { font-size: .86rem; }
html.i18n-pending body { opacity: 0; }
body { transition: opacity .15s; }
.lang-note { background: var(--warn-soft); border-bottom: 1px solid var(--line); font-size: .82rem; }
.lang-note .wrap { padding-top: 6px; padding-bottom: 6px; }
.lang-note a { font-weight: 600; white-space: nowrap; }
.i18n-skip-note { font-size: .82rem; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }

/* labs */
.lab-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.lab-head h2 { font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.lab-head p { margin: 6px 0 0; }
.switch { position: relative; flex: none; width: 48px; height: 28px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--line); transition: background .15s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 18px 0 8px; }
.lang-grid.off { opacity: .45; }
.lang-grid label { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; position: relative; }
.lang-grid label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.lang-grid input { position: absolute; opacity: 0; }
.lang-grid span { font-weight: 700; font-size: 1.05rem; font-family: Inter, "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Malayalam", "Noto Sans Kannada", "Noto Sans Bengali", system-ui, sans-serif; }
.lang-grid small { color: var(--muted); }
.lab-notes { margin: 12px 0 0; padding-left: 20px; color: var(--text-2); font-size: .88rem; }
.lab-notes li { margin-bottom: 4px; }
/* Header buttons: text and icon on wide screens, icon only on phones */
.topnav { gap: 6px; }
.topnav .nav-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--text-2); font: 600 .9rem var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.topnav .nav-btn:hover, .topnav .nav-btn[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
#installBtn { background: var(--brand); color: #fff; }
.lang-pick { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: var(--text); font: 600 .88rem var(--font); white-space: nowrap; cursor: pointer; }
.lang-pick:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
/* The native select covers the button, so tapping opens the phone's own picker. */
.lang-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.lang-short { display: none; }
@media (max-width: 640px) {
  .topnav a[href="/#calculators"] { display: none; }
  .brand small { display: none; }
  .topnav .nav-btn { width: 36px; padding: 0; justify-content: center; border-color: var(--line); background: var(--surface); }
  #installBtn { border-color: var(--brand); }
  .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lang-pick { padding: 0 8px; gap: 4px; }
  .lang-full { display: none; }
  .lang-short { display: inline; }
}

/* Install steps for Safari, which has no install prompt */
.install-help { width: min(440px, calc(100vw - 32px)); padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.install-help::backdrop { background: rgba(10, 15, 30, .45); }
.install-help h2 { margin: 0 0 12px; font-size: 1.15rem; }
.install-help ol { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 10px; line-height: 1.5; }
.install-help form { display: flex; justify-content: flex-end; }

/* MCP page: connector URL, setup steps and code */
.mcp code { font: 500 .85em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; overflow-wrap: anywhere; }
.mcp pre { margin: 8px 0 4px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.mcp pre code { background: none; border: 0; padding: 0; overflow-wrap: normal; white-space: pre; }
.copy-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.copy-row code { flex: 1 1 260px; min-width: 0; padding: 10px 12px; font-size: .9rem; color: var(--text); }
.mcp details.acc .body ol, .mcp .steps { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 8px; line-height: 1.5; }
.ask-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ask-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--text-2); }
.ask-list li::before { content: '“'; color: var(--brand); font-weight: 800; margin-right: 2px; }
.ask-list li::after { content: '”'; color: var(--brand); font-weight: 800; margin-left: 2px; }
.tools-wrap { max-height: none; }
.tools-table td:first-child { width: 34%; }
.tools-table td small { display: block; color: var(--muted); margin-top: 2px; }
.mcp-cta { text-align: center; margin-top: 24px; }
@media (max-width: 480px) {
  .copy-row code { flex-basis: 100%; white-space: nowrap; overflow-x: auto; overflow-wrap: normal; }
}

/* Roadmap */
.section-intro { margin: -6px 0 14px; }
.roadmap-item { display: flex; flex-direction: column; }
.roadmap-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.roadmap-item .btn { align-self: flex-start; margin-top: 12px; }
.pill.soft { background: var(--surface-2); color: var(--text-2); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.roadmap-note { margin: 24px 0 8px; }
.roadmap-link { text-align: center; margin: 20px 0 0; }