/* ===================================================================== Login-page design-token port (NEW FILE, 2026-09-07) --------------------------------------------------------------------- Ports the warm workspace palette introduced in app.css / vision/vision.css (2026-09-06 prototype re-skin) onto index.html and portal.html's own sign-in / showcase surface — WITHOUT touching styles.css, portal.css, pha-shared.css or rs-nav.css, which remain the shared 28-page shell and are protected by scripts/shell-check.mjs + tests/shell/shell-mount-check.mjs. Scope: every rule below is either (a) scoped under a selector that only exists on the sign-in/showcase hero (#signin, .ent-*, .live-metrics, .data-coverage, .dm-*, #signin-btn) or (b) scoped under #portal-gate / .pt-gate-* for portal.html's equivalent gate. Nothing here touches .rsn-shell, the shared nav, or any of the other 27 public pages that also load styles.css/pha-shared.css. Kept intact by design (do not restyle): - #depth-map-block / #depth-map — the map hero, still the primary above-the-fold element. - .ent-signin-block markup, ids and behavior (state/PHA dropdowns, #signin-btn, #pha-search) — visual tokens only, no structural change. Load order: linked LAST in , after styles.css / pha-shared.css / portal.css / rs-nav.css, so these scoped selectors win on specificity ties without !important. ===================================================================== */ #signin, #pt-gate { --lv-bg: #f4f3ef; --lv-surface: #ffffff; --lv-surface-2: #faf9f5; --lv-border: #d9d4c9; --lv-border-strong: #bcb6a8; --lv-text: #1c1a15; --lv-muted: #565146; --lv-faint: #6b6559; --lv-primary: #10407f; --lv-primary-hover: #0b3268; --lv-primary-tint: #e5ecf7; --lv-ok: #17603c; --lv-ok-tint: #e0efe7; --lv-ok-border: #b6d7c5; --lv-due: #855100; --lv-due-tint: #faedd8; --lv-due-border: #e5cb9c; --lv-over: #a01d18; --lv-over-tint: #fbe5e3; --lv-over-border: #edbcb8; --lv-radius-sm: 4px; --lv-radius: 6px; --lv-radius-lg: 10px; --lv-shadow: 0 1px 2px rgb(16 24 40 / 0.06); --lv-shadow-md: 0 4px 14px rgb(16 24 40 / 0.09); } /* ---- Hero background: warm ground instead of cool Foundry blue-grey ---- */ #signin.ent-hero { background: var(--lv-bg); } /* ---- Primary sign-in card: flatten to the workspace's card language ---- */ #signin .ent-card.ent-primary, #signin .ent-card { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow); } #signin .eyebrow { color: var(--lv-primary); letter-spacing: 0.14em; } #signin .signin-h1 { color: var(--lv-text); font-weight: 700; letter-spacing: -0.01em; } #signin .signin-body { color: var(--lv-muted); } #signin .ent-trust-list li { color: var(--lv-muted); } #signin .ent-trust-list li svg { color: var(--lv-ok); } #signin .ent-signin-block { border-top: 1px solid var(--lv-border); } #signin .ent-signin-label { color: var(--lv-faint); } #signin .signin-context { color: var(--lv-muted); } #signin .field-label { color: var(--lv-text); } /* ---- Form controls: warm surface + workspace focus ring ---- */ #signin .field-select, #signin .pha-search-input { background: var(--lv-surface-2); color: var(--lv-text); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-sm); } #signin .field-select:focus, #signin .pha-search-input:focus { outline: none; border-color: var(--lv-primary); box-shadow: 0 0 0 3px var(--lv-primary-tint); } #signin .pha-search-list { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-sm); box-shadow: var(--lv-shadow-md); } /* ---- Primary button: workspace navy, flat, no lift-on-hover shadow ---- */ #signin #signin-btn.btn-primary { background: var(--lv-primary); color: #ffffff; border-radius: var(--lv-radius-sm); box-shadow: none; font-weight: 600; } #signin #signin-btn.btn-primary:hover { background: var(--lv-primary-hover); box-shadow: none; transform: none; } #signin .signin-footer { color: var(--lv-faint); } #signin .signin-footer svg { color: var(--lv-primary); } /* ---- Metrics rail / data coverage chips: workspace status tokens ---- */ #signin .live-metrics .lm-title { color: var(--lv-text); font-weight: 700; } #signin .live-metrics .lm-sub { color: var(--lv-faint); } #signin .dm-strip { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius); } #signin .depth-map-layers label { color: var(--lv-muted); } #signin .data-coverage { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow); } #signin .dc-item .dc-num { color: var(--lv-primary); font-weight: 700; font-variant-numeric: tabular-nums; } #signin .dc-item .dc-label { color: var(--lv-faint); } /* ---- Demo-portal entry point (new — see "Explore the demo") ---- */ #signin .lv-demo-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 9px 16px; border-radius: var(--lv-radius-sm); border: 1px solid var(--lv-primary); color: var(--lv-primary); background: var(--lv-primary-tint); font-size: 13.5px; font-weight: 600; text-decoration: none; } #signin .lv-demo-cta:hover { background: var(--lv-primary-tint); border-color: var(--lv-primary-hover); color: var(--lv-primary-hover); } #signin .lv-demo-cta-note { display: block; margin-top: 6px; font-size: 12px; color: var(--lv-faint); } /* ---- portal.html's equivalent gate card, same treatment ---- */ #pt-gate .pt-gate-card { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow); } #pt-gate .pt-gate-h1 { color: var(--lv-text); } #pt-gate .pt-gate-card p { color: var(--lv-muted); } #pt-gate .pt-gate-explore { background: var(--lv-primary); color: #ffffff; border-radius: var(--lv-radius-sm); box-shadow: none; } #pt-gate .pt-gate-explore:hover { background: var(--lv-primary-hover); } /* ===================================================================== FULL COSMETIC REFRESH (2026-09-08) -- extends the 2026-09-07 token-only port above to full visual parity with the signed-in workspace shell (app.css / vision/vision.css). Everything below stays scoped to #pt-gate (and #signin for index.html) and never edits styles.css / portal.css / pha-shared.css / rs-nav.css. KEY TECHNIQUE: pha-shared.css defines page-level custom properties (--pha-blue, --pha-blue-deep, --pha-hairline, --pha-green, --pha-text, --pha-text-muted, --pha-on-dark*, --pha-font-mono, --pha-radius-*) that dozens of protected-file rules (.rs-authority-top, .pt-gate-card, .gv11-band, .gv11-matrix, .pt-matrix, .pha-showcase, etc.) consume. pha-shared.css's own header explicitly forbids redefining these at :root ("must not redefine --pha-blue / --pha-text / --pha-hairline") because six other apps share that file. We honor that by NEVER touching :root -- instead we redeclare the same custom properties on the #pt-gate element itself. Custom properties cascade by DOM proximity, so every protected rule that reads var(--pha-blue) etc. *inside* #pt-gate now resolves to the workspace-matched value, while the identical rule anywhere outside #pt-gate (other pages, and portal.html's own signed-in .pt-page views which sit outside the #pt-gate wrapper) keeps reading the real, unmodified :root token. No shared selector, rule or file changes; only a scoped variable re-assignment plus new/extended rules under #pt-gate's own selectors below. ===================================================================== */ #pt-gate { /* Re-skin the shared token surface, scoped -- see note above. */ --pha-blue: var(--lv-primary); --pha-blue-hover: var(--lv-primary-hover); --pha-blue-deep: #1c1a16; /* was cool navy #163c73 -> workspace dark rail graphite */ --pha-text: var(--lv-text); --pha-text-secondary: var(--lv-text); --pha-text-muted: var(--lv-muted); --pha-hairline: var(--lv-border-strong); --pha-hairline-strong: var(--lv-border-strong); --pha-canvas: var(--lv-bg); --pha-card: var(--lv-surface); --pha-green: var(--lv-ok); --pha-green-bg: var(--lv-ok-tint); --pha-amber: var(--lv-due); --pha-amber-bg: var(--lv-due-tint); --pha-cyan: var(--lv-primary); --pha-cyan-bg: var(--lv-primary-tint); --pha-on-dark: #ffffff; --pha-on-dark-accent: #b9c6d8; /* workspace --rail-count-fg */ --pha-on-dark-body: #cbc5b9; /* workspace --sidebar-foreground */ --pha-on-dark-muted: #9c968a; --pha-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --pha-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --pha-font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace; --pha-radius-sm: var(--lv-radius-sm); --pha-radius-md: var(--lv-radius); --pha-radius-lg: var(--lv-radius-lg); --pha-shadow-card: var(--lv-shadow); --pha-shadow-pop: var(--lv-shadow-md); /* Base type rhythm to match the workspace's denser product-UI feel. */ font-size: 14px; line-height: 1.45; } /* ---- Top navy brand header -> workspace-native dark graphite chrome ---- */ #pt-gate .rs-authority-top { background: var(--pha-blue-deep); border-bottom: 1px solid #332f28; } #pt-gate .rs-authority-brand-div { background: #332f28; } #pt-gate .rs-authority-slogan { color: var(--lv-faint); } #pt-gate .rs-authority-pdd-btn { border: 1px solid #332f28; color: #cbc5b9; border-radius: var(--lv-radius-sm); } #pt-gate .rs-authority-pdd-btn:hover, #pt-gate .rs-authority-pdd-btn[aria-expanded="true"] { background: #282520; color: #ffffff; } #pt-gate .rs-authority-pdd-menu { background: #1c1a16; border: 1px solid #332f28; border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow-md); } /* ---- Live stats strip (#gv17-proof): dark navy -> dark graphite, drop the foreign Space Grotesk figure font for the workspace mono/tabular treatment used on .kpi-value. ---- */ #pt-gate .gv17-proof { background: #1c1a16; border-bottom: 1px solid #332f28; } #pt-gate .gv17-cell { border-left: 1px solid #332f28; } #pt-gate .gv17-cell b { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: -0.02em; color: #ffffff; } #pt-gate .gv17-cell span { font-family: var(--pha-font-mono); color: #9c968a; } #pt-gate .gv17-cell i { color: var(--lv-ok); } /* ---- Sign-in / browse card: opaque workspace card, no glass/blur ---- */ #pt-gate .pt-gate-card { background: var(--lv-surface); -webkit-backdrop-filter: none; backdrop-filter: none; } #pt-gate .pt-gate-card .sub { color: var(--lv-muted); } #pt-gate .pt-gate-card label { color: var(--lv-faint); font-family: var(--pha-font-mono); } #pt-gate .pt-gate-card select, #pt-gate .pt-gate-card input { background: var(--lv-surface-2); color: var(--lv-text); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-sm); } #pt-gate .pt-gate-card select:focus, #pt-gate .pt-gate-card input:focus { outline: none; border-color: var(--lv-primary); box-shadow: 0 0 0 3px var(--lv-primary-tint); } #pt-gate .pt-gate-card select:disabled { color: var(--lv-faint); background: var(--lv-surface-2); opacity: 1; } /* Disabled CTA. This is the state EVERY first-time visitor sees, because the button stays disabled until a state is picked -- so it is effectively the default appearance of the page's primary call to action, not a rare edge state. The first version used white text on the tan --lv-border-strong, measured live at 2.02:1 (owner QA 2026-09-08) -- far under the 4.5:1 AA threshold and hard to read on arrival. Dark warm graphite on the same tan measures 5.74:1 and keeps the muted, clearly-not-clickable look. */ #pt-gate #gate-btn:disabled, #pt-gate .pt-gate-cta:disabled { background: var(--lv-border-strong); border-color: var(--lv-border-strong); color: #3d3833; opacity: 1; cursor: not-allowed; } #pt-gate .pt-gate-search input::placeholder { color: var(--lv-faint); } /* ---- Staff Sign-In / Browse an Authority tab toggle ---- */ #pt-gate .pt-gtab { background: var(--lv-surface-2); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-sm); color: var(--lv-muted); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } #pt-gate .pt-gtab.on { background: var(--lv-primary); border-color: var(--lv-primary); color: #ffffff; } /* ---- Primary CTA button ---- */ #pt-gate #gate-btn { background: var(--lv-primary); border-radius: var(--lv-radius-sm); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; box-shadow: none; } #pt-gate #gate-btn:hover { background: var(--lv-primary-hover); } #pt-gate .pt-gate-foot { border-top: 1px solid var(--lv-border); color: var(--lv-muted); } #pt-gate .pt-gate-search input:focus { border-color: var(--lv-primary); box-shadow: 0 0 0 3px var(--lv-primary-tint); } /* ---- Evidence stat tiles (2x2 grid inside the sign-in card) -- restyle as workspace-native KPI tiles: white card, hairline border, quiet shadow, tabular figure, uppercase tracked label. ---- */ #pt-gate .gv17-cardstats { gap: 8px; } #pt-gate .gv17-scell { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius); box-shadow: var(--lv-shadow); } #pt-gate .gv17-scell b { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 600; color: var(--lv-text); } #pt-gate .gv17-scell span { font-family: var(--pha-font-mono); letter-spacing: 0.07em; color: var(--lv-faint); } /* ---- Map panel chrome ---- */ #pt-gate .gv6-mapbox { border: 1px solid var(--lv-border); border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow); } /* UE-1, 2026-09-26: OpenStreetMap standard tiles have no keyless dark set (docs/BASEMAP.md), so the "Dark" basemap toggle inverts the MapLibre canvas in CSS instead of switching to a second keyed provider. Applied only to the canvas, never to markers/legend/controls. */ #pt-gate .gv6-mapbox canvas.gate-map-dark { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9); } #pt-gate .pt-gate-explore kbd { background: var(--lv-surface-2); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-sm); color: var(--lv-muted); } /* Basemap style control (Streets/Satellite/Dark/Light) -- workspace segmented-button treatment: hairline group border, active = primary. */ #pt-gate .gv6-mapbox [class*="maplibre-ctrl"] button, #pt-gate .gv6-mapbox .gv6-map-style button, #pt-gate .gv6-mapbox .gv6-basemap button { border-radius: var(--lv-radius-sm); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } /* ---- Compliance posture / mandate band: dark navy gradient -> workspace dark graphite, drop the blue-tinted grid texture accent colors. ---- */ #pt-gate .gv11-band { background: linear-gradient(180deg, #1c1a16 0%, #12100c 100%); border-top: 1px solid #332f28; } #pt-gate .gv11-band-eyebrow { color: #b9c6d8; } #pt-gate .gv11-pulse { background: var(--lv-ok); box-shadow: 0 0 0 0 rgba(23, 96, 60, .55); } #pt-gate .gv11-stat-n { font-family: var(--pha-font-mono); color: #ffffff; } #pt-gate .gv11-band-stat { border-left: 2px solid #43403a; } #pt-gate .gv11-m { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius); box-shadow: var(--lv-shadow); } #pt-gate .gv11-m-cite a, #pt-gate .gv11-m-duty a { color: var(--lv-primary); border-bottom-color: rgba(16, 64, 127, .45); } #pt-gate .gv11-m-ans strong, #pt-gate .gv11-m-b em { color: var(--lv-text); } /* ---- Assurance / vendor comparison matrix: light grid stays, but the table header goes from solid dark navy to the workspace's light sticky-header treatment (matches [data-rs-table] .rs-tblwrap). ---- */ #pt-gate .gv11-matrix { background: linear-gradient(180deg, var(--lv-bg) 0%, var(--lv-surface-2) 100%); border-top: 1px solid var(--lv-border); } #pt-gate .pt-matrix th { background: var(--lv-surface-2); color: var(--lv-text); border-bottom: 1px solid var(--lv-border); box-shadow: 0 1px 0 var(--lv-border); } #pt-gate .pt-matrix td { border-top: 1px solid var(--lv-border); } #pt-gate .pt-matrix td.pk .key { font-family: var(--pha-font-mono); color: var(--lv-text); } #pt-gate .pt-matrix td.pk .desc { color: var(--lv-faint); } #pt-gate .pt-matrix td.pk .pii { background: var(--lv-due-tint); border: 1px solid var(--lv-due-border); color: var(--lv-due); } /* ---- Modules / solutions showcase cards ---- */ #pt-gate .pha-showcase .pha-card-featured { border-radius: var(--lv-radius); box-shadow: var(--lv-shadow); } #pt-gate .pha-showcase-tier-label { color: var(--lv-faint); } /* ---- Footer: previously entirely unstyled (inherited dark-on-dark); give it a workspace-native surface, column rhythm and link treatment matching the sidebar's label/nav convention. ---- */ #pt-gate .gvft { background: #1c1a16; color: #cbc5b9; } #pt-gate .gvft-inner { max-width: 1516px; margin: 0 auto; padding: 40px 20px 28px; } #pt-gate .gvft-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 24px; } #pt-gate .gvft-col h4 { margin: 0 0 10px; font-family: var(--pha-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7c8ba0; } #pt-gate .gvft-col a { display: block; margin-bottom: 8px; font-size: 12.5px; color: #cbc5b9; text-decoration: none; } #pt-gate .gvft-col a:hover { color: #ffffff; text-decoration: underline; } #pt-gate .gvft-logo { display: flex; align-items: center; gap: 8px; color: #ffffff; font-weight: 700; margin-bottom: 10px; } #pt-gate .gvft-logo svg { color: #b9c6d8; } #pt-gate .gvft-brand p { font-size: 12.5px; line-height: 1.55; color: #9c968a; margin: 0 0 12px; } #pt-gate .gvft-cta { color: #b9c6d8; font-size: 12.5px; font-weight: 600; text-decoration: none; } #pt-gate .gvft-cta:hover { text-decoration: underline; } #pt-gate .gvft-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 16px; border-top: 1px solid #332f28; font-size: 11.5px; color: #6b6559; } #pt-gate .gvft-base a { color: #9c968a; } @media (max-width: 900px) { #pt-gate .gvft-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { #pt-gate .gvft-cols { grid-template-columns: 1fr; } } /* ---- Focus rings site-wide within the gate: workspace ring, not the cool-blue rgba(16, 64, 127,...) used throughout portal.css. ---- */ #pt-gate a:focus-visible, #pt-gate button:focus-visible, #pt-gate input:focus-visible, #pt-gate select:focus-visible { outline: 2px solid var(--lv-primary); outline-offset: 2px; } /* ---- Back-to-top FAB + contact modal: workspace card language ---- */ #pt-gate #gv16-top-fab { background: var(--lv-primary); border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow-md); } #pt-gate #gv16-top-fab:hover { background: var(--lv-primary-hover); } #pt-gate .gv18-modal-card { background: var(--lv-surface); border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow-md); } #pt-gate .gv18-ct-send { background: var(--lv-primary); border-radius: var(--lv-radius-sm); } #pt-gate .gv18-ct-send:hover { background: var(--lv-primary-hover); } /* ===================================================================== Below the hero — 2026-09-27 rewrite (Brett Spain: "more succinct, professional, simple, yet sophisticated"; "textures and bubbles … not cohesive"). One paper canvas, white cards, 1px borders, 6px radii, one navy accent, platform chips. No gradients, grid textures or icon tiles. ===================================================================== */ #pt-gate .gv21 { max-width: 1320px; margin: 0 auto; padding: 56px 22px 8px; box-sizing: border-box; background: transparent; color: var(--lv-text); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } #pt-gate .gv21 + .gv21 { border-top: 1px solid var(--lv-border); margin-top: 48px; } #pt-gate .gv21-head { max-width: 980px; margin-bottom: 22px; } #pt-gate .gv21-eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--lv-faint); margin-bottom: 10px; } #pt-gate .gv21-h { font-size: 26px; line-height: 1.22; font-weight: 600; letter-spacing: -.012em; margin: 0; color: var(--lv-text); } #pt-gate .gv21-lede { font-size: 15px; line-height: 1.55; color: var(--lv-muted); margin: 12px 0 0; } #pt-gate .gv21-lede + .gv21-lede { margin-top: 6px; } #pt-gate .gv21-foot { font-size: 13.5px; line-height: 1.55; color: var(--lv-muted); margin: 18px 0 0; } #pt-gate .gv21 a { color: var(--lv-primary); text-decoration: underline; text-decoration-color: rgba(16, 64, 127, .35); text-underline-offset: 2px; } #pt-gate .gv21 a:hover { text-decoration-color: currentColor; } #pt-gate .gv21-more { font-weight: 600; text-decoration: none; margin-right: 18px; white-space: nowrap; } #pt-gate .gv21 code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; background: var(--lv-surface-2); border: 1px solid var(--lv-border); border-radius: 4px; padding: 0 5px; } #pt-gate .gv21 .nowrap { white-space: nowrap; } /* compliance rows */ #pt-gate .gv21-rows { list-style: none; margin: 0; padding: 0; background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius); box-shadow: var(--lv-shadow); } #pt-gate .gv21-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 18px; align-items: baseline; padding: 16px 20px; border-top: 1px solid var(--lv-border); } #pt-gate .gv21-row:first-child { border-top: 0; } #pt-gate .gv21-when { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--lv-due); font-weight: 600; white-space: nowrap; } #pt-gate .gv21-what b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; } #pt-gate .gv21-what span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--lv-muted); } #pt-gate .gv21-cite { font-size: 12.5px; white-space: nowrap; } /* module list */ #pt-gate .gv21-modlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius); box-shadow: var(--lv-shadow); padding: 4px 20px; } #pt-gate .gv21-mod { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name chip" "tag tag" "links links"; gap: 4px 10px; padding: 14px 0; border-top: 1px solid var(--lv-border); align-items: center; } #pt-gate .gv21-mod:nth-child(-n+2) { border-top: 0; } #pt-gate .gv21 .gv21-mod-name { grid-area: name; font-size: 15px; font-weight: 600; color: var(--lv-text); text-decoration: none; } #pt-gate .gv21 .gv21-mod-name:hover { color: var(--lv-primary); text-decoration: underline; } #pt-gate .gv21-mod-tag { grid-area: tag; font-size: 13.5px; line-height: 1.5; color: var(--lv-muted); } #pt-gate .gv21-mod-links { grid-area: links; font-size: 12.5px; display: flex; gap: 14px; } #pt-gate .gv21 .gv21-mod-links a { text-decoration: none; font-weight: 600; } #pt-gate .gv21-chip { grid-area: chip; display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; line-height: 1; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--lv-border); background: var(--lv-surface-2); color: var(--lv-muted); white-space: nowrap; } #pt-gate .gv21-chip-ok { background: var(--lv-ok-tint); color: var(--lv-ok); border-color: var(--lv-ok-border); } #pt-gate .gv21-chip-due { background: var(--lv-due-tint); color: var(--lv-due); border-color: var(--lv-due-border); } /* folds (comparison table, straight answers) */ #pt-gate .gv21-fold { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius); box-shadow: var(--lv-shadow); margin-top: 12px; } #pt-gate .gv21-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; font-size: 15px; font-weight: 600; color: var(--lv-text); } #pt-gate .gv21-fold > summary::-webkit-details-marker { display: none; } #pt-gate .gv21-fold-x { width: 12px; height: 12px; position: relative; flex: 0 0 12px; } #pt-gate .gv21-fold-x::before, #pt-gate .gv21-fold-x::after { content: ""; position: absolute; background: var(--lv-faint); left: 0; top: 5px; width: 12px; height: 2px; } #pt-gate .gv21-fold-x::after { transform: rotate(90deg); transition: transform .15s ease; } #pt-gate .gv21-fold[open] .gv21-fold-x::after { transform: rotate(0); } #pt-gate .gv21-fold-sm > summary { font-size: 14px; padding: 12px 20px; } #pt-gate .gv21-fold > p, #pt-gate .gv21-fold-body { padding: 0 20px 16px; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--lv-muted); } #pt-gate .gv21-qa { margin-top: 22px; } #pt-gate .gv21-qa .gv21-fold { margin-top: 8px; } #pt-gate .gv21-note { font-size: 12.5px; color: var(--lv-faint); margin: 14px 0 0; } /* the comparison table keeps its evidence; the filled-circle marks become flat glyphs */ #pt-gate .gv21-fold-body .gv11-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 8px 0 14px; padding: 0; font-size: 12.5px; color: var(--lv-muted); } #pt-gate .gv21-fold-body .gv11-legend li { display: flex; align-items: center; gap: 6px; } #pt-gate .gv14-lg, #pt-gate .gv14-mark { border-radius: 4px; background: transparent !important; box-shadow: none; font-weight: 700; font-size: 16px; width: 26px; height: 26px; } #pt-gate .gv14-lg { font-size: 13px; width: 18px; height: 18px; } #pt-gate .gv14-y { color: var(--lv-ok) !important; } #pt-gate .gv14-p { color: var(--lv-due) !important; } #pt-gate .gv14-n { color: #9a9385 !important; } #pt-gate .gv14-a { color: var(--lv-over) !important; } #pt-gate .gv14-w { color: var(--lv-primary) !important; } #pt-gate .gv14-mark:hover, #pt-gate .gv14-mark:focus-visible { transform: none; background: var(--lv-surface-2) !important; outline: 1px solid var(--lv-border-strong); outline-offset: 0; } #pt-gate .gv14-scroll { border: 1px solid var(--lv-border); border-radius: var(--lv-radius); } #pt-gate .gv11-mx-hint { display: none; } /* methodology rules */ #pt-gate .gv21-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } #pt-gate .gv21-rule { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius); box-shadow: var(--lv-shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; } #pt-gate .gv21-rule b { font-size: 14.5px; font-weight: 600; } #pt-gate .gv21-rule span { font-size: 13px; line-height: 1.5; color: var(--lv-muted); flex: 1; } #pt-gate .gv21 .gv21-rule a { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; text-decoration: none; } /* disclaimers fold in the same frame; footer flat */ #pt-gate .gv21-disclaimers { padding-bottom: 56px; } #pt-gate .gv21-disclaimers .section-head { display: flex; gap: 12px; align-items: flex-start; } #pt-gate .gv21-disclaimers .section-icon { display: none; } #pt-gate .gv21-disclaimers .section-title { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; margin: 0; } #pt-gate .gv21-disclaimers .section-sub { font-size: 13px; color: var(--lv-muted); margin: 2px 0 0; } #pt-gate .gv21-disclaimers .disclaimer-list { font-size: 13.5px; line-height: 1.55; color: var(--lv-muted); padding-left: 18px; } #pt-gate .gvft, #pt-gate .gvft::before { background: #1c1a16 !important; background-image: none !important; } #pt-gate .gvft-inner::before, #pt-gate .gvft-inner::after { display: none; } @media (max-width: 860px) { #pt-gate .gv21 { padding: 40px 16px 8px; } #pt-gate .gv21-h { font-size: 22px; } #pt-gate .gv21-row { grid-template-columns: 1fr; gap: 6px; } #pt-gate .gv21-modlist { grid-template-columns: 1fr; } #pt-gate .gv21-mod:nth-child(2) { border-top: 1px solid var(--lv-border); } #pt-gate .gv21-rules { grid-template-columns: 1fr; } } /* the "scoped elsewhere" (◐) and "no claim" (○) glyphs fall back to poor fonts on some machines — draw them */ #pt-gate .gv14-p, #pt-gate .gv14-n { color: transparent !important; text-shadow: none; position: relative; } #pt-gate .gv14-p::before, #pt-gate .gv14-n::before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } #pt-gate .gv14-p::before, #pt-gate .gv14-n::before { content: ""; display: block; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; } #pt-gate .gv14-p::before { border: 2px solid var(--lv-due); background: linear-gradient(90deg, var(--lv-due) 50%, transparent 50%); } #pt-gate .gv14-n::before { border: 1.5px solid #b3ac9d; } #pt-gate .gv14-lg.gv14-p::before, #pt-gate .gv14-lg.gv14-n::before { width: 10px; height: 10px; } /* 2026-09-27 (Brett: "fix the hero log-in section so that there isn't a vertical scrollbar there"). The hero used to be clamped to 656–700px and the sign-in card scrolled inside it whenever the staff form, the two-factor card or a notice made it taller. Now the hero grows to the card's natural height (the clamp is only a floor) and the card never scrolls; the map stretches to match. */ @media (min-width: 1081px) { #pt-gate .gv6-hero { height: auto; min-height: clamp(656px, calc(100vh - 133px), 700px); } #pt-gate .gv6-left .pt-gate-card { overflow-y: visible; overflow-x: visible; } #pt-gate .gv6-mapbox { min-height: 472px; height: auto; } } /* 2026-09-29 — vendor comparison is always expanded on the home page */ #pt-gate .gv21-fold-static { border-color: var(--lv-border); } #pt-gate .gv21-fold-body-static { padding-top: 16px; }