/* ═══ Structopedia Calcs — Shared Design System ═════════════════════════ */

/* ── Custom properties ── */
:root {
  --bg:#f5f3ef; --bg2:#eceae5; --bg3:#e2dfd9;
  --card:#ffffff; --text:#1a1a18; --text2:#6b6860; --text3:#9c9a95;
  --accent:#c0392b; --accent-light:#fdf0ee;
  --border:rgba(0,0,0,0.10); --border2:rgba(0,0,0,0.06);
  --pass:#2d6a2d; --pass-bg:#e8f5e8;
  --fail:#a32d2d; --fail-bg:#fceaea;
  --warn:#7a4f0d; --warn-bg:#fdf3e0;
  --radius:12px; --radius-sm:8px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ── Reset ── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{background:var(--bg);color:var(--text);font-family:'Georgia',serif;min-height:100%;}

/* ── Sticky calc header (top:52px = sits below injected site nav) ── */
.app-header{position:sticky;top:52px;z-index:100;background:var(--text);}
.hdr-top{padding:12px 16px 10px;display:flex;align-items:flex-end;justify-content:space-between;border-bottom:0.5px solid rgba(255,255,255,0.08);}
.hdr-eyebrow{font-size:10px;color:rgba(255,255,255,0.4);letter-spacing:0.12em;text-transform:uppercase;font-family:'Helvetica Neue',sans-serif;margin-bottom:2px;}
.hdr-title{font-size:18px;color:#fff;letter-spacing:-0.02em;}
.hdr-badge{font-size:10px;color:#e8d5b7;background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.15);border-radius:20px;padding:3px 9px;font-family:'Helvetica Neue',sans-serif;letter-spacing:0.06em;align-self:flex-start;margin-top:4px;}

/* ── Summary strip ── */
.summary-strip{padding:8px 16px 10px;display:flex;flex-direction:column;gap:5px;}
.summary-overall{display:flex;align-items:center;gap:8px;}
.so-label{font-size:10px;color:rgba(255,255,255,0.4);font-family:'Helvetica Neue',sans-serif;letter-spacing:0.08em;text-transform:uppercase;flex-shrink:0;}
.so-status{font-size:11px;font-family:'Helvetica Neue',sans-serif;font-weight:500;padding:2px 10px;border-radius:20px;}
.so-ok{background:#2d6a2d;color:#e8f5e8;}
.so-fail{background:#a32d2d;color:#fceaea;}
.so-warn{background:#7a4f0d;color:#fdf3e0;}
.so-na{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);}

/* ── Check chips ── */
.check-chips{display:flex;gap:5px;flex-wrap:wrap;}
.chip{font-size:13px;font-family:'Helvetica Neue',sans-serif;letter-spacing:0.05em;padding:3px 10px;border-radius:20px;white-space:nowrap;border:0.5px solid transparent;}
.chip-pass{background:rgba(45,106,45,0.25);color:#7ecf7e;border-color:rgba(45,106,45,0.4);}
.chip-fail{background:rgba(163,45,45,0.3);color:#f7a0a0;border-color:rgba(163,45,45,0.5);}
.chip-warn{background:rgba(122,79,13,0.3);color:#f5c87a;border-color:rgba(122,79,13,0.4);}
.chip-na{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.35);border-color:rgba(255,255,255,0.1);}

/* ── Step blocks ── */
.step-block{margin:16px 16px 0;}
.step-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.step-pill{background:var(--text);color:#fff;font-size:9px;font-family:'Helvetica Neue',sans-serif;letter-spacing:0.1em;text-transform:uppercase;padding:3px 9px;border-radius:20px;flex-shrink:0;}
.step-pill.result{background:var(--bg3);color:var(--text2);}
.step-title{font-size:13px;color:var(--text2);font-family:'Helvetica Neue',sans-serif;}
.step-ref{font-size:11px;color:var(--text3);font-family:'Helvetica Neue',sans-serif;margin-left:auto;flex-shrink:0;}

/* ── Input cards ── */
.card{background:var(--card);border-radius:var(--radius);border:0.5px solid var(--border);border-left:3px solid var(--accent);border-right:3px solid var(--accent);overflow:hidden;}
.card-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:0.5px solid var(--border2);gap:8px;}
.card-row:last-child{border-bottom:none;}

/* ── Form controls (max-width is page-specific) ── */
select,input[type=number]{font-family:'Helvetica Neue',sans-serif;font-size:14px;color:var(--text);background:transparent;border:none;outline:none;text-align:right;-webkit-appearance:none;appearance:none;}
select{padding-right:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6860'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0 center;}
input[type=number]{width:80px;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;}

/* ── Result cards ── */
.result-card{background:var(--card);border-radius:var(--radius);border:0.5px solid var(--border);overflow:hidden;}
.result-row{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:0.5px solid var(--border2);}
.result-row:last-child{border-bottom:none;}
.rr-right{text-align:right;flex-shrink:0;}
.rr-val{font-size:15px;color:var(--text);font-family:'Georgia',serif;letter-spacing:-0.01em;}
.rr-unit{font-size:11px;color:var(--text3);font-family:'Helvetica Neue',sans-serif;margin-left:3px;}
.rr-text{font-size:13px;color:var(--text);font-family:'Helvetica Neue',sans-serif;font-weight:500;}

/* ── Decision / checks rows ── */
.decision-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:0.5px solid var(--border2);background:var(--card);}
.decision-row:last-child{border-bottom:none;}
.dr-left{flex:1;}
.dr-name{font-size:12px;color:var(--text);font-family:'Helvetica Neue',sans-serif;margin-bottom:2px;}
.dr-detail{font-size:10px;color:var(--text3);font-family:'Helvetica Neue',sans-serif;line-height:1.5;}
.dr-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;padding-top:1px;}
.dr-util-label{font-size:9px;color:var(--text3);font-family:'Helvetica Neue',sans-serif;letter-spacing:0.06em;text-transform:uppercase;}
.dr-ratio{font-size:15px;font-family:'Helvetica Neue',sans-serif;font-weight:500;}

/* ── Status badges ── */
.badge{font-size:9px;font-family:'Helvetica Neue',sans-serif;letter-spacing:0.08em;text-transform:uppercase;padding:2px 7px;border-radius:20px;font-weight:500;white-space:nowrap;}
.pass{color:var(--pass);background:var(--pass-bg);}
.fail{color:var(--fail);background:var(--fail-bg);}
.warn{color:var(--warn);background:var(--warn-bg);}

/* ── Bar/option selector ── */
.bar-selector{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.bar-opt{flex:1;min-width:60px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:8px 4px;text-align:center;cursor:pointer;font-size:12px;font-family:'Helvetica Neue',sans-serif;color:var(--text2);transition:border-color 0.15s;line-height:1.5;}
.bar-opt.active{border-color:var(--accent);background:var(--accent-light);color:var(--accent);font-weight:500;}

/* ── Info / tooltip panels ── */
.selector-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.selector-header-label{font-size:11px;color:var(--text3);font-family:'Helvetica Neue',sans-serif;}
.info-btn{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);background:var(--card);color:var(--text3);font-size:11px;font-family:'Helvetica Neue',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.15s,color 0.15s;line-height:1;}
.info-btn.open{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.info-panel{background:var(--bg2);border-radius:var(--radius-sm);border:0.5px solid var(--border);padding:12px 14px;margin-bottom:8px;font-family:'Helvetica Neue',sans-serif;font-size:11px;color:var(--text2);line-height:1.7;}
.info-panel strong{font-weight:500;color:var(--text);display:block;margin-bottom:4px;font-size:11px;}
.info-panel .note-row{display:flex;gap:8px;margin-bottom:6px;padding-bottom:6px;border-bottom:0.5px solid var(--border2);}
.info-panel .note-row:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.info-panel .note-key{font-weight:500;color:var(--text);flex-shrink:0;}
.info-panel .note-val{color:var(--text2);}
.info-panel .note-block{margin-bottom:8px;}
.info-panel .note-block:last-child{margin-bottom:0;}

/* ── Summary banner ── */
.summary-banner{margin:16px 16px 0;padding:12px 16px;border-radius:var(--radius-sm);font-size:12px;font-family:'Helvetica Neue',sans-serif;line-height:1.6;border:0.5px solid var(--border);}
.summary-ok{background:var(--pass-bg);color:var(--pass);}
.summary-fail{background:var(--fail-bg);color:var(--fail);}

/* ── Footer + dividers ── */
.footer-ref{margin:12px 16px calc(var(--safe-bottom) + 24px);text-align:center;font-size:10px;color:var(--text3);font-family:'Helvetica Neue',sans-serif;letter-spacing:0.06em;line-height:1.8;}
.divider-label{margin:20px 16px 0;display:flex;align-items:center;gap:10px;}
.dl-text{font-size:10px;color:var(--text3);font-family:'Helvetica Neue',sans-serif;letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap;}
.dl-line{flex:1;height:0.5px;background:var(--border);}

/* ── Utilities ── */
.hidden{display:none;}

/* ── Print ── */
@media print {
  #sp-nav,.no-print{display:none!important;}
  body{background:#fff!important;}
  .app-header{position:static!important;top:auto!important;box-shadow:none!important;}
  .card,.result-card{border:0.5px solid #ccc!important;break-inside:avoid;}
  .step-block{break-inside:avoid;}
}