@layer gc-calculator { /* * Calculator Core 3.5.1 integration baseline. * The theme owns this public structure copy; Core continues to own markup, * runtime behavior, release binding, and formula rendering. */ .calculator-page, .calculator-archive{ --calculator-ink: var(--gc-ink); --calculator-muted: var(--gc-muted); --calculator-line: var(--gc-line); --calculator-border: var(--gc-line); --calculator-surface: var(--gc-surface); --calculator-soft: var(--gc-tint); --calculator-accent: var(--gc-accent); --calculator-accent-dark: var(--gc-navy); --calculator-danger: var(--gc-negative); --calculator-danger-surface: var(--gc-danger-surface); --calculator-on-accent: var(--gc-surface); --calculator-input-surface: var(--gc-surface); --calculator-control-height: 2.75rem; --calculator-space-1: var(--gc-space-1); --calculator-space-2: var(--gc-space-2); --calculator-space-3: var(--gc-space-3); --calculator-space-4: var(--gc-space-4); --calculator-space-5: var(--gc-space-5); --calculator-radius: var(--gc-radius-sm); color: var(--gc-ink); font-family: var(--gc-font); } .calculator-page{ box-sizing: border-box; container: calculator-surface / inline-size; color: var(--calculator-ink, inherit); width: 100%; max-width: var(--gc-content); margin-inline: auto; } .calculator-page *, .calculator-page *::before, .calculator-page *::after{ box-sizing: inherit; } .calculator-page [hidden]{ display: none !important; } .calculator-page .calculator-surface{ position: relative; width: 100%; } .calculator-page .calculator-form{ width: 100%; } .calculator-page .calculator-tool-shell{ display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); align-items: start; overflow: hidden; width: 100%; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 8px; background: var(--calculator-surface, #fff); box-shadow: 0 8px 24px rgba(23, 40, 50, .05); } .calculator-page .calculator-tool-panel{ position: relative; display: grid; align-content: start; gap: 1.5rem; min-width: 0; padding: 2rem clamp(1.25rem, 3vw, 2.25rem); } .calculator-page .calculator-tool-panel--inputs{ background: color-mix(in srgb, var(--gc-paper) 55%, var(--gc-surface)); } .calculator-page .calculator-tool-panel--results{ position: sticky; top: 1rem; border-left: 1px solid var(--calculator-line, #e0d9c6); } .calculator-page .calculator-formula-band{ width: 100%; margin-top: 1rem; padding: 1.35rem 1.5rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 6px; background: color-mix(in srgb, var(--calculator-surface, #fff) 92%, var(--calculator-accent, #F4B740)); } .calculator-page .calculator-formula-panel{ grid-column: 1 / -1; display: grid; gap: .65rem; min-width: 0; margin-top: .8rem; padding: 1rem 1.2rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 8px; background: var(--calculator-surface, #fff); } .calculator-page .calculator-formula-heading{ display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .calculator-page .calculator-formula-heading h2{ margin: 0; color: var(--calculator-ink, inherit); font-size: 1rem; line-height: 1.3; } .calculator-page .calculator-formula-heading-note{ color: var(--calculator-muted, #5b6773); font-size: .8rem; } .calculator-page .calculator-formula-toggle{ min-height: 2.25rem; margin-inline-start: auto; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; background: var(--calculator-surface, #fff); padding: .45rem .7rem; color: var(--calculator-accent-dark, #1a2230); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; } .calculator-page .calculator-formula-toggle:hover, .calculator-page .calculator-formula-toggle:focus-visible{ border-color: var(--calculator-accent, #b45309); color: var(--calculator-accent, #b45309); } .calculator-page .calculator-formula-summary{ margin: -.15rem 0 .15rem; color: var(--calculator-muted, #5b6773); font-size: .82rem; font-weight: 700; line-height: 1.45; } .calculator-page .calculator-formula-list[hidden]{ display: none !important; } .calculator-page .calculator-formula-list{ display: grid; gap: .7rem; min-width: 0; } .calculator-page .calculator-formula-item{ min-width: 0; padding: .58rem 0; background: transparent; } .calculator-page .calculator-formula-item + .calculator-formula-item{ border-top: 1px solid var(--calculator-line, #e0d9c6); padding-top: 1.1rem; } .calculator-page .calculator-formula-item h3{ margin: 0 0 .5rem; color: var(--calculator-muted, #5b6773); font-size: .82rem; line-height: 1.35; } .calculator-page .calculator-formula-symbolic, .calculator-page .calculator-formula-substituted{ min-width: 0; overflow-x: auto; color: var(--calculator-ink, inherit); font-size: .98rem; line-height: 1.5; } .calculator-page .calculator-formula-substituted{ margin-top: .45rem; padding-top: .45rem; border-top: 1px dashed var(--calculator-line, #e0d9c6); color: var(--calculator-muted, #5b6773); font-size: .9rem; } .calculator-page .calculator-components--formula{ width: 100%; gap: 1rem; } .calculator-page .calculator-components--formula .calculator-component--formula{ width: 100%; min-width: 0; } .calculator-page .calculator-components--formula .calculator-component--formula > h2{ margin: 0 0 .7rem; color: var(--calculator-accent, #b45309); font-size: .88rem; font-weight: 800; letter-spacing: 0; line-height: 1.25; text-transform: uppercase; } .calculator-page .calculator-components--formula .calculator-component--formula .calculator-output{ width: 100%; min-width: 0; margin: 0; padding: .9rem 1rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; background: var(--calculator-surface, #fff); } .calculator-page .calculator-components--formula .calculator-component--formula .calculator-output-label{ margin: 0 0 .55rem; color: var(--calculator-muted, #5b6773); font-size: .82rem; line-height: 1.35; } .calculator-page .calculator-components--formula .calculator-component--formula .calculator-output-value{ width: 100%; min-height: 2.5rem; overflow-x: auto; color: var(--calculator-ink, inherit); font-size: 1rem; line-height: 1.6; font-weight: 500; } .calculator-page .calculator-components--formula .calculator-formula-symbolic, .calculator-page .calculator-components--formula .calculator-formula-substituted{ display: block; width: 100%; max-width: 100%; overflow-x: auto; padding: .2rem 0; text-align: center; white-space: nowrap; } .calculator-page .calculator-formula-symbolic .katex, .calculator-page .calculator-formula-substituted .katex{ max-width: none; white-space: nowrap; } .calculator-page .calculator-panel-heading{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; min-width: 0; padding-bottom: .85rem; border-bottom: 1px solid var(--calculator-line, #e0d9c6); } .calculator-page .calculator-panel-title{ margin: 0; color: var(--calculator-ink, #11161d); font-size: .8rem; font-weight: 800; letter-spacing: 0; line-height: 1.25; text-transform: uppercase; } .calculator-page .calculator-component > h2{ margin: 0 0 1rem; color: var(--calculator-ink, inherit); font-size: 1.2rem; font-weight: 700; letter-spacing: 0; line-height: 1.25; } .calculator-page .calculator-note-toggle-input{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; } .calculator-page .calculator-note-toggle{ display: inline-flex; align-items: center; gap: .45rem; color: var(--calculator-ink, inherit); font-weight: 700; cursor: pointer; } .calculator-page .calculator-note-toggle-box{ display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 2px solid var(--calculator-line, #e0d9c6); border-radius: 3px; background: var(--calculator-surface, #fff); } .calculator-page .calculator-note-toggle-box::after{ content: ""; width: .32rem; height: .62rem; border: solid var(--calculator-on-accent, #fff); border-width: 0 2px 2px 0; opacity: 0; transform: rotate(45deg) translateY(-1px); } .calculator-page .calculator-note-toggle-input:checked + .calculator-panel-heading .calculator-note-toggle-box{ border-color: var(--calculator-accent, #b45309); background: var(--calculator-accent, #b45309); } .calculator-page .calculator-note-toggle-input:checked + .calculator-panel-heading .calculator-note-toggle-box::after{ opacity: 1; } .calculator-page .calculator-note-toggle-input:focus-visible + .calculator-panel-heading .calculator-note-toggle-box{ outline: 2px solid color-mix(in srgb, var(--calculator-accent, #b45309) 28%, transparent); outline-offset: 2px; } .calculator-page .calculator-surface-header{ display: flex; justify-content: flex-end; min-width: 2.25rem; } .calculator-page .calculator-feedback-toggle{ width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 999px; background: var(--calculator-surface, #fff); color: var(--calculator-accent, #b45309); font: inherit; font-weight: 700; line-height: 1; cursor: pointer; } .calculator-page .calculator-feedback-toggle:hover, .calculator-page .calculator-feedback-toggle:focus-visible{ border-color: var(--calculator-accent, #b45309); outline: 2px solid color-mix(in srgb, var(--calculator-accent, #b45309) 28%, transparent); outline-offset: 2px; } .calculator-page .calculator-components{ display: grid; gap: 1.25rem; min-width: 0; } .calculator-page .calculator-component{ min-width: 0; padding: 0; border: 0; background: transparent; } .calculator-page .calculator-component--columns{ display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; } .calculator-page .calculator-component--columns > .calculator-component{ margin: 0; } .calculator-page .calculator-fields{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; } .calculator-page .calculator-field{ display: grid; gap: .35rem; min-width: 0; } .calculator-page .calculator-field > label, .calculator-page .calculator-group > legend, .calculator-page .calculator-field--radio > legend, .calculator-page .calculator-repeatable legend{ color: var(--calculator-ink, #11161d); font-size: .875rem; font-weight: 700; line-height: 1.35; } .calculator-page .calculator-field-unit{ display: inline-block; margin-left: .25rem; color: var(--calculator-muted, #5b6773); font-size: .82em; line-height: 1; vertical-align: sub; } .calculator-page .calculator-field input, .calculator-page .calculator-field select{ width: 100%; min-height: 3rem; padding: .7rem .8rem; border: 1px solid color-mix(in srgb, var(--calculator-line, #e0d9c6) 88%, var(--calculator-ink, #11161d)); border-radius: 6px; background: var(--calculator-input-surface, #fff); color: inherit; font-size: 1rem; } .calculator-page .calculator-field input:hover, .calculator-page .calculator-field select:hover{ border-color: var(--calculator-accent, #b45309); } .calculator-page .calculator-field input:focus-visible, .calculator-page .calculator-field select:focus-visible{ outline: 3px solid color-mix(in srgb, var(--calculator-accent, #b45309) 22%, transparent); outline-offset: 1px; } .calculator-page .calculator-field--boolean input, .calculator-page .calculator-field--radio input{ width: auto; min-height: auto; padding: 0; border: 0; background: transparent; accent-color: var(--calculator-accent, #b45309); } .calculator-page .calculator-field--radio{ gap: .45rem; } .calculator-page .calculator-field--radio > label{ display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; } .calculator-page .calculator-field--capsule{ gap: .55rem; } .calculator-page .calculator-capsule-group{ display: flex; flex-wrap: wrap; gap: .5rem; } .calculator-page .calculator-capsule{ position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; } .calculator-page .calculator-capsule input{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } .calculator-page .calculator-capsule span{ display: inline-flex; align-items: center; justify-content: center; min-width: 5.5rem; min-height: 2.75rem; padding: .6rem .8rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 999px; background: var(--calculator-input-surface, #fff); color: inherit; font-weight: 600; text-align: center; } .calculator-page .calculator-capsule input:checked + span{ border-color: var(--calculator-accent, #b45309); background: var(--calculator-accent, #b45309); color: var(--calculator-on-accent, #fff); } .calculator-page .calculator-capsule input:focus-visible + span{ outline: 2px solid color-mix(in srgb, var(--calculator-accent, #b45309) 28%, transparent); outline-offset: 2px; } .calculator-page .calculator-toggle{ display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; } .calculator-page .calculator-toggle input{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } .calculator-page .calculator-toggle-track{ display: inline-flex; align-items: center; width: 3rem; height: 1.7rem; padding: .2rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 999px; background: var(--calculator-input-surface, #fff); transition: background .15s ease, border-color .15s ease; } .calculator-page .calculator-toggle-thumb{ width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--calculator-muted, #5b6773); transition: transform .15s ease, background .15s ease; } .calculator-page .calculator-toggle input:checked + .calculator-toggle-track{ border-color: var(--calculator-accent, #b45309); background: var(--calculator-accent, #b45309); } .calculator-page .calculator-toggle input:checked + .calculator-toggle-track .calculator-toggle-thumb{ background: var(--calculator-on-accent, #fff); transform: translateX(1.3rem); } .calculator-page .calculator-toggle input:focus-visible + .calculator-toggle-track{ outline: 2px solid color-mix(in srgb, var(--calculator-accent, #b45309) 28%, transparent); outline-offset: 2px; } .calculator-page .calculator-group, .calculator-page .calculator-field--radio{ margin: 0; padding: 0; border: 0; min-width: 0; } .calculator-page .calculator-results{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .calculator-page .calculator-results .calculator-output{ display: grid; align-content: start; min-width: 0; min-height: 6.25rem; padding: 1rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 6px; background: var(--calculator-surface, #fff); } .calculator-page .calculator-results .calculator-output[data-output-visibility="primary"]:first-of-type{ grid-column: 1 / -1; min-height: 8rem; border-top: 1px solid var(--calculator-line, #e0d9c6); background: var(--calculator-soft, #eff5f5); } .calculator-page .calculator-results .calculator-output[data-output-visibility="primary"]:first-of-type .calculator-output-label{ color: var(--calculator-accent-dark, #1a2230); } .calculator-page .calculator-results .calculator-output[data-output-visibility="primary"]:first-of-type .calculator-output-value{ font-size: 2.1rem; line-height: 1.2; } .calculator-page .calculator-results .calculator-output--details{ padding: 0; border: 0; border-radius: 0; background: transparent; } .calculator-page .calculator-result-details{ grid-column: 1 / -1; margin-top: .4rem; padding-top: 1rem; border-top: 1px solid var(--calculator-line, #e0d9c6); } .calculator-page .calculator-result-details > summary{ width: fit-content; cursor: pointer; color: var(--calculator-ink, inherit); font-size: .95rem; font-weight: 700; } .calculator-page .calculator-result-details-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; margin-top: .7rem; } .calculator-page .calculator-result-details-list .calculator-output{ min-width: 0; padding: .65rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; background: transparent; } .calculator-page .calculator-output-detail{ margin: .35rem 0 0; color: var(--calculator-muted, #5b6773); } .calculator-page .calculator-output-detail > summary{ cursor: pointer; font-size: .78rem; font-weight: 600; } .calculator-page .calculator-output-detail .calculator-output-value{ margin-top: .3rem; font-size: .82rem; line-height: 1.45; font-weight: 400; overflow-wrap: anywhere; } .calculator-page .calculator-output-label{ margin: 0 0 .55rem; color: var(--calculator-muted, #5b6773); font-size: .82rem; font-weight: 700; line-height: 1.35; } .calculator-page .calculator-output-value{ min-height: 1.45rem; color: var(--calculator-ink, inherit); font-size: 1.35rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .calculator-page .calculator-status-panel, .calculator-page .calculator-note{ display: block; padding: .25rem 0; } .calculator-page .calculator-status-panel .calculator-output, .calculator-page .calculator-note .calculator-output{ display: flex; align-items: baseline; gap: .75rem; padding: 0; border: 0; background: transparent; } .calculator-page .calculator-status-panel .calculator-output{ display: block; } .calculator-page .calculator-status-panel .calculator-output-label, .calculator-page .calculator-note .calculator-output-label{ flex: 0 0 auto; margin: 0; font-size: .78rem; font-weight: 700; color: var(--calculator-muted, #5b6773); text-transform: uppercase; letter-spacing: 0; } .calculator-page .calculator-status-panel .calculator-output-value{ font-size: .9rem; font-weight: 600; } .calculator-page .calculator-note .calculator-output-value{ font-size: .9rem; line-height: 1.5; font-weight: 400; color: var(--calculator-muted, #5b6773); } .calculator-page .calculator-note .calculator-output{ display: block; } .calculator-page .calculator-note .calculator-output > summary{ width: fit-content; cursor: pointer; color: var(--calculator-muted, #5b6773); font-size: .78rem; font-weight: 600; } .calculator-page .calculator-actions{ display: flex; flex-wrap: wrap; gap: .7rem; padding-top: 1.25rem; border-top: 1px solid var(--calculator-line, #e0d9c6); } .calculator-page .calculator-action{ display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .55rem; padding: .7rem 1rem; border-radius: 6px; font-size: .875rem; font-weight: 800; cursor: pointer; } .calculator-page .calculator-action-icon{ display: inline-flex; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; } .calculator-page .calculator-action-icon svg{ display: block; width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .calculator-page .calculator-action-label{ min-width: 0; } .calculator-page .calculator-status{ min-height: 1.4rem; margin: -.75rem 0 -.25rem; color: var(--calculator-muted, #5b6773); font-size: .875rem; } .calculator-page .calculator-status.is-error{ color: var(--calculator-danger, #a32626); } .calculator-page .calculator-validation-summary{ margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--calculator-danger, #a32626); background: color-mix(in srgb, var(--calculator-danger, #a32626) 8%, var(--calculator-surface, #fff)); } .calculator-page .calculator-validation-summary[hidden]{ display: none; } .calculator-page .calculator-validation-summary ul{ margin: .5rem 0 0; padding-inline-start: 1.25rem; } .calculator-page .calculator-validation-message{ margin: .3rem 0 0; color: var(--calculator-danger, #a32626); font-size: .88rem; } .calculator-page .calculator-repeatable{ display: grid; gap: .75rem; grid-column: 1 / -1; min-width: 0; } .calculator-page .calculator-repeatable-row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; align-items: start; padding: .75rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; } .calculator-page .calculator-repeatable-add{ justify-self: start; min-height: 2.25rem; padding: .45rem .7rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; background: transparent; color: inherit; cursor: pointer; } .calculator-page .calculator-repeatable-remove{ justify-self: start; grid-column: 1 / -1; min-height: 2.25rem; padding: .45rem .7rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; background: transparent; color: inherit; cursor: pointer; } .calculator-page .calculator-data-table{ width: 100%; border-collapse: collapse; font-size: .95rem; } .calculator-page .calculator-data-table th, .calculator-page .calculator-data-table td{ padding: .45rem; border: 1px solid var(--calculator-line, #e0d9c6); text-align: start; } .calculator-page .calculator-data-table th{ font-weight: 700; } .calculator-page .calculator-tabs .calculator-tab-list{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .calculator-page .calculator-tab{ min-height: 2.35rem; padding: .45rem .75rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; background: transparent; color: inherit; cursor: pointer; } .calculator-page .calculator-tab.is-active{ border-color: var(--calculator-accent, #b45309); background: var(--calculator-accent, #b45309); color: var(--calculator-on-accent, #fff); } .calculator-page .calculator-tab-panel[hidden]{ display: none; } .calculator-page .calculator-tabs--wizard .calculator-tab-list{ counter-reset: calculator-step; } .calculator-page .calculator-tabs--wizard .calculator-tab{ counter-increment: calculator-step; } .calculator-page .calculator-tabs--wizard .calculator-tab::before{ content: counter(calculator-step) ". "; } .calculator-page .calculator-step-actions{ display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; } .calculator-page .calculator-step-button{ min-height: 2.35rem; padding: .45rem .75rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; background: transparent; color: inherit; cursor: pointer; } .calculator-page .calculator-step-button--next{ margin-inline-start: auto; border-color: var(--calculator-accent, #b45309); background: var(--calculator-accent, #b45309); color: var(--calculator-on-accent, #fff); } .calculator-page .calculator-step-button:disabled{ cursor: not-allowed; opacity: .55; } .calculator-page .calculator-warnings{ color: var(--calculator-danger, #a32626); } .calculator-page .calculator-component--chart .calculator-output-value{ min-height: 16rem; } .calculator-page .calculator-component--chart canvas{ display: block; width: 100%; height: 16rem; } .calculator-page .calculator-field-help{ display: none; margin: .05rem 0 0; color: var(--calculator-muted, #5b6773); font-size: .78rem; line-height: 1.4; } .calculator-page .calculator-note-toggle-input:checked ~ .calculator-components--inputs .calculator-field-help{ display: block; } .calculator-page .calculator-feedback-dialog[hidden]{ display: none; } .calculator-page .calculator-feedback-dialog{ position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 1rem; background: rgba(11, 24, 34, .45); } .calculator-page .calculator-feedback-panel{ width: min(100%, 28rem); max-height: min(90vh, 40rem); overflow: auto; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 8px; background: var(--calculator-surface, #fff); color: var(--calculator-ink, inherit); box-shadow: 0 1.25rem 3rem rgba(11, 24, 34, .22); } .calculator-page .calculator-feedback-panel form{ display: grid; gap: .9rem; padding: 1rem; } .calculator-page .calculator-feedback-head{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .calculator-page .calculator-feedback-head h2{ margin: 0; font-size: 1.1rem; } .calculator-page .calculator-feedback-close{ width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; } .calculator-page .calculator-feedback-panel label{ display: grid; gap: .35rem; font-weight: 600; } .calculator-page .calculator-feedback-panel select, .calculator-page .calculator-feedback-panel textarea{ width: 100%; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; background: var(--calculator-input-surface, #fff); color: inherit; font: inherit; } .calculator-page .calculator-feedback-panel select{ min-height: 2.5rem; padding: .55rem .65rem; } .calculator-page .calculator-feedback-panel textarea{ min-height: 7rem; padding: .65rem; resize: vertical; } .calculator-page .calculator-feedback-actions{ display: flex; flex-wrap: wrap; gap: .65rem; } .calculator-page .calculator-feedback-status{ min-height: 1.4rem; color: var(--calculator-muted, #5b6773); } .calculator-page .calculator-feedback-status.is-error{ color: var(--calculator-danger, #a32626); } .calculator-page .calculator-pdf-lead-dialog[hidden]{ display: none; } .calculator-page .calculator-pdf-lead-dialog{ position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 1rem; background: rgba(11, 24, 34, .45); } .calculator-page .calculator-pdf-lead-panel{ width: min(100%, 30rem); max-height: min(90vh, 42rem); overflow: auto; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 8px; background: var(--calculator-surface, #fff); color: var(--calculator-ink, inherit); box-shadow: 0 1.25rem 3rem rgba(11, 24, 34, .22); } .calculator-page .calculator-pdf-lead-panel form{ display: grid; gap: .9rem; padding: 1rem; } .calculator-page .calculator-pdf-lead-head{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .calculator-page .calculator-pdf-lead-head h2{ margin: 0; font-size: 1.1rem; } .calculator-page .calculator-pdf-lead-kicker{ margin: 0 0 .25rem; color: var(--calculator-accent, #b45309); font-size: .78rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .calculator-page .calculator-pdf-lead-close{ width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; } .calculator-page .calculator-pdf-lead-copy{ margin: 0; color: var(--calculator-muted, #5b6773); font-size: .9rem; line-height: 1.45; } .calculator-page .calculator-pdf-lead-panel label{ display: grid; gap: .35rem; font-weight: 600; } .calculator-page .calculator-pdf-lead-panel input[type="email"], .calculator-page .calculator-pdf-lead-panel input[type="text"]{ width: 100%; min-height: 2.5rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; background: var(--calculator-input-surface, #fff); color: inherit; font: inherit; } .calculator-page .calculator-pdf-lead-consent{ display: flex !important; align-items: flex-start; gap: .5rem; font-size: .9rem; font-weight: 400 !important; } .calculator-page .calculator-pdf-lead-consent input{ margin-top: .2rem; } .calculator-page .calculator-pdf-lead-privacy-note{ margin: 0; color: var(--calculator-muted, #5b6773); font-size: .88rem; line-height: 1.45; } .calculator-page .calculator-pdf-lead-actions{ display: flex; flex-wrap: wrap; gap: .65rem; } .calculator-page .calculator-pdf-lead-status{ min-height: 1.4rem; color: var(--calculator-muted, #5b6773); } .calculator-page .calculator-pdf-lead-status.is-error{ color: var(--calculator-danger, #a32626); } .calculator-page .calculator-batch{ display: grid; gap: 1rem; min-width: 0; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--calculator-line, #e0d9c6); } .calculator-page .calculator-batch-heading{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; } .calculator-page .calculator-batch-heading h2{ min-width: 0; margin: 0; font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere; } .calculator-page .calculator-batch-primary-actions, .calculator-page .calculator-batch-toolbar{ display: flex; flex-wrap: wrap; gap: .6rem; min-width: 0; } .calculator-page .calculator-batch-toolbar{ padding-block: .2rem; border-block: 1px solid var(--calculator-line, #e0d9c6); } .calculator-page .calculator-batch-toolbar > button, .calculator-page .calculator-batch-button, .calculator-page .calculator-batch-scenario-action{ min-width: 0; min-height: 2.35rem; padding: .45rem .7rem; overflow-wrap: anywhere; cursor: pointer; } .calculator-page .calculator-batch-button:disabled, .calculator-page .calculator-batch-scenario-action:disabled{ cursor: not-allowed; opacity: .55; } .calculator-page .calculator-batch-button--danger{ color: var(--calculator-danger, #a32626); } .calculator-page .calculator-batch-button:focus-visible, .calculator-page .calculator-batch-scenario-action:focus-visible, .calculator-page .calculator-batch-scenario-name:focus-visible{ outline: 2px solid color-mix(in srgb, var(--calculator-accent, #b45309) 32%, transparent); outline-offset: 2px; } .calculator-page .calculator-batch-status{ min-height: 1.35rem; color: var(--calculator-muted, #5b6773); font-size: .88rem; } .calculator-page .calculator-batch-status.is-error{ color: var(--calculator-danger, #a32626); } .calculator-page .calculator-batch-scenarios{ display: grid; grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; min-width: 0; } .calculator-page .calculator-batch-scenario-navigation, .calculator-page .calculator-batch-editor{ min-width: 0; } .calculator-page .calculator-batch-scenario-navigation{ max-height: 42rem; overflow-y: auto; overscroll-behavior: contain; } .calculator-page .calculator-batch-scenario-list{ display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; } .calculator-page .calculator-batch-scenario{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: .45rem; align-items: center; min-width: 0; padding: .65rem; border-inline-start: 3px solid transparent; border-bottom: 1px solid var(--calculator-line, #e0d9c6); } .calculator-page .calculator-batch-scenario.is-selected{ border-inline-start-color: var(--calculator-accent, #b45309); } .calculator-page .calculator-batch-scenario.is-invalid, .calculator-page .calculator-batch-scenario.is-failed, .calculator-page .calculator-batch-scenario.is-transport_error{ border-inline-start-color: var(--calculator-danger, #a32626); } .calculator-page .calculator-batch-scenario.is-queued, .calculator-page .calculator-batch-scenario.is-running{ background: color-mix(in srgb, var(--calculator-accent, #b45309) 6%, transparent); } .calculator-page .calculator-batch-scenario-select{ min-width: 0; overflow: hidden; text-align: start; text-overflow: ellipsis; } .calculator-page .calculator-batch-scenario-select[aria-current="true"]{ border-color: var(--calculator-accent, #b45309); background: color-mix(in srgb, var(--calculator-accent, #b45309) 9%, transparent); font-weight: 700; } .calculator-page .calculator-batch-scenario-name{ width: 100%; min-width: 0; min-height: 2.35rem; padding: .45rem .6rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; background: var(--calculator-input-surface, #fff); color: inherit; font: inherit; } .calculator-page .calculator-batch-scenario-actions{ display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; } .calculator-page .calculator-batch-scenario-action{ display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: .82rem; line-height: 1.2; text-align: center; text-decoration: none; } .calculator-page .calculator-batch-editor > .calculator-form{ min-width: 0; margin: 0; } .calculator-page .calculator-batch-editor .calculator-tool-panel{ padding: 1.25rem; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; } .calculator-page .calculator-batch-results{ min-width: 0; padding-top: .25rem; border-top: 1px solid var(--calculator-line, #e0d9c6); } .calculator-page .calculator-batch-table-wrap{ width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--calculator-line, #e0d9c6); border-radius: 4px; } .calculator-page .calculator-batch-table{ width: max-content; min-width: 100%; border-collapse: collapse; font-size: .9rem; } .calculator-page .calculator-batch-table th, .calculator-page .calculator-batch-table td{ min-width: 8rem; padding: .65rem .75rem; border-bottom: 1px solid var(--calculator-line, #e0d9c6); text-align: start; vertical-align: top; overflow-wrap: anywhere; } .calculator-page .calculator-batch-table th{ font-weight: 700; } .calculator-page .calculator-batch-table thead th{ background: color-mix(in srgb, var(--calculator-line, #e0d9c6) 24%, var(--calculator-surface, #fff)); } .calculator-page .calculator-batch-table tbody tr:last-child > *{ border-bottom: 0; } .calculator-page .calculator-batch-table [data-batch-baseline="current"]{ font-weight: 700; } .calculator-page .calculator-batch-card-baseline-marker{ margin-inline-start: .5rem; color: var(--calculator-muted, #5b6773); font-size: .78rem; font-weight: 700; } .calculator-page .calculator-batch-card-baseline{ display: flex; align-items: center; min-height: 2.35rem; padding-bottom: .45rem; color: var(--calculator-muted, #5b6773); font-size: .82rem; font-weight: 700; } .calculator-page .calculator-batch-card-actions{ display: flex; flex-wrap: wrap; gap: .45rem; padding-bottom: .6rem; } .calculator-page .calculator-batch-cards{ display: none; } .calculator-page .calculator-unit-controls{ display: flex; align-items: stretch; gap: .45rem; max-width: 100%; } .calculator-page .calculator-unit-controls > input[data-unit-display-input]{ min-width: 0; flex: 1 1 auto; } .calculator-page .calculator-unit-controls > select[data-unit-selector]{ width: auto; max-width: 50%; flex: 0 0 auto; min-width: 4.5rem; } @container calculator-surface (max-width: 54rem) { .calculator-page .calculator-tool-shell{ grid-template-columns: 1fr; } .calculator-page .calculator-tool-panel{ padding: 1.35rem; } .calculator-page .calculator-tool-panel--results{ position: static; border-top: 1px solid var(--calculator-line, #e0d9c6); border-left: 0; } .calculator-page .calculator-formula-band{ margin-top: .75rem; padding: 1rem; } .calculator-page .calculator-formula-panel{ padding-inline: 1.35rem; } .calculator-page .calculator-components--formula .calculator-formula-symbolic, .calculator-page .calculator-components--formula .calculator-formula-substituted{ text-align: start; } .calculator-page .calculator-formula-symbolic, .calculator-page .calculator-formula-substituted{ font-size: .78rem; text-align: start; } .calculator-page .calculator-formula-symbolic .katex-display, .calculator-page .calculator-formula-substituted .katex-display{ margin: 0; } .calculator-page .calculator-batch-heading{ align-items: flex-start; flex-direction: column; } .calculator-page .calculator-batch-scenarios{ grid-template-columns: 1fr; } .calculator-page .calculator-batch-scenario-navigation{ max-height: 24rem; } .calculator-page .calculator-batch-scenario{ grid-template-columns: 1fr; } .calculator-page .calculator-batch-scenario-actions{ grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); } .calculator-page .calculator-batch-primary-actions, .calculator-page .calculator-batch-toolbar{ width: 100%; } .calculator-page .calculator-batch-primary-actions > button, .calculator-page .calculator-batch-toolbar > button{ flex: 1 1 9rem; } .calculator-page .calculator-batch-table-wrap{ display: none; } .calculator-page .calculator-batch-cards{ display: grid; gap: .65rem; } .calculator-page .calculator-batch-card{ border-bottom: 1px solid var(--calculator-line, #e0d9c6); } .calculator-page .calculator-batch-card > summary{ padding: .75rem 0; cursor: pointer; font-weight: 700; } .calculator-page .calculator-batch-card dl{ display: grid; grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr); gap: .45rem .75rem; margin: 0; padding: 0 0 .85rem; } .calculator-page .calculator-batch-card dt{ color: var(--calculator-muted, #5b6773); font-size: .82rem; font-weight: 700; } .calculator-page .calculator-batch-card dd{ min-width: 0; margin: 0; overflow-wrap: anywhere; } } @container calculator-surface (max-width: 56rem) { .calculator-page .calculator-results{ grid-template-columns: 1fr; } } @container calculator-surface (min-width: 42rem) { .calculator-page .calculator-tool-panel--inputs .calculator-input-group--multi > .calculator-fields{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; } } @container calculator-surface (max-width: 42rem) { .calculator-page .calculator-fields, .calculator-page .calculator-results{ grid-template-columns: 1fr; } } @media print { .calculator-page .calculator-tool-panel--inputs, .calculator-page .calculator-actions, .calculator-page .calculator-feedback-dialog, .calculator-page .calculator-pdf-lead-dialog{ display: none !important; } .calculator-page .calculator-tool-shell{ display: block; } .calculator-page .calculator-tool-panel--results{ border: 0; } } .calculator-page .calculator-evidence{ margin-top: 1rem; border-top: 1px solid var(--calculator-border, #d8dee4); padding-top: .75rem; } .calculator-page .calculator-evidence summary{ cursor: pointer; font-weight: 600; } .calculator-page .calculator-evidence-content{ padding: .75rem 0; } .calculator-page .calculator-evidence-section{ margin: 0 0 1rem; } .calculator-page .calculator-evidence-section h3{ margin: 0 0 .35rem; font-size: .95rem; } .calculator-page .calculator-evidence-row{ display: flex; gap: .4rem; flex-wrap: wrap; padding: .2rem 0; } .gc-calculator-shell{ max-width: var(--gc-shell-width); margin: 0 auto; padding-bottom: 80px; } .gc-calculator-directory{ width: 100%; margin: 0 auto; } .gc-calculator-intro{ padding-bottom: 28px; } /* Core duplicate intro suppression: canonical home (was inline critical). */ .gc-calculator-content{ max-width: var(--gc-shell-width); margin: 0 auto; padding: 0 var(--gc-gutter); } .gc-calculator-relations{ margin: 0 auto; padding: 44px var(--gc-gutter) 0; border-top: 1px solid var(--gc-line); } .gc-calculator-actions{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, auto); gap: 24px; align-items: end; margin: 32px auto 0; padding: 24px var(--gc-gutter); border: 1px solid var(--gc-line); border-radius: var(--gc-radius-sm); background: var(--gc-tint); } .gc-calculator-actions__copy{ min-width: 0; } .gc-calculator-actions__copy h2{ margin: 0 0 8px; color: var(--gc-navy); font-size: 1.5rem; line-height: 1.2; } .gc-calculator-actions__copy p:last-child{ max-width: 42rem; margin: 0; color: var(--gc-muted); line-height: 1.55; } .gc-calculator-actions__controls{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .gc-calculator-actions__controls .gc-button{ min-height: 44px; white-space: nowrap; } .gc-calculator-actions__controls .gc-button[disabled], .gc-calculator-actions__controls .gc-button.is-disabled, .gc-calculator-actions__controls a[aria-disabled="true"]{ cursor: not-allowed; opacity: .55; } .gc-calculator-actions__status{ grid-column: 1 / -1; min-height: 1.4em; margin: 0; color: var(--gc-muted); font-size: .88rem; line-height: 1.45; } .gc-calculator-actions__status.is-error, .gc-calculator-actions.is-error .gc-calculator-actions__status, .gc-calculator-actions.is-unavailable .gc-calculator-actions__status{ color: var(--gc-negative); } .gc-calculator-actions.is-busy{ border-color: var(--gc-accent); } .gc-calculator-actions--anonymous{ grid-template-columns: minmax(0, 1fr) auto; } .calculator-page .calculator-action, .calculator-page .calculator-step-button--next, .calculator-page .calculator-tab.is-active{ border-color: var(--gc-navy); background: var(--gc-navy); color: var(--gc-surface); } .calculator-page .calculator-action:hover, .calculator-page .calculator-step-button--next:hover, .calculator-page .calculator-tab.is-active:hover{ background: var(--gc-ink); } .calculator-page .calculator-action.is-style-outline{ border: 1px solid var(--gc-line); background: transparent; color: var(--gc-navy); } .calculator-page .calculator-action.is-style-outline:hover{ border-color: var(--gc-accent); background: var(--gc-surface); color: var(--gc-accent); } .calculator-page .calculator-feedback-panel select, .calculator-page .calculator-feedback-panel textarea, .calculator-page .calculator-pdf-lead-panel input[type="email"], .calculator-page .calculator-pdf-lead-panel input[type="text"]{ border-color: var(--gc-line); border-radius: var(--gc-radius-sm); background: var(--gc-surface); } .calculator-page .calculator-feedback-panel select:focus, .calculator-page .calculator-feedback-panel textarea:focus, .calculator-page .calculator-pdf-lead-panel input[type="email"]:focus, .calculator-page .calculator-pdf-lead-panel input[type="text"]:focus{ border-color: var(--gc-focus); outline-color: var(--gc-focus); } .calculator-page .calculator-output[data-output-visibility="primary"] .calculator-output-value, .calculator-page .calculator-panel-title, .calculator-page .calculator-pdf-lead-kicker{ color: var(--gc-accent); } .calculator-page .calculator-warnings, .calculator-page .calculator-status.is-error, .calculator-page .calculator-feedback-status.is-error, .calculator-page .calculator-pdf-lead-status.is-error{ color: var(--gc-negative); } @media (max-width: 760px) { .calculator-page .calculator-tool-shell{ box-shadow: none; } .gc-calculator-shell{ padding-bottom: 56px; } .gc-calculator-content{ padding-right: 20px; padding-left: 20px; } .gc-calculator-relations{ padding-right: 20px; padding-left: 20px; } .gc-calculator-actions, .gc-calculator-actions--anonymous{ grid-template-columns: 1fr; align-items: start; margin-top: 24px; padding: 20px; } .gc-calculator-actions__controls{ justify-content: flex-start; } .gc-calculator-actions__controls .gc-button{ flex: 1 1 100%; } .calculator-page .calculator-tool-shell{ grid-template-columns: 1fr; } .calculator-page .calculator-tool-panel{ padding: 1.25rem; } .calculator-page .calculator-tool-panel--results{ border-top: 1px solid var(--gc-line); border-left: 0; } .calculator-page .calculator-actions > .calculator-action{ flex: 1 1 100%; } .calculator-page .calculator-results .calculator-output[data-output-visibility="primary"]:first-of-type{ min-height: 7.5rem; } .calculator-page .calculator-results .calculator-output[data-output-visibility="primary"]:first-of-type .calculator-output-value{ font-size: 1.65rem; } } @media print { .gc-calculator-actions{ display: none !important; } } }