/* Death Duty Calculator (public page) - Pastel theme */
:root{
  --primary:#AA2C76;
  --bg:#ffffff;
  --calc-grey:#f0f2f5; /* calculator shell */
  --border:#e2e5e9;
  --text:#1f2937;
  --muted:#6b7280;
  --pastel-green:#c8e6c9; /* net to heirs */
  --pastel-red:#ffcdd2;   /* IHT due */
  --pastel-blue:#bbdefb;  /* NRB */
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Noto Sans, Arial; color:var(--text); background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:16px}
.header{display:block}
.brand{margin-bottom:16px;color:var(--text)}
.content-wrap{text-align:left}
h1{font-size:28px;margin:0}
.smiley{font-size:24px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.button-hero{background:var(--primary);color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.button-ghost{background:#ffffff;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.button-hero:hover{filter:brightness(1.05)}
.button-ghost:hover{background:#f8fafc}

.calc-shell{background:var(--calc-grey);border:1px solid var(--border);border-radius:14px;padding:16px;margin-top:12px}
.grid-2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.grid-2{grid-template-columns:2fr 1fr}}
.section{padding:12px 0;border-bottom:1px solid var(--border)}
.section:last-child{border-bottom:none}
.section-title{font-weight:700;margin:0 0 10px 0;color:var(--text);display:flex;align-items:center;gap:8px}
.icon{width:22px;height:22px;display:inline-block;color:#8a8a8a}
.form-grid{display:grid;grid-template-columns:1fr;gap:10px}
.field label{display:block;font-weight:600;margin-bottom:4px}
.field input[type="number"],.field input[type="text"]{width:100%;max-width:260px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff}
.field input[type="range"]{width:100%;max-width:390px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;height:24px;border-radius:6px;background:transparent;touch-action: pan-y;-webkit-tap-highlight-color: transparent}
/* WebKit track */
.field input[type="range"]::-webkit-slider-runnable-track{height:6px;background:#e5e7eb;border-radius:6px;margin:9px 0}
/* WebKit thumb */
.field input[type="range"]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);border:1px solid #d1d5db;box-shadow:0 0 0 2px #fff;margin-top:0}
/* Firefox track */
.field input[type="range"]::-moz-range-track{height:6px;background:#e5e7eb;border-radius:6px}
/* Firefox thumb */
.field input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--primary);border:1px solid #d1d5db}
.field.checkbox label{font-weight:400;display:flex;align-items:center;gap:8px}
.help{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e9ecef;color:#555;font-size:12px;font-weight:700;cursor:help;margin-left:6px}

.summary{position:sticky;top:16px}
@media(min-width:900px){
  .summary{align-self:start;max-height:calc(100vh - 24px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
  .summary::-webkit-scrollbar{width:0;height:0}
}
.row{display:flex;align-items:center;justify-content:space-between;margin:8px 0}
/* Default summary numbers: dark grey, not bold */
.summary .value{font-weight:400;color:#374151}
/* Key figures in pastel boxes stay bold */
.summary .keybox{font-weight:700;color:#111}
/* Make tax due number a darker red on the pastel red background */
.summary .key-red{color:#b91c1c}
/* Emphasise Net to descendants label and value */
.summary .row:first-child div:first-child{font-weight:700;color:#111}
.summary .row:first-child .value{font-weight:800;color:#111}
.keybox{display:inline-block;padding:10px 12px;border-radius:12px;min-width:190px;text-align:right;border:1px solid var(--border);color:#111}
.key-green{background:var(--pastel-green)}
.key-red{background:var(--pastel-red)}
.key-blue{background:var(--pastel-blue)}

.details{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;margin-top:12px;max-width:680px;margin-right:auto}
@media(min-width:1100px){
  .details{max-width:760px}
}
details>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
details>summary::after{content:'▾';margin-left:auto;color:#6b7280;transition:transform .15s ease;font-size:32px;line-height:1}
details[open]>summary::after{transform:rotate(180deg)}
details>summary::-webkit-details-marker{display:none}

.footer-note{color:var(--muted);font-size:12px}
.promo-text{color:var(--text);font-size:14px;margin-bottom:12px}

.lead{max-width:65ch;color:#374151;margin:8px 0 0 0;font-size:14px}
.brand a{color:var(--primary);text-decoration:none;font-weight:700}
.brand a:hover{text-decoration:underline}
.brand-link{color:var(--primary);text-decoration:none;font-weight:700}
.brand-link:hover{text-decoration:underline}
.range-row{display:flex;align-items:center;gap:8px}
.range-row input[type="range"]{flex:1;max-width:100%}

/* Share button hero pink */
.btn-share{background:var(--primary);color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.btn-share:hover{filter:brightness(1.05)}

/* Utility: red text for important caveats */
.text-red{color:#b91c1c}

/* Info boxes (family tips / watch-outs) */
.info-box{border:1px solid var(--border);border-radius:12px;padding:12px;background:#f7f2ea}
.info-tip{border-left:4px solid var(--primary)}
.info-watch{border-left:4px solid #b91c1c;background:#fff5f5}
.badge{display:inline-block;background:#eef2ff;color:#111;border:1px solid var(--border);border-radius:999px;padding:2px 8px;font-size:11px;margin-left:6px}

/* Footer */
.site-footer{margin-top:24px;border-top:1px solid var(--border);padding:16px 0;color:#4b5563}
.site-footer .footer-inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.site-footer .links{display:flex;gap:12px;flex-wrap:wrap}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* Print */
@media print{
  .actions,.brand,.smiley,a.button-hero,a.button-ghost,button{display:none!important}
  .container{max-width:100%;padding:0}
  .calc-shell{border:none;background:#fff}
}