/* DANBODD design system v2 ("Field and Grid", docs/21) applied to the calculator page.
   The default look since 24 Oct 2026 (owner KEEP); ?skin=classic shows the look before. Layout and logic stay as they are:
   this file only changes colours, surfaces, type and motion, scoped under html.v2. */
html { scroll-padding-top:84px; }
html.v2 {
  --navy:#07182A; --azure:#2073AB; --forest:#3F6B1C; --ink:#102233; --slate:#5A6B7A; --line:#D8D1C3;
  --mist:#F1EDE4; --paper:#FBFAF6; --panel_edge:#1D3D5E; --panel_highlight:#123E6B; --card_edge:#DDD6C8;
  --node_edge:#123E6B; --page:#07182A;
  --shadow-light:0 1px 0 rgba(16,34,51,.04); --shadow-navy:0 24px 60px rgba(7,24,42,.28);
  --v2-leaf:#8CC53E; --v2-green:#5E8F2A; --v2-night:#0C2742; --v2-royal:#123E6B; --v2-stone:#E9E4DA;
}
html.v2 body {
  background:radial-gradient(1100px 520px at 85% -5%, rgba(140,197,62,.10), transparent 60%),
             radial-gradient(900px 480px at 0% 0%, rgba(32,115,171,.22), transparent 60%), #07182A;
  color:var(--ink); -webkit-font-smoothing:antialiased; font-size:16px;
}
html.v2 main { max-width:1100px; margin:96px auto 0; border-radius:4px; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 40px 90px rgba(0,0,0,.35); padding:0 56px 120px; background:var(--paper); }
/* the top bar that links back to the v2 homepage */
.v2bar { position:fixed; inset:0 0 auto 0; z-index:60; height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:rgba(7,24,42,.92); backdrop-filter:saturate(140%) blur(10px); box-shadow:0 1px 0 #1D3D5E; font-family:var(--font); }
.v2bar a { color:#fff; text-decoration:none; font-weight:700; font-size:14.5px; }
.v2bar .brand { display:flex; align-items:center; gap:10px; letter-spacing:.08em; }
.v2bar .brand img { height:30px; width:auto; }
.v2bar nav { display:flex; gap:24px; align-items:center; }
.v2bar nav a { opacity:.85; } .v2bar nav a:hover { opacity:1; }
/* header becomes a dark masthead across the card */
html.v2 main > header { margin:0 -56px; padding:44px 56px 40px; background:linear-gradient(180deg, #0C2742, #07182A); color:#fff; border-radius:4px 4px 0 0; }
html.v2 main > header .rule { display:none; }
html.v2 main > header .masthead img { display:none; }
html.v2 main > header .meta, html.v2 main > header .micro { color:#A9BCCD; }
html.v2 main > header .kicker { color:var(--v2-leaf); letter-spacing:.16em; font-size:12px; }
html.v2 main > header h1 { color:#fff; font-family:'DANBODD Display',var(--font); font-weight:400; font-size:clamp(32px, 4.2vw, 50px); line-height:1.08; letter-spacing:-.02em; max-width:22ch; }
html.v2 main > header .motto { color:var(--v2-leaf); }
html.v2 main > header .muted { color:#A9BCCD; font-size:15px; max-width:70ch; }
html.v2 main > header .term { border-bottom-color:var(--v2-leaf); }
html.v2 .doorstrip { background:rgba(255,255,255,.04); border:1px solid #1D3D5E; border-radius:4px; }
html.v2 .doorstrip .label { color:#A9BCCD; letter-spacing:.16em; }
html.v2 .door.art { background:#0C2742; color:#fff; border:1px solid #1D3D5E; outline:none; border-radius:4px; box-shadow:none; }
html.v2 .door.art svg { background:var(--v2-stone); border-radius:2px; }
html.v2 .door.art .dl, html.v2 .door.art .tagno { color:#fff; }
html.v2 .door.art .ds { color:#A9BCCD; }
html.v2 .door.art.on { background:#123E6B; border-color:var(--v2-leaf); }
html.v2 .door.art:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.35); }
html.v2 .doorpath li { background:#0C2742; border-color:#1D3D5E; color:#fff; border-radius:3px; }
html.v2 .doorpath li.main { border-color:var(--v2-leaf); box-shadow:none; }
html.v2 .doorpath b, html.v2 .doorpath .pr { color:#fff; }
html.v2 .doorpath .wh, html.v2 .doorstrip .start { color:#A9BCCD; }
html.v2 .doorpath a, html.v2 .doorstrip a, html.v2 .door-lead { color:var(--v2-leaf); }
/* tabs as a clean underline bar */
html.v2 .tabs { gap:0; margin:0 -56px 8px; padding:0 56px; background:#fff; border-bottom:1px solid var(--line); grid-template-columns:repeat(5, minmax(0,1fr)); }
html.v2 .tabs .tab { border:0; border-radius:0; background:transparent; padding:20px 10px 18px; border-bottom:3px solid transparent; grid-template-columns:36px 1fr; align-items:center; gap:0 12px; }
html.v2 .tabs .tab.on { border:0; border-bottom:3px solid var(--v2-green); background:transparent; }
html.v2 .tabs .tab:hover:not(.on) { border:0; border-bottom:3px solid var(--line); }
html.v2 .tabs .tab .ic { grid-row:auto; width:36px; height:36px; background:var(--v2-stone); }
html.v2 .tabs .tab.on .ic { background:#07182A; }
html.v2 .tabs .tab b { font-size:15px; padding-right:0; }
html.v2 .tabs .tab small, html.v2 .tabs .tab .pick { display:none; }
/* type and surfaces */
html.v2 h2 { font-size:clamp(22px, 2.4vw, 30px); letter-spacing:-.015em; color:var(--ink); margin:48px 0 14px; }
html.v2 h3 { letter-spacing:-.01em; }
html.v2 .kicker { letter-spacing:.16em; }
html.v2 .group, html.v2 .formula, html.v2 .lesson, html.v2 .freebox, html.v2 .rung, html.v2 .dealroom, html.v2 .buyers, html.v2 .warnbox, html.v2 .newsline {
  border-radius:3px; box-shadow:none;
}
html.v2 .formula, html.v2 .lesson { background:#fff; border:1px solid var(--line); border-left:3px solid var(--v2-royal); }
html.v2 .rung { background:#fff; border:1px solid var(--line); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1); }
html.v2 .rung:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(16,34,51,.08); }
html.v2 .rung.main { border:1px solid var(--ink); }
html.v2 .hero { background:linear-gradient(160deg, #0C2742, #07182A 70%); border:0; border-radius:4px; box-shadow:var(--shadow-navy); }
html.v2 .hero .big { font-size:clamp(34px, 4vw, 52px); letter-spacing:-.03em; }
/* buttons: green primary, outlined secondary */
html.v2 .btn { background:var(--v2-green); border:0; border-radius:3px; color:#fff; font-size:14.5px; padding:11px 18px; transition:background .25s, transform .25s; }
html.v2 .btn:hover { background:#6fa233; transform:translateY(-1px); }
html.v2 .btn.ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
html.v2 .btn.soon { background:#C9CFD4; color:#3A4A58; transform:none; }
html.v2 .asset, html.v2 .tick, html.v2 .chip { border-radius:3px; }
html.v2 .sticky { background:#07182A; border-top:1px solid #1D3D5E; }
html.v2 .sticky button { background:var(--v2-green); color:#fff; border:0; border-radius:3px; }
html.v2 .example-note { border-left-color:var(--v2-green); background:#fff; border-radius:2px; }
html.v2 footer { border-top:1px solid var(--line); }
@media (max-width:760px) {
  html.v2 main { margin-top:72px; padding:0 18px 120px; border-radius:0; }
  html.v2 main > header { margin:0 -18px; padding:30px 18px 28px; border-radius:0; }
  html.v2 .tabs { margin:0 -18px 8px; padding:0 8px; display:flex; overflow-x:auto; scroll-snap-type:x proximity; -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  html.v2 .tabs .tab { scroll-snap-align:start; }
  html.v2 .tabs .tab { flex:0 0 auto; padding:14px 10px; }
  .v2bar { padding:0 16px; } .v2bar nav .hide-s { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  html.v2 .rung, html.v2 .btn, html.v2 .door.art { transition:none; }
}