/* ───────────────────────────────────────────────────────────── AMPACITIES · CALCULATOR DESIGN SYSTEM · "grouped cards" Single source of truth for the calculator-page look, v2. Established 2026-06-03 from the Voltage Drop redesign. The new calculator aesthetic — warm cream stage, near-black calculator cards, copper accent, Bricolage Grotesque — used by every migrated/new calculator. The editorial homepage (/index.html) and the site chrome (topbar/footer) are NOT affected: every rule here is scoped under `.vd`, `.vd-stage`, or `.vd-suite`, so it cannot leak into _shared.css or site-chrome.css. USAGE (per calculator page): ...fonts incl. Bricolage Grotesque... ← chrome tokens ← chrome ← THIS

…cards…

Reference implementation: library/voltage-drop/redesign.html Authoring / migration guide: templates/calculator-grouped/README.md PALETTE (migrated 2026-07-03 to the landing matte language): ivory #faf9f5 · body #1a1a1e · display #fff clay #d97757 (decoration; text = --amp-clay-text/-small) pass #5b7046 · fail #d23b2e TYPE: Bricolage Grotesque, tabular figures (.num) ───────────────────────────────────────────────────────────── */ /* ===== Ivory stage band (sits between the dark topbar and footer) ===== */ .vd-stage { background: #faf9f5; display: flex; justify-content: center; padding: 40px 28px 64px; } .vd-suite { width: 900px; max-width: 100%; display: flex; flex-direction: column; gap: 13px; } /* ===== Indicative-data disclaimer (tables are approximated, not yet calibrated) ===== */ .vd-suite .vd-disclaimer { display: flex; align-items: baseline; gap: 11px; background: rgba(217,119,87,0.10); border: 1px solid rgba(217,119,87,0.28); border-left: 3px solid #d97757; border-radius: 11px; padding: 11px 15px; font-family: 'Bricolage Grotesque', system-ui, sans-serif; } .vd-suite .vd-disclaimer .dl-tag { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: #b0512f; border-radius: 999px; padding: 3px 9px; } .vd-suite .vd-disclaimer .dl-txt { font-size: 12px; line-height: 1.5; color: #3d3d3a; } .vd-suite .vd-disclaimer strong { color: #b0512f; font-weight: 700; } @media print { .vd-suite .vd-disclaimer { display: none; } } /* ===== Shared shell — every rule scoped under .vd ===== */ .vd { --display: #ffffff; --ink: #181a1f; --input: #f0eee6; --ctrl: #e8e6dc; --copper: var(--amp-copper, #d97757); --pass: var(--amp-pass, #5b7046); --fail: var(--amp-fail, #d23b2e); --clay-text: var(--amp-clay-text, #cc6a47); --clay-small: var(--amp-clay-small, #b0512f); --ink-dim: rgba(24,26,31,0.55); --ink-fade: rgba(24,26,31,0.40); --hairline: rgba(24,26,31,0.12); --soft: rgba(24,26,31,0.08); --on-dark: rgba(255,255,255,0.92); --on-dark-dim: rgba(255,255,255,0.5); --on-dark-line: rgba(255,255,255,0.12); --pad: 15px; --gap: 11px; --hero-size: 58px; width: 100%; background: #1a1a1e; border-radius: 16px; padding: var(--pad); box-shadow: 0 30px 70px -30px rgba(20,16,10,0.5); font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 500; font-optical-sizing: auto; color: var(--ink); text-align: left; } .vd, .vd * { box-sizing: border-box; } .vd button { font-family: inherit; cursor: pointer; } .vd input, .vd select { font-family: inherit; } .vd .num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* head */ .vd .vd-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 3px 6px 12px; } .vd .vd-head .t { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .vd .vd-head .tag { color: var(--on-dark-dim); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .vd .vd-head .hl { display: flex; align-items: center; gap: 12px; } .vd .vd-head .hr { display: flex; align-items: center; gap: 14px; } /* doc-status pill (in head) */ .vd .vd-status { position: relative; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.08); border: 1px solid var(--on-dark-line); border-radius: 999px; padding: 5px 10px 5px 11px; } .vd .vd-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--copper); } .vd .vd-status[data-status="issued"] .dot { background: var(--pass); } .vd .vd-status[data-status="superseded"] .dot { background: var(--on-dark-dim); } .vd .vd-status select { appearance: none; -webkit-appearance: none; background: transparent; border: none; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding-right: 14px; cursor: pointer; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; } .vd .vd-status select option { color: #181a1f; } /* body + cards */ .vd .vd-body { display: flex; flex-direction: column; gap: var(--gap); } .vd .vd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .vd .vd-card, .vd .vd-hero { background: var(--display); border-radius: 16.4px; padding: var(--pad); box-shadow: 0 6px 22px -10px rgba(20,16,10,0.28); } .vd .vd-card .ct { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .vd .vd-card .ct::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--copper); } .vd .vd-card .ct .ct-meta { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-fade); } /* hero */ .vd .vd-hero { display: flex; flex-direction: row; align-items: center; gap: 24px; } .vd .vd-hero-main { flex: none; padding-right: 24px; border-right: 1px solid var(--hairline); } .vd .vd-hero-viz { flex: 1; } .vd .vd-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .vd .vd-lbl { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); } .vd .vd-badge { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; white-space: nowrap; } .vd .vd-badge.pass { color: var(--pass); background: rgba(91,112,70,0.12); } .vd .vd-badge.fail { color: var(--fail); background: rgba(210,59,46,0.12); } .vd .vd-figure { margin: 10px 0 2px; } .vd .vd-figure .big { display: flex; align-items: baseline; gap: 7px; } .vd .vd-figure .big .v { font-size: var(--hero-size); font-weight: 700; letter-spacing: -0.04em; line-height: 0.85; color: var(--clay-text); } .vd .vd-figure .big .u { font-size: calc(var(--hero-size) * 0.36); font-weight: 600; color: var(--ink-fade); } .vd .vd-figure .sub { margin-top: 7px; font-size: 15px; font-weight: 700; color: var(--ink-dim); } .vd .vd-thresh { position: relative; height: 16px; background: var(--soft); border-radius: 99px; } .vd .vd-thresh .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; transition: width .5s cubic-bezier(.2,.7,.2,1), background .3s; } .vd .vd-thresh .line { position: absolute; top: -7px; bottom: -7px; width: 2px; background: var(--ink); } .vd .vd-thresh .line span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-dim); white-space: nowrap; } .vd .vd-viz-scale { display: flex; justify-content: space-between; margin-top: 9px; font-size: 10px; font-weight: 600; color: var(--ink-fade); } .vd .vd-mini { display: flex; flex-wrap: wrap; gap: 15px 24px; margin-top: 15px; } .vd .vd-mini .m .k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-fade); } .vd .vd-mini .m .v { font-size: 18px; font-weight: 700; margin-top: 2px; letter-spacing: -0.01em; color: var(--ink); } .vd .vd-mini .m .v i { font-style: normal; font-size: 11px; color: var(--ink-fade); margin-left: 2px; } .vd .vd-mini .m .v.hot { color: var(--clay-small); } /* fields */ .vd .vd-fld { margin-bottom: var(--gap); } .vd .vd-fld:last-child { margin-bottom: 0; } .vd .vd-fld .fl { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; } .vd .vd-fld .fld-label { color: var(--ink-dim); font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .vd .vd-fld[hidden] { display: none; } .vd .vd-fld .stepper, .vd .vd-fld .seg, .vd .vd-fld select.dd, .vd .vd-fld .field { width: 100%; } .vd .vd-fld .seg-btn { flex: 1; } .vd .vd-fld .stepper { justify-content: space-between; } /* segmented */ .vd .seg { display: inline-flex; background: var(--ctrl); border-radius: 8px; padding: 2px; gap: 2px; } .vd .seg-btn { border: none; background: transparent; color: var(--ink-dim); font-weight: 600; letter-spacing: -0.01em; padding: 6px 11px; border-radius: 6px; font-size: 12px; transition: all .15s ease; white-space: nowrap; } .vd .seg-btn:hover { color: var(--ink); } .vd .seg-btn.active { background: #1a1a1e; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18); } .vd .seg-btn:focus-visible { outline: 2px solid var(--clay-text); outline-offset: 1px; } /* stepper */ .vd .stepper { display: inline-flex; align-items: center; background: var(--ctrl); border-radius: 9px; overflow: hidden; } .vd .step-btn { border: none; background: transparent; color: var(--ink); width: 36px; height: 38px; font-size: 19px; font-weight: 500; line-height: 1; } .vd .step-btn:hover { background: var(--soft); } .vd .step-val { flex: 1; min-width: 52px; text-align: center; font-weight: 600; font-size: 15px; } .vd .step-locked { display: flex; align-items: center; justify-content: center; height: 38px; background: var(--ctrl); border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--ink-dim); } /* dropdown + plain field */ .vd select.dd { appearance: none; -webkit-appearance: none; background-color: var(--input); border: 1px solid var(--hairline); border-radius: 9px; padding: 0 34px 0 12px; height: 44px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23181a1f' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .vd .field { display: flex; align-items: center; background: var(--input); border: 1px solid transparent; border-radius: 9px; padding: 0 12px; height: 44px; transition: border-color .14s ease; } .vd .field:focus-within { border-color: var(--clay-text); } .vd .field input { border: none; background: transparent; outline: none; font-size: 15px; font-weight: 600; color: var(--ink); width: 100%; padding: 0; font-variant-numeric: tabular-nums lining-nums; } .vd .field .unit { color: var(--ink-fade); font-size: 12px; font-weight: 600; padding-left: 6px; white-space: nowrap; } /* advanced disclosure */ .vd .vd-adv { margin-top: 2px; } .vd .vd-adv-toggle { width: 100%; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--on-dark-line); color: var(--on-dark); border-radius: 12px; padding: 12px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transition: background .15s; } .vd .vd-adv-toggle:hover { background: rgba(255,255,255,0.08); } .vd .vd-adv-toggle .chev { margin-left: auto; transition: transform .2s; font-size: 10px; opacity: 0.6; } .vd .vd-adv-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); } .vd .vd-adv-toggle .hint { color: var(--on-dark-dim); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11.5px; } .vd .vd-adv-panel { margin-top: var(--gap); } .vd .vd-adv-panel[hidden] { display: none; } .vd .vd-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px var(--pad); } .vd .vd-adv-grid .span-2 { grid-column: span 2; } @media (max-width: 760px) { .vd .vd-adv-grid { grid-template-columns: 1fr; } .vd .vd-adv-grid .span-2 { grid-column: auto; } } /* tabs (Analysis) */ .vd .vd-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--hairline); margin-bottom: 16px; flex-wrap: wrap; } .vd .vd-tab { border: none; background: none; color: var(--ink-dim); font-size: 12.5px; font-weight: 600; padding: 9px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; } .vd .vd-tab:hover { color: var(--ink); } .vd .vd-tab.active { color: var(--ink); border-bottom-color: var(--copper); } .vd .vd-tab:focus-visible { outline: 2px solid var(--clay-text); outline-offset: -2px; border-radius: 6px; } .vd .vd-tabs .ref { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-fade); padding-right: 4px; } .vd .vd-pane[hidden] { display: none; } /* summary rows */ .vd .srow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px dotted var(--hairline); font-size: 13px; } .vd .srow .lab { color: var(--ink-dim); font-weight: 500; } .vd .srow .lab .ref { font-size: 10px; color: var(--ink-fade); letter-spacing: 0.04em; margin-left: 4px; } .vd .srow .val { font-weight: 700; white-space: nowrap; } .vd .srow .val em { font-style: normal; color: var(--ink-fade); font-weight: 600; font-size: 0.84em; margin-left: 2px; } .vd .srow.sep { border-top: 1px solid var(--hairline); margin-top: 4px; } .vd .srow.gov { border-bottom: none; } .vd .srow.gov .val { color: var(--clay-small); font-size: 12px; } /* utilisation */ .vd .vd-util { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; } .vd .vd-util .uhead { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-fade); } .vd .urow .utop { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; } .vd .urow .ul { color: var(--ink-dim); font-weight: 600; } .vd .urow .uv { font-weight: 700; } .vd .urow .uv .um { color: var(--ink-fade); font-weight: 600; } .vd .ubar { height: 8px; background: var(--soft); border-radius: 99px; overflow: hidden; } .vd .ubar .ufill { display: block; height: 100%; border-radius: 99px; background: var(--copper); transition: width .5s cubic-bezier(.2,.7,.2,1), background .3s; } .vd .ubar .ufill.over { background: var(--fail); } /* compliance reasons */ .vd .creason { padding: 8px 0; border-bottom: 1px dotted var(--hairline); } .vd .creason:last-child { border-bottom: none; } .vd .creason .ctag { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .vd .creason.pass .ctag { color: var(--pass); } .vd .creason.warn .ctag { color: var(--clay-small); } .vd .creason.fail .ctag { color: var(--fail); } .vd .creason .cmsg { margin-top: 4px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; } /* insight line */ .vd .vd-insight { border-left: 2px solid var(--copper); background: var(--soft); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 12.5px; color: var(--ink-dim); margin-bottom: 14px; line-height: 1.5; } .vd .vd-insight code { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } /* comparison + revision tables */ .vd table.vd-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; } .vd table.vd-tbl th { text-align: right; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-fade); padding: 6px 10px; border-bottom: 1px solid var(--hairline); white-space: nowrap; } .vd table.vd-tbl th:first-child, .vd table.vd-tbl td:first-child { text-align: left; } .vd table.vd-tbl td { padding: 7px 10px; border-bottom: 1px dotted var(--hairline); text-align: right; white-space: nowrap; } .vd table.vd-tbl tr:last-child td { border-bottom: none; } .vd table.vd-tbl tbody tr.sel { background: rgba(217,119,87,0.09); } .vd table.vd-tbl tbody tr.sel td { font-weight: 700; } .vd .st-pass { color: var(--pass); font-weight: 700; } .vd .st-fail { color: var(--fail); font-weight: 700; } /* document section */ .vd .vd-docgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } @media (max-width: 760px) { .vd .vd-docgrid { grid-template-columns: 1fr; } } .vd .doc-h { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 12px; } /* revision table */ .vd .rev-input { border: none; background: transparent; outline: none; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); width: 100%; padding: 4px 2px; border-bottom: 1px solid transparent; } .vd .rev-input:focus { border-bottom-color: var(--copper); } .vd table.vd-tbl td.del-col { width: 28px; text-align: center; padding: 6px 4px; } .vd .del-btn { border: none; background: none; color: var(--ink-fade); font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 5px; } .vd .del-btn:hover { color: var(--fail); background: var(--soft); } .vd tr.add-row .rev-input { color: var(--ink-fade); } .vd .rev-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; } .vd .add-btn { border: 1px dashed var(--hairline); background: none; color: var(--ink-dim); border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 600; transition: all .15s; } .vd .add-btn:hover { border-color: var(--copper); color: var(--copper); } .vd .rev-foot .stamp-info { font-size: 11px; color: var(--ink-fade); } .vd .rev-foot code, .vd .vd-exports code { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-dim); } /* notes + refs */ .vd .vd-notes ol { margin: 0; padding-left: 18px; } .vd .vd-notes li { font-size: 12.5px; color: var(--ink-dim); line-height: 1.55; padding: 3px 0; outline: none; } .vd .vd-notes li:focus { color: var(--ink); } .vd .vd-refs ul { margin: 0; padding: 0; list-style: none; } .vd .vd-refs li { font-size: 11.5px; color: var(--ink-dim); line-height: 1.5; padding: 4px 0; border-bottom: 1px dotted var(--hairline); } .vd .vd-refs li:last-child { border-bottom: none; } /* title-block */ .vd .vd-tb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; } .vd .tb-cell { background: var(--display); padding: 8px 11px; display: flex; flex-direction: column; gap: 3px; min-height: 46px; } .vd .tb-cell.full { grid-column: 1 / -1; } .vd .tb-cell.brand { grid-column: 1 / -1; background: #1a1a1e; } .vd .tb-cell .k { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-fade); } .vd .tb-cell .v { font-size: 13px; font-weight: 700; color: var(--ink); } .vd .tb-cell.brand .v { color: #fff; } .vd .tb-cell.brand .k { color: var(--copper); } .vd .tb-cell input { border: none; background: transparent; outline: none; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink); width: 100%; padding: 0; border-bottom: 1px solid transparent; } .vd .tb-cell input:focus { border-bottom-color: var(--copper); } /* export bar */ .vd .vd-exports { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: var(--gap); padding: 14px 18px; background: rgba(255,255,255,0.04); border: 1px solid var(--on-dark-line); border-radius: 12px; flex-wrap: wrap; } .vd .vd-exports .meta { font-size: 11px; color: var(--on-dark-dim); } .vd .vd-exports .xb { display: flex; align-items: center; gap: 8px; } .vd .vd-exports .xlabel { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-dim); margin-right: 4px; } .vd .vd-exports a { color: var(--on-dark); text-decoration: none; border: 1px solid var(--on-dark-line); border-radius: 7px; padding: 6px 12px; font-size: 12px; font-weight: 600; transition: all .15s; } .vd .vd-exports a:hover { border-color: var(--copper); color: var(--copper); } @media (max-width: 900px) { .vd .vd-cards { grid-template-columns: 1fr; } .vd .vd-hero { flex-direction: column; align-items: stretch; } .vd .vd-hero-main { border-right: none; padding-right: 0; border-bottom: 1px solid var(--hairline); padding-bottom: 18px; } } /* ≤520px (phones): the two remaining page-wideners (2026-06-11). Data tables scroll inside their card instead of widening the whole page (maximum-demand's Loads table forced ~495px), and summary-row values may wrap (motor-starting's nowrap governing-clause citation forced ~460px). Desktop is untouched. */ @media (max-width: 520px) { .vd table.vd-tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .vd .srow .val { white-space: normal; overflow-wrap: anywhere; text-align: right; } } /* ════════════════════════════════════════════════════════════════ DESIGN-POLISH Phase 1b (2026-07-02) — suite-wide tier · data-role grid · 2-up field grid · D3 density tokens. Plan: DESIGN_POLISH_PLAN_2026-07-02.md §2 / D1–D3 (values owner-ratified in the Phase-0 spike). Opt-in per D8: a page adds .suite-wide on .vd-suite, data-role="calc| analysis|doc" on its three sections, .vd-compact on the calculator section. Bare .vd-suite pages (PC library/digitizer, auth) are untouched. ════════════════════════════════════════════════════════════════ */ /* D1 two-tier width — .suite-wide grants WIDTH ONLY; the grid is gated separately on data-role hooks so grid-less pages can still go wide. */ .vd-suite.suite-wide { width: min(1080px, 96vw); max-width: 100%; margin-inline: auto; } .vd-stage:has(> .vd-suite.suite-wide) { display: block; --stage-pad: 24px 20px 40px; } @media (min-width: 1200px) { .vd-suite.suite-wide { width: min(var(--amp-suite-max, 1920px), 96vw); } /* D2 · 2-col minmax grid + sticky Analysis (align-items:start is REQUIRED — default stretch would make the sticky child full-row-height and inert) */ .vd-suite.suite-wide:has(> .vd[data-role="analysis"]) { display: grid; grid-template-columns: minmax(0, 1fr) var(--analysis-w, clamp(300px, 26vw, 400px)); column-gap: 11px; row-gap: 16px; align-items: start; } .vd-suite.suite-wide > .vd[data-role="calc"] { grid-column: 1; } .vd-suite.suite-wide > .vd[data-role="analysis"] { grid-column: 2; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; } .vd-suite.suite-wide > .vd[data-role="doc"], .vd-suite.suite-wide > :not([data-role]) { grid-column: 1 / -1; } } /* D3 · 2-up field grid (generalised from the cable-sizing dense pattern; long seg controls get .span-2 — they clip in a half-column below ~1440) */ .vd .vd-card .vd-fld-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px; grid-auto-flow: dense; } .vd .vd-fld-grid .vd-fld { margin: 0; min-width: 0; } .vd .vd-fld-grid .span-2 { grid-column: 1 / -1; } @media (max-width: 560px) { .vd .vd-card .vd-fld-grid { grid-template-columns: 1fr; } } /* D3 · density tokens — consumed by glass-skin's !important rules (plan §2.2) and by this sheet's own var(--pad)/var(--gap) paddings. Scoped to .suite-wide so platform (.plat-wide) keeps its current density until Phase 3. */ .vd-suite.suite-wide .vd { --pad: 12px; --gap: 9px; --ctl-h: 38px; --hero-size: 44px; --hero-unit: 17px; --hero-pad: 14px 16px; --hero-gap: 16px; --fig-mar: 8px 0 2px; --mini-gap: 12px 22px; --ct-mar: 10px; --fld-gap: 9px 12px; --fl-mar: 4px; } @media (pointer: coarse) { /* 38px controls fail the 44px touch floor on iPads — loosen under touch */ .vd-suite.suite-wide .vd { --ctl-h: 44px; --pad: 14px; } }