/* Calculator pages, November 2026 look: warm paper ground, white rounded cards, one card
   colour, pill buttons, bigger headings. Pages opt in with <body class="calc-v2">, added by
   docs/superpowers/tools/calc_look.py. Tokens and fonts come from css/style.css. */

body.calc-v2{--paper:#F6F5EE;--ink:#0C2A16;--deep:#0F3D22;--line:#DAE2D6;background:var(--paper)}
.calc-v2 h1,.calc-v2 h2,.calc-v2 h3,.calc-v2 h4{text-wrap:balance}
.calc-v2 p{text-wrap:pretty}

/* navigation sits on the paper, no rule under it */
.calc-v2 .nav{background:var(--paper);border-bottom:0}
.calc-v2 .nav-logo{color:var(--ink)}
.calc-v2 .nav-inner{padding-left:24px;padding-right:24px}
.calc-v2 .nav-inner,.calc-v2 .breadcrumbs,.calc-v2 .hero,.calc-v2 .main,.calc-v2 .calc-extras,.calc-v2 .photo-banner,.calc-v2 .content-section,.calc-v2 .quote-band{max-width:1200px}

/* the page title */
.calc-v2 .hero{padding-top:20px;padding-bottom:36px}
.calc-v2 .hero h1{font-size:clamp(2.3rem,4.4vw,3.6rem);font-weight:700;line-height:1.04;letter-spacing:-.035em;color:var(--ink)}
.calc-v2 .hero p{font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:44rem}
.calc-v2 .main{grid-template-columns:minmax(0,1fr) 400px;gap:24px}

/* the form card */
.calc-v2 .calc-card{border:0;border-radius:24px;box-shadow:none;padding:clamp(24px,3vw,40px)}
.calc-v2 .calc-card h2{font-size:1.45rem;letter-spacing:-.02em}
.calc-v2 select,.calc-v2 input[type="number"],.calc-v2 input[type="text"],.calc-v2 input[type="email"],.calc-v2 textarea{min-height:50px;border-color:var(--line);border-radius:12px;background-color:var(--paper)}
.calc-v2 select:focus,.calc-v2 input:focus,.calc-v2 textarea:focus{background-color:#fff}
.calc-v2 .btn-calculate{min-height:56px;border-radius:999px;background:var(--deep);font-size:1.05rem}
.calc-v2 .btn-calculate:hover{background:var(--color-accent)}

/* results: one quiet tile colour, sentence-case labels, colour only on the figures */
.calc-v2 .result-item,.calc-v2 .result-item.highlight,.calc-v2 .result-item.saving,.calc-v2 .result-full,.calc-v2 .next-steps{background:var(--paper);border:0;border-radius:16px}
.calc-v2 .result-item .label,.calc-v2 .result-full .label{font-size:.9rem;text-transform:none;letter-spacing:0}
.calc-v2 .result-item .value{font-size:1.75rem}
.calc-v2 .results h3{font-size:1.45rem;letter-spacing:-.02em}

/* the receipt: white on the paper, square ends kept */
.calc-v2 .receipt{background:#fff;filter:drop-shadow(0 10px 24px rgba(12,42,22,.08))}
.calc-v2 .r-head{font-size:1.4rem;letter-spacing:-.02em}
.calc-v2 .r-steps li.on .r-tick{box-shadow:inset 0 0 0 3px #fff}
.calc-v2 .r-progress{background:var(--line)}
.calc-v2 .r-cta{border-radius:999px;background:var(--deep);padding:14px}
.calc-v2 .r-cta:hover{background:var(--color-accent)}

/* the cards under the tool */
.calc-v2 .sidebar-card,.calc-v2 .sidebar-card.grant{background:#fff;border:0;border-radius:20px;box-shadow:none}
.calc-v2 .sidebar-card ul li{border-bottom-color:var(--paper)}
.calc-v2 .tool-link{background:var(--paper);border-radius:12px}
.calc-v2 .tool-link:hover{background:var(--color-accent-bg)}
.calc-v2 .photo-fig img{border-radius:24px}

/* the article below */
.calc-v2 .content-section h2{font-size:clamp(1.6rem,2.6vw,2.1rem);letter-spacing:-.025em;color:var(--ink)}
.calc-v2 .related-link-card{background:#fff;border:0;border-radius:16px}
.calc-v2 .related-link-card:hover{box-shadow:none;background:var(--color-accent-bg)}
.calc-v2 .related-link-card .rl-icon{background:var(--paper)}

/* mobile bar under the receipt */
@media (max-width:900px){
  .calc-v2 .receipt-bar a{border-radius:999px;background:var(--deep)}
}
@media (max-width:760px){
  .calc-v2 .main{grid-template-columns:minmax(0,1fr)}
  .calc-v2 .calc-card{border-radius:20px;padding:22px}
}

/* the next step: a quiet card under the result cards, not a full green block */
.calc-v2 .cta-box{background:var(--paper);color:var(--ink);text-align:left;border-radius:18px;padding:22px 24px}
.calc-v2 .cta-box h3,.calc-v2 .cta-box h4{font-size:1.2rem;letter-spacing:-.01em;color:var(--ink)}
.calc-v2 .cta-box p{opacity:1;color:var(--color-text-secondary)}
.calc-v2 .cta-box > a{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--deep);color:#fff}
.calc-v2 .cta-box > a:hover{background:var(--color-accent);color:#fff;transform:none}
.calc-v2 .cta-box .cta-disclosure{font-size:.82rem}