/* Layout and typography for pages built on pt/base.html.
   Tokens come from design-system.css; shared furniture (breadcrumb, buttons,
   link cards, footer) from site-ui.css. This file owns the reading column,
   headings and the calculator shell. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:url(/static/contours.svg) no-repeat calc(50% + 520px) -140px / 1400px auto, var(--pt-page-background);background-attachment:scroll;color:var(--pt-ink);overflow-x:clip;
     font:400 16px/1.6 var(--pt-font);-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;width:100%;margin:0 auto;padding:0 28px;flex:1 0 auto;display:flex;flex-direction:column}
.wrap>*{flex:none}
.wrap>.siteFoot{margin-top:auto}
.wrap>:nth-last-child(2){margin-bottom:64px}
.narrow{max-width:760px}
a{color:var(--pt-accent)}

/* ---- headings and prose ---- */
h1{font-weight:700;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.12;letter-spacing:-.025em;margin:18px 0 14px;max-width:24ch}
h2{font-weight:700;font-size:1.35rem;letter-spacing:-.015em;margin:38px 0 12px}
h3{font-weight:600;font-size:1.05rem;margin:22px 0 8px}
p{color:var(--pt-muted);margin:0 0 14px}
p a{text-underline-offset:3px}
.card{background:var(--pt-panel);border:1px solid var(--pt-border);border-radius:var(--pt-radius-card);padding:20px}

/* ---- calculator shell (shared by the eight calculators) ---- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:26px 0 10px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.field .hint{font-size:12px;color:var(--pt-subtle);margin-top:4px}
input[type=number],input[type=text],select{
  width:100%;padding:10px 12px;font:inherit;font-size:15px;color:var(--pt-ink);
  border:1px solid var(--pt-border);border-radius:var(--pt-radius-control);background:var(--pt-paper)}
input:focus,select:focus{outline:2px solid var(--pt-accent);outline-offset:-1px}
.out{background:var(--abyss);color:#fff;border-radius:var(--pt-radius-card);padding:22px}
.out .big{font-size:44px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.out .unit{font-size:17px;font-weight:600;opacity:.75;margin-left:7px}
.out .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.09em;opacity:.72;margin-bottom:9px}
.out .sub{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);font-size:13.5px;opacity:.85;line-height:1.6}
.pill{display:inline-flex;gap:8px;align-items:center;background:var(--pt-selected);color:var(--pt-ink);
      border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;margin-bottom:16px}
.formula{background:var(--pt-surface);border:1px solid var(--pt-border);border-radius:var(--pt-radius-control);
         padding:14px 16px;font-family:var(--pt-mono);font-size:14px;color:var(--pt-ink);overflow-x:auto}
.note{background:var(--pt-warning-bg);border:1px solid var(--pt-warning-border);border-radius:var(--pt-radius-control);
      padding:13px 15px;font-size:14px;color:var(--pt-warning);margin:18px 0}

/* ---- tile grid (older hub pages) ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px;margin:18px 0 6px}
.tile{background:var(--pt-panel);display:block;text-decoration:none;color:inherit;
      border:1px solid var(--pt-border);border-radius:var(--pt-radius-card);padding:18px;
      transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--pt-accent);transform:translateY(-2px)}
.tile .ic{font-size:20px}
.tile h3{margin:9px 0 5px;font-size:16px;font-weight:700;color:var(--pt-ink)}
.tile p{font-size:13.5px;margin:0;line-height:1.55}
.tile .edge{display:inline-block;margin-top:9px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--pt-accent)}
.faq dt{font-weight:600;margin:18px 0 5px}
.faq dd{margin:0;color:var(--pt-muted)}

@media(max-width:820px){.calc{grid-template-columns:1fr}}
@media(max-width:560px){.wrap{padding:0 18px}}
.wrap.embed{padding-top:8px}.wrap.embed .crumb{display:none}