/* Uses the existing site's type, spacing, buttons and theme variables. */
.ai-hero { padding-bottom: 55px; }
.ai-hero-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(250px, .7fr); gap: 70px; align-items: end; }
.ai-hero h1 { font-size: clamp(3rem, 6.3vw, 7.2rem); max-width: none; margin-top: 22px; }
.ai-hero .lead-copy { max-width: 51ch; margin-bottom: 28px; }
.ai-hero .ai-editorial-intro { margin-bottom: 20px; }
.ai-hero .ai-measurement-note { max-width: 65ch; border-left: 2px solid var(--accent); padding: 4px 0 4px 18px; margin: 0 0 30px; color: var(--muted); font: .85rem/1.7 'Courier New', monospace; text-wrap: pretty; }
.ai-vantage { border-left: 1px solid var(--rule); padding: 20px 0 10px 35px; }
.ai-nyc { display: block; font-family: 'Courier New', monospace; font-size: clamp(3.5rem, 6vw, 6.5rem); line-height: 1.25; letter-spacing: -.08em; color: var(--accent); margin-block: 15px; }
.ai-vantage h2 { font-size: 1.8rem; letter-spacing: -.025em; }
.ai-vantage p { font-size: .9rem; color: var(--muted); max-width: 30ch; }
.ai-monitor { scroll-margin-top: 25px; --ai-0:#a34229; --ai-1:#17688c; --ai-2:#5d6e26; --ai-3:#775498; --ai-4:#996219; --ai-5:#a23b70; --ai-6:#295b9c; --ai-7:#247b72; --ai-8:#58694a; --ai-9:#8e427c; --ai-10:#8b542d; --ai-11:#5a6685; }
:root[data-bs-theme="dark"] .ai-monitor { --ai-0:#eea988; --ai-1:#8cc8e7; --ai-2:#bfd890; --ai-3:#c5b1ec; --ai-4:#ebd784; --ai-5:#e9a6c0; --ai-6:#a4c8ff; --ai-7:#a4d6d2; --ai-8:#bfcf87; --ai-9:#ddbbef; --ai-10:#edc098; --ai-11:#b9c5e4; }
@media (prefers-color-scheme:dark) { :root:not([data-bs-theme="light"]) .ai-monitor { --ai-0:#eea988; --ai-1:#8cc8e7; --ai-2:#bfd890; --ai-3:#c5b1ec; --ai-4:#ebd784; --ai-5:#e9a6c0; --ai-6:#a4c8ff; --ai-7:#a4d6d2; --ai-8:#bfcf87; --ai-9:#ddbbef; --ai-10:#edc098; --ai-11:#b9c5e4; } }
.ai-c0 { --ai-series:var(--ai-0); } .ai-c1 { --ai-series:var(--ai-1); } .ai-c2 { --ai-series:var(--ai-2); } .ai-c3 { --ai-series:var(--ai-3); } .ai-c4 { --ai-series:var(--ai-4); } .ai-c5 { --ai-series:var(--ai-5); } .ai-c6 { --ai-series:var(--ai-6); } .ai-c7 { --ai-series:var(--ai-7); } .ai-c8 { --ai-series:var(--ai-8); } .ai-c9 { --ai-series:var(--ai-9); } .ai-c10 { --ai-series:var(--ai-10); } .ai-c11 { --ai-series:var(--ai-11); }
.ai-monitor-intro { color: var(--muted); max-width: 38ch; font-size: .95rem; margin-bottom: 0; }
.ai-measurement-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--rule); margin-bottom: 25px; }
.ai-measurement-strip > div { padding: 22px 25px; }
.ai-measurement-strip > div:first-child { padding-left: 0; }
.ai-measurement-strip > div+div { border-left: 1px solid var(--rule); }
.ai-measurement-strip strong { display: block; font-family: Georgia,serif; font-size: 1.9rem; font-weight: 400; line-height: 1.4; }
.ai-measurement-strip div > span:last-child { font-size: .82rem; color: var(--muted); }
.ai-feed-status { padding: 14px 18px; border: 1px solid var(--rule); border-left: 3px solid var(--accent); font-size: .9rem; background: var(--panel); }
.ai-feed-status[data-state="live"] { border-left-color: var(--ink); }
.ai-history-note { font-size: .88rem; color: var(--muted); margin-block: 15px 25px; }
.ai-history-note strong { color: var(--ink); }
.ai-console { padding: 28px; background: var(--panel); border: 1px solid var(--rule); }
.ai-console-top { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.ai-console-top p { margin: 6px 0 12px; font-size: .8rem; color: var(--muted); }
.ai-chart-actions, .ai-selection-tools, .ai-data-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ai-small-button { border: 1px solid var(--rule); background: var(--paper); color: var(--ink); padding: 8px 12px; font-size: .8rem; min-height: 42px; cursor: pointer; border-radius: 0; }
.ai-small-button:hover, .ai-small-button[aria-pressed="true"] { border-color: var(--ink); }
.ai-small-button:disabled { opacity: .6; cursor: default; }
.ai-chart-help { font-size: .8rem; color: var(--muted); margin-block: 10px 20px; }
.ai-plot { position: relative; width: 100%; min-width: 0; }
.ai-plot svg { display: block; width: 100%; height: 350px; overflow: visible; }
.ai-chart-message { position: absolute; top: 38%; left: 12%; right: 8%; text-align: center; font-size: .95rem; color: var(--muted); pointer-events: none; background: var(--panel); padding: 10px; }
.ai-grid { stroke: var(--rule); stroke-width: 1; }
.ai-axis-text { fill: var(--muted); font: 12px Arial,sans-serif; }
.ai-line { fill: none; stroke: var(--ai-series); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ai-surface-web { stroke-dasharray: 6 4; }
.ai-dot { fill: var(--ai-series); stroke: var(--ai-series); stroke-width: 1.5; }
.ai-dot.ai-partial { fill: var(--panel); }
.ai-history-shade { fill: var(--paper); opacity: .55; }
.ai-cursor { stroke: var(--muted); stroke-dasharray: 3 4; }
.ai-readout { border-top: 1px solid var(--rule); padding-block: 14px; min-height: 70px; }
.ai-readout > p { font-size: .82rem; color: var(--muted); margin-bottom: 0; }
.ai-readout time { display: block; font-family: 'Courier New',monospace; font-size: .78rem; margin-bottom: 10px; }
.ai-readout ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px 18px; }
.ai-readout li { font-size: .78rem; border-left: 3px solid var(--ai-series); padding-left: 8px; overflow-wrap: anywhere; }
.ai-readout strong { display: block; font-weight: 600; }
.ai-endpoint-selection { border: 0; padding: 20px 0 0; margin: 0; min-width: 0; }
.ai-endpoint-selection legend { font-family: Georgia,serif; font-size: 1.45rem; float: none; width: 100%; margin-bottom: 10px; }
.ai-endpoint-selection legend span { font: .8rem Arial,sans-serif; color: var(--muted); margin-left: 12px; }
.ai-selection-tools { margin-bottom: 16px; }
.ai-legend { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.ai-legend-item { display: flex; align-items: start; gap: 10px; background: var(--paper); border: 1px solid var(--rule); padding: 14px 12px; min-width: 0; cursor: pointer; }
.ai-legend-item input { margin-top: 4px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--ink); }
.ai-legend-item > span:last-child { min-width: 0; flex: 1; }
.ai-legend-item strong { font-size: .85rem; line-height: 1.5; display: block; font-weight: 600; }
.ai-legend-item:has(input:not(:checked)) { opacity: .6; }
.ai-swatch { width: 20px; border-top: 3px solid var(--ai-series); margin-top: 10px; flex-shrink: 0; }
.ai-swatch.ai-surface-web { border-top-style: dashed; }
.ai-surface-label { font: .68rem 'Courier New',monospace; color: var(--muted); display: block; }
.ai-endpoint-host { display: block; font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; font-weight: 400; line-height: 1.5; margin-top: 4px; }
.ai-table-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-top: 45px; }
.ai-table-heading h3 { font-size: 2rem; }
.ai-table-heading p { max-width: 48ch; color: var(--muted); font-size: .83rem; }
.ai-summary-table { min-width: 1100px; font-size: .85rem; }
.ai-summary-table td { font-variant-numeric: tabular-nums; }
.ai-summary-table th:first-child { min-width: 240px; }
.ai-data-note { display: block; color: var(--muted); font-size: .73rem; }
.ai-status { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; }
.ai-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.ai-status-up::before { background: #39845d; }
.ai-status-down::before { background: var(--accent); }
.ai-status-stale, .ai-status-unknown { color: var(--muted); }
.ai-data-details { margin-top: 25px; border-block: 1px solid var(--rule); padding: 18px 0; }
.ai-data-details summary { font-family: Georgia,serif; font-size: 1.4rem; cursor: pointer; }
.ai-data-controls { margin: 22px 0 15px; }
.ai-data-controls label { font-size: .85rem; }
.ai-data-controls select { max-width: 100%; min-width: 0; flex: 1; background: var(--paper); color: var(--ink); padding: 8px; border: 1px solid var(--rule); min-height: 42px; border-radius: 0; font-size: .85rem; }
.ai-data-table { min-width: 650px; }
.ai-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 35px; }
.ai-feature-grid article { border-top: 1px solid var(--rule); padding-top: 25px; min-width: 0; }
.ai-feature-grid h3 { font-size: 2rem; margin-top: 22px; }
.ai-feature-grid p { color: var(--muted); font-size: .95rem; }
.ai-feature-grid .text-link { white-space: normal; }
.ai-methodology { padding-bottom: 75px; max-width: 1100px; }
.ai-methodology h2 { font-size: 2.4rem; margin-top: 20px; }
.ai-methodology p { color: var(--muted); font-size: .9rem; }
@media (min-width:1600px) { .ai-hero-grid { gap: 110px; } .ai-console { padding: 40px; } .ai-legend { grid-template-columns: repeat(4,minmax(0,1fr)); } .ai-plot svg { height: 400px; } }
@media (max-width:991px) { .ai-hero-grid { grid-template-columns: 1fr; gap: 35px; } .ai-vantage { display: none; } .ai-legend { grid-template-columns: repeat(2,minmax(0,1fr)); } .ai-readout ul { grid-template-columns: repeat(3,minmax(0,1fr)); } .ai-feature-grid { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width:640px) { .ai-hero h1 { font-size: clamp(2.75rem, 9.8vw, 4rem); letter-spacing: -.05em; } .ai-monitor-intro { max-width: none; } .ai-measurement-strip { grid-template-columns: 1fr; } .ai-measurement-strip > div { padding: 14px 0; } .ai-measurement-strip > div+div { border-left: 0; border-top: 1px solid var(--rule); } .ai-measurement-strip strong { font-size: 1.55rem; } .ai-console { padding: 16px 12px; } .ai-console-top, .ai-table-heading { flex-direction: column; align-items: start; } .ai-chart-actions { gap: 8px; } .ai-legend { grid-template-columns: 1fr; } .ai-readout ul { grid-template-columns: repeat(2,minmax(0,1fr)); } .ai-data-controls select { flex-basis: 100%; } .ai-plot svg { height: 320px; } .ai-chart-message { font-size: .8rem; left: 18%; right: 3%; } .ai-endpoint-selection legend { font-size: 1.25rem; } .ai-table-heading { gap: 0; } .ai-methodology h2 { font-size: 2rem; } }

.ai-console[data-state="stale"] .ai-line { opacity: .55; }

/* A compact clock wall, separate from UTC monitoring timestamps. */
.world-clocks { max-width: 960px; margin: 20px 0 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.world-clock-heading { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.world-clock-heading h2 { margin: 0 0 6px; font-family: 'Courier New', monospace; font-size: .7rem; font-weight: 400; letter-spacing: .14em; }
.world-clock-heading p { margin: 0; color: var(--muted); font: .7rem/1.5 'Courier New', monospace; }
.world-clock-state::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border: 1px solid var(--muted); border-radius: 50%; vertical-align: 1px; }
.world-clocks[data-state="live"] .world-clock-state::before { background: var(--ink); border-color: var(--ink); }
.world-clock-toggle { background: transparent; border: 1px solid var(--rule); color: var(--muted); min-height: 44px; padding: 8px 12px; font: .7rem/1.4 'Courier New', monospace; cursor: pointer; }
.world-clock-toggle:hover { color: var(--ink); border-color: var(--ink); }
.world-clock-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; list-style: none; padding: 0; margin: 0; }
.world-clock { min-width: 0; text-align: center; }
.world-clock-face { display: block; width: 76px; height: 76px; margin: 0 auto 12px; overflow: visible; }
.world-clock-rim { fill: var(--panel); stroke: var(--rule); stroke-width: 1.2; }
.world-clock-tick { stroke: var(--muted); stroke-width: .8; }
.world-clock-quarter { stroke: var(--ink); stroke-width: 1.5; }
.world-clock-hour, .world-clock-minute { stroke: var(--ink); stroke-linecap: round; }
.world-clock-hour { stroke-width: 3; }
.world-clock-minute { stroke-width: 1.8; }
.world-clock-second { stroke: var(--accent); stroke-width: .9; }
.world-clock-pin { fill: var(--ink); }
.world-clock h3 { margin: 0 0 5px; color: var(--ink); font: .76rem/1.4 'Courier New', monospace; }
.world-clock time { display: block; color: var(--ink); font: .95rem/1.5 'Courier New', monospace; font-variant-numeric: tabular-nums; }
.world-clock-date { margin: 3px 0 0; color: var(--muted); font: .65rem/1.5 'Courier New', monospace; }
.world-clock-note { margin: 16px 0 0; color: var(--muted); font-size: .75rem; }
@media (max-width: 767px) { .world-clock-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 8px; } .world-clock { grid-column: span 2; } .world-clock h3 { min-height: 2.8em; } .world-clock-face { width: 68px; height: 68px; margin-bottom: 10px; } .world-clock-date > span { display: block; } .world-clock-date > [aria-hidden] { display: none; } }
@media (prefers-reduced-motion: reduce) { .world-clock-second, .world-clock-seconds { display: none; } }