/* GBCAL Calculator Hub — application interface */
:root { --gb-blue:#146da0; --gb-blue-dark:#0c527c; --gb-blue-soft:#edf7fc; --gb-ink:#172832; --gb-muted:#64727a; --gb-line:#cbd8df; --gb-panel:#f1f5f7; --gb-white:#fff; --margin:clamp(18px,4vw,64px); }
html { background:var(--gb-white); }
body { background:var(--gb-white); color:var(--gb-ink); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.5; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid rgba(20,109,160,.35); outline-offset:2px; }
.site-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; min-height:68px; padding:0 var(--margin); border:0; background:var(--gb-blue); color:#fff; box-shadow:0 1px 0 rgba(0,0,0,.12); }
.brand { display:grid; gap:2px; color:#fff; }.brand-title { font-family:Arial,Helvetica,sans-serif; font-size:21px; font-weight:800; letter-spacing:.12em; line-height:1; }.brand-sub { font-family:Arial,Helvetica,sans-serif; font-size:8px; font-weight:700; letter-spacing:.08em; line-height:1.2; opacity:.82; }
.site-header nav { display:flex; align-self:stretch; gap:clamp(16px,3vw,38px); margin-left:auto; }.site-header nav a { display:grid; align-items:center; min-height:68px; color:#fff; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:700; letter-spacing:.04em; }.site-header nav a:hover { text-decoration:underline; text-underline-offset:6px; }
.app-intro { max-width:1240px; margin:0 auto; padding:clamp(44px,7vw,84px) var(--margin) clamp(30px,5vw,58px); border-bottom:1px solid var(--gb-line); }.eyebrow,.mono { color:var(--gb-blue); font-family:Arial,Helvetica,sans-serif; font-size:11px; font-weight:800; letter-spacing:.09em; line-height:1.35; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:Arial,Helvetica,sans-serif; color:var(--gb-ink); } h1 { margin:9px 0 12px; font-size:clamp(38px,5vw,62px); font-weight:800; letter-spacing:-.04em; line-height:1.03; } h2 { font-size:clamp(28px,3.4vw,42px); font-weight:750; letter-spacing:-.025em; line-height:1.1; } h3 { margin:5px 0 7px; font-size:clamp(26px,3vw,35px); font-weight:750; letter-spacing:-.025em; line-height:1.1; }.hero-copy { max-width:670px; margin-bottom:10px; color:var(--gb-muted); font-size:clamp(17px,2vw,21px); }.intro-note { max-width:730px; margin:0; color:var(--gb-muted); font-size:13px; }
.calculator-section { max-width:1240px; margin:0 auto; padding:clamp(35px,6vw,70px) var(--margin) clamp(55px,8vw,96px); }.section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; padding:0; border:0; }.section-head h2 { margin:4px 0 0; }.section-help { max-width:330px; margin:0; color:var(--gb-muted); font-size:14px; }.calculator-layout { display:grid; grid-template-columns:minmax(226px,.62fr) minmax(0,1.38fr); gap:clamp(22px,4vw,54px); border:0; }.calculator-list { display:grid; align-content:start; gap:7px; padding:0; border:0; }
.calc-choice { display:flex; align-items:center; gap:11px; width:100%; min-height:48px; padding:10px 13px; border:1px solid var(--gb-line); border-radius:5px; background:#fff; color:var(--gb-ink); cursor:pointer; font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:700; text-align:left; transition:background .15s,border-color .15s,color .15s; }.calc-choice span { width:20px; color:var(--gb-muted); font-family:Arial,Helvetica,sans-serif; font-size:10px; font-weight:800; }.calc-choice:hover { border-color:var(--gb-blue); color:var(--gb-blue); }.calc-choice.active { border-color:var(--gb-blue); background:var(--gb-blue); color:#fff; box-shadow:0 5px 14px rgba(20,109,160,.18); }.calc-choice.active span { color:rgba(255,255,255,.72); }
.calculator-panel { min-width:0; padding:clamp(22px,3.2vw,38px); border:1px solid var(--gb-line); border-radius:8px; background:#fff; box-shadow:0 10px 32px rgba(21,51,67,.07); }.calc-intro { max-width:710px; }.calc-intro>p:not(.eyebrow) { color:var(--gb-muted); font-size:15px; }.input-guide { margin-bottom:0; font-size:13px!important; }.fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin:26px 0 18px; }.field { position:relative; display:flex; flex-direction:column; gap:6px; color:#4e5e67; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:700; letter-spacing:.01em; }.field.full { grid-column:1/-1; }.field input { width:100%; height:54px; padding:10px 62px 10px 13px; border:1px solid #aabac3; border-radius:4px; background:#fff; color:var(--gb-ink); font-family:Arial,Helvetica,sans-serif; font-size:18px; }.field input:focus { border-color:var(--gb-blue); box-shadow:0 0 0 3px rgba(20,109,160,.14); outline:0; }.field span { position:absolute; right:13px; bottom:17px; color:var(--gb-muted); font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:800; }
.calc-submit,.button { display:inline-flex; align-items:center; justify-content:center; min-height:47px; padding:12px 17px; border:1px solid var(--gb-blue); border-radius:4px; background:var(--gb-blue); color:#fff; cursor:pointer; font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:800; letter-spacing:.02em; }.calc-submit:hover,.button:hover { border-color:var(--gb-blue-dark); background:var(--gb-blue-dark); }.result { min-height:108px; margin-top:23px; padding:22px; border:0; border-radius:5px; background:var(--gb-panel); }.result .mono { margin:0; color:var(--gb-muted); }.result-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(138px,1fr)); gap:17px; }.result-value { display:block; margin-top:5px; color:var(--gb-ink); font-family:Arial,Helvetica,sans-serif; font-size:clamp(25px,3vw,38px); font-weight:800; letter-spacing:-.04em; line-height:1.05; }.result-note { margin:17px 0 0; color:var(--gb-muted); font-size:14px; }
.save-card { margin-top:20px; padding:22px; border:1px solid var(--gb-line); border-radius:5px; background:#fff; }.save-card h4,.save-card h5 { margin:4px 0 0; color:var(--gb-ink); font-family:Arial,Helvetica,sans-serif; font-size:21px; font-weight:750; }.save-card>p { max-width:620px; margin:7px 0 18px; color:var(--gb-muted); font-size:14px; }.save-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.save-form label { display:grid; gap:6px; color:#4e5e67; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:700; }.save-form label.full { grid-column:1/-1; }.save-form input,.save-form textarea { width:100%; padding:11px 12px; border:1px solid #aabac3; border-radius:4px; background:#fff; color:var(--gb-ink); font-family:Arial,Helvetica,sans-serif; font-size:15px; }.save-form textarea { min-height:92px; resize:vertical; }.save-actions { display:flex; flex-wrap:wrap; gap:10px; grid-column:1/-1; }.plain-button { min-height:47px; padding:12px 16px; border:1px solid var(--gb-blue); border-radius:4px; background:#fff; color:var(--gb-blue); cursor:pointer; font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:800; }.plain-button:hover { background:var(--gb-blue-soft); }.saved-calculations { display:grid; gap:8px; margin-top:20px; }.saved-calculations:empty { display:none; }.saved-calculations h5 { font-size:13px; }.saved-item { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--gb-line); }.saved-item strong { font-family:Arial,Helvetica,sans-serif; font-weight:800; }.saved-item p { margin:4px 0 0; color:var(--gb-muted); font-size:13px; }.delete-save { border:0; background:transparent; color:var(--gb-blue); cursor:pointer; font-family:Arial,Helvetica,sans-serif; font-size:11px; font-weight:800; text-decoration:underline; }.disclaimer { margin:17px 0 0; color:var(--gb-muted); font-size:12px; line-height:1.45; }
.next-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1240px; margin:0 auto; padding:0 var(--margin) clamp(50px,7vw,90px); gap:18px; }.next-card { display:flex; flex-direction:column; align-items:flex-start; padding:clamp(23px,3vw,34px); border:1px solid var(--gb-line); border-radius:7px; background:#fff; }.next-card h2 { margin:7px 0 10px; font-size:clamp(23px,2.6vw,31px); }.next-card>p:not(.eyebrow) { margin-bottom:20px; color:var(--gb-muted); font-size:15px; }.feature-card { background:var(--gb-blue-soft); border-color:#cce4f1; }.text-link { color:var(--gb-blue); font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:800; text-decoration:underline; text-underline-offset:4px; } footer { display:flex; justify-content:space-between; gap:15px; padding:22px var(--margin); border-top:1px solid var(--gb-line); background:#fff; color:var(--gb-muted); font-family:Arial,Helvetica,sans-serif; font-size:10px; font-weight:800; letter-spacing:.06em; }
@media(max-width:760px){.site-header{min-height:60px}.brand-title{font-size:18px}.brand-sub{display:none}.site-header nav{gap:13px}.site-header nav a{min-height:60px;font-size:10px}.section-head{display:block}.section-help{margin-top:10px}.calculator-layout,.next-steps{grid-template-columns:1fr}.calculator-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.calc-choice{min-height:52px;padding:8px 9px;font-size:12px}.calc-choice span{display:none}.fields,.save-form{grid-template-columns:1fr}.save-form label.full{grid-column:auto}.next-steps{padding-top:0}footer{flex-direction:column}}@media(max-width:400px){.site-header nav{gap:9px}.site-header nav a{font-size:9px}.calculator-list{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}@media print{.site-header,.app-intro,.calculator-list,.save-card,.next-steps,footer{display:none!important}body,.calculator-panel{background:#fff}.calculator-section{padding:0}.calculator-panel{border:0;box-shadow:none}}

/* Reference-inspired calculator library additions — original GBCAL implementation */
.calculator-group { margin: 18px 0 3px; color: var(--gb-muted); font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.calculator-group:first-child { margin-top: 0; }
.cost-estimator { margin-top: 20px; padding: 22px; border: 1px solid #cce4f1; border-radius: 5px; background: var(--gb-blue-soft); }
.cost-estimator h4 { margin: 4px 0 6px; color: var(--gb-ink); font-family: Arial, Helvetica, sans-serif; font-size: 21px; font-weight: 750; }
.cost-estimator > p { max-width: 650px; margin: 0 0 18px; color: var(--gb-muted); font-size: 14px; }
.cost-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cost-field { display: grid; gap: 6px; color: #4e5e67; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 700; }
.cost-field input { width: 100%; height: 48px; padding: 9px 12px; border: 1px solid #aabac3; border-radius: 4px; background: #fff; color: var(--gb-ink); font: 17px Arial, Helvetica, sans-serif; }
.cost-field small { color: var(--gb-muted); font-size: 11px; font-weight: 600; }
.cost-submit { grid-column: 1 / -1; justify-self: start; min-height: 44px; padding: 10px 15px; border: 1px solid var(--gb-blue); border-radius: 4px; background: #fff; color: var(--gb-blue); cursor: pointer; font: 800 12px Arial, Helvetica, sans-serif; }
.cost-submit:hover { background: var(--gb-blue); color: #fff; }
.cost-result:empty { display: none; }
.cost-result { margin-top: 17px; padding-top: 16px; border-top: 1px solid #c6e0ee; }
.cost-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; color: var(--gb-ink); font: 800 19px Arial, Helvetica, sans-serif; }
.cost-total strong { color: var(--gb-blue-dark); font-size: 28px; letter-spacing: -.03em; }
.cost-note { margin: 8px 0 0; color: var(--gb-muted); font-size: 12px; }
.information-panel { margin-top: 20px; border: 1px solid var(--gb-line); border-radius: 5px; background: #fff; }
.information-panel summary { padding: 17px 20px; color: var(--gb-ink); cursor: pointer; font: 800 15px Arial, Helvetica, sans-serif; }
.information-panel summary::marker { color: var(--gb-blue); }
.info-grid { display: grid; grid-template-columns: minmax(170px, .7fr) minmax(0, 1.3fr); gap: 22px; padding: 0 20px 22px; }
.measurement-sketch { position: relative; min-height: 170px; overflow: hidden; border: 1px solid #c8d8e0; border-radius: 4px; background: linear-gradient(135deg, #f9fcfe, #eaf5fb); }
.measurement-sketch::before { content: ''; position: absolute; inset: 42px 29px 37px; border: 2px solid var(--gb-blue); border-radius: 2px; }
.measurement-sketch .sketch-x, .measurement-sketch .sketch-y, .measurement-sketch .sketch-z { position: absolute; color: var(--gb-blue-dark); font: 800 10px Arial, Helvetica, sans-serif; letter-spacing: .05em; }
.measurement-sketch .sketch-x { right: 34px; bottom: 19px; }.measurement-sketch .sketch-y { left: 14px; top: 22px; transform: rotate(-90deg); }.measurement-sketch .sketch-z { left: 36px; bottom: 20px; color: var(--gb-muted); }
.info-copy { display: grid; gap: 14px; }.info-copy section { border-bottom: 1px solid #e2ebef; padding-bottom: 12px; }.info-copy section:last-child { border-bottom: 0; padding-bottom: 0; }.info-copy h5 { margin: 0 0 4px; color: var(--gb-ink); font: 800 12px Arial, Helvetica, sans-serif; letter-spacing: .02em; }.info-copy p { margin: 0; color: var(--gb-muted); font-size: 14px; }
@media(max-width:760px) { .calculator-group { grid-column: 1 / -1; margin-top: 13px; }.cost-form { grid-template-columns: 1fr; }.info-grid { grid-template-columns: 1fr; }.measurement-sketch { min-height: 130px; }.measurement-sketch::before { inset: 31px 35px 29px; } }