/* calculator.css — light document, dark instrument panel.
   Loaded when $page === 'calculator'. Overrides directory.css defaults. */

.calcpage{max-width:820px;margin:0 auto;padding:40px 24px 88px;background:#fff;color:#18181b;
  font-family:var(--sans,Archivo,system-ui,sans-serif);line-height:1.7}
body.calculator{background:#fff}

.calcpage .kicker{font-family:var(--mono,'IBM Plex Mono',Menlo,monospace);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#0369a1;margin:0 0 14px}
.calcpage h1{font-size:38px;line-height:1.1;letter-spacing:-.02em;font-weight:600;
  margin:0 0 14px;color:#0b0b0b}
.calcpage .dek{font-size:17px;color:#52525b;margin:0 0 26px;max-width:62ch}
.calcpage h1,.calcpage h2,.calcpage h3{scroll-margin-top:96px}
.calcpage h2{font-size:23px;font-weight:600;letter-spacing:-.01em;margin:44px 0 12px;color:#0b0b0b}
.calcpage h3{font-size:17px;font-weight:600;margin:28px 0 10px;color:#0b0b0b}
.calcpage p{margin:0 0 16px}
.calcpage a{color:#0369a1}

.dispatch{border-left:3px solid #0ea5e9;background:#f4f7fa;padding:13px 17px;margin:0 0 28px;
  border-radius:0;font-size:14px;color:#3f3f46}
.dispatch strong{color:#0b0b0b}

/* ---- dark instrument panel ---- */
.tool{background:#0b0b0b;border-radius:10px;padding:22px 24px;margin:0 0 34px;color:#fff}
.tool-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.tool-title{font-family:var(--mono,'IBM Plex Mono',Menlo,monospace);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#7dd3fc}
.tool-fy{font-family:var(--mono,'IBM Plex Mono',Menlo,monospace);font-size:11px;letter-spacing:.1em;color:#71717a}

.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:20px}
.tool-field label{display:block;font-family:var(--mono,'IBM Plex Mono',Menlo,monospace);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:#71717a;margin-bottom:7px}
.tool-field input,.tool-field select{width:100%;background:#171717;border:1px solid #3f3f46;
  color:#fff;border-radius:6px;padding:10px 12px;font-size:15px;font-family:inherit;
  -webkit-appearance:none;appearance:none}
.tool-field select{background-image:linear-gradient(45deg,transparent 50%,#71717a 50%),linear-gradient(135deg,#71717a 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;padding-right:34px}
.tool-field input:focus,.tool-field select:focus{outline:none;border-color:#0ea5e9}
.tool-hint{font-family:var(--mono,'IBM Plex Mono',Menlo,monospace);font-size:11px;color:#52525b;margin-top:6px;line-height:1.5}
.tool-hint a{color:#7dd3fc}

.tool-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:#27272a;border-radius:8px;overflow:hidden;margin-bottom:16px}
.tool-cell{background:#171717;padding:15px 14px}
.tool-cell .v{font-size:24px;font-weight:600;letter-spacing:-.01em;color:#fff;line-height:1.2}
.tool-cell .v.accent{color:#7dd3fc}
.tool-cell .l{font-family:var(--mono,'IBM Plex Mono',Menlo,monospace);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:#71717a;margin-top:5px;line-height:1.4}

.tool-rule{background:#171717;border-left:2px solid #0ea5e9;padding:11px 14px;margin-bottom:18px;
  font-size:13px;color:#a1a1aa;line-height:1.6;border-radius:0}
.tool-rule strong{color:#fff}

.tool-btn{display:block;width:100%;background:#171717;border:1px solid #3f3f46;color:#fff;
  border-radius:6px;padding:12px;font-size:14px;font-family:inherit;cursor:pointer;
  margin-bottom:9px;text-align:center}
.tool-btn:hover{border-color:#0ea5e9;color:#7dd3fc}
.tool-fb{display:none;font-family:var(--mono,'IBM Plex Mono',Menlo,monospace);font-size:11px;color:#4ade80;
  margin:-4px 0 12px;text-align:center}
.tool-src{font-family:var(--mono,'IBM Plex Mono',Menlo,monospace);font-size:11px;letter-spacing:.05em;
  color:#52525b;line-height:1.7;margin-top:16px;border-top:1px solid #27272a;padding-top:14px}
.tool-src a{color:#71717a}

/* ---- document blocks ---- */
.ratetable{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 10px}
.ratetable th{text-align:left;font-family:var(--mono,'IBM Plex Mono',Menlo,monospace);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:#71717a;font-weight:400;
  padding:9px 10px;border-bottom:1px solid #e4e4e7}
.ratetable td{padding:9px 10px;border-bottom:1px solid #f4f4f5;color:#27272a}
.ratetable td.now{font-weight:600;color:#0b0b0b;background:#f4f7fa}
.ratetable caption{caption-side:bottom;text-align:left;font-family:var(--mono,'IBM Plex Mono',Menlo,monospace);
  font-size:11px;color:#71717a;padding-top:9px;letter-spacing:.04em}

.note{background:#fafafa;border:1px solid #e4e4e7;border-radius:8px;padding:15px 18px;
  margin:0 0 24px;font-size:15px;color:#3f3f46}
.note strong{color:#0b0b0b}

.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 0 26px}
.type{border:1px solid #e4e4e7;border-radius:8px;padding:14px 16px;background:#fff}
.type h4{margin:0 0 6px;font-size:14px;font-weight:600;color:#0b0b0b}
.type p{margin:0;font-size:13px;color:#52525b;line-height:1.6}
.type.risk{border-color:#fca5a5;background:#fef2f2}

.checklist{border:1px solid #e4e4e7;border-radius:8px;padding:18px 20px;margin:0 0 26px;background:#fff}
.checklist .sub{font-family:var(--mono,'IBM Plex Mono',Menlo,monospace);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:#71717a;margin:-4px 0 14px}
.checklist .item{display:flex;gap:11px;align-items:flex-start;padding:9px 0;
  border-top:1px solid #f4f4f5;font-size:14px;color:#3f3f46}
.checklist .item:first-of-type{border-top:none}
.checklist input{margin-top:3px;flex-shrink:0}
.checklist strong{color:#0b0b0b}

.cta{border:1px solid #e4e4e7;border-radius:8px;padding:18px 20px;margin:0 0 26px;background:#fafafa;text-transform:none;letter-spacing:normal;font-weight:400;color:#18181b}
.cta h3{margin:0 0 6px}
.cta p{margin:0 0 12px;font-size:14px;color:#52525b}
.cta a{display:inline-block;background:#0b0b0b;color:#fff;text-decoration:none;
  padding:10px 18px;border-radius:6px;font-size:14px}

.sources{border-top:1px solid #e4e4e7;padding-top:22px;margin-top:38px}
.sources ul{margin:0;padding-left:18px}
.sources li{color:#52525b;margin:7px 0;font-size:14px}
.evergreen{font-family:var(--mono,'IBM Plex Mono',Menlo,monospace);font-size:11px;letter-spacing:.05em;
  color:#a1a1aa;margin-top:26px;line-height:1.6}

@media(max-width:720px){
  .calcpage{padding:28px 18px 64px}
  .calcpage h1{font-size:29px}
  .tool{padding:18px 16px}
  .tool-cell .v{font-size:21px}
}