/* ========================================================================== Generator Sizing Calculator ========================================================================== */ /* Hide the site-wide feedback tab + contact pulse on this page on mobile only. They sit on `position: fixed` over the right edge / bottom-right corner, and on phones they overlap the calculator's edge-to-edge cards and the Calculate button. Desktop keeps both widgets — there's room for them and the calculator's own contact CTAs at the same time. */ @media (max-width: 768px) { body.page-template-page-generator-calculator .feedback-widget, body.page-template-page-generator-calculator #contact-buttons-container { display: none !important; } } /* Square corners across the entire calculator — page chrome, the form, the result card, the alternates, the PDF modal, and the dynamically-appended tutorial overlay/highlight/popup (which mount on , outside .gencalc-page). Single override so individual rules below don't need to drop border-radius one by one. */ .gencalc-page, .gencalc-page *, .gencalc-page *::before, .gencalc-page *::after, .gencalc-tut-overlay, .gencalc-tut-overlay *, .gencalc-tut-highlight, .gencalc-tut-highlight *, .gencalc-tut-popup, .gencalc-tut-popup * { border-radius: 0 !important; } .gencalc-page { background: #f7f8fa; color: #1a1a1a; min-height: 60vh; } .gencalc-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } /* ── Hero — PowerMatch lockup ──────────────────────────────────────────────── A single centred lockup that binds the brand to the tool so the relationship reads as one name: PowerMatch™ (the product, in ink) — Generator Sizing Calculator (what it is, in quiet grey), joined by one orange dash. The dash and the ™ are the entire orange budget. The keyword phrase stays inside the H1 for SEO; the dash is aria-hidden so it reads cleanly to assistive tech. */ .gencalc-pagehero { padding: 50px 0; text-align: center; background: #ffffff; border-bottom: 1px solid #e7e9ee; } /* Power Desk breadcrumb — slim left-aligned bar below the hero, matching the PowerConvert page so the two tools read as one suite. */ .gencalc-breadcrumb { background: #ffffff; border-bottom: 1px solid #eef0f3; } .gencalc-breadcrumb .gencalc-container { padding-top: 12px; padding-bottom: 12px; font-size: 12.5px; color: #9aa1ab; } .gencalc-breadcrumb a { color: #9aa1ab; text-decoration: none; } .gencalc-breadcrumb a:hover { color: #E08F2C; } .gencalc-breadcrumb .sep { color: #cfd4da; margin: 0 7px; } .gencalc-breadcrumb .cur { color: #555; } .gencalc-lockup { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 16px; margin: 0; font-family: 'JCBEuro BoldCondensed Regular', Arial, sans-serif; font-weight: 400; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.04; letter-spacing: -0.4px; } /* The wordmark: mixed-case, two-tone — "Power" in ink, "Match" in orange, matching the PowerMatch™ brand lockup. Sized larger than the descriptor so the brand name leads and the tool name reads as a quiet subtitle. */ .gencalc-lockup__name { color: #111; text-transform: uppercase; letter-spacing: -0.5px; } .gencalc-lockup__match { color: #FAA747; } /* Brand mark before the wordmark — nested inside __name so it stays glued to "Power" even when the lockup stacks on narrow screens. Sized in em so it scales with the responsive heading; nudged up a hair to centre against the uppercase caps. */ .gencalc-lockup__icon { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.32em; vertical-align: middle; position: relative; top: -0.05em; } .gencalc-lockup__icon svg { display: block; width: 100%; height: 100%; } .gencalc-lockup__tm { font-size: 0.46em; vertical-align: super; letter-spacing: 0; margin-left: 2px; color: #111; } .gencalc-lockup__dash { color: #FAA747; } /* Supporting descriptor — quiet uppercase tag set against the wordmark. */ .gencalc-lockup__desc { color: #888e96; text-transform: uppercase; letter-spacing: 0.4px; font-size: 0.9em; } /* One-time reveal on load — subtle, accessibility-guarded. */ @media (prefers-reduced-motion: no-preference) { .gencalc-lockup { opacity: 0; transform: translateY(8px); animation: gencalc-hero-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards; } } @keyframes gencalc-hero-rise { to { opacity: 1; transform: translateY(0); } } /* Narrow screens — stack the descriptor under the name and drop the dash so the long lockup never overflows. */ @media (max-width: 720px) { .gencalc-pagehero { padding: 38px 0; } .gencalc-lockup { flex-direction: column; align-items: center; /* baseline aligns to the left in a column — centre it */ gap: 8px; font-size: 32px; /* larger PowerMatch on mobile (clamp otherwise floors at 22px) */ } .gencalc-lockup__dash { display: none; } .gencalc-lockup__desc { font-size: 15px; /* keep the long descriptor readable under the bigger name */ } } /* ── App / wizard container ────────────────────────────────────────────── */ .gencalc-app { padding: 32px 0 96px; } .gencalc-wizard, .gencalc-result { background: #fff; border: 1px solid #e7e7e7; border-radius: 8px; padding: 32px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04); } .gencalc-section-label { font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #1a1a1a; margin: 0 0 14px; padding: 0; } .gencalc-help { position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; color: #9aa0a6; cursor: help; margin-left: 8px; outline: none; line-height: 1; transition: color .15s; background: transparent; border: 0; } .gencalc-help > i.fa-circle-info { font-size: 14px; } .gencalc-help:hover, .gencalc-help:focus, .gencalc-help:focus-within { color: #FAA747; } .gencalc-help:focus-visible { outline: none; } /* Custom tooltip — replaces the native title attribute so it works the same on Chrome and Firefox. Shows on hover or keyboard focus. */ .gencalc-tooltip { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(4px); width: 300px; padding: 14px 16px 15px; background: #1f1f1f; color: #f0f0f0; /* Body font — JCBEuro is a display/industrial face that reads thin and awkward at body sizes on dark backgrounds. Tooltips are body copy, so we use a proper system body sans-serif stack with crisp antialiasing. Resets inherited uppercase/tracking from the legend ancestor too. */ font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', Helvetica, system-ui, sans-serif; font-size: 13.5px; font-weight: 400; line-height: 1.6; text-align: left; text-transform: none; letter-spacing: 0.1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease; z-index: 50; white-space: normal; } .gencalc-tooltip strong { color: #FAA747; font-weight: 600; text-transform: none; letter-spacing: 0.1px; } /* ── Reusable two-tone definition list ───────────────────────────────── Orange keyword + body description, one pair per line. Designed to live inside dark tooltips, info popovers, or any context where a quick key-value reference helps the reader. The keyword picks up the brand orange + bold; the description renders in the inherited body color with a soft "=" separator between them. Two markup variants are supported so the pattern works inside both block contexts (where
is valid) and inline-only contexts like tooltips that live inside a : Block (preferred — semantic):
Tight
data-centre / IT (everything on at once).
Standard
events, hotels, mixed use.
Inline (for tooltips inside ): Tight data-centre / IT. … Modifiers: .gp-deflist--compact — tighter row spacing (default 6px gap) .gp-deflist--on-light — switch separator to dark tone for light BGs */ .gp-deflist { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .gp-deflist--compact { gap: 3px; } /* A row is either a wrapper
(block markup) or a (inline markup). Both render the same — keyword auto-width, description fills. */ .gp-deflist > div, .gp-deflist > .gp-deflist-row { display: grid; grid-template-columns: max-content 1fr; column-gap: 8px; align-items: baseline; } .gp-deflist dt, .gp-deflist .gp-deflist-term { color: #FAA747; font-weight: 600; white-space: nowrap; text-transform: none; letter-spacing: 0.1px; position: relative; } .gp-deflist dt::after, .gp-deflist .gp-deflist-term::after { content: '='; color: rgba(255, 255, 255, 0.4); margin-left: 6px; font-weight: 400; } .gp-deflist dd, .gp-deflist .gp-deflist-desc { margin: 0; color: inherit; } .gp-deflist.gp-deflist--on-light dt::after, .gp-deflist.gp-deflist--on-light .gp-deflist-term::after { color: rgba(0, 0, 0, 0.32); } .gp-deflist-intro { display: block; margin: 0 0 8px; color: inherit; font-weight: 400; } .gencalc-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1a1a1a; } .gencalc-help:hover .gencalc-tooltip, .gencalc-help:focus .gencalc-tooltip, .gencalc-help:focus-within .gencalc-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } @media (max-width: 600px) { .gencalc-tooltip { width: min(240px, calc(100vw - 40px)); font-size: 12px; padding: 10px 12px; } } /* ── Toolbar (tutorial trigger) ────────────────────────────────────────── */ .gencalc-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; } .gencalc-tutorial-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: #6b7280; font-family: 'JCBEuro Roman Regular', sans-serif; font-size: 12.5px; cursor: pointer; transition: color 0.15s; } .gencalc-tutorial-btn i { /* Neutral at rest — orange is reserved for primary actions and live values; the hover rule below lights the whole control up. */ color: inherit; font-size: 14px; } .gencalc-tutorial-btn:hover, .gencalc-tutorial-btn:focus-visible { color: #FAA747; outline: none; } /* ── Tutorial overlay / highlight / popup ─────────────────────────────── */ .gencalc-tut-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.15); z-index: 9997; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .gencalc-tut-overlay.is-visible { opacity: 1; pointer-events: auto; } .gencalc-tut-highlight { position: fixed; z-index: 9998; pointer-events: none; border-radius: 6px; border: 3px solid #FAA747; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.15), 0 0 0 6px rgba(250, 167, 71, 0.25); transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease, opacity 0.2s; opacity: 0; } .gencalc-tut-highlight.is-visible { opacity: 1; } .gencalc-tut-popup { position: fixed; z-index: 9999; width: 320px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); padding: 18px 18px 14px; font-family: 'JCBEuro Roman Regular', sans-serif; color: #1a1a1a; transition: top 0.25s ease, left 0.25s ease, opacity 0.2s; opacity: 0; pointer-events: none; } .gencalc-tut-popup.is-visible { opacity: 1; pointer-events: auto; } .gencalc-tut-popup__count { display: inline-block; background: rgba(250, 167, 71, 0.15); color: #b96a14; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 10px; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 10px; margin-bottom: 10px; } .gencalc-tut-popup__title { font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 16px; margin: 0 0 8px; color: #1a1a1a; } .gencalc-tut-popup__body { font-size: 13px; line-height: 1.55; color: #444; margin: 0 0 16px; } .gencalc-tut-popup__body strong { color: #1a1a1a; } /* CTA button — "Switch to Advanced & continue" (hidden on most steps) */ .gencalc-tut-popup__cta { display: block; width: 100%; background: #FAA747; color: #1a1a1a; border: 1.5px solid #FAA747; border-radius: 4px; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 12px; padding: 9px 16px; margin-bottom: 12px; cursor: pointer; text-align: center; transition: background 0.15s, border-color 0.15s; } .gencalc-tut-popup__cta:hover { background: #e08c2c; border-color: #e08c2c; } .gencalc-tut-popup__cta[hidden] { display: none; } .gencalc-tut-popup__actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #f0f0f0; padding-top: 12px; } .gencalc-tut-popup__skip { background: none; border: 0; color: #888; font-family: 'JCBEuro Roman Regular', sans-serif; font-size: 12px; cursor: pointer; text-decoration: underline; } .gencalc-tut-popup__skip:hover { color: #1a1a1a; } .gencalc-tut-popup__nav { display: flex; gap: 8px; } .gencalc-tut-btn { border: 1.5px solid #FAA747; background: #fff; color: #FAA747; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 12px; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: background 0.15s, color 0.15s; } .gencalc-tut-btn:hover:not(:disabled) { background: #FAA747; color: #1a1a1a; } .gencalc-tut-btn:disabled { opacity: 0.4; cursor: not-allowed; } .gencalc-tut-btn--primary { background: #FAA747; color: #1a1a1a; } .gencalc-tut-btn--primary:hover:not(:disabled) { background: #e08c2c; border-color: #e08c2c; } .gencalc-tut-popup__arrow { position: absolute; width: 0; height: 0; border: 8px solid transparent; } .gencalc-tut-popup--top .gencalc-tut-popup__arrow { bottom: -16px; border-top-color: #fff; left: 50%; margin-left: -8px; } .gencalc-tut-popup--bottom .gencalc-tut-popup__arrow { top: -16px; border-bottom-color: #fff; left: 50%; margin-left: -8px; } .gencalc-tut-popup--left .gencalc-tut-popup__arrow { right: -16px; border-left-color: #fff; top: 50%; margin-top: -8px; } .gencalc-tut-popup--right .gencalc-tut-popup__arrow { left: -16px; border-right-color: #fff; top: 50%; margin-top: -8px; } @media (max-width: 600px) { .gencalc-tut-popup { width: calc(100vw - 32px); left: 16px !important; right: 16px; bottom: 16px !important; top: auto !important; transform: none !important; } .gencalc-tut-popup__arrow { display: none; } /* 44px tap targets on phone for the nav buttons */ .gencalc-tut-btn { min-height: 44px; padding: 11px 18px; font-size: 13px; } .gencalc-tut-popup__skip { padding: 8px 4px; font-size: 13px; } .gencalc-tut-popup__title { font-size: 17px; } .gencalc-tut-popup__body { font-size: 13.5px; } } /* Mobile / tablet: kill position transitions so the highlight snaps cleanly between steps. Opacity alone handles the visual handoff. The smooth-scroll in JS continues to provide the sense of movement between distant fields. */ @media (max-width: 768px) { .gencalc-tut-highlight { transition: opacity 0.18s ease; } .gencalc-tut-popup { transition: opacity 0.18s ease; } } /* Sample chip — marks tutorial demo rows/zones as tour furniture, not user data. Neutral grey, deliberately quieter than the orange accents. */ .gencalc-tut-sample-chip { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 9px; background: #6b7280; color: #ffffff; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; pointer-events: none; } /* ── Wizard step cards (1 → 2 → 3 path) ──────────────────────────────── */ .gencalc-step { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; margin-bottom: 18px; /* No overflow:hidden — would clip the industry-picker dropdown panel and any future popovers. Header tint gets matching top corners via its own border-radius below. */ } .gencalc-step-header { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: #fafbfc; border-bottom: 1px solid #f0f1f3; border-radius: 12px 12px 0 0; } .gencalc-step-number { width: 36px; height: 36px; border-radius: 50%; background: #FAA747; color: white; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 17px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .gencalc-step-titles { flex: 1; min-width: 0; } .gencalc-step-title { margin: 0; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 17px; text-transform: uppercase; letter-spacing: 0.4px; color: #1a1a1a; line-height: 1.2; } .gencalc-step-body { padding: 22px 20px; } .gencalc-step-body > fieldset:last-child, .gencalc-step-body > .gencalc-loads:last-child, .gencalc-step-body > .gencalc-submit-row:last-child, .gencalc-step-body > details:last-child { margin-bottom: 0; } /* ── Collapsible step (Section 0: Project Details) ──────────────────── */ .gencalc-step-header-toggle { /* Reset native button styling so it visually matches a regular header. */ width: 100%; border: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; /* Reuse the .gencalc-step-header layout — the rule above already gives us flex + padding + tinted background. The header-toggle class only overlays button-reset rules on top. */ } .gencalc-step-header-toggle:hover { background: #f4f6f8; } .gencalc-step-header-toggle:focus-visible { outline: 2px solid #FAA747; outline-offset: -2px; } .gencalc-step-subtitle { margin: 2px 0 0; font-size: 12px; color: #777; font-family: 'JCBEuro Roman Regular', sans-serif; text-transform: none; letter-spacing: 0; } .gencalc-step-chevron { color: #888; transition: transform .2s ease; flex-shrink: 0; font-size: 14px; } .gencalc-step-header-actions { display: inline-flex; align-items: center; flex-shrink: 0; } .gencalc-step-title-muted { color: #999; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13px; margin-left: 6px; } .gencalc-step-collapsible[data-collapsed="true"] .gencalc-step-chevron { transform: rotate(-90deg); } .gencalc-step-collapsible[data-collapsed="false"] .gencalc-step-header { border-radius: 12px 12px 0 0; } .gencalc-step-collapsible[data-collapsed="true"] .gencalc-step-header { border-bottom-color: transparent; border-radius: 12px; } /* ── Project Details grid (Section 0 body) ──────────────────────────── */ .gencalc-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .gencalc-project-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .gencalc-project-wide { grid-column: 1 / -1; } .gencalc-project-grid textarea { border: 1.5px solid #d1d5db; background: #fff; border-radius: 6px; padding: 9px 12px; font-family: 'JCBEuro Roman Regular', sans-serif; font-size: 13.5px; color: #1a1a1a; box-sizing: border-box; width: 100%; resize: vertical; transition: border-color .15s, box-shadow .15s; } .gencalc-project-grid textarea:hover { border-color: #b3b6bc; } .gencalc-project-grid textarea:focus { outline: none; border-color: #FAA747; box-shadow: 0 0 0 3px rgba(250, 167, 71, 0.15); } @media (max-width: 600px) { .gencalc-step-header { padding: 14px 16px; gap: 10px; } .gencalc-step-number { width: 30px; height: 30px; font-size: 14px; } .gencalc-step-title { font-size: 15px; } .gencalc-step-body { padding: 18px 16px; } .gencalc-project-grid { grid-template-columns: 1fr; } .gencalc-project-pair { grid-template-columns: 1fr; gap: 14px; } } /* ── Mode toggle ───────────────────────────────────────────────────────── */ .gencalc-mode { border: 0; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .gencalc-mode-option { display: block; border: 1.5px solid #e7e7e7; border-radius: 6px; padding: 14px 16px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .gencalc-mode-option input { margin-right: 8px; accent-color: #FAA747; } .gencalc-mode-option span { font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 14px; } .gencalc-mode-option:has(input:checked) { border-color: #FAA747; background: rgba(250, 167, 71, 0.06); } /* ── Loads list ────────────────────────────────────────────────────────── */ .gencalc-loads { margin-bottom: 28px; } .gencalc-load-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } /* Auto-number rows within each list (CSS counter resets per parent) */ .gencalc-load-list, .gencalc-zone-loads { counter-reset: gencalc-load-row; } /* Advanced load row — see card-layout section at the bottom of this file (search for "Advanced load row — card layout"). Replaced 2026-05-06 by the nameplate-style card design. */ /* Per-zone diversity selector lives in the zone header next to the name */ .gencalc-zone-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gencalc-zone-header > input[data-field="zone-name"] { flex: 1 1 200px; } .gencalc-zone-diversity { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .gencalc-zone-diversity > span { font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #777; } .gencalc-zone-diversity > select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 6px 26px 6px 10px; border: 1.5px solid #d1d5db; border-radius: 6px; font-size: 12px; color: #1a1a1a; background-color: white; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; background-size: 11px; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .gencalc-zone-diversity > select:hover { border-color: #b3b6bc; } .gencalc-zone-diversity > select:focus { outline: none; border-color: #FAA747; box-shadow: 0 0 0 3px rgba(250, 167, 71, 0.15); } /* Zone-nested load rows: white background to stand out against the zone container's tinted background. */ .gencalc-zone-loads .gencalc-load-row { background: #fff; } .gencalc-field { display: flex; flex-direction: column; gap: 4px; } .gencalc-field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #777; font-family: 'JCBEuro Bold Regular', sans-serif; } .gencalc-field input, .gencalc-field select, .gencalc-modal-form input[type="email"] { border: 1.5px solid #d1d5db; background: #fff; border-radius: 6px; padding: 9px 12px; font-family: 'JCBEuro Roman Regular', sans-serif; font-size: 13.5px; color: #1a1a1a; box-sizing: border-box; width: 100%; transition: border-color .15s, box-shadow .15s; } .gencalc-field input:hover, .gencalc-field select:hover { border-color: #b3b6bc; } .gencalc-field input:focus, .gencalc-field select:focus, .gencalc-modal-form input[type="email"]:focus { outline: none; border-color: #FAA747; box-shadow: 0 0 0 3px rgba(250, 167, 71, 0.15); } /* Native select → styled to match the custom industry picker: appearance:none + a chevron via inline SVG background. Applies to all ) ────────────────── Same aesthetic as the industry picker, abstracted so every dropdown on the calculator wears the brand's industrial chrome instead of falling back to the OS-default select. */ .gencalc-picker { position: relative; display: block; width: 100%; } /* Hide the source fallback gets a CSS chevron; the enhanced custom picker keeps its own caret (no double chevron). */ .gencalc-zone-diversity-inline select { border: 1px solid #dcdcdc; border-radius: 0; background: #fff; height: 30px; padding: 0 26px 0 10px; font-family: 'JCBEuro Roman Regular', sans-serif; font-size: 14px; color: #1a1a1a; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 9px center; background-size: 11px; } .gencalc-zone-diversity-inline .gencalc-picker { width: auto; } .gencalc-zone-diversity-inline .gencalc-picker-trigger { width: auto; min-width: 64px; border: 1px solid #dcdcdc; border-radius: 0; padding: 0 10px; height: 30px; gap: 6px; font-family: 'JCBEuro Roman Regular', sans-serif; font-size: 14px; } .gencalc-zone-diversity-inline .gencalc-picker-caret { color: #1a1a1a; } /* Mobile — stack the two panels */ /* Base reflow: stack the load card to a single column once the two-column grid runs out of room. Flat (simple-list) cards span the page and fit the two-column form down to ~712px, so 720px is the right breakpoint for them. Nested cards (inside a zone / sub-zone) need a higher breakpoint — see the .gencalc-zone reflow block below. Keep the declarations here and there in sync; load-card-reflow-breakpoint.test.js guards both. */ @media (max-width: 720px) { .gencalc-load-card-body { grid-template-columns: 1fr; } .gencalc-load-card-body > .gencalc-load-card-drag { display: none; } /* Single-column stack: drop the explicit column placement so panels flow, and re-corner the × on the card (the gutter collapses). */ .gencalc-load-card-id, .gencalc-load-card-fields { grid-column: 1; grid-row: auto; } .gencalc-load-card-body > .gencalc-load-remove { position: absolute; top: 12px; right: 14px; grid-column: auto; grid-row: auto; align-self: auto; justify-self: auto; } .gencalc-load-card-fields { border-right: 0; } .gencalc-load-card-id { border-right: 0; border-bottom: 1px solid var(--gencalc-lib-line); padding-left: 24px; } .gencalc-load-card-fields { padding: 30px 18px 18px; } .gencalc-load-card-fields-top { flex-wrap: wrap; } .gencalc-load-card-count { width: 100%; border-left: 0; padding-left: 0; flex-direction: row; } .gencalc-load-card-motor { margin: 20px -18px -18px; padding: 22px 18px 18px; flex-wrap: wrap; } .gencalc-load-card-motor .gencalc-lc-field--start { flex: 1 1 100%; } } /* Nested reflow: load cards inside a zone / sub-zone lose ~115px of width to the surrounding chrome (paddings, indents, borders), so the 296px fixed name column starves the fields panel — Power/Unit/Phase stack and cluster top-left, and the grey panel stretches tall and empty beside the name column. A *balanced* two-column needs ~1005px viewport when nested, so stack nested cards to a single clean column up to 1024px; flat cards keep their 720px breakpoint above. Declarations mirror the base block — keep in sync. */ @media (max-width: 1024px) { .gencalc-zone .gencalc-load-card-body { grid-template-columns: 1fr; } .gencalc-zone .gencalc-load-card-body > .gencalc-load-card-drag { display: none; } .gencalc-zone .gencalc-load-card-id, .gencalc-zone .gencalc-load-card-fields { grid-column: 1; grid-row: auto; } .gencalc-zone .gencalc-load-card-body > .gencalc-load-remove { position: absolute; top: 12px; right: 14px; grid-column: auto; grid-row: auto; align-self: auto; justify-self: auto; } .gencalc-zone .gencalc-load-card-fields { border-right: 0; } .gencalc-zone .gencalc-load-card-id { border-right: 0; border-bottom: 1px solid var(--gencalc-lib-line); padding-left: 24px; } .gencalc-zone .gencalc-load-card-fields { padding: 30px 18px 18px; } .gencalc-zone .gencalc-load-card-fields-top { flex-wrap: wrap; } .gencalc-zone .gencalc-load-card-count { width: 100%; border-left: 0; padding-left: 0; flex-direction: row; } .gencalc-zone .gencalc-load-card-motor { margin: 20px -18px -18px; padding: 22px 18px 18px; flex-wrap: wrap; } .gencalc-zone .gencalc-load-card-motor .gencalc-lc-field--start { flex: 1 1 100%; } } /* ── Modal frame ──────────────────────────────────────────────────────── */ .gencalc-type-modal[hidden] { display: none; } .gencalc-type-modal { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; } .gencalc-type-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 15, 15, 0.5); } .gencalc-type-modal-frame { position: relative; width: min(1080px, calc(100vw - 32px)); height: min(620px, calc(100vh - 32px)); background: #fafafa; border: 1px solid #d4d4d8; display: flex; flex-direction: column; box-shadow: 0 12px 32px rgba(15,15,15,.18); font-family: 'JCBEuro Roman Regular', sans-serif; } .gencalc-type-modal-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #d4d4d8; flex: 0 0 auto; } .gencalc-type-modal-badge { background: var(--gencalc-lib-orange, #f59e0b); color: #fff; font-weight: 700; padding: 3px 9px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } .gencalc-type-modal-title { font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 14px; color: #0f0f0f; margin: 0; } .gencalc-type-modal-spacer { flex: 1; } .gencalc-type-modal-close { background: transparent; border: 0; cursor: pointer; width: 28px; height: 28px; color: #525252; display: flex; align-items: center; justify-content: center; } .gencalc-type-modal-close:hover { color: #0f0f0f; } .gencalc-type-modal-body { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* ── Tree (left) ──────────────────────────────────────────────────────── */ .gencalc-type-tree-pane { width: 190px; padding: 12px 6px; background: #f4f4f5; border-right: 1px solid #d4d4d8; overflow-y: auto; flex: 0 0 auto; } .gencalc-type-tree { display: flex; flex-direction: column; gap: 1px; } .gencalc-type-tree-section-label { font-size: 11px; text-transform: uppercase; color: #737373; letter-spacing: 0.06em; padding: 8px 10px 4px; font-weight: 600; } .gencalc-type-tree-item { padding: 7px 10px; cursor: pointer; font-size: 13px; color: #404040; display: flex; justify-content: space-between; align-items: center; margin: 1px 4px; } .gencalc-type-tree-item:hover { background: #ececef; } .gencalc-type-tree-item.is-active { background: #fef3c7; font-weight: 700; color: #171717; } .gencalc-type-tree-item-count { color: #a3a3a3; font-weight: 400; font-size: 12px; } .gencalc-type-tree-item.is-active .gencalc-type-tree-item-count { color: #b45309; font-weight: 700; } /* ── Right pane: grid or form ─────────────────────────────────────────── */ .gencalc-type-pane { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .gencalc-type-grid { flex: 1 1 auto; overflow-y: auto; padding: 14px; background: #f4f4f5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; } @media (max-width: 760px) { .gencalc-type-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .gencalc-type-grid { grid-template-columns: 1fr; } } .gencalc-type-grid[hidden] { display: none; } /* ── Mobile: tree → horizontal chip strip above the cards ─────────────── The 190px sidebar leaves cards too narrow; titles wrap to 2-3 lines. On phones we stack the modal body vertically and lay the tree out as a single scroll-x row of pill chips, freeing the full viewport width for the cards below. */ @media (max-width: 600px) { .gencalc-type-modal-body { flex-direction: column; } .gencalc-type-tree-pane { width: auto; flex: 0 0 auto; padding: 8px 10px; border-right: 0; border-bottom: 1px solid #d4d4d8; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .gencalc-type-tree { flex-direction: row; gap: 6px; flex-wrap: nowrap; width: max-content; } .gencalc-type-tree-section-label { display: inline-flex; align-items: center; padding: 0 4px; font-size: 10px; letter-spacing: 0.08em; color: #9aa0a6; } .gencalc-type-tree-item { margin: 0; padding: 6px 12px; border: 1.5px solid #d8dadc; background: #fff; border-radius: 999px; flex: 0 0 auto; gap: 6px; font-size: 12.5px; color: #1a1a1a; white-space: nowrap; } .gencalc-type-tree-item:hover { background: #fffaf2; border-color: #FAA747; } .gencalc-type-tree-item.is-active { background: #FAA747; border-color: #FAA747; color: #fff; } .gencalc-type-tree-item-count { font-size: 11px; color: #888; } .gencalc-type-tree-item.is-active .gencalc-type-tree-item-count { color: #fff; font-weight: 600; } } /* ── Type card — compact, single-surface, inline meta line ────────────── */ .gencalc-type-card { position: relative; background: #fff; border: 1px solid #d6d8dc; cursor: pointer; padding: 12px 14px 10px; display: flex; flex-direction: column; min-height: 132px; box-shadow: 0 1px 2px rgba(15,15,15,.04); transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; } .gencalc-type-card:hover { border-color: #888; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15,15,15,.07); } .gencalc-type-card.is-selected { border-color: var(--gencalc-lib-orange, #f59e0b); box-shadow: 0 0 0 1px var(--gencalc-lib-orange, #f59e0b); } .gencalc-type-card-name { font-family: 'JCBEuro Bold Regular', sans-serif; font-weight: 700; font-size: 13.5px; line-height: 1.22; letter-spacing: -0.005em; color: #0f0f0f; margin: 0 0 6px; padding-right: 38px; /* leave room for hover Edit button on custom cards */ } .gencalc-type-card-mine-star { color: var(--gencalc-lib-orange, #f59e0b); font-size: 12px; margin-left: 6px; vertical-align: 1px; } .gencalc-type-card-edit { position: absolute; top: 8px; right: 9px; background: #fff; border: 1px solid #d4d4d8; font-size: 10px; padding: 2px 7px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; color: #525252; font-weight: 600; opacity: 0; transition: opacity .12s ease; } .gencalc-type-card:hover .gencalc-type-card-edit, .gencalc-type-card:focus-within .gencalc-type-card-edit { opacity: 1; } .gencalc-type-card-edit:hover { color: #0f0f0f; border-color: #0f0f0f; } .gencalc-type-card-desc { margin: 0 0 auto; padding: 0; font-size: 12px; line-height: 1.42; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gencalc-type-card-meta { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e5e5e5; font-size: 11.5px; color: #888; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.4; } .gencalc-type-card-meta-item { display: inline-flex; align-items: center; gap: 4px; } .gencalc-type-card-meta-key { color: #888; } .gencalc-type-card-meta-val { color: #0f0f0f; font-weight: 600; } .gencalc-type-card-meta-sep { color: #d6d6d6; } .gencalc-type-thd-dot { display: inline-block; width: 7px; height: 7px; border-radius: 1px; margin-right: 1px; vertical-align: 0; } .gencalc-type-thd-dot--low { background: #2f6b3b; } .gencalc-type-thd-dot--medium { background: #b18800; } .gencalc-type-thd-dot--high { background: #c25a0c; } /* ── "+ New custom type" tile ─────────────────────────────────────────── */ .gencalc-type-card-add { border: 1px dashed var(--gencalc-lib-orange, #f59e0b); background: #fffbef; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; cursor: pointer; color: #b45309; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; min-height: 132px; } .gencalc-type-card-add:hover { background: #fef3c7; } .gencalc-type-card-add::before { content: '+ '; } /* ── Custom-type form (right pane) ────────────────────────────────────── */ .gencalc-type-form { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px; background: #fff; display: flex; flex-direction: column; gap: 16px; } .gencalc-type-form[hidden] { display: none; } .gencalc-type-form-title { font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 16px; font-weight: 700; color: #0f0f0f; margin: 0 0 4px; } .gencalc-type-form-sub { font-size: 12px; color: #737373; margin: 0; } .gencalc-type-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .gencalc-type-field { display: flex; flex-direction: column; gap: 4px; } .gencalc-type-field--full { grid-column: 1 / -1; } .gencalc-type-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #525252; font-weight: 600; } .gencalc-type-field-help { font-size: 11px; color: #888; margin-top: 2px; line-height: 1.4; } .gencalc-type-field-error { font-size: 11px; color: #b53a17; margin-top: 2px; } .gencalc-type-input, .gencalc-type-select, .gencalc-type-textarea { border: 1px solid #d4d4d8; background: #fff; padding: 8px 10px; font-size: 13px; color: #171717; border-radius: 0; font-family: inherit; } .gencalc-type-input:focus, .gencalc-type-select:focus, .gencalc-type-textarea:focus { outline: 2px solid var(--gencalc-lib-orange, #f59e0b); outline-offset: -1px; border-color: var(--gencalc-lib-orange, #f59e0b); } .gencalc-type-input--num { font-variant-numeric: tabular-nums; } .gencalc-type-pf-combo, .gencalc-type-inrush-combo { display: grid; grid-template-columns: 1fr auto; gap: 6px; } /* Segmented THD */ .gencalc-type-seg { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid #d4d4d8; } .gencalc-type-seg-opt { padding: 8px 10px; text-align: center; cursor: pointer; font-size: 12px; font-weight: 600; color: #525252; background: #fff; border-right: 1px solid #d4d4d8; display: flex; align-items: center; justify-content: center; gap: 6px; } .gencalc-type-seg-opt:last-child { border-right: 0; } .gencalc-type-seg-opt.is-active { background: #fef3c7; color: #b45309; } /* Form actions */ .gencalc-type-form-actions { border-top: 1px solid #f0f1f3; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .gencalc-type-btn { padding: 8px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid transparent; cursor: pointer; font-family: inherit; } .gencalc-type-btn--primary { background: var(--gencalc-lib-orange, #f59e0b); color: #fff; } .gencalc-type-btn--primary[disabled] { opacity: .55; cursor: not-allowed; } .gencalc-type-btn--ghost { background: #fff; color: #525252; border-color: #d4d4d8; } .gencalc-type-btn--danger { background: #fff; color: #b53a17; border-color: transparent; padding-left: 0; } .gencalc-type-btn--danger[disabled] { color: #c0c0c0; cursor: not-allowed; } /* ── 8-parent grid (replaces the 13-type grid) ───────────────────────── */ .gencalc-type-card--parent { cursor: pointer; padding: 18px 16px; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; min-height: 88px; transition: border-color .14s ease, box-shadow .14s ease, transform .1s ease; } .gencalc-type-card--parent:hover { border-color: #0f0f0f; } .gencalc-type-card--parent:hover .gencalc-type-card-icon { background: #FAA747; } .gencalc-type-card--parent .gencalc-type-card-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #0f0f0f; background: #faf6ec; color: #0f0f0f; font-size: 20px; flex-shrink: 0; } .gencalc-type-card--parent .gencalc-type-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .gencalc-type-card--parent .gencalc-type-card-body .gencalc-type-card-name, .gencalc-type-card--parent .gencalc-type-card-body .gencalc-type-card-desc { margin: 0; } /* ── Kind step ───────────────────────────────────────────────────────── */ .gencalc-type-kind-step { display: flex; flex-direction: column; gap: 16px; padding: 16px 14px; flex: 1 1 auto; overflow-y: auto; background: #fff; } .gencalc-type-kind-step[hidden] { display: none; } .gencalc-type-kind-step-head { display: flex; align-items: center; gap: 18px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid #e5e7eb; } .gencalc-type-kind-back { border: 1px solid #d4d4d8; background: #fff; padding: 6px 10px; font-size: 12px; font-family: inherit; cursor: pointer; line-height: 1; } .gencalc-type-kind-back:hover { border-color: #0f0f0f; } .gencalc-type-kind-step-title { display: flex; flex-direction: column; gap: 2px; } .gencalc-type-kind-step-parent { font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: #0f0f0f; line-height: 1.1; } .gencalc-type-kind-step-sub { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .12em; margin-top: 4px; } .gencalc-type-kind-list { display: flex; flex-direction: column; gap: 8px; } .gencalc-type-kind-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 44px 16px 18px; border: 1.5px solid #d4d4d8; background: #fff; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: #0f0f0f; text-align: left; cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .1s ease, box-shadow .12s ease; } .gencalc-type-kind-row::after { content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px; color: #cfcfd2; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); transition: color .12s ease, transform .12s ease; } .gencalc-type-kind-row:hover { border-color: #0f0f0f; background: #faf6ec; } .gencalc-type-kind-row:hover::after { color: #c46a00; transform: translateY(-50%) translateX(3px); } .gencalc-type-kind-row.is-default { border-color: #0f0f0f; } .gencalc-type-kind-row-label { /* let the label wrap if needed without pushing into the tag/chevron */ flex: 1 1 auto; min-width: 0; } .gencalc-type-kind-row-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: #0f0f0f; background: #FAA747; border: 1.5px solid #FAA747; padding: 3px 8px; line-height: 1; margin-right: 22px; /* leave room for the chevron */ } /* ───────────────────────────────────────────────────────────────────────── Multi-Genset Load Roles ───────────────────────────────────────────────────────────────────────── */ /* Setup-section Power Plan group */ .gencalc-power-plan-toggle-row { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 12px 14px; background: var(--gencalc-lib-bg-bar); border: 1px solid var(--gencalc-lib-line); margin-bottom: 14px; } .gencalc-switch { position: relative; display: inline-block; width: 38px; height: 22px; } .gencalc-switch input { opacity: 0; width: 0; height: 0; } .gencalc-switch-track { position: absolute; inset: 0; background: var(--gencalc-lib-ink-3); border-radius: 14px; transition: background 120ms ease; } .gencalc-switch-track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left 120ms ease, background 120ms ease; } .gencalc-switch input:checked + .gencalc-switch-track { background: var(--gencalc-lib-ink); } .gencalc-switch input:checked + .gencalc-switch-track::after { left: 19px; background: var(--gencalc-lib-orange); } .gencalc-power-plan-toggle-text strong { display: block; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 14px; color: var(--gencalc-lib-ink); } .gencalc-power-plan-toggle-text small { display: block; margin-top: 2px; font-size: 12px; color: var(--gencalc-lib-ink-3); } /* When the labelset is open, the toggle-row + labelset visually merge into one card so the Label set / Custom inputs read as nested children of the Power Plan toggle above (not as a sibling section). The :has() selector strips the toggle-row's bottom seam; the labelset picks up the same bg/border + a hairline divider on top. */ .gencalc-power-plan-toggle-row:has(+ .gencalc-power-plan-labelset:not([hidden])) { margin-bottom: 0; border-bottom: 0; } .gencalc-power-plan-labelset { padding: 0; background: var(--gencalc-lib-bg-bar); border: 1px solid var(--gencalc-lib-line); border-top: 1px dashed var(--gencalc-lib-line); margin-bottom: 14px; } .gencalc-power-plan-labelset:not([hidden]) { padding: 14px; } .gencalc-power-plan-labelset[hidden] { display: none; } .gencalc-power-plan-labelset-label { display: block; margin-bottom: 8px; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gencalc-lib-ink-4); } .gencalc-power-plan-labelset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .gencalc-power-plan-labelopt { display: block; cursor: pointer; border: 1px solid var(--gencalc-lib-line); background: #fff; padding: 10px 12px; transition: border-color 120ms ease, background 120ms ease; } .gencalc-power-plan-labelopt input { display: none; } .gencalc-power-plan-labelopt.is-on, .gencalc-power-plan-labelopt:has(input:checked) { border-color: var(--gencalc-lib-ink); background: var(--gencalc-lib-bg-bar); } .gencalc-power-plan-labelopt .opt-pair { display: block; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 13px; color: var(--gencalc-lib-ink); } .gencalc-power-plan-labelopt .opt-meta { display: block; margin-top: 3px; font-size: 11px; color: var(--gencalc-lib-ink-3); } .gencalc-power-plan-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .gencalc-power-plan-custom label { display: flex; flex-direction: column; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gencalc-lib-ink-4); } .gencalc-power-plan-custom input { margin-top: 4px; border: 1px solid var(--gencalc-lib-line); padding: 8px 10px; font-family: 'JCBEuro Roman Regular', sans-serif; font-size: 13px; color: var(--gencalc-lib-ink-2); } /* Per-row paired toggle */ .gencalc-load-card-roles { display: inline-flex; border: 1.5px solid var(--gencalc-lib-ink); background: #fff; flex: 0 0 auto; } body:not(.gencalc-role-dual) .gencalc-load-card-roles { display: none !important; } .gencalc-role-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0 14px; height: 36px; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gencalc-lib-ink-4); cursor: pointer; border-right: 1px solid var(--gencalc-lib-ink); transition: background 120ms ease, color 120ms ease; } .gencalc-role-btn:last-child { border-right: 0; } .gencalc-role-btn-led { width: 8px; height: 8px; background: var(--gencalc-lib-line); border-radius: 50%; transition: background 120ms ease, box-shadow 120ms ease; } .gencalc-role-btn[data-role-flag="primary"].is-on { background: var(--gencalc-role-primary); color: #fff; } .gencalc-role-btn[data-role-flag="primary"].is-on .gencalc-role-btn-led { background: var(--gencalc-lib-orange); box-shadow: 0 0 0 2px rgba(250,167,71,0.25); } .gencalc-role-btn[data-role-flag="secondary"].is-on { background: var(--gencalc-role-secondary); color: var(--gencalc-lib-ink); } .gencalc-role-btn[data-role-flag="secondary"].is-on .gencalc-role-btn-led { background: var(--gencalc-lib-ink); box-shadow: 0 0 0 2px rgba(26,26,26,0.18); } .gencalc-role-btn-flash { animation: gencalc-role-btn-flash-anim 600ms ease-out; } @keyframes gencalc-role-btn-flash-anim { 0% { box-shadow: 0 0 0 0 rgba(250,167,71,0); } 35% { box-shadow: 0 0 0 3px rgba(250,167,71,0.55); } 100% { box-shadow: 0 0 0 0 rgba(250,167,71,0); } } /* Mobile: at narrow widths the head row can't fit description + role-pair + result on one line. Wrap the role-pair to its own full-width row above the rest of the head, matching the spec strip's 2-column rhythm. */ @media (max-width: 600px) { .gencalc-load-card-head { flex-wrap: wrap; } body.gencalc-role-dual .gencalc-load-card-head > .gencalc-load-card-roles { order: -1; width: 100%; flex: 1 1 100%; margin: 0 0 8px; } body.gencalc-role-dual .gencalc-load-card-head > .gencalc-load-card-roles .gencalc-role-btn { flex: 1 1 50%; justify-content: center; } } /* ── Secondary-cleared Undo toast ──────────────────────────────────────────── */ .gencalc-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--gencalc-lib-ink); color: #fff; padding: 12px 16px; font-family: 'JCBEuro Roman Regular', sans-serif; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,0.16); opacity: 0; pointer-events: none; transition: transform 200ms ease, opacity 200ms ease; z-index: 1000; display: flex; align-items: center; gap: 14px; } .gencalc-toast.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .gencalc-toast strong { font-family: 'JCBEuro Bold Regular', sans-serif; } .gencalc-toast-undo { background: var(--gencalc-lib-orange); color: var(--gencalc-lib-ink); border: 0; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 11px; cursor: pointer; } /* Dual-mode totals strip — two side-by-side mini-strips (Pri | Sec). Replaces .gencalc-totals when the engine returns a dual payload. Each half mirrors the single-mode strip's 4-cell grid (Total Load / Margin / Required / Loads) but with role-specific values. Black border-top on Primary, orange on Secondary — matches the dual-panel role accents. */ .gencalc-totals-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; } .gencalc-totals-dual-half { background: #f8f9fa; border: 1px solid #e5e7eb; border-top-width: 3px; border-top-color: #1a1a1a; padding: 12px 14px; border-radius: 6px; } .gencalc-totals-dual-half[data-role-accent="secondary"] { border-top-color: #e07b00; } .gencalc-totals-dual-eyebrow { font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 11px; letter-spacing: 0.08em; color: #1a1a1a; margin-bottom: 10px; } .gencalc-totals-dual-half[data-role-accent="secondary"] .gencalc-totals-dual-eyebrow { color: #e07b00; } .gencalc-totals-dual-empty { font-size: 12px; color: #888; padding: 8px 0; } .gencalc-totals-dual-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .gencalc-totals-dual-cells .gencalc-totals-cell { padding: 0 6px; border-right: 1px solid #e5e7eb; } .gencalc-totals-dual-cells .gencalc-totals-cell:last-child { border-right: none; } .gencalc-totals-dual-cells .gencalc-totals-value { font-size: 15px; } .gencalc-totals-dual-cells .gencalc-totals-value > span { font-size: 11px; color: #888; margin-left: 2px; } @media (max-width: 720px) { .gencalc-totals-dual { grid-template-columns: 1fr; } } /* Dual-mode role-section heading row inside the breakdown table. Renders as a thin orange-bordered title separator between the Primary sizing block and the Secondary sizing block, with no value column. */ .gencalc-breakdown-row.is-section { border-bottom: 0; border-top: 1px solid #e07b00; margin-top: 10px; padding-top: 10px; align-items: center; } .gencalc-breakdown-row.is-section .gencalc-breakdown-label { font-size: 12.5px; color: #1a1a1a; } .gencalc-breakdown-row.is-section .gencalc-breakdown-label strong { color: #e07b00; } .gencalc-breakdown-row.is-section + .gencalc-breakdown-row { border-top: 0; } /* ─── Power Plan (dual mode) — replace single rec-grid with dual panels ───── Dual mode keeps the upper-summary (eyebrow, ref code, totals strip, breakdown, confidence, calc log button, project tolerances) so the user sees the same context as single-mode. Only the recommendation-card surfaces are swapped: single rec-grid + fleet-mode tabs hide, dual panels (or per-zone × dual zone-blocks) take over. */ body.gencalc-result-mode-dual #gencalcRecGrid, body.gencalc-result-mode-dual #gencalcFleetModeTabs, body.gencalc-result-mode-dual #gencalcFleetSummary, body.gencalc-result-mode-dual #gencalcPerZoneCaveat { display: none !important; } /* In per-zone × dual layout, top-level dual panels are suppressed (zone-blocks render into #gencalcZonesResult instead). */ body.gencalc-result-mode-dual-per-zone #gencalcDualResult { display: none !important; } body.gencalc-result-mode-dual-per-zone #gencalcZonesResult { display: block; } /* =========================================================================== * Optimise Sequencing modal * Compact, dense, JCB-industrial. Reuses the project's existing button + * pill patterns. Mobile collapses to a full-screen sheet. * =========================================================================== */ .gencalc-btn.has-suggestion::after { content: ''; width: 6px; height: 6px; background: #e07b00; border-radius: 50%; display: inline-block; margin-left: 6px; vertical-align: top; margin-top: 2px; } .gencalc-optimise-modal { position: fixed; inset: 0; z-index: 9100; display: flex; align-items: center; justify-content: center; padding: 16px; } .gencalc-optimise-modal[hidden] { display: none; } .gencalc-optimise-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .gencalc-optimise-dialog { position: relative; background: #fff; border: 1px solid #d4d4d4; border-radius: 6px; width: 100%; max-width: 580px; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } .gencalc-optimise-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e2e2e2; background: #fafafa; } .gencalc-optimise-head h3 { margin: 0; font-size: 14px; font-weight: 700; } .gencalc-optimise-close { background: none; border: 0; font-size: 16px; color: #555; cursor: pointer; padding: 4px 8px; } .gencalc-optimise-body { padding: 14px 16px; overflow-y: auto; flex: 1; } .gencalc-optimise-intro { margin: 0 0 12px; font-size: 12px; color: #555; line-height: 1.5; } .gencalc-optimise-section { margin-bottom: 12px; } .gencalc-optimise-section-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #777; margin-bottom: 6px; } .gencalc-optimise-pills { display: flex; gap: 4px; flex-wrap: wrap; } .gencalc-optimise-pill { padding: 6px 12px; border: 1px solid #d4d4d4; background: #fff; cursor: pointer; font-size: 12px; border-radius: 4px; color: #333; } .gencalc-optimise-pill.is-active { background: #e07b00; color: #fff; border-color: #c46a00; font-weight: 600; } .gencalc-optimise-pill:disabled { opacity: 0.35; cursor: not-allowed; } .gencalc-optimise-preview { background: #f5f5f5; border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; } .gencalc-optimise-preview-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; } .gencalc-optimise-preview-label { color: #555; } .gencalc-optimise-preview-value { font-weight: 600; } .gencalc-optimise-preview-savings { margin-left: 8px; font-weight: 600; padding: 1px 6px; border-radius: 3px; font-size: 11px; } .gencalc-optimise-preview-savings.is-good { background: #d4ecd4; color: #1a7a1a; } .gencalc-optimise-preview-savings.is-modest { background: #fff3d4; color: #8a6500; } .gencalc-optimise-preview-savings.is-none { background: #ececec; color: #777; } .gencalc-optimise-steps-wrap { overflow-x: auto; } .gencalc-optimise-steps { width: 100%; border-collapse: collapse; font-size: 11px; } .gencalc-optimise-steps thead { background: #f4f4f4; } .gencalc-optimise-steps th, .gencalc-optimise-steps td { padding: 5px 8px; border-bottom: 1px solid #ececec; } .gencalc-optimise-steps th { text-align: left; font-weight: 600; color: #555; } .gencalc-optimise-steps tr.is-worst { background: #fff7e6; font-weight: 600; } .gencalc-optimise-steps-loads { color: #666; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .gencalc-optimise-disabled-reason { margin: 12px 0 0; padding: 8px 10px; background: #ffeaea; border-left: 3px solid #cc6060; font-size: 11px; color: #8a1010; line-height: 1.55; border-radius: 0 4px 4px 0; } .gencalc-optimise-disabled-reason[hidden] { display: none; } .gencalc-optimise-disclaimer { margin: 12px 0 0; padding: 8px 10px; background: #fff8e6; border-left: 3px solid #e0c060; font-size: 11px; color: #664400; line-height: 1.5; } .gencalc-optimise-disclaimer i { margin-right: 6px; } /* Modal title's ? help icon — uses the same pattern as the wizard's inline help icons so the tooltip styling carries over. */ .gencalc-optimise-head h3 .gencalc-help { margin-left: 6px; font-size: 12px; color: #888; cursor: help; position: relative; } .gencalc-optimise-head h3 .gencalc-help:hover, .gencalc-optimise-head h3 .gencalc-help:focus { color: #555; } .gencalc-optimise-foot { padding: 10px 16px; border-top: 1px solid #e2e2e2; display: flex; justify-content: flex-end; gap: 8px; background: #fafafa; } @media (max-width: 480px) { .gencalc-optimise-modal { padding: 0; } .gencalc-optimise-dialog { max-width: 100vw; max-height: 100vh; border-radius: 0; height: 100vh; } .gencalc-optimise-pills { gap: 3px; } .gencalc-optimise-pill { padding: 5px 9px; font-size: 11px; } .gencalc-optimise-steps-loads { max-width: 120px; } } /* ───────────────────────────────────────────────────────────────────── Clean recommendation block — used by per-zone view and Power Plan dual-genset role panels. Replaces the legacy 3-card grid where two of the three cards were unactionable "Talk to engineering" CTAs and the real answer (Sync, usually) was buried as the third card. Layout: [Headline card] full-width, brand-orange left rail [Alternatives] compact footer, one line per non-headline config ───────────────────────────────────────────────────────────────────── */ .gencalc-clean-rec { background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid #FAA747; margin-bottom: 14px; overflow: hidden; } /* Tight headline — image left, title + facts right, CTA below. No pills, no 3-card metric strip, no "OTHER OPTIONS CONSIDERED" formal eyebrow. The customer reads one paragraph and clicks one button. */ .gencalc-clean-rec-headline { padding: 16px 20px 14px; } .gencalc-clean-rec-headline--engineering { border-left: 0; background: #fff8ec; } .gencalc-clean-rec-body { display: flex; gap: 16px; align-items: center; } .gencalc-clean-rec-image { flex: 0 0 96px; width: 96px; height: 70px; object-fit: contain; background: #f7f8fa; border: 1px solid #e5e7eb; padding: 4px; } .gencalc-clean-rec-info { flex: 1 1 auto; min-width: 0; } .gencalc-clean-rec-rec { display: inline-flex; align-items: center; gap: 5px; color: #047857; font-family: 'JCBEuro BoldCondensed Regular', Arial, sans-serif; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } .gencalc-clean-rec-rec i { font-size: 9px; } .gencalc-clean-rec-rec--warn { color: #b45309; } .gencalc-clean-rec-title { font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 2px 0; line-height: 1.1; letter-spacing: -0.005em; } .gencalc-clean-rec-facts { color: #555; font-family: 'JCBEuro Roman Regular', sans-serif; font-size: 12px; margin: 0; line-height: 1.4; } /* Inline N+1 / dip-review chips next to the facts line. */ .gencalc-clean-rec-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .gencalc-clean-rec-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 7px; letter-spacing: 0.02em; font-family: 'JCBEuro Roman Regular', sans-serif; } .gencalc-clean-rec-badge i { font-size: 9px; } .gencalc-clean-rec-badge--ok { background: #ecfdf5; color: #047857; } .gencalc-clean-rec-badge--info { background: #eff6ff; color: #1e40af; } /* Single-line wet-stacking warning — inline under the facts. */ .gencalc-clean-rec-wetstack { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; background: #fef3c7; color: #92400e; font-size: 11px; border-left: 2px solid #f59e0b; } .gencalc-clean-rec-wetstack i { font-size: 11px; } /* Per-zone CTAs intentionally removed — the customer is choosing ONE fleet, not a configuration per zone. Selector class kept hidden as a safety net in case any builder forgets to strip it. */ .gencalc-clean-rec-cta { display: none; } .gencalc-clean-rec-headline--engineering .gencalc-clean-rec-cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #1a1a1a; color: #FAA747; font-family: 'JCBEuro BoldCondensed Regular', Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; margin-top: 8px; } /* Fleet-level CTA was removed per 2026-05-14 user feedback — too dominant, selection happens via the Get Quote modal elsewhere in the page. */ /* ───────────────────────────────────────────────────────────────────── Inrush context note — bridges the "running 1 MVA → required 2.65 MVA" gap that's the #1 customer-confusion moment. Shown when sized_for_inrush is true (the step-load drove the genset size up beyond running load). ───────────────────────────────────────────────────────────────────── */ .gencalc-inrush-context { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 18px; padding: 10px 14px; background: #fff8ec; border-left: 3px solid #FAA747; font-family: 'JCBEuro Roman Regular', sans-serif; font-size: 12px; color: #4b5563; line-height: 1.5; } .gencalc-inrush-context[hidden] { display: none; } .gencalc-inrush-context > i { color: #FAA747; font-size: 14px; margin-top: 1px; flex-shrink: 0; } .gencalc-inrush-context strong { color: #1a1a1a; font-family: 'JCBEuro Bold Regular', sans-serif; font-weight: 700; } /* Alternatives — one inline footer line. No structured list, no "OTHER OPTIONS CONSIDERED" formal heading. Conversational. */ .gencalc-clean-rec-alts { padding: 10px 20px; border-top: 1px solid #eef0f3; background: #fafafa; font-family: 'JCBEuro Roman Regular', sans-serif; font-size: 11px; color: #6b7280; line-height: 1.5; } .gencalc-clean-rec-alts-prefix { color: #9ca3af; font-family: 'JCBEuro BoldCondensed Regular', Arial, sans-serif; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } .gencalc-clean-rec-alts strong { color: #1a1a1a; font-weight: 600; font-family: 'JCBEuro Roman Regular', sans-serif; } .gencalc-clean-rec-alts a { color: #FAA747; text-decoration: none; } .gencalc-clean-rec-alts a:hover { color: #b96a14; text-decoration: underline; } @media (max-width: 720px) { .gencalc-clean-rec-title { font-size: 18px; } .gencalc-clean-rec-image { flex: 0 0 72px; width: 72px; height: 54px; } .gencalc-clean-rec-cta { margin: 12px 12px 0; } .gencalc-clean-rec-alts { padding: 8px 12px; font-size: 10px; } .gencalc-clean-rec-headline { padding: 12px 14px; } } /* ───────────────────────────────────────────────────────────────────── Phase Balance card (IEEE-141 §3.6) — R/Y/B panel-style breakdown. Pure CSS, JCB font stack only (no new design tokens). ───────────────────────────────────────────────────────────────────── */ .gencalc-phase-balance { margin: 0 0 16px; padding: 14px 16px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; font-family: 'JCBEuro Roman Regular', sans-serif; } .gencalc-phase-balance[hidden] { display: none; } .gencalc-phase-balance-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .gencalc-phase-balance-title { margin: 0; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 13px; color: #1a1a1a; letter-spacing: 0.02em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; } .gencalc-phase-balance-title i { color: #FAA747; } .gencalc-phase-balance-mode-pill { font-family: 'JCBEuro BoldCondensed Regular', Arial, sans-serif; font-size: 10px; color: #6b7280; background: #f3f4f6; padding: 3px 8px; border-radius: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .gencalc-phase-balance-empty { margin: 0; padding: 12px; color: #6b7280; font-size: 12px; text-align: center; background: #f9fafb; border-radius: 3px; } .gencalc-phase-balance-empty[hidden] { display: none; } .gencalc-phase-balance-body[hidden] { display: none; } .gencalc-phase-balance-legs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .gencalc-phase-balance-leg { padding: 12px 8px; text-align: center; background: #f9fafb; border-top: 3px solid transparent; border-radius: 3px 3px 2px 2px; } .gencalc-phase-balance-leg--R { border-top-color: #dc2626; } .gencalc-phase-balance-leg--Y { border-top-color: #f59e0b; } .gencalc-phase-balance-leg--B { border-top-color: #2563eb; } .gencalc-phase-balance-leg-label { display: block; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 12px; letter-spacing: 0.1em; margin-bottom: 4px; } .gencalc-phase-balance-leg--R .gencalc-phase-balance-leg-label { color: #dc2626; } .gencalc-phase-balance-leg--Y .gencalc-phase-balance-leg-label { color: #f59e0b; } .gencalc-phase-balance-leg--B .gencalc-phase-balance-leg-label { color: #2563eb; } .gencalc-phase-balance-leg-value { display: block; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 22px; color: #1a1a1a; line-height: 1.1; } .gencalc-phase-balance-leg-unit { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; } .gencalc-phase-balance-leg.is-worst { background: #fff7ed; } .gencalc-phase-balance-leg.is-worst .gencalc-phase-balance-leg-value { color: #1a1a1a; } .gencalc-phase-balance-meta { margin: 0; display: grid; gap: 4px; } .gencalc-phase-balance-meta-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid #f1f3f5; font-size: 12px; } .gencalc-phase-balance-meta-row dt { color: #6b7280; } .gencalc-phase-balance-meta-row dd { margin: 0; color: #1a1a1a; font-family: 'JCBEuro Bold Regular', sans-serif; } .gencalc-phase-balance-factor-pill { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 10px; font-family: 'JCBEuro BoldCondensed Regular', Arial, sans-serif; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; } .gencalc-phase-balance-factor-pill.is-good { background: #ecfdf5; color: #047857; } .gencalc-phase-balance-factor-pill.is-warning { background: #fffbeb; color: #b45309; } .gencalc-phase-balance-factor-pill.is-danger { background: #fef2f2; color: #b91c1c; } .gencalc-phase-balance-mode-note { font-family: 'JCBEuro Roman Regular', sans-serif; font-weight: 400; color: #9ca3af; margin-left: 6px; font-size: 11px; } /* Panel-schedule-style per-load assignment table — collapsed by default. */ .gencalc-phase-balance-table-wrap { margin-top: 14px; border-top: 1px solid #e5e7eb; padding-top: 12px; } .gencalc-phase-balance-table-wrap[hidden] { display: none; } .gencalc-phase-balance-table-summary { cursor: pointer; font-family: 'JCBEuro Roman Regular', sans-serif; font-weight: 500; font-size: 12px; color: #4b5563; list-style: none; padding: 4px 0; user-select: none; } .gencalc-phase-balance-table-summary::-webkit-details-marker { display: none; } .gencalc-phase-balance-table-summary i { transition: transform 0.15s ease; margin-right: 6px; font-size: 10px; color: #9ca3af; } .gencalc-phase-balance-table-wrap[open] .gencalc-phase-balance-table-summary i { transform: rotate(90deg); } .gencalc-phase-balance-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-family: 'JCBEuro Roman Regular', sans-serif; font-size: 12px; } .gencalc-phase-balance-table th, .gencalc-phase-balance-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; } .gencalc-phase-balance-table th { font-weight: 500; color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; background: #f9fafb; } .gencalc-phase-balance-table th.num, .gencalc-phase-balance-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .gencalc-phase-balance-leg-cell { font-weight: 600; text-align: center; width: 70px; border-radius: 3px; } .gencalc-phase-balance-leg-cell--R { background: #fef2f2; color: #b91c1c; } .gencalc-phase-balance-leg-cell--Y { background: #fffbeb; color: #b45309; } .gencalc-phase-balance-leg-cell--B { background: #eff6ff; color: #1d4ed8; } .gencalc-phase-balance-leg-cell--all { background: #f3f4f6; color: #4b5563; } /* ── Setup tab — Band wrappers (2026-05-21 rethink) ───────────────────── Two visually-bounded bands that group Setup controls by intent. Replace the old scattered fieldsets (Power Plan, Sizing strategy, Project Tolerances, Site Conditions). Pure presentation — no semantics. */ .gencalc-setup-band { border: 1px solid var(--gp-stroke-soft, #e2e4e7); border-radius: 6px; padding: 18px 20px 14px; margin: 0 0 16px; background: #fff; } .gencalc-setup-band-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gp-ink-mute, #7b7e84); margin: 0 0 12px; } /* ── Collapsible band variant ── When .gencalc-setup-band is rendered as a
, hide the native marker (already removed from .gencalc-advanced-block — re-use the pattern) and add a chevron that rotates 180° when open. Default state when [open] is set in markup is "expanded"; closing the details collapses everything except the summary row. */ .gencalc-setup-band--collapsible { /* normalize details element to look the same as a non-collapsible band */ display: block; } .gencalc-setup-band--collapsible > .gencalc-setup-band-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: 16px; user-select: none; margin-bottom: 18px; } .gencalc-setup-band--collapsible > .gencalc-setup-band-summary::-webkit-details-marker { display: none; } .gencalc-setup-band--collapsible > .gencalc-setup-band-summary > .gencalc-setup-band-label { /* keep the band label visually identical to non-collapsible bands */ margin: 0; } .gencalc-setup-band-chevron { color: #6b7280; font-size: 12px; transition: transform .2s ease; } .gencalc-setup-band--collapsible[open] > .gencalc-setup-band-summary > .gencalc-setup-band-chevron { transform: rotate(180deg); } .gencalc-setup-band--collapsible > .gencalc-setup-band-summary:hover > .gencalc-setup-band-chevron { color: #0f0f0f; } /* Preset-applied badge on collapsible band summaries. Small circle with the count of fields the active Industry preset wrote into this band. Hidden via the `hidden` attribute when count = 0 or no preset active. */ .gencalc-setup-band-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: auto; background: #FAA747; color: #0f0f0f; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 12px; line-height: 1; border-radius: 999px; } .gencalc-setup-band-badge[hidden] { display: none; } /* Sizing approach — 3-chip row (Single / Primary+Backup / Per-zone). Reuses the existing .gencalc-iso-chip style; this rule only adds the disabled state used when Per-zone is gated on Loads mode = By zone. */ .gencalc-iso-chip[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } .gencalc-iso-chip[aria-disabled="true"]:hover { background: inherit; } /* Engineering overrides fold — "modified" dot on the summary when the user has changed a default inside the fold while it is closed. */ .gencalc-advanced-summary[data-modified="1"] .gencalc-advanced-summary-title::after { content: "•"; color: var(--gp-orange, #ff7a00); margin-left: 6px; font-size: 18px; line-height: 0; vertical-align: middle; } /* Manual override subhead — peer of Voltage standard / Phase balance / Stagger motor starts inside the Site & Power band. JCB Bold uppercase tracked to match the other section labels. */ .gencalc-manual-override-subhead { display: block; font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #1a1a1a; margin: 0 0 14px; padding: 0; } /* Auto-revert toast (Per-zone → Simple list). Mirrors the existing .gencalc-auto-advanced-notice palette but slimmer — single-line. */ .gencalc-revert-toast { margin: 10px 0; padding: 8px 12px; background: #fff8e6; border: 1px solid #f0c75e; border-radius: 4px; font-size: 13px; color: #5c4a18; display: flex; align-items: center; gap: 10px; } .gencalc-revert-toast button { background: transparent; border: 0; font-size: 16px; color: #5c4a18; cursor: pointer; padding: 0 4px; margin-left: auto; } /* /Setup tab rethink */ /* ── Setup tab — outlined-pill chip variant (2026-05-21 rethink follow-up) ─ The existing .gencalc-iso-chip pattern is a segmented-control (chips on a shared #f1f3f5 pill bar). When promoted to the main Setup surface it reads as a tab strip. Override for the three Setup chip groups so each chip is its own outlined pill with clear separation. Phase balance keeps the segmented look (it stays inside the Engineering overrides fold). */ [data-sizing-approach-chips], [data-power-factor-chips], [data-voltage-standard-chips], [data-phase-balance-chips], [data-stagger-chips] { border: 0; padding: 16px 0 18px; margin: 0 0 30px; } [data-sizing-approach-chips] > .gencalc-iso-chips-label, [data-power-factor-chips] > .gencalc-iso-chips-label, [data-voltage-standard-chips] > .gencalc-iso-chips-label, [data-phase-balance-chips] > .gencalc-iso-chips-label, [data-stagger-chips] > .gencalc-iso-chips-label { margin-bottom: 22px; font-size: 13px; font-weight: 600; color: #1a1a1a; } [data-sizing-approach-chips] .gencalc-iso-chips-row, [data-power-factor-chips] .gencalc-iso-chips-row, [data-voltage-standard-chips] .gencalc-iso-chips-row, [data-phase-balance-chips] .gencalc-iso-chips-row, [data-stagger-chips] .gencalc-iso-chips-row { background: transparent; padding: 0; gap: 10px; flex-wrap: wrap; } [data-sizing-approach-chips] .gencalc-iso-chip, [data-power-factor-chips] .gencalc-iso-chip, [data-voltage-standard-chips] .gencalc-iso-chip, [data-phase-balance-chips] .gencalc-iso-chip, [data-stagger-chips] .gencalc-iso-chip { background: #fff; border: 1px solid #d1d5db; padding: 10px 18px; min-width: 92px; font-size: 14px; text-align: center; } [data-sizing-approach-chips] .gencalc-iso-chip:hover, [data-power-factor-chips] .gencalc-iso-chip:hover, [data-voltage-standard-chips] .gencalc-iso-chip:hover, [data-phase-balance-chips] .gencalc-iso-chip:hover, [data-stagger-chips] .gencalc-iso-chip:hover { background: #f9fafb; border-color: #6b7280; } [data-sizing-approach-chips] .gencalc-iso-chip[aria-pressed="true"], [data-power-factor-chips] .gencalc-iso-chip[aria-pressed="true"], [data-voltage-standard-chips] .gencalc-iso-chip[aria-pressed="true"], [data-phase-balance-chips] .gencalc-iso-chip[aria-pressed="true"], [data-stagger-chips] .gencalc-iso-chip[aria-pressed="true"] { background: #1a1a1a; color: #fff; border-color: #1a1a1a; box-shadow: none; } [data-sizing-approach-chips] .gencalc-iso-chip[aria-pressed="true"]:hover, [data-power-factor-chips] .gencalc-iso-chip[aria-pressed="true"]:hover, [data-voltage-standard-chips] .gencalc-iso-chip[aria-pressed="true"]:hover, [data-phase-balance-chips] .gencalc-iso-chip[aria-pressed="true"]:hover, [data-stagger-chips] .gencalc-iso-chip[aria-pressed="true"]:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; } [data-sizing-approach-chips] .gencalc-iso-chip[aria-disabled="true"], [data-sizing-approach-chips] .gencalc-iso-chip[aria-disabled="true"]:hover { background: #fff; border-color: #d1d5db; } /* Engineering overrides fold — drop the heavy card framing on the Stagger motor starts row so it sits flush with the surrounding chip rows. The .gencalc-power-plan-toggle-row class was originally designed as a standalone card for the (now-deleted) Power Plan section. Inside the fold we want a flat layout. */ #gencalcAdvancedBlock .gencalc-power-plan-toggle-row { background: transparent; border: 0; padding: 0; margin: 0 0 18px; } /* /Setup tab chip outlined variant */ /* ═══════════════════════════════════════════════════════════════════════════ PROJECT DETAILS — Spec-sheet letterhead (2026-05-25) Label-left / value-right rows in a white card. Matches the website's form/card tokens: 8px radius, #e5e7eb hairlines, 12x16 input padding, #d1d5db borders, orange #FAA747 only on the primary CTA. ═══════════════════════════════════════════════════════════════════════════ */ .gencalc-spec { --gs-col-label: 160px; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-family: 'JCBEuro Roman Regular', system-ui, sans-serif; } /* Headline — Project name */ .gencalc-spec-headline { padding: 14px 32px 20px; border-bottom: 1px solid #e5e7eb; display: flex; flex-direction: column; gap: 6px; } .gencalc-spec-field-label { font-family: 'JCBEuro Bold Regular', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: #6b7280; } .gencalc-spec-name { font-family: 'JCBEuro Bold Regular', sans-serif; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; color: #0a0a0a; background: transparent; border: 0; outline: none; width: 100%; padding: 2px 0; } .gencalc-spec-name::placeholder { color: #9ca3af; font-family: 'JCBEuro Roman Regular', system-ui, sans-serif; font-weight: normal; } .gencalc-spec-name:focus { background: rgba(250, 167, 71, 0.04); } /* Spec rows */ .gencalc-spec-rows { display: grid; } .gencalc-spec-row { display: grid; grid-template-columns: var(--gs-col-label) 1fr; align-items: stretch; border-bottom: 1px solid #e5e7eb; min-height: 72px; } .gencalc-spec-row:last-of-type { border-bottom: 0; } .gencalc-spec-label { font-family: 'JCBEuro Bold Regular', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: #6b7280; padding: 20px 28px; display: flex; align-items: center; gap: 6px; } .gencalc-spec-label-text { /* keeps the text and the help icon visually aligned on the same row */ line-height: 1.2; } /* The .gencalc-help icon inside spec labels inherits its global styling (inline-flex + fa-circle-info). Override font-size to match the smaller label scale. */ .gencalc-spec-label .gencalc-help { font-size: 12px; } .gencalc-spec-value { padding: 16px 32px 16px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .gencalc-spec-value--inline2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex-wrap: nowrap; } /* Inputs */ .gencalc-spec-input { font-family: 'JCBEuro Roman Regular', system-ui, sans-serif; font-size: 14px; color: #0a0a0a; background: #ffffff; border: 1px solid #d1d5db; border-radius: 6px; padding: 12px 16px; outline: none; width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .gencalc-spec-input::placeholder { color: #9ca3af; } .gencalc-spec-input:focus { border-color: #FAA747; box-shadow: 0 0 0 3px rgba(250, 167, 71, 0.15); } /* Validation states — red border + inline error message */ .gencalc-spec-input.is-invalid { border-color: #a02f23; } .gencalc-spec-input.is-invalid:focus { border-color: #a02f23; box-shadow: 0 0 0 3px rgba(160, 47, 35, 0.15); } .gencalc-spec-input-wrap { display: flex; flex-direction: column; min-width: 0; } .gencalc-spec-error { display: block; font-size: 12px; color: #a02f23; margin-top: 4px; line-height: 1.3; } .gencalc-spec-error[hidden] { display: none; } .gencalc-spec-error--inline { /* Wraps to its own line below the Project window inputs */ flex-basis: 100%; margin-top: 8px; } .gencalc-spec-input--inline { width: auto; max-width: 180px; } .gencalc-spec-arrow { color: #9ca3af; font-size: 14px; line-height: 1; } /* Meta chip (duration, status) */ .gencalc-spec-meta { font-family: 'JCBEuro Bold Regular', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: #6b7280; padding: 6px 10px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; line-height: 1; margin-left: auto; white-space: nowrap; } .gencalc-spec-meta--accent { /* Computed value, not an action — plain accent text, no fill, so it can't be mistaken for a button. Darker orange for AA contrast. */ background: transparent; border-color: transparent; color: #B86E1A; padding-left: 0; padding-right: 0; } /* Location row */ .gencalc-spec-loc { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; align-items: center; width: 100%; } .gencalc-spec-loc-thumb { width: 88px; height: 56px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gencalc-spec-loc-thumb--filled { background: linear-gradient(135deg, #e6eadd 0%, #d6dccc 50%, #dfe4d3 100%); } .gencalc-spec-loc-thumb--filled::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(0deg, transparent 49%, rgba(0,0,0,.05) 49%, rgba(0,0,0,.05) 51%, transparent 51%), linear-gradient(90deg, transparent 49%, rgba(0,0,0,.05) 49%, rgba(0,0,0,.05) 51%, transparent 51%); background-size: 14px 14px; } .gencalc-spec-loc-thumb-pin { position: relative; font-size: 28px; line-height: 1; z-index: 1; } .gencalc-spec-loc-thumb--empty .gencalc-spec-loc-thumb-pin { color: #9ca3af; } .gencalc-spec-loc-thumb--filled .gencalc-spec-loc-thumb-pin { color: #FAA747; filter: drop-shadow(0 1px 0 rgba(0,0,0,.18)); } .gencalc-spec-loc-text { font-family: 'JCBEuro Roman Regular', system-ui, sans-serif; font-size: 14px; color: #0a0a0a; line-height: 1.45; min-width: 0; } .gencalc-spec-loc-text small { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; } .gencalc-spec-loc-text-empty { color: #9ca3af; } .gencalc-spec-loc-text-empty[hidden], .gencalc-spec-loc-text-filled[hidden], .gencalc-spec-loc-action-empty[hidden], .gencalc-spec-loc-action-filled[hidden] { display: none; } /* Secondary action — ghost button. Orange fill is reserved for the page's primary CTA (Calculate); a map pin inside an optional section shouldn't outshout it. Hover borrows the .gencalc-btn--ghost orange-line idiom. */ .gencalc-spec-loc-action { font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 13px; color: #0a0a0a; background: transparent; padding: 10px 16px; border: 1px solid #d2d2d2; border-radius: 6px; cursor: pointer; line-height: 1; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .gencalc-spec-loc-action:hover { border-color: #FAA747; color: #FAA747; } /* Filled state: button becomes a ghost "Change" — apply when the .gencalc-spec-loc wrapper has data-empty="false" */ .gencalc-spec-loc[data-empty="false"] .gencalc-spec-loc-action { background: transparent; color: #6b7280; border: 1px solid #d1d5db; } .gencalc-spec-loc[data-empty="false"] .gencalc-spec-loc-action:hover { background: #f9fafb; color: #0a0a0a; border-color: #9ca3af; } /* Description row */ .gencalc-spec-row--desc { min-height: 120px; align-items: start; } .gencalc-spec-row--desc .gencalc-spec-value { padding: 16px 32px 16px 0; align-items: stretch; flex-direction: column; gap: 8px; } .gencalc-spec-desc { width: 100%; font-family: 'JCBEuro Roman Regular', system-ui, sans-serif; font-size: 14px; line-height: 1.55; color: #0a0a0a; background: #ffffff; border: 1px solid #d1d5db; border-radius: 6px; padding: 12px 16px; outline: none; resize: vertical; min-height: 72px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .gencalc-spec-desc::placeholder { color: #9ca3af; } .gencalc-spec-desc:focus { border-color: #FAA747; box-shadow: 0 0 0 3px rgba(250, 167, 71, 0.15); } .gencalc-spec-desc-hint { font-size: 12px; color: #6b7280; line-height: 1.4; } /* Responsive */ @media (max-width: 720px) { .gencalc-spec-row { grid-template-columns: 1fr; min-height: 0; } .gencalc-spec-label { padding: 14px 20px 6px; } .gencalc-spec-value, .gencalc-spec-row--desc .gencalc-spec-value { padding: 0 20px 16px; } .gencalc-spec-value--inline2 { grid-template-columns: 1fr; } .gencalc-spec-loc { grid-template-columns: 1fr; } .gencalc-spec-loc-thumb { width: 100%; height: 120px; } .gencalc-spec-headline { padding: 22px 20px 18px; } } /* ═══════════════════════════════════════════════════════════════════════════ MAP PIN PICKER — Project Details map modal (Google Maps). ═══════════════════════════════════════════════════════════════════════════ */ .gencalc-map-modal[hidden] { display: none; } .gencalc-map-modal { position: fixed; inset: 0; z-index: 100002; display: flex; align-items: center; justify-content: center; } .gencalc-map-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 15, 15, 0.5); } .gencalc-map-modal-frame { position: relative; width: min(960px, calc(100vw - 32px)); height: min(720px, calc(100vh - 32px)); background: #fff; border: 1px solid #d4d4d8; box-shadow: 0 24px 48px -16px rgba(0,0,0,0.3); display: flex; flex-direction: column; } .gencalc-map-modal-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; background: #faf6ec; } .gencalc-map-modal-badge { font-family: 'JCBEuro BoldCondensed Regular', sans-serif; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; padding: 5px 10px; background: #FAA747; color: #0f0f0f; line-height: 1; } .gencalc-map-modal-title { font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 16px; margin: 0; } .gencalc-map-modal-spacer { flex: 1; } .gencalc-map-modal-close { background: none; border: 0; cursor: pointer; font-size: 22px; color: #888; padding: 0 4px; } .gencalc-map-modal-close:hover { color: #0f0f0f; } .gencalc-map-modal-body { flex: 1 1 auto; position: relative; overflow: hidden; display: flex; flex-direction: column; } .gencalc-map-canvas { flex: 1 1 auto; width: 100%; min-height: 0; } .gencalc-map-no-key { padding: 40px; text-align: center; color: #6b7280; font-family: inherit; } .gencalc-map-no-key i { font-size: 32px; color: #FAA747; margin-bottom: 12px; } .gencalc-map-no-key h3 { font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 16px; color: #0f0f0f; margin: 0 0 10px; } .gencalc-map-no-key p { margin: 8px 0; font-size: 13px; } .gencalc-map-no-key pre { background: #f4f4f5; padding: 12px; margin: 12px auto; max-width: 480px; text-align: left; font-size: 12px; border: 1px solid #e5e7eb; } .gencalc-map-no-key code { font-family: 'SF Mono', Consolas, monospace; } .gencalc-map-no-key-tip { font-size: 11px; color: #9ca3af; max-width: 480px; margin: 16px auto 0; } .gencalc-map-error { padding: 40px; text-align: center; color: #a02f23; font-family: inherit; } .gencalc-map-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid #e5e7eb; background: #fff; } .gencalc-map-address-preview { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow: hidden; } .gencalc-map-address-preview-label { font-family: 'JCBEuro BoldCondensed Regular', sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; color: #6b7280; } .gencalc-map-address-preview-value { font-family: 'JCBEuro Bold Regular', sans-serif; font-size: 13px; color: #0f0f0f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gencalc-map-modal-actions { display: flex; gap: 8px; } .gencalc-map-btn { border: 1px solid #d4d4d8; background: #fff; cursor: pointer; font-family: inherit; font-size: 13px; padding: 8px 14px; transition: background .12s, border-color .12s; } .gencalc-map-btn:hover { border-color: #0f0f0f; } .gencalc-map-btn--primary { background: #FAA747; color: #0f0f0f; border-color: #FAA747; font-family: 'JCBEuro Bold Regular', sans-serif; } .gencalc-map-btn--primary:hover { background: #c46a00; border-color: #c46a00; color: #fff; } .gencalc-map-btn--primary:disabled { background: #f4f4f5; color: #9ca3af; border-color: #e5e7eb; cursor: not-allowed; } .gencalc-map-btn--ghost { background: transparent; } @media (max-width: 720px) { .gencalc-map-modal-frame { width: 100vw; height: 100vh; max-width: none; max-height: none; } .gencalc-map-modal-footer { flex-direction: column; align-items: stretch; gap: 10px; } .gencalc-map-modal-actions { justify-content: flex-end; } } /* Map modal — Places Autocomplete search bar above the canvas */ .gencalc-map-search { position: relative; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #fafafa; flex-shrink: 0; } .gencalc-map-search[hidden] { display: none; } .gencalc-map-search-icon { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 13px; pointer-events: none; z-index: 1; } .gencalc-map-search-input { width: 100%; padding: 10px 12px 10px 36px; font-family: 'JCBEuro Roman Regular', system-ui, sans-serif; font-size: 14px; color: #0a0a0a; background: #ffffff; border: 1px solid #d1d5db; border-radius: 6px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .gencalc-map-search-input::placeholder { color: #9ca3af; } .gencalc-map-search-input:focus { border-color: #FAA747; box-shadow: 0 0 0 3px rgba(250, 167, 71, 0.15); } /* The Google Places Autocomplete dropdown — light theming so it doesn't clash with the calculator's palette. The .pac-container is appended to by Google's SDK at runtime. */ .pac-container { border: 1px solid #e5e7eb; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); margin-top: 4px; font-family: 'JCBEuro Roman Regular', system-ui, sans-serif; z-index: 100003; /* sit above the modal's z-index: 100002 */ } .pac-item { padding: 8px 12px; font-size: 13px; border-top: 1px solid #f3f4f6; cursor: pointer; } .pac-item:first-child { border-top: 0; } .pac-item:hover { background: #fafafa; } .pac-item-query { font-family: 'JCBEuro Bold Regular', sans-serif; color: #0a0a0a; font-size: 13px; } .pac-matched { color: #c46a00; } .pac-icon { display: none; } /* drop the default magnifier icon — we have our own */ /* /Map Pin Picker */ /* ─── Toolbar mode toggle (Basic / Advanced) ──────────────────────────── */ .gencalc-mode-toggle { display: inline-flex; border: 1px solid #d0d0d0; border-radius: 4px; overflow: hidden; margin-right: 12px; background: #fff; } .gencalc-mode-toggle [role="radio"] { appearance: none; background: transparent; border: 0; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 500; color: #555; cursor: pointer; line-height: 1.2; } .gencalc-mode-toggle [role="radio"] + [role="radio"] { border-left: 1px solid #d0d0d0; } .gencalc-mode-toggle [role="radio"]:hover { color: #1a1a1a; } .gencalc-mode-toggle [role="radio"].is-active { background: #1a1a1a; color: #fff; } .gencalc-mode-toggle [role="radio"]:focus-visible { outline: 2px solid #f7931e; outline-offset: -2px; } /* ─── Downgrade modal + toast ─────────────────────────────────────────── */ .gencalc-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; } .gencalc-modal[hidden] { display: none; } .gencalc-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); } .gencalc-modal-panel { position: relative; background: #fff; border-radius: 6px; max-width: 480px; width: 92%; padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); } .gencalc-modal-title { margin: 0 0 12px; font-size: 18px; font-weight: 700; } .gencalc-modal-body { margin: 0 0 12px; color: #333; line-height: 1.45; } .gencalc-modal-offenders { margin: 0 0 18px; padding: 0 0 0 18px; color: #444; font-size: 14px; line-height: 1.55; } .gencalc-modal-actions { display: flex; justify-content: flex-end; gap: 8px; } .gencalc-btn-secondary, .gencalc-btn-danger { padding: 8px 16px; border-radius: 4px; font: inherit; font-weight: 500; cursor: pointer; border: 1px solid transparent; } .gencalc-btn-secondary { background: #fff; color: #333; border-color: #c0c0c0; } .gencalc-btn-secondary:hover { background: #f5f5f5; } .gencalc-btn-danger { background: #c0392b; color: #fff; } .gencalc-btn-danger:hover { background: #a93226; } .gencalc-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #2c2c2c; color: #fff; padding: 10px 14px; border-radius: 4px; display: flex; align-items: center; gap: 12px; z-index: 10001; box-shadow: 0 4px 16px rgba(0,0,0,0.3); font-size: 14px; } .gencalc-toast[hidden] { display: none; } .gencalc-toast-undo { background: transparent; border: 0; color: #f7931e; font: inherit; font-weight: 600; cursor: pointer; padding: 2px 4px; } .gencalc-toast-undo:hover { color: #ffae50; } /* ─── Results tab: Basic-mode hide rules (Task 8) ───────────────────────── */ body.gencalc-mode-basic .gencalc-phase-balance, body.gencalc-mode-basic #gencalcPhaseBalance, body.gencalc-mode-basic .gencalc-iso-explainer, body.gencalc-mode-basic #gencalcProjectTolerances, body.gencalc-mode-basic #gencalcTotalsBreakdownWrap, /* Optimise sequencing is an Advanced-only engineering tool. */ body.gencalc-mode-basic #gencalcOptimiseLoads { display: none !important; } /* ─── Basic mode: hide Site & Power overrides + Tolerances (Task 13) ──── */ /* Primary anchors — actual IDs found in wizard.php */ body.gencalc-mode-basic #gencalcSitePowerBlock, /* Speculative fallbacks — harmless no-ops if selectors don't exist */ body.gencalc-mode-basic .gencalc-site-power-band, body.gencalc-mode-basic [data-band="site-power"], body.gencalc-mode-basic .gencalc-site-conditions, body.gencalc-mode-basic .gencalc-tolerances-band, body.gencalc-mode-basic [data-band="tolerances"], body.gencalc-mode-basic .gencalc-tolerances { display: none !important; } /* Headroom + Usage factor are surfaced in Basic mode (per request) — the two fieldsets above are no longer hidden. Add separating space above the Headroom fieldset so it doesn't crowd the Dual power section above it. */ .gencalc-slider--margin { margin-top: 24px; } /* ════ RESULTS REDESIGN — Task 1.2 · result-zone buttons ════ */ /* result-zone buttons — sentence case, ranked by weight */ .gencalc-act-primary{background:#FAA747;border:1px solid #FAA747;color:#1a1a1a;font-family:'JCBEuro Bold Regular',sans-serif;font-size:14px;padding:13px;cursor:pointer;text-align:center;width:100%} .gencalc-act-primary:hover{background:#f59a30} .gencalc-act-secondary{background:#fff;border:1px solid #1a1a1a;color:#1a1a1a;font-family:'JCBEuro Bold Regular',sans-serif;font-size:13px;padding:12px;cursor:pointer;text-align:center;width:100%} .gencalc-act-secondary:hover{background:#1a1a1a;color:#fff} .gencalc-act-ghost{background:none;border:none;color:#6b7280;font-family:'JCBEuro Bold Regular',sans-serif;font-size:12.5px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px} .gencalc-act-ghost:hover{color:#1a1a1a} .gencalc-act-fineprint{font-size:12px;color:#6b7280;margin:6px 0 0} /* ════ RESULTS REDESIGN — Task 1.3 · result card (single + sync) ════ */ /* one-suggestion result card — horizontal (image left, specs right) */ .gencalc-result-card{background:#fff;border:1px solid #e5e7eb;display:grid;grid-template-columns:200px 1fr;margin-bottom:14px} @media (max-width:680px){.gencalc-result-card{grid-template-columns:1fr}} .gencalc-result-card-img{background:#f7f8fa;border-right:1px solid #eef0f3;display:flex;align-items:center;justify-content:center;padding:16px} .gencalc-result-card-img img{max-width:100%;max-height:130px;object-fit:contain} .gencalc-result-card-body{padding:18px 22px} .gencalc-result-card-eyebrow{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#FAA747;font-family:'JCBEuro Bold Regular',sans-serif} .gencalc-result-card-title{font-family:'JCBEuro Bold Regular',sans-serif;font-size:21px;margin:6px 0 2px;color:#1a1a1a} .gencalc-result-card-subtitle{font-size:12.5px;color:#777;margin:0 0 12px} .gencalc-result-card-specs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;border-top:1px solid #eef0f3} @media (max-width:680px){.gencalc-result-card-specs{grid-template-columns:1fr}} .gencalc-result-card-specs li{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px dashed #f0f1f3;font-size:12.5px} .gencalc-result-card-specs li span{color:#999} .gencalc-result-card-specs li strong{font-family:'JCBEuro Bold Regular',sans-serif;color:#1a1a1a;font-weight:normal} /* synced variant — green banner instead of orange eyebrow */ .gencalc-sync-banner{display:inline-flex;align-items:center;gap:7px;background:#ecfdf5;border:1px solid #a7f3d0;color:#047857;font-size:11px;font-family:'JCBEuro Bold Regular',sans-serif;text-transform:uppercase;letter-spacing:.3px;padding:4px 10px;margin-bottom:8px} /* [hidden] overrides — these elements set an explicit display that would otherwise beat the HTML hidden attribute, leaking when JS sets .hidden=true */ .gencalc-sync-banner[hidden]{display:none} .gencalc-result-top[hidden]{display:none} .gencalc-site-total[hidden]{display:none} .gencalc-backup-row[hidden]{display:none} /* ════ RESULTS REDESIGN — Task 1.4 · backup pair + ATS node ════ */ /* Primary + Backup — side-by-side N+1 pair */ .gencalc-pair{border:1px solid #e5e7eb;background:#fff;margin-bottom:14px} .gencalc-pair-head{display:flex;align-items:center;gap:10px;background:#1a1a1a;color:#fff;padding:10px 16px;font-family:'JCBEuro Bold Regular',sans-serif;font-size:11px;letter-spacing:.5px;text-transform:uppercase} .gencalc-pair-head .gencalc-ats-badge{margin-left:auto;background:#FAA747;color:#1a1a1a;padding:3px 9px;font-size:10px} .gencalc-pair-grid{display:grid;grid-template-columns:1fr 1fr;position:relative} @media (max-width:680px){.gencalc-pair-grid{grid-template-columns:1fr}} .gencalc-pair-col{padding:16px 18px} .gencalc-pair-col+.gencalc-pair-col{border-left:1px solid #eef0f3} @media (max-width:680px){.gencalc-pair-col+.gencalc-pair-col{border-left:none;border-top:1px solid #eef0f3}} .gencalc-pair-role{font-size:10px;text-transform:uppercase;letter-spacing:.4px;font-family:'JCBEuro Bold Regular',sans-serif} .gencalc-pair-role--primary{color:#FAA747} .gencalc-pair-role--backup{color:#2563eb} .gencalc-pair-img{background:#f7f8fa;height:80px;display:flex;align-items:center;justify-content:center;margin:8px 0 10px} .gencalc-pair-img img{max-height:64px;max-width:80%;object-fit:contain} .gencalc-pair-title{font-family:'JCBEuro Bold Regular',sans-serif;font-size:16px;margin:0 0 2px;color:#1a1a1a} .gencalc-pair-sub{font-size:11.5px;color:#777;margin:0 0 8px} .gencalc-pair-specs{list-style:none;margin:0;padding:0} .gencalc-pair-specs li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #f0f1f3;font-size:12px} .gencalc-pair-specs li:last-child{border-bottom:none} .gencalc-pair-specs li span{color:#999} .gencalc-pair-specs li strong{font-family:'JCBEuro Bold Regular',sans-serif;font-weight:normal;color:#1a1a1a} /* ════ RESULTS REDESIGN — Task 1.5 · role sub-panel, zone card, site-total ════ */ /* site-total bar (per-zone mode) */ .gencalc-site-total{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid #e5e7eb;padding:16px 22px;margin-bottom:14px;flex-wrap:wrap} .gencalc-site-total-num{font-family:'JCBEuro Bold Regular',sans-serif;font-size:30px;line-height:1;color:#1a1a1a} .gencalc-site-total-num small{font-size:15px;color:#555} .gencalc-site-total-meta{border-left:1px solid #eef0f3;padding-left:20px;font-size:12px;color:#888} .gencalc-site-total-meta a{color:#2563eb;text-decoration:none} .gencalc-site-total-actions{margin-left:auto;display:flex;gap:8px;align-items:center} /* zone card */ .gencalc-zone-card{border:1px solid #d6dae0;background:#fff;margin-bottom:14px} .gencalc-zone-card-head{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid #eef0f3;background:#f1f3f5;flex-wrap:wrap} .gencalc-zone-card-name{font-family:'JCBEuro Bold Regular',sans-serif;font-size:15px;color:#1a1a1a} .gencalc-zone-card-req{font-size:12px;color:#888;margin-left:auto} .gencalc-zone-card-req strong{font-family:'JCBEuro Bold Regular',sans-serif;color:#1a1a1a} .gencalc-zone-card-toggle{display:flex;align-items:center;gap:8px;font-size:11px;color:#555;font-family:'JCBEuro Bold Regular',sans-serif;text-transform:uppercase;letter-spacing:.3px;padding-left:14px;border-left:1px solid #d6dae0} .gencalc-zone-card-body{padding:14px} /* role sub-panel (primary/secondary, nestable in zones) */ .gencalc-role{border-left:3px solid #FAA747;padding-left:14px;margin:4px 0 16px} .gencalc-role:last-child{margin-bottom:4px} .gencalc-role--secondary{border-left-color:#6b7280} .gencalc-role-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap} .gencalc-role-name{font-family:'JCBEuro Bold Regular',sans-serif;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px} .gencalc-role--primary .gencalc-role-name{color:#b9791f} .gencalc-role--secondary .gencalc-role-name{color:#4b5563} .gencalc-role-scope{font-size:11px;color:#9ca3af} .gencalc-role-req{font-size:12px;color:#888;margin-left:auto} .gencalc-role-req strong{font-family:'JCBEuro Bold Regular',sans-serif;color:#1a1a1a;font-size:14px} .gencalc-role-toggle{display:flex;align-items:center;gap:7px;font-size:10px;color:#666;font-family:'JCBEuro Bold Regular',sans-serif;text-transform:uppercase;letter-spacing:.3px} /* Single (combined) result: the Backup toggle now sits on the card head, top- right, matching the dual / per-zone role cards instead of a separate row. */ .gencalc-single-head{display:flex;justify-content:flex-end;align-items:center;margin-bottom:10px} /* "Add backup generator" info popup — reuses the .gencalc-help / .gencalc-tooltip pattern, but with an inline-SVG icon (the result card is built dynamically, so a FontAwesome would not get processed). The toggle sits near the card's right edge, so open the popup toward the left to avoid overflowing off-screen. */ .gencalc-backup-help{margin-left:5px} .gencalc-backup-help .gencalc-tooltip{left:auto;right:-2px;transform:translateY(4px)} .gencalc-backup-help:hover .gencalc-tooltip, .gencalc-backup-help:focus .gencalc-tooltip, .gencalc-backup-help:focus-within .gencalc-tooltip{transform:translateY(0)} .gencalc-backup-help .gencalc-tooltip::after{left:auto;right:12px;transform:none} /* ════ RESULTS REDESIGN — Task 1.6 · accept-on-click liability modal ════ */ /* accept-on-click liability modal */ .gencalc-accept-ov{position:fixed;inset:0;background:rgba(17,18,20,.55);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px} .gencalc-accept-ov.is-open{display:flex} .gencalc-accept-modal{background:#fff;border:1px solid #e5e7eb;max-width:460px;width:100%} .gencalc-accept-head{padding:18px 22px;border-bottom:1px solid #eef0f3} .gencalc-accept-eyebrow{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#888;font-family:'JCBEuro Bold Regular',sans-serif;display:block;margin-bottom:5px} .gencalc-accept-title{font-family:'JCBEuro Bold Regular',sans-serif;font-size:17px;margin:0;color:#1a1a1a} .gencalc-accept-body{padding:18px 22px;font-size:12.5px;color:#555;line-height:1.55;max-height:240px;overflow:auto} .gencalc-accept-body p{margin:0 0 9px} .gencalc-accept-body b{color:#1a1a1a} .gencalc-accept-ack{display:flex;align-items:flex-start;gap:10px;padding:14px 22px;border-top:1px solid #eef0f3;font-size:12.5px;color:#374151;cursor:pointer} .gencalc-accept-ack input{margin-top:2px;width:16px;height:16px;accent-color:#FAA747;flex:none} .gencalc-accept-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;background:#fafbfc;border-top:1px solid #eef0f3} .gencalc-accept-cancel{background:none;border:1px solid #d1d5db;color:#374151;font-family:'JCBEuro Bold Regular',sans-serif;font-size:13px;padding:11px 18px;cursor:pointer} .gencalc-accept-go{background:#FAA747;border:1px solid #FAA747;color:#1a1a1a;font-family:'JCBEuro Bold Regular',sans-serif;font-size:13px;padding:11px 20px;cursor:pointer;opacity:.45;pointer-events:none} .gencalc-accept-go.is-enabled{opacity:1;pointer-events:auto} /* ── Share with a colleague — popup modal ─────────────────────────────── */ .gencalc-share-modal[hidden]{display:none} .gencalc-share-modal{position:fixed;inset:0;z-index:100001;display:flex;align-items:center;justify-content:center} .gencalc-share-modal-backdrop{position:absolute;inset:0;background:rgba(15,15,15,.5)} .gencalc-share-modal-frame{position:relative;width:min(420px,calc(100vw - 32px));background:#fafafa;border:1px solid #d4d4d8;display:flex;flex-direction:column;box-shadow:0 12px 32px rgba(15,15,15,.18);font-family:'JCBEuro Roman Regular',sans-serif} .gencalc-share-modal-header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid #d4d4d8;flex:0 0 auto} .gencalc-share-modal-badge{background:var(--gencalc-lib-orange,#f59e0b);color:#fff;font-weight:700;padding:3px 9px;font-size:11px;letter-spacing:.04em;text-transform:uppercase} .gencalc-share-modal-title{font-family:'JCBEuro Bold Regular',sans-serif;font-size:14px;color:#0f0f0f;margin:0} .gencalc-share-modal-spacer{flex:1} .gencalc-share-modal-close{background:transparent;border:0;cursor:pointer;width:28px;height:28px;color:#525252;display:flex;align-items:center;justify-content:center} .gencalc-share-modal-close:hover{color:#0f0f0f} .gencalc-share-modal-body{padding:18px 18px 20px} .gencalc-share-modal-sub{margin:0 0 14px;font-size:12.5px;color:#555;line-height:1.5} .gencalc-share-channels{display:flex;gap:10px} .gencalc-share-channel{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 10px;border:1px solid #d4d4d8;background:#fff;color:#1a1a1a;text-decoration:none;font-family:'JCBEuro Bold Regular',sans-serif;font-size:13px;cursor:pointer;transition:background .12s,border-color .12s} .gencalc-share-channel i{font-size:17px} .gencalc-share-channel:hover{border-color:#9ca3af;background:#f3f4f6} .gencalc-share-wa i{color:#25d366} .gencalc-share-em i{color:#FAA747} .gencalc-share-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:#9ca3af;font-size:11px;text-transform:uppercase;letter-spacing:.05em} .gencalc-share-or::before,.gencalc-share-or::after{content:"";flex:1;height:1px;background:#e5e7eb} .gencalc-share-linkrow{display:flex;gap:8px} .gencalc-share-linkinput{flex:1;min-width:0;border:1px solid #d4d4d8;background:#fff;padding:10px 12px;font-size:12px;color:#374151;font-family:Menlo,Consolas,monospace} .gencalc-share-copybtn{flex:0 0 auto;display:flex;align-items:center;gap:7px;border:1px solid #FAA747;background:#FAA747;color:#1a1a1a;font-family:'JCBEuro Bold Regular',sans-serif;font-size:12.5px;padding:10px 14px;cursor:pointer;white-space:nowrap} .gencalc-share-copybtn:hover{background:#f59327;border-color:#f59327} .gencalc-share-copybtn.is-copied{background:#16a34a;border-color:#16a34a;color:#fff} @media (max-width:420px){.gencalc-share-channels{flex-direction:column}} /* ── Live collaboration bar (presence + expiry notice) ────────────────── */ .gencalc-collab-bar{position:sticky;top:0;z-index:90;display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid #FAA747;color:#7c2d12;font-family:'JCBEuro Roman Regular',sans-serif;font-size:13px;margin:0 0 14px} .gencalc-collab-bar[hidden]{display:none} .gencalc-collab-bar-icon{font-size:15px;line-height:1} .gencalc-collab-bar-msg{flex:1} .gencalc-collab-bar-action{flex:0 0 auto;border:1px solid #FAA747;background:#FAA747;color:#1a1a1a;font-family:'JCBEuro Bold Regular',sans-serif;font-size:12px;padding:7px 12px;cursor:pointer} .gencalc-collab-bar-action:hover{background:#f59327;border-color:#f59327} /* ────────────────────────────────────────────────────────────────── Explore-the-fleet internal links — appended below the result so the sizing tool routes intent to the rentable equipment pages. ────────────────────────────────────────────────────────────────── */ .gencalc-fleet-links { margin: 28px 0 8px; padding: 24px; background: #f7f8fa; border: 1px solid #e6e8ec; border-radius: 10px; } .gencalc-fleet-links-title { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 700; color: #14181f; } .gencalc-fleet-links-sub { margin: 0 0 16px; font-size: 0.875rem; color: #5a6573; } .gencalc-fleet-links-grid { display: flex; flex-wrap: wrap; gap: 10px; } .gencalc-fleet-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: #ffffff; border: 1px solid #d8dce2; border-radius: 7px; font-size: 0.875rem; font-weight: 600; color: #14181f; text-decoration: none; transition: all 0.18s ease; } .gencalc-fleet-link i { font-size: 0.7rem; color: #FAA747; transition: transform 0.18s ease; } .gencalc-fleet-link:hover { background: #14181f; border-color: #14181f; color: #ffffff; } .gencalc-fleet-link:hover i { transform: translateX(3px); }