/* * Palette: design-system/tokens.css (Elon mono). * Page must set data-theme="light" on and load tokens before this file. * Local fallbacks only if tokens.css missing (offline file open). */ /* fog-* / mdc-* from design-system/tokens.css — no local hex (Theme v2.0 D4) */ :root{ --blue: var(--mdc-accent-text); --black: var(--mdc-ink-primary); --green: var(--mdc-ok); --red: var(--mdc-critical); --hl: var(--mdc-brand-soft); --bd: var(--mdc-line); --bg: var(--mdc-surface-2); --hdr: var(--mdc-surface-1); --sub: var(--mdc-surface-0); } *{box-sizing:border-box} body{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 12px; color: var(--mdc-ink-primary); margin: 0; padding: 18px; background: var(--mdc-bg); font-feature-settings: 'cv11', 'ss01', 'tnum'; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } /* Site shell (fixed header) */ body.tco-page{ padding-top: calc(var(--mdc-header-h, 56px) + 18px); } /* Language visibility: html[data-lang] only — never also gate on body.lang-* (FOUC vs body mismatch hid both .en-only and .zh-only). */ html[data-lang="en"] .zh-only { display: none !important; } html[data-lang="zh"] .en-only { display: none !important; } html:not([data-lang]) .zh-only { display: none !important; } /* ===== Fog hero strip ===== */ body.tco-page .fog-hero{ /* keep step chrome under site shell */ } .fog-hero{ background: var(--mdc-surface-1); color: var(--mdc-ink-primary); margin: -18px -18px 24px; padding: 20px 24px; border-bottom: 1px solid var(--mdc-state-hover); position: relative; overflow: hidden; } /* Hero glow retired (mono aesthetic — no brand orbs). */ .fog-hero::after{ display: none; } .fog-hero-inner{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1600px; margin: 0 auto; } .fog-hero-brand{ display: flex; align-items: center; gap: 14px; } .fog-hero-logo{ height: 32px; width: auto; display: block; } /* .fog-hero-titles / .fog-hero-title / .fog-hero-version / .fog-hero-sub removed 2026-07-15 — wizard hero now shows logo only (spec §3.3) */ /* Legacy .lang-switch removed — language is site shell flag dropdown */ h2{ font-size: 13px; font-weight: 600; color: var(--mdc-ink-primary); background: var(--mdc-surface-1); padding: 10px 14px; margin: 28px 0 0; border-radius: 8px 8px 0 0; border: 1px solid var(--mdc-surface-1); border-bottom: none; letter-spacing: 0.01em; display: flex; align-items: center; gap: 10px; } h2 .zone-chip{ display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fog-on-brand); } /* Three-zone color coding — chip colors distinguish zone, header always black */ h2.zone-input .zone-chip{ background: var(--fog-yellow); } h2.zone-output .zone-chip{ background: var(--mdc-ok); color: var(--mdc-ink-inverse); } h2.zone-tripartite .zone-chip{ background: var(--mdc-accent-soft); color: var(--mdc-ink-primary); } table{ border-collapse: separate; border-spacing: 0; width: 100%; background: var(--mdc-surface-2); table-layout: fixed; font-size: 12px; border: 1px solid var(--fog-line); border-radius: 0 0 8px 8px; border-top: none; overflow: hidden; } th, td{ border-right: 1px solid var(--fog-line); border-bottom: 1px solid var(--fog-line); padding: 6px 10px; text-align: right; vertical-align: middle; line-height: 1.4; } th:last-child, td:last-child{ border-right: none; } tr:last-child td{ border-bottom: none; } th:first-child, td:first-child{ text-align: left; } thead th{ background: var(--mdc-surface-0); font-weight: 600; color: var(--fog-ink); font-size: 11px; letter-spacing: 0.02em; text-transform: none; padding: 8px 10px; } tbody tr:hover td{ background: var(--mdc-surface-2); transition: background 0.15s var(--fog-ease); } tbody tr.section td{ background: var(--mdc-surface-2); font-weight: 600; text-align: left; color: var(--fog-ink); border-top: 1px solid var(--fog-line-strong); } tbody tr.subtotal td{ background: var(--mdc-surface-2); font-weight: 600; border-top: 1px solid var(--fog-line-strong); } tbody tr.total td{ background: var(--fog-yellow-soft); font-weight: 700; border-top: 2px solid var(--fog-yellow); color: var(--fog-ink); } tbody tr.kpi td{ background: var(--mdc-brand-soft); font-weight: 700; border-top: 2px solid var(--green); color: var(--fog-ink); } tbody tr.kpi td:first-child{ border-left: 4px solid var(--fog-yellow); padding-left: 14px; } input.in, select.in{ width: 100%; border: 1px solid var(--mdc-line-input); border-radius: 4px; padding: 4px 6px; text-align: right; color: var(--blue); font-weight: 600; background: var(--mdc-surface-3); font-family: inherit; font-size: 12px; transition: all 0.15s var(--fog-ease); } select.in{ text-align: left; } input.in:hover, select.in:hover{ border-color: var(--fog-line-strong); } input.in:focus, select.in:focus, input.in:focus-visible, select.in:focus-visible{ outline: 2px solid var(--mdc-accent-ring); outline-offset: 2px; border-color: var(--mdc-accent-ring); background: var(--mdc-input-bg); box-shadow: 0 0 0 3px var(--mdc-accent-soft); } .calc{color:var(--fog-ink);font-variant-numeric:tabular-nums} .crosssheet{color:var(--green)} .neg{color:var(--red)} .pos{color:var(--green)} .keynote{ background: var(--fog-yellow-soft); border-bottom: 2px solid var(--fog-yellow) !important; } tr.y1-only td{ background: repeating-linear-gradient( 45deg, var(--mdc-brand-soft) 0, var(--mdc-brand-soft) 6px, var(--mdc-brand-soft) 6px, var(--mdc-brand-soft) 12px ); } tr.y1-only td:first-child{ font-weight: 600; background: repeating-linear-gradient( 45deg, var(--mdc-brand-soft) 0, var(--mdc-brand-soft) 6px, var(--mdc-brand-soft) 6px, var(--mdc-brand-soft) 12px ); } tr.y1-only td.calc{ color: var(--fog-ink); } .notebox{ background: var(--mdc-brand-soft); border: 1px solid var(--fog-yellow); border-left: 4px solid var(--fog-yellow); padding: 10px 14px; border-radius: 6px; font-size: 11px; margin-top: 12px; line-height: 1.6; color: var(--fog-ink); } .notebox b{ color: var(--mdc-surface-1); } .tripartite-divider{ background: var(--mdc-surface-2); border-left: 4px solid var(--mdc-accent); padding: 12px 16px; margin: 20px 0 0; border-radius: 6px; font-size: 12px; color: var(--mdc-ink-secondary); line-height: 1.6; } .tripartite-divider b{ color: var(--mdc-ink-primary); } .formula-info{ display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--fog-ink-3); background: var(--mdc-surface-3); color: var(--fog-ink-3); font-size: 10px; font-style: italic; font-weight: 700; cursor: pointer; margin-left: 6px; vertical-align: 1px; user-select: none; font-family: Georgia, 'Times New Roman', serif; line-height: 1; padding: 0; transition: all 0.15s var(--fog-ease); } .formula-info:hover{ background: var(--fog-yellow); border-color: var(--fog-yellow); color: var(--fog-on-brand); } .formula-popover{ display: none; position: fixed; z-index: 9999; max-width: 380px; min-width: 200px; padding: 10px 12px; background: var(--mdc-surface-1); border: 1px solid var(--fog-yellow); border-radius: 6px; font-size: 12px; line-height: 1.5; color: var(--mdc-ink-primary); font-family: 'SF Mono', Consolas, 'Liberation Mono', monospace; white-space: pre-wrap; word-break: break-word; } .formula-popover.show{ display: block; } .formula-popover::before{ content: '公式 / Formula'; display: block; font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 700; color: var(--fog-yellow); margin-bottom: 6px; letter-spacing: 0.05em; text-transform: uppercase; } /* ===== Sticky first column + thead for wide 6+col tables ===== */ th:first-child, td:first-child{ position: sticky; left: 0; background: var(--mdc-surface-2); z-index: 2; } thead th{ position: sticky; top: 0; z-index: 3; background: var(--mdc-surface-0); box-shadow: 0 1px 0 var(--fog-line); } tbody tr.section td:first-child{ background: var(--mdc-surface-2); } tbody tr.subtotal td:first-child{ background: var(--mdc-surface-2); } tbody tr.total td:first-child{ background: var(--mdc-brand-soft); } tbody tr.kpi td:first-child{ background: var(--mdc-brand-soft); } tbody tr:hover td:first-child{ background-image: linear-gradient(var(--mdc-state-hover), var(--mdc-state-hover)); } /* ===== Section 8/9 PL: collapsible group headers (Y1-Yn fold/unfold) ===== */ tr.pl-toggle{ cursor: pointer; user-select: none; transition: background 0.15s var(--fog-ease); } tr.pl-toggle td{ cursor: pointer; } tr.pl-toggle:hover td{ background-image: linear-gradient(var(--mdc-state-hover), var(--mdc-state-hover)) !important; } tr.pl-toggle .pl-caret{ display: inline-block; font-size: 9px; margin-right: 6px; color: var(--fog-ink-4); transition: transform 0.15s var(--fog-ease); vertical-align: 1px; } tr.pl-toggle.collapsed .pl-caret{ transform: rotate(-90deg); } tr.pl-toggle .pl-toggle-hint{ font-size: 10px; font-weight: 400; color: var(--fog-ink-4); margin-left: 4px; } tr.pl-summary td{ background: var(--mdc-surface-2) !important; font-style: italic; color: var(--fog-ink-3); padding-left: 18px; font-size: 11px; font-weight: 500; } tr.pl-summary td.calc{ font-variant-numeric: tabular-nums; } tr.pl-summary td.calc.neg{ color: var(--red); } tr.pl-summary td.calc.pos{ color: var(--green); } tr.pl-summary:hover td{ background: var(--mdc-state-hover) !important; } .legend{ font-size: 11px; margin: 10px 0 0; color: var(--fog-ink-2); } .legend span{ display: inline-block; margin-right: 16px; } .legend i{ display: inline-block; width: 10px; height: 10px; border: 1px solid var(--fog-line-strong); vertical-align: middle; margin-right: 5px; border-radius: 2px; } .meta{ display: flex; gap: 20px; flex-wrap: wrap; margin: 10px 0 16px; font-size: 11px; color: var(--fog-ink-2); } .meta b{ color: var(--fog-ink); } .col-hdr-loc{ background: var(--mdc-surface-1); color: var(--mdc-ink-primary); } th.cat-dc45, th.cat-ac45{ text-align: center; font-size: 12px; padding: 9px 4px; letter-spacing: 0.05em; font-weight: 600; text-transform: uppercase; } th.cat-dc45{ background: var(--mdc-surface-1); color: var(--mdc-ink-primary); border-bottom: 3px solid var(--fog-yellow); } th.cat-ac45{ background: var(--mdc-surface-1); color: var(--mdc-ink-primary); border-bottom: 3px solid var(--mdc-ok); } .sub{font-size:11px;color:var(--fog-ink-3);margin-bottom:6px} .footer{ font-size: 10px; color: var(--fog-ink-4); margin-top: 32px; border-top: 1px solid var(--fog-line); padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .footer::before{ content: '© Modular DataCenter Inc.'; font-weight: 600; color: var(--fog-ink-3); } /* ============ Wizard layout ============ */ .fog-wiz-step { display: none; } .fog-wiz-step--active { display: block; } .fog-wiz-container { max-width: 880px; margin: 32px auto; padding: 0 24px; } .fog-wiz-container--wide { max-width: 1280px; } /* ============ Progress dots ============ */ .fog-wiz-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 32px; } .fog-wiz-progress-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mdc-surface-2); color: var(--fog-ink-3); font-size: 12px; font-weight: 600; border: 1px solid var(--fog-line); } .fog-wiz-progress-dot--active { background: var(--fog-yellow); color: var(--fog-on-brand); border-color: var(--fog-yellow); } .fog-wiz-progress-dot--done { background: var(--fog-ink); color: var(--mdc-ink-primary); border-color: var(--fog-ink); } /* ============ Headings ============ */ .fog-wiz-h2 { font-size: 18px; font-weight: 700; color: var(--fog-ink); margin: 0 0 16px; } /* ============ Role / Device / Location cards ============ */ .fog-wiz-role-grid, .fog-wiz-device-grid, .fog-wiz-loc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .fog-wiz-role-card, .fog-wiz-device-card, .fog-wiz-loc-card { background: var(--mdc-surface-3); border: 1px solid var(--fog-line); border-radius: 8px; padding: 16px; text-align: left; cursor: pointer; font-family: inherit; font-size: 13px; transition: border-color 0.15s var(--fog-ease), background 0.15s var(--fog-ease); } .fog-wiz-role-card:hover:not(:disabled), .fog-wiz-device-card:hover, .fog-wiz-loc-card:hover { border-color: var(--fog-yellow); background: var(--fog-yellow-soft); } .fog-wiz-role-card:disabled { opacity: 0.5; cursor: not-allowed; } .fog-wiz-role-card[data-selected="true"], .fog-wiz-device-card[data-selected="true"], .fog-wiz-loc-card[data-selected="true"] { border-color: var(--fog-yellow); background: var(--fog-yellow-soft); box-shadow: inset 0 0 0 1px var(--fog-yellow); } .fog-wiz-role-icon { font-size: 24px; margin-bottom: 8px; } .fog-wiz-role-title, .fog-wiz-device-name { font-weight: 600; color: var(--fog-ink); margin-bottom: 4px; } .fog-wiz-role-desc, .fog-wiz-device-sub { font-size: 12px; color: var(--fog-ink-3); } /* ============ Buttons ============ */ .fog-wiz-btn { font-family: inherit; font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: 6px; cursor: pointer; border: 1px solid var(--fog-line); background: var(--mdc-surface-3); color: var(--fog-ink); transition: background 0.15s var(--fog-ease), border-color 0.15s var(--fog-ease); } .fog-wiz-btn:hover:not(:disabled) { background-image: linear-gradient(var(--mdc-state-hover), var(--mdc-state-hover)); } .fog-wiz-btn:disabled { opacity: 0.4; cursor: not-allowed; } .fog-wiz-btn--primary { background: var(--fog-yellow); border-color: var(--fog-yellow); color: var(--fog-on-brand); font-weight: 600; } .fog-wiz-btn--primary:hover:not(:disabled) { background: var(--fog-yellow-hover); border-color: var(--fog-yellow-hover); color: var(--fog-on-brand); } .fog-wiz-btn--ghost { background: transparent; } .fog-wiz-nav { display: flex; justify-content: space-between; margin-top: 32px; } /* ============ Toolbar / Context chip ============ */ .fog-wiz-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .fog-wiz-context-chip { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 12px; background: var(--fog-ink); color: var(--mdc-ink-primary); } /* ============ KPI cards ============ */ .fog-wiz-kpi-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 24px; } .fog-wiz-kpi-card { background: var(--mdc-surface-3); border: 1px solid var(--fog-line); border-left: 3px solid var(--fog-yellow); border-radius: 6px; padding: 14px 16px; } .fog-wiz-kpi-label { font-size: 11px; color: var(--fog-ink-3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .fog-wiz-kpi-value { font-size: 20px; font-weight: 700; color: var(--fog-ink); font-variant-numeric: tabular-nums; } .fog-wiz-kpi-card--green { border-left-color: var(--green); } .fog-wiz-kpi-card--green .fog-wiz-kpi-value { color: var(--green); } .fog-wiz-kpi-card--yellow { border-left-color: var(--fog-warn-amber); } .fog-wiz-kpi-card--yellow .fog-wiz-kpi-value { color: var(--fog-warn-amber); } .fog-wiz-kpi-card--red { border-left-color: var(--red); } .fog-wiz-kpi-card--red .fog-wiz-kpi-value { color: var(--red); } /* === v4 Change 1: tripartite role tabs === */ .fog-wiz-role-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid var(--fog-line); } .fog-wiz-role-tab { background: none; border: none; padding: 12px 20px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--fog-ink-3); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.15s var(--fog-ease), border-color 0.15s var(--fog-ease); } .fog-wiz-role-tab:hover { color: var(--fog-ink); } .fog-wiz-role-tab--active { color: var(--fog-ink); border-bottom-color: var(--fog-yellow); } /* === v4 Change 6: multi-chart grid === */ .fog-wiz-chart-grid { display: grid; gap: 16px; grid-template-columns: 1fr; } .fog-wiz-chart-grid.fog-wiz-chart-grid--2col { grid-template-columns: 1fr 1fr; } @media (max-width: 1000px){ .fog-wiz-chart-grid--2col { grid-template-columns: 1fr; } } .fog-wiz-chart-card { background: var(--mdc-surface-2); border: 1px solid var(--fog-line); border-radius: 8px; padding: 14px 16px; } .fog-wiz-chart-card .fog-wiz-chart { aspect-ratio: 16 / 7; min-height: 200px; max-height: 280px; } .fog-wiz-chart-card .fog-wiz-chart-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; } .fog-wiz-chart-card .fog-wiz-chart-legend { font-size: 10px; margin-bottom: 8px; } .fog-wiz-chart-card .fog-wiz-chart-note { font-size: 10px; color: var(--fog-ink-4); margin-top: 6px; font-style: italic; } /* ============ Tabs ============ */ .fog-wiz-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--fog-line); margin-bottom: 0; } .fog-wiz-tab { background: none; border: none; padding: 8px 16px; font-family: inherit; font-size: 13px; color: var(--fog-ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .fog-wiz-tab--active { color: var(--fog-ink); font-weight: 600; border-bottom-color: var(--fog-yellow); } .fog-wiz-tab-panel { display: none; padding: 16px 0; } .fog-wiz-tab-panel--active { display: block; } .fog-wiz-mirror-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; } .fog-wiz-mirror-table th, .fog-wiz-mirror-table td { padding: 6px 12px; border-bottom: 1px solid var(--fog-line); text-align: left; } .fog-wiz-mirror-table td:last-child, .fog-wiz-mirror-table th:last-child { text-align: right; } .fog-wiz-mirror-table thead { background: var(--mdc-surface-0); } /* ============ Sensitivity sliders ============ */ .fog-wiz-sensitivity { margin-top: 32px; padding: 20px; background: var(--mdc-surface-2); border-radius: 8px; } .fog-wiz-sensitivity-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } /* Pin the sensitivity panel to high contrast (light bg + dark heading) so the title is never invisible regardless of any outer theme overrides. */ #fog-wiz-root .fog-wiz-sensitivity { background: var(--mdc-surface-2); color: var(--fog-ink); } #fog-wiz-root .fog-wiz-sensitivity-header h2, #fog-wiz-root .fog-wiz-sensitivity .fog-wiz-h2 { color: var(--fog-ink); background: transparent; } .fog-wiz-slider-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .fog-wiz-slider-row { background: var(--mdc-surface-3); border: 1px solid var(--fog-line); padding: 12px 14px; border-radius: 6px; } .fog-wiz-slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .fog-wiz-slider-label { font-size: 12px; font-weight: 600; color: var(--fog-ink); } .fog-wiz-slider-readout { font-size: 13px; font-weight: 600; color: var(--fog-ink); font-variant-numeric: tabular-nums; } .fog-wiz-slider { width: 100%; } .fog-wiz-slider-base { font-size: 10px; color: var(--fog-ink-4); margin-top: 6px; } /* ============ Print ============ */ @media print { #fog-wiz-root .fog-wiz-progress, #fog-wiz-root .fog-wiz-toolbar, #fog-wiz-root .fog-wiz-sensitivity, /* ponytail: .fog-wiz-escape removed — Advanced entry point hidden per product decision */ #fog-wiz-root .fog-wiz-nav, #fog-wiz-root .fog-wiz-tabs { display: none !important; } #fog-wiz-root .fog-wiz-tab-panel { display: block !important; } } /* ============ v2 Change 1+2: Role primary card (kept) ============ */ .fog-wiz-role-primary { margin-bottom: 32px; } .fog-wiz-role-card--primary { width: 100%; display: flex; align-items: center; gap: 20px; padding: 24px 28px; border: 2px solid var(--fog-yellow); background: var(--fog-yellow-soft); } .fog-wiz-role-card--primary:hover { background: var(--fog-yellow-glow); } .fog-wiz-role-icon-lg { font-size: 40px; flex-shrink: 0; } .fog-wiz-role-body { flex: 1; text-align: left; } .fog-wiz-role-body .fog-wiz-role-title { font-size: 16px; } .fog-wiz-role-cta { font-size: 13px; font-weight: 600; color: var(--fog-on-brand); padding: 8px 16px; background: var(--fog-yellow); border-radius: 2px; flex-shrink: 0; } /* v3 Change 6.1: 3 role cards grid (formerly soon-grid, now generic) */ .fog-wiz-role-soon-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* v2 Coming Soon pill — still used by v2 location "Soon" cities */ .fog-wiz-coming-pill { position: absolute; top: 10px; right: 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 8px; background: var(--fog-ink-3); color: var(--mdc-ink-primary); } /* ============ v2 Change 3: GPU model cards ============ */ .fog-wiz-gpu-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .fog-wiz-gpu-card { background: var(--mdc-surface-3); border: 1px solid var(--fog-line); border-radius: 8px; padding: 16px; text-align: left; cursor: pointer; font-family: inherit; font-size: 13px; transition: border-color 0.15s var(--fog-ease), background 0.15s var(--fog-ease); } .fog-wiz-gpu-card:hover { border-color: var(--fog-yellow); background: var(--fog-yellow-soft); } .fog-wiz-gpu-card[data-selected="true"] { border-color: var(--fog-yellow); background: var(--fog-yellow-soft); box-shadow: inset 0 0 0 1px var(--fog-yellow); } .fog-wiz-gpu-name { font-weight: 600; color: var(--fog-ink); margin-bottom: 4px; font-size: 14px; } /* Name + key figures only. The prose caption ("… actual · Liquid Cooling") said what the SKU picker below already says. */ .fog-wiz-gpu-stats { display: flex; flex-wrap: wrap; gap: 14px; } .fog-wiz-gpu-stat { font-size: 13px; font-weight: 600; color: var(--mdc-ink-secondary); font-variant-numeric: tabular-nums; } .fog-wiz-gpu-unit { font-size: 11px; font-weight: 400; color: var(--mdc-ink-tertiary); } /* ============ v2 Change 4: Location flag + soon ============ */ .fog-wiz-loc-card { display: flex; align-items: center; gap: 12px; position: relative; } .fog-wiz-loc-flag { font-size: 28px; line-height: 1; } .fog-wiz-loc-name { font-weight: 600; color: var(--fog-ink); font-size: 13px; } .fog-wiz-loc-card--soon { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ============ v3 Change 1: Chart panel — wide top ============ */ .fog-wiz-chart-panel { background: var(--mdc-surface-2); border: 1px solid var(--fog-line); border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; } .fog-wiz-chart-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; } .fog-wiz-chart-title { font-size: 14px; font-weight: 600; color: var(--fog-ink); } .fog-wiz-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--fog-ink-3); } .fog-wiz-chart-leg { display: inline-flex; align-items: center; gap: 5px; } .fog-wiz-chart-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; } .fog-wiz-chart-leg--capex .fog-wiz-chart-swatch { background: var(--mdc-critical); } .fog-wiz-chart-leg--fcfe .fog-wiz-chart-swatch { background: var(--mdc-accent); } .fog-wiz-chart-leg--cum .fog-wiz-chart-swatch { background: var(--fog-yellow); border: 1px solid var(--fog-ink); } .fog-wiz-chart { width: 100%; } .fog-wiz-chart--wide { aspect-ratio: 16 / 5; min-height: 220px; max-height: 320px; } .fog-wiz-chart-note { font-size: 10px; color: var(--fog-ink-4); margin-top: 6px; text-align: right; font-style: italic; } /* ============ v3 Change 1: Table panel — full width below ============ */ .fog-wiz-table-panel { margin-bottom: 28px; } /* ============ v3 Change 3: Qty selector ============ */ .fog-wiz-qty-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: var(--mdc-surface-2); border: 1px solid var(--fog-line); border-radius: 8px; } .fog-wiz-qty-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fog-line); background: var(--mdc-surface-3); font-size: 20px; font-weight: 600; color: var(--fog-ink); cursor: pointer; display: grid; place-items: center; transition: background 0.15s var(--fog-ease), border-color 0.15s var(--fog-ease); } .fog-wiz-qty-btn:hover:not(:disabled) { background: var(--fog-yellow-soft); border-color: var(--fog-yellow); } .fog-wiz-qty-btn:disabled { opacity: 0.3; cursor: not-allowed; } .fog-wiz-qty-display { min-width: 48px; text-align: center; font-size: 20px; font-weight: 700; color: var(--fog-ink); font-variant-numeric: tabular-nums; } .fog-wiz-qty-note { flex: 1; font-size: 11px; color: var(--fog-ink-3); line-height: 1.4; } /* ============ v3 Change 4: Cool icon in context chip ============ */ .fog-wiz-context-chip { display: inline-flex; align-items: center; gap: 6px; } .fog-wiz-cool-icon { width: 12px; height: 12px; color: var(--fog-yellow); vertical-align: middle; } /* ============ v3 Change 5: IT Power / Facility Power info cards ============ */ .fog-wiz-info-strip { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 20px; } .fog-wiz-info-card { background: var(--mdc-surface-3); border: 1px solid var(--fog-line); border-left: 3px solid var(--fog-ink-3); border-radius: 6px; padding: 12px 14px; } .fog-wiz-info-label { font-size: 11px; color: var(--fog-ink-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .fog-wiz-info-value { font-size: 18px; font-weight: 700; color: var(--fog-ink); font-variant-numeric: tabular-nums; } .fog-wiz-info-sub { font-size: 10px; color: var(--fog-ink-4); margin-top: 2px; } .pue-fallback-flag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; border: 1px solid currentColor; padding: 0 5px; margin-left: 6px; vertical-align: middle; } .pue-fallback-flag[hidden] { display: none !important; } .pue-cond { font-size: 10px; line-height: 1.35; color: var(--fog-ink-3); max-width: 16em; } .pue-cond--fallback { font-weight: 600; } .pue-cond-row td { vertical-align: top; } @media print{ body{ padding: 8px; background: var(--mdc-surface-3); } /* The fixed site header printed on page 1 and reserved 56px on every page. */ .mdc-shell-header{ display: none !important; } body.tco-page{ padding-top: 8px !important; } /* Chrome does not auto-open

for printing — a collapsed zone would silently vanish from the printed model. */ details{ display: block !important; } details > *{ display: revert !important; } .tco-group-sum{ cursor: default; } .tco-doc{ max-width: none; } .fog-hero{ margin: 0 0 12px; background: var(--mdc-surface-3); color: var(--fog-ink); border-bottom: 2px solid var(--fog-ink); padding: 8px 0; } .fog-hero::after{ display: none; } .lang-switch{ display: none; } h2{ background: var(--mdc-surface-3) !important; color: var(--fog-ink) !important; border: 1px solid var(--fog-ink); border-bottom: 2px solid var(--fog-ink); break-inside: avoid; } h2 .zone-chip{ background: var(--mdc-surface-3) !important; color: var(--fog-ink) !important; border: 1px solid var(--fog-ink); } table{ break-inside: avoid; } thead{ display: table-header-group; } tr{ break-inside: avoid; } input.in, select.in{ border: none; color: var(--mdc-ink-primary); font-weight: 400; background: transparent; box-shadow: none; } tbody tr.kpi td{ background: var(--mdc-surface-3) !important; border-top: 2px solid var(--mdc-ink-primary); } tbody tr.kpi td:first-child{ border-left: 4px solid var(--mdc-ink-primary); } tbody tr.total td{ background: var(--mdc-surface-3) !important; border-top: 2px solid var(--mdc-ink-primary); } tbody tr.section td{ background: var(--mdc-surface-2) !important; } tr.y1-only td{ background: var(--mdc-surface-2) !important; } .notebox{ background: var(--mdc-surface-3); border: 1px solid var(--mdc-ink-primary); border-left: 4px solid var(--mdc-ink-primary); } .tripartite-divider{ background: var(--mdc-surface-3); border-left: 4px solid var(--mdc-ink-primary); color: var(--mdc-ink-primary); } .formula-popover{ display: none !important; } tbody tr:hover td{ background: transparent !important; } } /* === v5 Change 2: mirror table section collapse === */ .fog-wiz-mirror-table tr.fog-wiz-section-toggle td:first-child { font-weight: 600; color: var(--fog-ink); background: var(--mdc-surface-2); user-select: none; } .fog-wiz-mirror-table tr.fog-wiz-section-toggle:hover td:first-child { background: var(--fog-yellow-soft); } .fog-wiz-section-chevron { display: inline-block; width: 14px; color: var(--fog-ink-3); font-size: 10px; transition: color 0.15s var(--fog-ease); } .fog-wiz-mirror-table tr.fog-wiz-section-toggle:hover .fog-wiz-section-chevron { color: var(--fog-ink); } /* === v8: formula column === */ .fog-wiz-mirror-table--3col th, .fog-wiz-mirror-table--3col td { padding: 6px 12px; } .fog-wiz-mirror-table--3col th:nth-child(1), .fog-wiz-mirror-table--3col td:nth-child(1) { width: 40%; } .fog-wiz-mirror-table--3col th:nth-child(2), .fog-wiz-mirror-table--3col td:nth-child(2) { width: 20%; text-align: right; } .fog-wiz-mirror-table--3col th:nth-child(3), .fog-wiz-mirror-table--3col td:nth-child(3) { width: 40%; } .fog-wiz-formula-col { text-align: left !important; font-weight: 600; color: var(--fog-ink-3); font-size: 11px; letter-spacing: 0.3px; text-transform: uppercase; } .fog-wiz-formula-cell { font-size: 11px; color: var(--fog-ink-3); font-family: 'Inter', sans-serif; font-variant-numeric: normal; line-height: 1.4; border-left: 1px dashed var(--fog-line); } .fog-wiz-formula-cell:empty, .fog-wiz-formula-cell:contains('—') { color: var(--fog-ink-4); } /* section header 行的公式列也用 dashed border 但内容空 */ .fog-wiz-mirror-table--3col tr.fog-wiz-section-toggle .fog-wiz-formula-cell { background: var(--mdc-surface-2); border-left: 1px dashed var(--fog-line); } /* 窄屏 (< 900px) 隐藏公式列，避免溢出 */ @media (max-width: 900px){ .fog-wiz-mirror-table--3col th:nth-child(3), .fog-wiz-mirror-table--3col td:nth-child(3) { display: none; } .fog-wiz-mirror-table--3col th:nth-child(1), .fog-wiz-mirror-table--3col td:nth-child(1) { width: 60%; } .fog-wiz-mirror-table--3col th:nth-child(2), .fog-wiz-mirror-table--3col td:nth-child(2) { width: 40%; } } /* model.html toolbar — Excel export (tco-export.js) */ .model-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 2px; } /* Download Excel — the workbook is a headline deliverable, not a footnote. It was a ghost button, which on both surfaces read as disabled chrome. */ .tco-dl-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; font: 600 12.5px/1 var(--mdc-font-sans, inherit); letter-spacing: .01em; color: var(--mdc-ink-inverse); background: var(--mdc-ok); border: 1px solid var(--mdc-ok); border-radius: 6px; cursor: pointer; box-shadow: 0 1px 2px rgb(0 0 0 / .18); transition: filter .15s ease, transform .1s ease, box-shadow .15s ease; } .tco-dl-btn:hover { filter: brightness(1.08); box-shadow: 0 2px 6px rgb(0 0 0 / .22); } .tco-dl-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgb(0 0 0 / .18); } .tco-dl-btn:focus-visible { outline: 2px solid var(--mdc-accent-ring); outline-offset: 2px; } .tco-dl-ico { display: inline-flex; width: 15px; height: 15px; } .tco-dl-ico svg { width: 100%; height: 100%; } /* ── Power fill band ────────────────────────────────────────────── Flush with the bottom edge of whatever card hosts it: full-bleed, no side padding, and it inherits the card's bottom radius. Left is compute (green, sized by DESIGN power so the hollow part is capacity bought and unused); right is cooling and external equipment (red). */ .tco-fillband { margin-top: var(--mdc-space-4); } .tco-fillband[hidden] { display: none; } .tco-fb-track { /* No explicit width: the hosts pull it full-bleed with negative inline margins, and width:100% would pin it and leave a gap on the right. */ display: flex; height: 22px; overflow: hidden; border-radius: 3px; background: var(--mdc-surface-1); } .tco-fb-seg { display: flex; min-width: 0; height: 100%; } .tco-fb-fill { min-width: 0; height: 100%; background: var(--mdc-ok); display: flex; align-items: center; justify-content: center; } .tco-fb-hollow { min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--mdc-ok) 26%, transparent) 0 5px, color-mix(in srgb, var(--mdc-ok) 12%, transparent) 5px 10px); border-left: 1px solid color-mix(in srgb, var(--mdc-ok) 55%, transparent); } .tco-fb-seg--cooling { align-items: center; justify-content: center; background: var(--mdc-critical); } .tco-fb-tag { font-size: 10px; font-weight: 700; letter-spacing: .01em; color: var(--mdc-ink-inverse); white-space: nowrap; overflow: hidden; padding: 0 4px; } .tco-fb-hollow .tco-fb-tag { color: var(--mdc-ink-secondary); } .tco-fb-legend { display: flex; flex-wrap: wrap; gap: 4px var(--mdc-space-4); margin-bottom: 6px; font-size: 10.5px; color: var(--mdc-ink-tertiary); } .tco-fb-key { display: inline-flex; align-items: center; gap: 5px; } .tco-fb-sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } .tco-fb-sw--fill { background: var(--mdc-ok); } .tco-fb-sw--hollow { background: color-mix(in srgb, var(--mdc-ok) 22%, transparent); border: 1px solid color-mix(in srgb, var(--mdc-ok) 55%, transparent); } .tco-fb-sw--cool { background: var(--mdc-critical); } .tco-fb-total { margin-left: auto; color: var(--mdc-ink-secondary); font-weight: 600; } /* Host-specific: full-bleed out of the card's padding so the track touches the bottom edge, and it inherits the card's bottom corners. */ .tco-summary .tco-fillband { margin: var(--mdc-space-4) calc(-1 * var(--mdc-space-5)) calc(-1 * var(--mdc-space-5)); padding-inline: var(--mdc-space-5); } .tco-summary .tco-fb-track { margin-inline: calc(-1 * var(--mdc-space-5)); } .fog-wiz-power-bar .tco-fillband { margin: 14px -16px -14px; padding-inline: 16px; } .fog-wiz-power-bar .tco-fb-track { margin-inline: -16px; border-radius: 0 0 7px 7px; } .tco-summary .tco-fb-track { border-radius: 0 0 5px 5px; } /* The step-3 strip is a grid of separate cards, so the band is its own strip. */ #fog-wiz-info-band { margin-top: -10px; margin-bottom: 20px; } .model-tools-note { font-size: 11px; color: var(--mdc-ink-tertiary); } /* BOM caveat: sits with the prices it qualifies, not in a footnote. */ .tco-bom-caveat { margin: var(--mdc-space-3) 0 var(--mdc-space-4); } .tco-bom-caveat b { display: block; margin-bottom: 4px; } /* ============ SKU picker (wizard Step 2) ============ Dropdown, not a card grid: the SKU is one choice among a short list, and the grid crowded out the GPU / qty / location steps around it. D-13 display — alias-bearing title in the option, SKU ID small underneath, then the actual-vs-design capacity line. */ .fog-wiz-sku-pick { max-width: 560px; } .fog-wiz-sku-select { width: 100%; } .fog-wiz-sku-code { font-family: var(--mdc-font-mono); font-size: 11px; color: var(--mdc-ink-tertiary); letter-spacing: .02em; margin-top: 6px; } .fog-wiz-sku-fill { margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--mdc-ink-secondary); } .fog-wiz-sku-fill.is-underfilled { color: var(--mdc-warn); } /* Qty is typed as well as stepped (1–100). */ .fog-wiz-qty-input { width: 72px; text-align: center; font-family: var(--mdc-font-sans); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mdc-ink-primary); background: var(--mdc-input-bg); border: 1px solid var(--mdc-line-input); border-radius: 4px; padding: 6px 8px; } .fog-wiz-qty-input:focus { outline: 2px solid var(--mdc-accent-ring); outline-offset: 1px; border-color: var(--mdc-accent-ring); } /* ============ Live power readout (wizard Step 2) ============ */ .fog-wiz-power-bar { margin: 24px 0 8px; padding: 14px 16px; border: 1px solid var(--fog-line); border-radius: 8px; background: var(--mdc-surface-3); } .fog-wiz-power-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .fog-wiz-power-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mdc-ink-tertiary); } .fog-wiz-power-value { font-size: 20px; font-weight: 700; color: var(--fog-ink); margin-top: 2px; font-variant-numeric: tabular-nums; } .fog-wiz-power-sub { font-size: 11px; color: var(--mdc-ink-tertiary); margin-top: 2px; line-height: 1.4; } /* Design-language §6 alert recipe: intent tint + intent border + intent ink, all from the theme-following status quartet so it reads in both themes. (Was #fff8e6 / #e8c96a / #6b4e00 — a Day-only artifact on a Night canvas.) */ .fog-wiz-power-warn { margin-top: 12px; padding: 10px 12px; border-radius: 6px; background: color-mix(in srgb, var(--mdc-warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mdc-warn) 45%, transparent); font-size: 12px; line-height: 1.5; color: var(--mdc-warn); } /* Actual-vs-design note under the IT power cell (model tables) */ .it-fill-note { font-size: 11px; color: var(--mdc-ink-tertiary); margin-top: 3px; } .it-fill-note.is-underfilled { color: var(--mdc-warn); font-weight: 600; } /* Single-column header: alias primary, SKU ID small underneath (D-13) */ .col-hdr-alias { display: block; font-weight: 600; } .col-hdr-code { display: block; font-family: var(--mdc-font-mono); font-size: 10px; font-weight: 400; color: var(--mdc-ink-tertiary); letter-spacing: .02em; } /* ============ Detail page: container · summary · collapsible zones ============ The page had no container at all, so on a wide screen a single value cell stretched to ~1300px. --mdc-max-content is the house measure (tco.css and .city-picker already use it). */ .tco-doc { max-width: var(--mdc-max-content); margin-inline: auto; width: 100%; } /* — Selected configuration + headline KPIs — */ .tco-summary { background: var(--mdc-surface-3); border: 1px solid var(--mdc-line); border-radius: 6px; padding: var(--mdc-space-5); margin: var(--mdc-space-4) 0 var(--mdc-space-5); } .tco-summary-head { display: flex; flex-wrap: wrap; gap: var(--mdc-space-3); align-items: baseline; justify-content: space-between; padding-bottom: var(--mdc-space-3); border-bottom: 1px solid var(--mdc-line-subtle); } .tco-summary-alias { font-size: 16px; font-weight: 700; color: var(--mdc-ink-primary); } .tco-summary-code { font-family: var(--mdc-font-mono); font-size: 11px; color: var(--mdc-ink-tertiary); letter-spacing: .02em; margin-top: 2px; } .tco-summary-ctx { font-size: 12px; color: var(--mdc-ink-tertiary); } .tco-summary-kpis { display: grid; gap: var(--mdc-space-4); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: var(--mdc-space-4); } .tco-kpi-key { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mdc-ink-tertiary); } .tco-kpi-val { font-size: 22px; font-weight: 700; color: var(--mdc-ink-primary); font-variant-numeric: tabular-nums; margin-top: 2px; } .tco-summary-note { margin-top: var(--mdc-space-3); font-size: 11px; color: var(--mdc-ink-tertiary); } .tco-summary-note.is-underfilled { color: var(--mdc-warn); font-weight: 600; } /* — Collapsible zones. Native

: keyboard + find-in-page for free, and unlike the JS row-collapse it survives every compute() re-render. — */ .tco-group { border: 1px solid var(--mdc-line); border-radius: 6px; background: var(--mdc-surface-2); margin-bottom: var(--mdc-space-4); break-inside: avoid; } .tco-group-sum { display: flex; align-items: center; gap: var(--mdc-space-3); padding: var(--mdc-space-3) var(--mdc-space-4); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--mdc-ink-primary); list-style: revert; /* design-system reset removes the marker */ border-radius: 6px; } .tco-group-sum:hover { background-image: linear-gradient(var(--mdc-state-hover), var(--mdc-state-hover)); } .tco-group[open] > .tco-group-sum { border-bottom: 1px solid var(--mdc-line); border-radius: 6px 6px 0 0; } .tco-group-chip { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; } .tco-group-chip--input { background: var(--mdc-brand); color: var(--mdc-brand-ink); } .tco-group-chip--output { background: var(--mdc-ok); color: var(--mdc-ink-inverse); } .tco-group-chip--tri { background: var(--mdc-accent-soft); color: var(--mdc-ink-primary); } .tco-group-meta { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--mdc-ink-tertiary); } .tco-group-body { padding: 0 var(--mdc-space-4) var(--mdc-space-4); } .tco-group-body > h2:first-child { margin-top: var(--mdc-space-4); } /* Scenario switch — EPC (3-7) and Tripartite (8-10) are mutually exclusive. */ .tco-scenario { display: flex; gap: var(--mdc-space-2); margin: var(--mdc-space-4) 0; flex-wrap: wrap; } .tco-scenario-btn { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; padding: var(--mdc-space-3) var(--mdc-space-4); text-align: left; cursor: pointer; border: 1px solid var(--mdc-line); border-radius: 6px; background: var(--mdc-surface-2); color: var(--mdc-ink-secondary); font: inherit; } .tco-scenario-btn:hover { background-image: linear-gradient(var(--mdc-state-hover), var(--mdc-state-hover)); } .tco-scenario-btn.is-active { border-color: var(--mdc-accent); background: var(--mdc-accent-soft); color: var(--mdc-ink-primary); } .tco-scenario-name { font-weight: 600; font-size: 13px; } .tco-scenario-meta { font-size: 11px; color: var(--mdc-ink-tertiary); } .tco-scenario-btn.is-active .tco-scenario-meta { color: var(--mdc-ink-secondary); } /* — Scenario chart: CapEx · annual P&L · cumulative revenue — */ .tco-chart { margin: 0 0 var(--mdc-space-4); padding: var(--mdc-space-3) var(--mdc-space-4) var(--mdc-space-4); border: 1px solid var(--mdc-line); border-radius: 6px; background: var(--mdc-surface-2); } .tco-chart-cap { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mdc-ink-tertiary); margin-bottom: var(--mdc-space-2); } .tco-chart-plot { width: 100%; } .tco-chart-svg { display: block; width: 100%; height: auto; } .tco-chart-grid { stroke: var(--mdc-line-subtle); stroke-width: .5; } .tco-chart-zero { stroke: var(--mdc-ink-muted); stroke-width: .75; } .tco-chart-axis { fill: var(--mdc-ink-tertiary); } .tco-chart-bar { fill: var(--mdc-accent); } .tco-chart-bar--capex { fill: var(--mdc-critical); } .tco-chart-line { fill: none; stroke: var(--mdc-ink-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .tco-chart-dot { fill: var(--mdc-ink-primary); stroke: var(--mdc-surface-2); stroke-width: .5; } .tco-chart-endlabel { fill: var(--mdc-ink-primary); font-size: 11px; font-weight: 600; } .tco-chart-band { fill: var(--mdc-ink-tertiary); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .tco-chart-val { fill: var(--mdc-ink-secondary); font-size: 10px; font-weight: 600; } .tco-chart-legend { display: flex; flex-wrap: wrap; gap: var(--mdc-space-2) var(--mdc-space-4); margin-top: var(--mdc-space-3); font-size: 11px; color: var(--mdc-ink-secondary); } .tco-chart-key { display: inline-flex; align-items: center; gap: 6px; } .tco-chart-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .tco-chart-swatch--line { height: 0; width: 14px; border-top: 2.5px solid var(--mdc-ink-primary); border-radius: 0; } .tco-chart-note { margin-top: var(--mdc-space-2); font-size: 10px; color: var(--mdc-ink-tertiary); } .tco-chart-empty { padding: 48px 0; text-align: center; font-size: 11px; color: var(--mdc-ink-tertiary); } /* Entrance only, and only when the scenario changes — compute() re-renders on every keystroke and a bar that re-grows each time is unreadable. */ .tco-chart-plot.is-animated .tco-chart-bar { animation: tcoBarGrow .55s cubic-bezier(.2,.8,.2,1) backwards; } .tco-chart-plot.is-animated .tco-chart-line { stroke-dasharray: 1; animation: tcoLineDraw .9s ease-out .15s backwards; } .tco-chart-plot.is-animated .tco-chart-dot, .tco-chart-plot.is-animated .tco-chart-val, .tco-chart-plot.is-animated .tco-chart-endlabel { animation: tcoFadeIn .3s ease-out backwards; } @keyframes tcoBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes tcoLineDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes tcoFadeIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .tco-chart-plot.is-animated .tco-chart-bar, .tco-chart-plot.is-animated .tco-chart-line, .tco-chart-plot.is-animated .tco-chart-dot, .tco-chart-plot.is-animated .tco-chart-val, .tco-chart-plot.is-animated .tco-chart-endlabel { animation: none; } } .tco-scenario-caption { margin: calc(var(--mdc-space-2) * -1) 0 var(--mdc-space-5); font-size: 11px; color: var(--mdc-ink-tertiary); } /* — Global assumptions. These move every number below, so they lead the page instead of sitting in a "meta" strip that mixed them with static facts. — */ .tco-assump { border: 1px solid var(--mdc-line); border-radius: 6px; background: var(--mdc-surface-2); padding: var(--mdc-space-3) var(--mdc-space-4); margin-bottom: var(--mdc-space-4); } .tco-assump-facts { display: flex; flex-wrap: wrap; gap: var(--mdc-space-2) var(--mdc-space-5); font-size: 11px; color: var(--mdc-ink-tertiary); padding-bottom: var(--mdc-space-3); border-bottom: 1px solid var(--mdc-line-subtle); } .tco-assump-facts b { color: var(--mdc-ink-secondary); font-weight: 600; margin-right: 4px; } .tco-assump-grid { display: grid; gap: var(--mdc-space-3) var(--mdc-space-5); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: var(--mdc-space-3); } .tco-assump-field { display: block; } .tco-assump-key { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mdc-ink-tertiary); } .tco-assump-in { display: flex; align-items: baseline; gap: 4px; margin-top: 3px; font-size: 12px; color: var(--mdc-ink-secondary); } .tco-assump-hint { display: block; margin-top: 3px; font-size: 10px; line-height: 1.4; color: var(--mdc-ink-tertiary); } /* — Reading chrome (legend + CPA scope note): reference, not findings. — */ .tco-howto { border: 1px solid var(--mdc-line); border-radius: 6px; background: var(--mdc-surface-2); margin-bottom: var(--mdc-space-5); } .tco-howto-sum { padding: var(--mdc-space-3) var(--mdc-space-4); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--mdc-ink-secondary); border-radius: 6px; } .tco-howto-sum:hover { background-image: linear-gradient(var(--mdc-state-hover), var(--mdc-state-hover)); } .tco-howto[open] > .tco-howto-sum { border-bottom: 1px solid var(--mdc-line); border-radius: 6px 6px 0 0; } .tco-howto-body { padding: var(--mdc-space-2) var(--mdc-space-4) var(--mdc-space-4); } .tco-howto-body .sub { margin-bottom: 0; } /* — Sec 10 phase spec. Two cards, one line per term: the phases are a definition, and definitions read worse as a paragraph. — */ .tco-phases { display: grid; gap: var(--mdc-space-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: var(--mdc-space-3) 0; } .tco-phase { border: 1px solid var(--mdc-line); border-left: 3px solid var(--mdc-accent); border-radius: 6px; background: var(--mdc-surface-2); padding: var(--mdc-space-3) var(--mdc-space-4); } .tco-phase-head { display: flex; align-items: baseline; gap: var(--mdc-space-2); flex-wrap: wrap; padding-bottom: var(--mdc-space-2); border-bottom: 1px solid var(--mdc-line-subtle); } .tco-phase-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 7px; border-radius: 2px; background: var(--mdc-accent-soft); color: var(--mdc-ink-primary); } .tco-phase-when { font-size: 11px; color: var(--mdc-ink-tertiary); } .tco-phase-list { list-style: none; margin: var(--mdc-space-2) 0 0; padding: 0; font-size: 12px; line-height: 1.7; color: var(--mdc-ink-secondary); } .tco-phase-list li { padding-left: 12px; position: relative; } .tco-phase-list li::before { content: "·"; position: absolute; left: 2px; color: var(--mdc-ink-tertiary); } .tco-phase-list b { color: var(--mdc-ink-primary); } .tco-rule { margin: 0 0 var(--mdc-space-3); font-size: 12px; color: var(--mdc-ink-secondary); } .tco-rule b { color: var(--mdc-ink-primary); } /* ============ Next step (results) ============ Replaces a ~145-line inline-styled block that was hardcoded dark (rgba(255,255,255,…) on #0A0A0A) and therefore unreadable in Day. */ .tco-next { border-top: 1px solid var(--mdc-line); background: var(--mdc-surface-2); padding: var(--mdc-space-6) var(--mdc-space-5); margin-top: var(--mdc-space-6); } .tco-next-inner { max-width: var(--mdc-max-content); margin-inline: auto; text-align: center; } .tco-next-h { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--mdc-ink-primary); margin: 0 0 var(--mdc-space-2); } .tco-next-lead { font-size: 13px; line-height: 1.6; color: var(--mdc-ink-tertiary); max-width: 60ch; margin: 0 auto var(--mdc-space-5); } .tco-next-card { display: inline-block; text-align: left; text-decoration: none; min-width: 300px; background: var(--mdc-surface-3); border: 1px solid var(--mdc-line); border-radius: 6px; padding: var(--mdc-space-4) var(--mdc-space-5); transition: border-color var(--mdc-duration) var(--mdc-ease); } .tco-next-card:hover { border-color: var(--mdc-line-strong); background-image: linear-gradient(var(--mdc-state-hover), var(--mdc-state-hover)); } .tco-next-line { display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mdc-ink-tertiary); } .tco-next-alias { display: block; font-size: 16px; font-weight: 700; color: var(--mdc-ink-primary); margin-top: 4px; } .tco-next-code { display: block; font-family: var(--mdc-font-mono); font-size: 11px; color: var(--mdc-ink-tertiary); letter-spacing: .02em; margin-top: 2px; } .tco-next-go { display: block; margin-top: var(--mdc-space-3); font-size: 13px; font-weight: 700; color: var(--mdc-accent-text); } .tco-next-secondary { margin: var(--mdc-space-5) 0 0; font-size: 12px; } .tco-next-dot { color: var(--mdc-ink-muted); margin: 0 var(--mdc-space-2); } /* ============ Machine-truth state classes (set from tco-app.js) ============ These replace inline `el.style.background = '#fde2e2'` writes. Inline styles beat every stylesheet, so the old hex values could never respond to the theme — the table read as light-mode boxes on a Night canvas. */ .is-hdr { background: var(--mdc-surface-2); color: var(--mdc-ink-primary); box-shadow: none; } .is-critical { background: var(--mdc-critical); color: var(--mdc-ink-inverse); box-shadow: inset 0 -3px 0 var(--mdc-critical); } .is-critical-soft { background: color-mix(in srgb, var(--mdc-critical) 14%, transparent); color: var(--mdc-critical); } .is-ok-soft { background: color-mix(in srgb, var(--mdc-ok) 14%, transparent); color: var(--mdc-ok); } td.is-na, .is-na { color: var(--mdc-ink-muted); } .is-muted { color: var(--mdc-ink-tertiary); } /* Status pills — 999px is the one rounded exception per design language §5. */ .tco-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; } .tco-pill--ok { background: color-mix(in srgb, var(--mdc-ok) 16%, transparent); color: var(--mdc-ok); } .tco-pill--warn { background: color-mix(in srgb, var(--mdc-warn) 16%, transparent); color: var(--mdc-warn); } .tco-pill--critical { background: color-mix(in srgb, var(--mdc-critical) 16%, transparent); color: var(--mdc-critical); } .tco-pill--neutral { background: var(--mdc-surface-0); color: var(--mdc-ink-tertiary); } /* ============ Extracted from inline style= (index.html / model.html) ============ These were hardcoded light-mode values (#fff, #fff3cd, #5a2a8a, #888 …) that could not respond to the theme. Same visual intent, theme-following tokens. */ /* Collapsible detail blocks (§2 BOM, §8/§9 investors, CPA notes) */ .tco-fold { margin-top: var(--mdc-space-4); border: 1px solid var(--mdc-line); border-radius: 4px; background: var(--mdc-surface-3); } .tco-fold--warn { border-color: color-mix(in srgb, var(--mdc-warn) 45%, transparent); background: color-mix(in srgb, var(--mdc-warn) 8%, transparent); } .tco-fold-sum { font-size: 13px; font-weight: 700; background: var(--mdc-surface-0); color: var(--mdc-ink-primary); padding: 6px 10px; border-radius: 4px; cursor: pointer; list-style: revert; } .tco-fold-sum--tri { font-size: 14px; padding: 8px 12px; border-radius: 4px 4px 0 0; background: var(--mdc-accent-soft); color: var(--mdc-ink-primary); } .tco-fold-sum--warn { cursor: pointer; padding: 10px 14px; font-weight: 700; color: var(--mdc-warn); font-size: 13px; list-style: revert; background: transparent; } /* Zone pill inside a summary bar */ .tco-zone-pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; margin-right: 8px; border-radius: 10px; background: var(--mdc-brand-soft); color: var(--mdc-ink-primary); letter-spacing: .5px; } /* Explanatory copy */ .tco-explain { font-size: 11px; color: var(--mdc-ink-tertiary); margin: 0 0 10px; line-height: 1.5; } .tco-explain--tight { margin: 6px 0 8px; line-height: 1.6; } .tco-microcopy { font-size: 10px; color: var(--mdc-ink-muted); margin: 6px 0 0; line-height: 1.5; } .tco-server-price-hint { color: var(--mdc-warn); font-weight: 600; max-width: 22em; } .tco-dim { color: var(--mdc-ink-muted); } .tco-warn-ink { color: var(--mdc-warn); } /* Callouts */ .tco-note { border-radius: 4px; padding: 8px 12px; margin: 10px 0 12px; font-size: 11px; line-height: 1.5; } .tco-price-disclaimer { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--mdc-ink-muted); } .tco-note--warn { background: color-mix(in srgb, var(--mdc-warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mdc-warn) 45%, transparent); } .tco-note--soft { background: color-mix(in srgb, var(--mdc-warn) 8%, transparent); border-left-color: var(--mdc-brand); color: var(--mdc-warn); margin: 0 0 10px; } .tco-banner-critical { display: none; margin: 8px 0; padding: 10px 14px; border-radius: 4px; background: color-mix(in srgb, var(--mdc-critical) 14%, transparent); border: 2px solid var(--mdc-critical); font-weight: 700; color: var(--mdc-critical); } /* Legend swatches + inline zone tags */ .lg-formula { background: var(--mdc-surface-3); } .lg-input { background: color-mix(in srgb, var(--mdc-accent) 22%, transparent); border-color: var(--mdc-accent) !important; } .lg-output { background: var(--mdc-ok); border-color: var(--mdc-ok) !important; } .lg-tri { background: var(--mdc-accent); border-color: var(--mdc-accent) !important; } .lg-y1 { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--mdc-warn) 12%, transparent) 0, color-mix(in srgb, var(--mdc-warn) 12%, transparent) 4px, color-mix(in srgb, var(--mdc-warn) 26%, transparent) 4px, color-mix(in srgb, var(--mdc-warn) 26%, transparent) 8px); } .lg-tag { padding: 0 6px; border-radius: 8px; font-size: 10px; font-weight: 600; color: var(--mdc-ink-inverse); } .lg-tag--input { background: var(--mdc-accent); color: var(--mdc-accent-ink); } .lg-tag--output { background: var(--mdc-ok); } .lg-tag--tri { background: var(--mdc-accent); color: var(--mdc-accent-ink); } .tco-bold { font-weight: 700; } /* ============ Layout utilities (extracted from inline style=) ============ Column widths stay in px because they size table columns; spacing snaps to the 4/8/12/16/24/40 token scale (design language §5: never off-scale). */ /* Doubled class = specificity (0,2,0), which beats `input.in { width:100% }` at (0,1,1) regardless of source order. These widths used to be inline styles, which won that battle automatically; a plain .w-60 silently loses it and the WACC/escalator inputs stretch across the page. */ .w-60.w-60 { width: 60px; } .w-160.w-160 { width: 160px; } .w-240.w-240 { width: 240px; } .w-260.w-260 { width: 260px; } .w-280.w-280 { width: 280px; } .w-36p.w-36p { width: 36%; } .mt-2 { margin-top: var(--mdc-space-2); } /* was 6px */ .mt-3 { margin-top: var(--mdc-space-3); } /* was 12px */ .mt-5 { margin-top: var(--mdc-space-5); } /* was 24px */ .ml-4 { margin-left: var(--mdc-space-4); } /* was 14px */ .p-3 { padding: var(--mdc-space-3); } .pt-2 { padding: var(--mdc-space-2) 0 0; } .flex-1 { flex: 1; } .nowrap { white-space: nowrap; } .accent-ink { color: var(--blue); font-weight: 600; } .bg-hl { background: var(--hl); } .bg-brand-soft { background: var(--fog-yellow-soft); } .notebox-flush { border: none; margin-top: 0; border-radius: 0 0 4px 4px; }