/* ============================================================================= SMU CGI Reincorporation Tracker — Dual-Tab Front-End (Phase A) File: assets/dualtab.css Date: 2026-05-22 Purpose: Plain English ↔ Academic toggle. Hides/shows content blocks via the [data-mode] attribute set on . Default state is "plain". Restored from localStorage on page init. Standing rules: McKinsey/Goldman aesthetic — flat, white, sentence case, two weights, no gradients. Hooks only; no decorative changes. ============================================================================= */ /* ---------- 1. Toggle control ---------- */ .dualtab-toggle { display: inline-flex; align-items: center; gap: 0; border: 0.5px solid #d0d0d0; border-radius: 4px; background: #ffffff; padding: 2px; font-family: "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Roboto, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; user-select: none; } .dualtab-toggle button { appearance: none; border: 0; background: transparent; color: #555555; padding: 6px 14px; cursor: pointer; border-radius: 3px; transition: background 120ms ease, color 120ms ease; font: inherit; } .dualtab-toggle button:hover { color: #1a1a1a; } .dualtab-toggle button[aria-pressed="true"] { background: #0a1e3a; color: #ffffff; } .dualtab-toggle button:focus-visible { outline: 2px solid #cc0000; outline-offset: 1px; } /* ---------- 2. Mode-gated content ---------- */ /* Default: "plain" mode is active; show plain blocks, hide academic blocks. */ [data-plain-only] { display: block; } [data-academic-only] { display: none; } html[data-mode="academic"] [data-plain-only] { display: none; } html[data-mode="academic"] [data-academic-only] { display: block; } /* Inline variants (paragraphs, spans) */ span[data-plain-only], span[data-academic-only] { display: inline; } html[data-mode="academic"] span[data-plain-only] { display: none; } html[data-mode="plain"] span[data-academic-only] { display: none; } /* Table-cell variants */ td[data-plain-only], td[data-academic-only] { display: table-cell; } html[data-mode="academic"] td[data-plain-only] { display: none; } html[data-mode="plain"] td[data-academic-only] { display: none; } /* ---------- 3. Hydration fallback styling ---------- */ /* While the JS hydrator runs, placeholders should not show "—" jitter. We dim them so they're visibly pre-render but not loud. */ [data-counter]:empty::before, [data-counter="loading"]::before { content: "—"; color: #b8b8b8; } /* ---------- 4. T-minus countdown ribbon ---------- */ .tminus-ribbon { display: flex; align-items: baseline; gap: 12px; padding: 10px 16px; background: #fff8e1; border-left: 3px solid #cc7a00; border-radius: 3px; font-size: 13px; margin: 16px 0; } .tminus-ribbon .tminus-days { font-family: "JetBrains Mono", "SF Mono", Consolas, monospace; font-weight: 500; font-size: 18px; font-variant-numeric: tabular-nums; color: #cc7a00; } .tminus-ribbon .tminus-label { color: #1a1a1a; } /* ---------- 5. §21.552 standing calculator (collapsed default) ---------- */ .calculator-panel { border: 0.5px solid #d0d0d0; background: #ffffff; border-radius: 4px; padding: 16px 20px; margin: 16px 0; } .calculator-panel summary { cursor: pointer; font-weight: 600; font-size: 14px; color: #0a1e3a; } .calculator-panel summary:hover { color: #cc0000; } .calculator-panel .calc-grid { display: grid; grid-template-columns: max-content 1fr max-content; gap: 8px 16px; align-items: baseline; margin-top: 12px; font-size: 13px; } .calculator-panel input[type="number"] { font-family: "JetBrains Mono", "SF Mono", Consolas, monospace; font-variant-numeric: tabular-nums; border: 0.5px solid #c0c0c0; border-radius: 2px; padding: 4px 8px; width: 12ch; text-align: right; } .calculator-panel .calc-result { font-family: "JetBrains Mono", "SF Mono", Consolas, monospace; font-weight: 600; font-variant-numeric: tabular-nums; color: #0a1e3a; } .calculator-panel .calc-result.below { color: #cc0000; } .calculator-panel .calc-result.met { color: #2e7d32; } /* ---------- 6. Counterflow callout (YHC, NV→DE) ---------- */ .counterflow-callout { border: 0.5px solid #d0d0d0; border-left: 3px solid #0a1e3a; background: #ffffff; padding: 14px 18px; margin: 16px 0; font-size: 13px; } .counterflow-callout .cf-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #555555; font-weight: 500; margin-bottom: 4px; } .counterflow-callout .cf-headline { font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif; font-size: 17px; font-weight: 600; color: #0a1e3a; line-height: 1.3; } /* ---------- 7. Sources mode (3-tab extension — methodology.html only) ---------- */ /* Backward-compatible: existing 2-tab pages do not reference [data-sources-only] and are not affected. When "sources" mode is active on a 3-tab page, hide both plain and academic blocks; show only sources blocks. */ [data-sources-only] { display: none; } html[data-mode="sources"] [data-plain-only], html[data-mode="sources"] [data-academic-only] { display: none; } html[data-mode="sources"] [data-sources-only] { display: block; } html[data-mode="sources"] span[data-plain-only], html[data-mode="sources"] span[data-academic-only] { display: none; } html[data-mode="sources"] span[data-sources-only] { display: inline; } html[data-mode="sources"] td[data-plain-only], html[data-mode="sources"] td[data-academic-only] { display: none; } html[data-mode="sources"] td[data-sources-only] { display: table-cell; } /* Print: show all tabs side-by-side for handout/PDF (methodology only) */ @media print { html[data-mode] [data-plain-only], html[data-mode] [data-academic-only], html[data-mode] [data-sources-only] { display: block !important; } html[data-mode] span[data-plain-only], html[data-mode] span[data-academic-only], html[data-mode] span[data-sources-only] { display: inline !important; } }