/* Cost of Chaos calculator — page styles. Colours come from tokens.css. */
.coc{background:var(--ie-canvas)}
.coc-wrap{max-width:1180px;margin:0 auto;padding:56px 28px 88px}
.coc-head{margin-bottom:28px}
.coc-head h1{font-size:clamp(32px,4.6vw,52px);margin:10px 0 14px}
.coc-lede{font-size:18px;color:var(--ie-ink-2);max-width:64ch;margin:0}
.coc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}
.coc-side{position:sticky;top:94px}

.coc-card{background:var(--ie-surface);border:1px solid var(--ie-line);border-radius:var(--ie-r-md);padding:22px 22px 18px;box-shadow:var(--ie-shadow-1);margin-bottom:20px;overflow:hidden}
.coc-card h2{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0 0 4px}
.coc-sub{font-size:14px;color:var(--ie-muted);margin:0 0 16px}
.coc-bar{height:6px;margin:-22px -22px 18px}
.coc-row{display:grid;grid-template-columns:1fr 132px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--ie-line)}
.coc-row:last-child{border-bottom:0}
.coc-row label{font-size:15px;font-weight:600;line-height:1.35}
.coc-hint{display:block;font-size:13px;color:var(--ie-muted);font-weight:400;margin-top:2px}

.coc input[type=number],.coc input[type=email],.coc input[type=text]{width:100%;padding:10px 12px;font:600 15px var(--ie-font);color:var(--ie-ink);border:1px solid #cfd5e1;border-radius:var(--ie-r-sm);background:var(--ie-surface);text-align:right}
.coc input[type=email],.coc input[type=text]{text-align:left;font-weight:500}
.coc input:focus-visible,.coc button:focus-visible,.coc a:focus-visible{outline:3px solid var(--ie-brand);outline-offset:2px}
.coc input[type=range]:focus-visible{outline:3px solid var(--ie-brand);outline-offset:4px;border-radius:4px}

.coc-total{background:var(--ie-ink);color:#fff;border-radius:var(--ie-r-md);padding:26px 24px;box-shadow:var(--ie-shadow-2);scroll-margin-top:90px}
.coc-cap{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;font-weight:700}
.coc-big{font-family:var(--ie-font-display);font-size:clamp(40px,5.6vw,58px);font-weight:800;letter-spacing:-.03em;margin:6px 0 2px;font-variant-numeric:tabular-nums;line-height:1.05}
.coc-pct{font-size:15px;opacity:.85}
.coc-lines{margin-top:18px;border-top:1px solid rgba(255,255,255,.18);padding-top:12px}
.coc-line{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding:6px 0}
.coc-line span:last-child{font-variant-numeric:tabular-nums;font-weight:700}
.coc-swatch{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:middle}
.coc-hours{font-size:13px;opacity:.8;margin-top:10px}

.coc-scenario{background:var(--ie-brand-soft);border-color:#cfd6f4;margin-top:20px}
.coc-range{padding:10px 0;border-bottom:1px solid #cfd6f4}
.coc-range-top{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:6px}
.coc-range-top span{font-variant-numeric:tabular-nums}
.coc input[type=range]{width:100%;accent-color:var(--ie-brand)}
.coc-out{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid #cfd6f4}
.coc-out b{font-size:26px;font-variant-numeric:tabular-nums;white-space:nowrap}
.coc-out-2{border:0;padding-top:4px;margin-top:4px}
.coc-out-2 span{font-size:14px;color:var(--ie-ink-2)}
.coc-out-2 b{font-size:18px}
.coc-note{font-size:13px;color:var(--ie-muted);margin:14px 0 0}

.coc-gate{border:1px dashed var(--ie-brand);background:var(--ie-canvas-2)}
.coc-gate label{display:block;font-size:13px;font-weight:600;margin:0 0 5px}
.coc-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 10px}
.coc-gate input[type=email]{margin-bottom:4px}
.coc-consent{display:flex!important;gap:10px;align-items:flex-start;font-size:13px!important;font-weight:400!important;color:var(--ie-ink-2);margin:12px 0 14px!important}
.coc-consent input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--ie-brand)}
.coc button{font:700 16px var(--ie-font);color:#fff;background:var(--ie-ink);border:0;border-radius:var(--ie-r-pill);padding:14px 20px;cursor:pointer;width:100%}
.coc button:hover{background:var(--ie-brand)}
.coc-fine{font-size:12.5px;color:var(--ie-muted);margin:12px 0 0}

.coc-disc{margin-top:26px;padding:18px 20px;border-left:4px solid var(--ie-highlight);background:var(--ie-highlight-soft);border-radius:0 var(--ie-r-sm) var(--ie-r-sm) 0;font-size:14.5px;color:var(--ie-ink-2)}

/* mobile total bar */
.coc-mbar{display:none}
@media (max-width:880px){
  .coc-wrap{padding:36px 16px 96px}
  .coc-grid{grid-template-columns:1fr}
  .coc-side{position:static}
  .coc-row{grid-template-columns:1fr 118px}
  .coc-mbar{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--ie-ink);color:#fff;text-decoration:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(15,26,51,.18);font-size:13px;transition:transform .2s ease}
  .coc-mbar b{font-size:18px;font-variant-numeric:tabular-nums;margin-left:auto}
  .coc-mbar .coc-mbar-pct{opacity:.8;font-size:12px}
  .coc-mbar.is-hidden{transform:translateY(110%)}
}
@media (max-width:480px){
  .coc-row{grid-template-columns:1fr;gap:6px}
  .coc-row input[type=number]{text-align:left}
  .coc-fields{grid-template-columns:1fr}
  .coc-mbar .coc-mbar-pct{display:none}
}