/* ========================================================================= LLM Gateway - request pipeline viewer saadm.dev demo stylesheet. Self-contained: no @import, no remote fonts, no remote assets. The page is served under an enforced CSP of default-src 'self', and must also work opened straight off disk. Palette matches the saadm.dev engineering demos (hft-book viewer). Themes are driven by [data-theme] on , set before paint by the inline bootstrap in index.html and toggled by js/app.js. Class names below track the markup js/app.js actually renders: .gw-stage / .gw-attempt / .gw-prov / .gw-stat / .gw-led-* / .gw-log-line. ========================================================================= */ /* ------------------------------- tokens -------------------------------- */ :root { color-scheme: dark; --bg: #090c14; --panel: #111626; --panel2: #0d1220; --line: #1e2740; --ink: #e8edf8; --mut: #7e889c; --ok: #2ee6a6; --bad: #ff6b7a; --warn: #ffc46b; --accent: #7aa2ff; /* Text-safe variants. On the dark surfaces the status hues already clear WCAG AA, so these match; the light theme darkens them until they do. */ --ok-ink: #2ee6a6; --bad-ink: #ff6b7a; --warn-ink: #ffc46b; --accent-ink: #7aa2ff; --ok-bg: rgba(46, 230, 166, 0.12); --bad-bg: rgba(255, 107, 122, 0.12); --warn-bg: rgba(255, 196, 107, 0.12); --accent-bg: rgba(122, 162, 255, 0.13); --mut-bg: rgba(126, 136, 156, 0.12); --hair: rgba(126, 136, 156, 0.22); /* The log console keeps a dark surface in both themes, like a code block. */ --console-bg: #070b13; --console-line: #1a2136; --console-ink: #d8e0f2; --console-dim: #7d8aa8; --console-dim2: #8b97b4; --shadow-1: 0 1px 2px rgba(3, 6, 14, 0.5); --shadow-2: 0 10px 30px rgba(3, 6, 14, 0.45); --gw-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --gw-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-full: 999px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.18s; } [data-theme="light"] { color-scheme: light; --bg: #f4f7fc; --panel: #ffffff; --panel2: #fbfcfe; --line: #e4e9f3; --ink: #0f172a; --mut: #56627c; --ok: #0a9d63; --bad: #d23b48; --warn: #b06f00; --accent: #2c4f8f; --ok-ink: #05704a; --bad-ink: #b8303c; --warn-ink: #8a5600; --accent-ink: #2c4f8f; --ok-bg: rgba(10, 157, 99, 0.10); --bad-bg: rgba(210, 59, 72, 0.09); --warn-bg: rgba(176, 111, 0, 0.10); --accent-bg: rgba(44, 79, 143, 0.09); --mut-bg: rgba(86, 98, 124, 0.09); --hair: rgba(86, 98, 124, 0.20); --console-bg: #101728; --console-line: #222c45; --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-2: 0 10px 30px rgba(15, 23, 42, 0.09); } /* ------------------------------- base ---------------------------------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--gw-ui); font-size: 15px; line-height: 1.55; overflow-x: hidden; } h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; } p { margin: 0; } code, kbd, samp { font-family: var(--gw-mono); font-size: 0.88em; } code { background: var(--mut-bg); border-radius: var(--r-sm); padding: 0.08em 0.34em; color: var(--ink); } .gw-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 22px; } main:focus { outline: none; } .gw-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .gw-skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 14px; font-size: 0.86rem; text-decoration: none; transition: top var(--dur) var(--ease); } .gw-skip:focus { top: 12px; } a { color: var(--accent-ink); } .gw-link { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding-bottom: 1px; } .gw-link:hover { border-bottom-color: var(--accent); } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* ------------------------------ header --------------------------------- */ .gw-header { border-bottom: 1px solid var(--line); background: radial-gradient(120% 140% at 88% -20%, var(--accent-bg), transparent 62%), var(--panel2); padding-block: 16px 34px; } .gw-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; } .gw-back { display: inline-flex; align-items: center; gap: 6px; color: var(--mut); font-size: 0.85rem; text-decoration: none; padding: 5px 2px; } .gw-back:hover { color: var(--ink); } .gw-bar-end { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gw-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--gw-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); border: 1px solid var(--line); border-radius: var(--r-full); padding: 5px 11px; background: var(--panel); } .gw-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); } .gw-eyebrow { font-family: var(--gw-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); margin-bottom: 10px; } .gw-title { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.75rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; } .gw-title-sub { font-family: var(--gw-mono); font-size: clamp(0.85rem, 0.7rem + 0.6vw, 1.02rem); font-weight: 500; color: var(--mut); } .gw-lede { margin-top: 12px; max-width: 74ch; color: var(--mut); font-size: 0.97rem; } .gw-note { margin-top: 22px; max-width: 88ch; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 15px 18px; box-shadow: var(--shadow-1); } .gw-note-title { font-family: var(--gw-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 8px; } .gw-note p { color: var(--mut); font-size: 0.9rem; } .gw-note p + p { margin-top: 9px; } .gw-note strong { color: var(--ink); font-weight: 620; } /* theme toggle: the icon and label name the theme the button switches TO */ .gw-theme { padding-inline: 12px; } .gw-theme svg { flex: none; } .gw-theme-label { text-transform: capitalize; } .gw-ico-moon { display: none; } [data-theme="light"] .gw-ico-sun { display: none; } [data-theme="light"] .gw-ico-moon { display: inline-block; } /* ------------------------------ buttons -------------------------------- */ .gw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 0.88rem; font-weight: 550; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 15px; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease); } .gw-btn:hover:enabled { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } .gw-btn:active:enabled { transform: translateY(1px); } .gw-btn--ghost { background: transparent; color: var(--mut); } .gw-btn--ghost:hover:enabled { color: var(--ink); background: var(--panel); } .gw-btn--primary { background: var(--accent); border-color: var(--accent); color: #05070f; font-weight: 600; } [data-theme="light"] .gw-btn--primary { color: #ffffff; } .gw-btn--primary:hover:enabled { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); border-color: color-mix(in srgb, var(--accent) 86%, var(--ink)); } button:disabled, select:disabled, textarea:disabled, input:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .gw-check input:disabled + label { opacity: 0.5; cursor: not-allowed; } #gw-send[aria-busy="true"] { cursor: progress; } /* ----------------------------- sections -------------------------------- */ .gw-section { padding-block: 30px; } .gw-section + .gw-section { border-top: 1px solid var(--line); } .gw-section-head { margin-bottom: 16px; } .gw-section-head h2 { font-size: 1.12rem; } .gw-section-sub { color: var(--mut); font-size: 0.88rem; margin-top: 4px; } /* ---------------------------- scenarios -------------------------------- */ .gw-scenarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; } .gw-scenario { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; cursor: pointer; min-width: 0; position: relative; overflow: hidden; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); } .gw-scenario::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); opacity: 0; transition: opacity var(--dur) var(--ease); } .gw-scenario:hover:enabled { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); } .gw-scenario:hover:enabled::before { opacity: 0.7; } .gw-scenario[data-active="true"], .gw-scenario.is-active { border-color: var(--accent); background: var(--accent-bg); } .gw-scenario[data-active="true"]::before, .gw-scenario.is-active::before { opacity: 1; } .gw-scenario:disabled { cursor: not-allowed; } .gw-scn-label { font-size: 0.92rem; font-weight: 600; } .gw-scn-blurb { font-size: 0.78rem; line-height: 1.45; color: var(--mut); overflow-wrap: anywhere; } /* ------------------------------ panels --------------------------------- */ .gw-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; min-width: 0; box-shadow: var(--shadow-1); } .gw-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); } .gw-panel-head h3 { font-size: 0.94rem; } .gw-panel-note { font-family: var(--gw-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); } /* ----------------------------- controls -------------------------------- */ .gw-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; } .gw-field { min-width: 0; display: block; } .gw-field--prompt { grid-column: 1 / -1; } .gw-field > label, .gw-field legend { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mut); margin-bottom: 6px; padding: 0; } .gw-hint { font-size: 0.76rem; color: var(--mut); margin-top: 5px; } textarea, select, input[type="text"] { font: inherit; width: 100%; color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; transition: border-color var(--dur) var(--ease); } textarea:hover:enabled, select:hover:enabled { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } textarea { font-family: var(--gw-mono); font-size: 0.84rem; line-height: 1.55; resize: vertical; min-height: 76px; } select { cursor: pointer; font-size: 0.86rem; } .gw-field--options { border: 0; margin: 0; padding: 0; min-width: 0; } .gw-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; } .gw-check { display: flex; align-items: center; gap: 8px; min-width: 0; } .gw-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; } .gw-check label { font-size: 0.85rem; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; } .gw-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); } .gw-status { font-family: var(--gw-mono); font-size: 0.78rem; color: var(--mut); min-width: 0; overflow-wrap: anywhere; flex: 1 1 240px; } .gw-status[data-tone="ok"] { color: var(--ok-ink); } .gw-status[data-tone="warn"] { color: var(--warn-ink); } .gw-status[data-tone="bad"] { color: var(--bad-ink); } /* ------------------------------- layout --------------------------------- */ .gw-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; align-items: start; } .gw-col { display: grid; gap: 14px; align-items: start; min-width: 0; } .gw-panel--wide { grid-column: 1 / -1; } .gw-panel--half { grid-column: span 1; } /* Authored "nothing yet" notes: shown only while their panel is empty. */ .gw-empty { color: var(--mut); font-size: 0.82rem; font-style: italic; padding: 6px 2px 2px; display: none; } #gw-pipeline:empty ~ .gw-empty, #gw-providers:empty ~ .gw-empty, #gw-log:empty ~ .gw-empty { display: block; } .gw-panel:has(#gw-ledger:empty) > .gw-empty { display: block; } /* ------------------------------ pipeline -------------------------------- */ .gw-panel--pipeline { min-height: 280px; } .gw-pipeline { list-style: none; margin: 0; padding: 2px 0 0; /* Capped so the right-hand column stays in view; scroll chaining is left on purpose so a wheel over the panel still carries on down the page. */ max-height: min(62vh, 620px); overflow-y: auto; } .gw-pipeline > li { position: relative; padding: 5px 2px 5px 0; min-width: 0; animation: gw-stage-in 0.24s var(--ease) both; } @keyframes gw-stage-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } /* the rail that links one stage glyph to the next */ .gw-pipeline > li::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 1px; background: var(--line); } .gw-pipeline > li:first-child::before { top: 14px; } .gw-pipeline > li:last-child::before { bottom: auto; height: 15px; } /* a stage row: glyph, name, state word, duration */ .gw-stage-row { display: flex; align-items: center; gap: 9px; min-width: 0; } .gw-stage-icon { position: relative; z-index: 1; flex: none; width: 19px; height: 19px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--mut); background: var(--panel); color: var(--mut); } .gw-stage-icon .gw-icon { display: block; width: 11px; height: 11px; } .gw-stage-name { font-size: 0.875rem; font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; } .gw-stage-state { margin-left: auto; flex: none; font-family: var(--gw-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); background: var(--mut-bg); border-radius: var(--r-full); padding: 2px 8px; white-space: nowrap; } .gw-stage-ms { flex: none; min-width: 52px; text-align: right; font-family: var(--gw-mono); font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--mut); white-space: nowrap; } .gw-stage-detail { margin: 3px 0 0; padding-left: 28px; font-family: var(--gw-mono); font-size: 0.74rem; line-height: 1.5; color: var(--mut); overflow-wrap: anywhere; } /* -- running -- */ .gw-stage[data-status="run"] .gw-stage-icon { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-bg); animation: gw-pulse 1.2s ease-in-out infinite; } .gw-stage[data-status="run"] .gw-stage-icon .gw-icon { animation: gw-spin 1.1s linear infinite; } .gw-stage[data-status="run"] .gw-stage-name { color: var(--accent-ink); } .gw-stage[data-status="run"] .gw-stage-state { color: var(--accent-ink); background: var(--accent-bg); } @keyframes gw-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent); } 60% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); } } @keyframes gw-spin { to { transform: rotate(360deg); } } /* -- ok -- */ .gw-stage[data-status="ok"] .gw-stage-icon { border-color: var(--ok); color: var(--ok-ink); background: var(--ok-bg); } .gw-stage[data-status="ok"] .gw-stage-state { color: var(--ok-ink); background: var(--ok-bg); } /* -- skipped -- */ .gw-stage[data-status="skip"] { opacity: 0.75; } .gw-stage[data-status="skip"] .gw-stage-icon { border-style: dashed; border-color: var(--mut); background: transparent; } .gw-stage[data-status="skip"] .gw-stage-name { font-weight: 550; color: var(--mut); } /* -- warning -- */ .gw-stage[data-status="warn"] .gw-stage-icon { border-color: var(--warn); color: var(--warn-ink); background: var(--warn-bg); } .gw-stage[data-status="warn"] .gw-stage-name { color: var(--warn-ink); } .gw-stage[data-status="warn"] .gw-stage-state { color: var(--warn-ink); background: var(--warn-bg); } /* -- failed -- */ .gw-stage[data-status="fail"] .gw-stage-icon { border-color: var(--bad); color: var(--bad-ink); background: var(--bad-bg); } .gw-stage[data-status="fail"] .gw-stage-name { color: var(--bad-ink); } .gw-stage[data-status="fail"] .gw-stage-state { color: var(--bad-ink); background: var(--bad-bg); } .gw-stage[data-status="fail"] .gw-stage-detail { color: var(--bad-ink); } /* run marker between requests in a multi-request scenario */ .gw-pipeline > li.gw-run-marker { display: flex; align-items: center; gap: 10px; padding: 14px 0 6px 28px; } .gw-run-marker::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); } .gw-run-marker-text { font-family: var(--gw-mono); font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mut); white-space: nowrap; } /* per-attempt rows nested under a stage */ .gw-attempts { list-style: none; margin: 5px 0 2px; padding: 0 0 0 28px; display: grid; gap: 3px; } .gw-attempt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-family: var(--gw-mono); font-size: 0.72rem; color: var(--mut); border-left: 2px solid var(--line); padding: 2px 0 2px 9px; min-width: 0; } .gw-attempt-n { color: var(--mut); } .gw-attempt-target { color: var(--ink); overflow-wrap: anywhere; } .gw-attempt-outcome { font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; } .gw-attempt-delay { color: var(--warn-ink); } .gw-attempt-error { flex: 1 1 100%; color: var(--bad-ink); overflow-wrap: anywhere; } .gw-attempt[data-outcome="success"] { border-left-color: var(--ok); } .gw-attempt[data-outcome="success"] .gw-attempt-outcome { color: var(--ok-ink); } .gw-attempt[data-outcome="skipped"] { border-left-color: var(--hair); border-left-style: dashed; } .gw-attempt[data-outcome="circuit_open"], .gw-attempt[data-outcome="budget_exceeded"] { border-left-color: var(--warn); } .gw-attempt[data-outcome="circuit_open"] .gw-attempt-outcome, .gw-attempt[data-outcome="budget_exceeded"] .gw-attempt-outcome { color: var(--warn-ink); } .gw-attempt[data-outcome="error"], .gw-attempt[data-outcome="timeout"], .gw-attempt[data-outcome="rate_limited"] { border-left-color: var(--bad); } .gw-attempt[data-outcome="error"] .gw-attempt-outcome, .gw-attempt[data-outcome="timeout"] .gw-attempt-outcome, .gw-attempt[data-outcome="rate_limited"] .gw-attempt-outcome { color: var(--bad-ink); } /* --------------------------- circuit breakers --------------------------- */ .gw-providers { display: grid; gap: 8px; min-width: 0; } .gw-prov-item { list-style: none; } .gw-prov { border: 1px solid var(--line); border-left: 3px solid var(--mut); border-radius: var(--r); background: var(--panel2); padding: 10px 12px; min-width: 0; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .gw-prov-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .gw-prov-name { font-size: 0.87rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .gw-prov-state { flex: none; font-family: var(--gw-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); border-radius: var(--r-full); padding: 3px 9px; background: var(--mut-bg); color: var(--mut); white-space: nowrap; cursor: help; } .gw-prov-model { margin-top: 3px; font-family: var(--gw-mono); font-size: 0.72rem; color: var(--mut); overflow-wrap: anywhere; } .gw-prov-meta { margin: 9px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .gw-prov-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-top: 1px solid var(--hair); padding-top: 6px; min-width: 0; } .gw-prov-metric dt { font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mut); } .gw-prov-metric dd { margin: 0; font-family: var(--gw-mono); font-variant-numeric: tabular-nums; font-size: 0.76rem; color: var(--ink); } .gw-prov[data-state="closed"] { border-left-color: var(--ok); } .gw-prov[data-state="closed"] .gw-prov-state { color: var(--ok-ink); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .gw-prov[data-state="half_open"] { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn-bg) 45%, var(--panel2)); } .gw-prov[data-state="half_open"] .gw-prov-state { color: var(--warn-ink); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .gw-prov[data-state="open"] { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad-bg) 45%, var(--panel2)); } .gw-prov[data-state="open"] .gw-prov-state { color: var(--bad-ink); background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 45%, transparent); } /* ------------------------------- stats ---------------------------------- */ .gw-stats { min-width: 0; } .gw-stat-grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; } .gw-stat { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel2); padding: 9px 11px; min-width: 0; } .gw-stat-label { font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mut); } .gw-stat-value { margin: 3px 0 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .gw-stat-figure { font-family: var(--gw-mono); font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .gw-stat-sub { font-size: 0.68rem; color: var(--mut); overflow-wrap: anywhere; } /* the cache saving is the one figure worth reading as good news */ .gw-stat:last-child .gw-stat-figure { color: var(--ok-ink); } /* ------------------------------- ledger --------------------------------- */ .gw-tablewrap { overflow-x: auto; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel2); } .gw-table { width: 100%; border-collapse: collapse; font-family: var(--gw-mono); font-variant-numeric: tabular-nums; font-size: 0.76rem; white-space: nowrap; } .gw-table th, .gw-table td { text-align: left; padding: 7px 11px; border-bottom: 1px solid var(--hair); } .gw-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); color: var(--mut); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; border-bottom: 1px solid var(--line); } .gw-table tbody tr:last-child td { border-bottom: 0; } .gw-table tbody tr:hover td { background: var(--mut-bg); } .gw-led-num { text-align: right; } .gw-led-time { color: var(--mut); } .gw-led-cached { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut); } .gw-led-row[data-outcome="failed"] td { background: color-mix(in srgb, var(--bad-bg) 45%, transparent); } .gw-tag { display: inline-block; font-family: var(--gw-mono); font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; border: 1px solid var(--line); border-radius: var(--r-full); padding: 2px 8px; background: var(--mut-bg); color: var(--mut); } .gw-tag[data-tone="ok"] { color: var(--ok-ink); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .gw-tag[data-tone="warn"] { color: var(--warn-ink); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .gw-tag[data-tone="bad"] { color: var(--bad-ink); background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 45%, transparent); } /* ------------------------------ response -------------------------------- */ .gw-response { margin: 0; font-family: var(--gw-mono); font-size: 0.76rem; line-height: 1.6; color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; max-height: 340px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; } /* -------------------------------- log ----------------------------------- */ .gw-log { font-family: var(--gw-mono); font-size: 0.72rem; line-height: 1.55; color: var(--console-ink); background: var(--console-bg); border: 1px solid var(--console-line); border-radius: var(--r); padding: 8px 4px 8px 0; max-height: 340px; overflow: auto; } .gw-log-line { display: block; padding: 2px 12px 2px 9px; border-left: 3px solid transparent; white-space: pre-wrap; overflow-wrap: anywhere; } .gw-log-line:hover { background: rgba(122, 162, 255, 0.08); } .gw-log-time { color: var(--console-dim); margin-right: 9px; } .gw-log-level { display: inline-block; min-width: 40px; margin-right: 9px; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--console-dim2); } .gw-log-msg { color: var(--console-ink); } .gw-log-fields { color: var(--console-dim2); margin-left: 9px; } .gw-log-line[data-level="info"] { border-left-color: #3f6fd8; } .gw-log-line[data-level="warn"] { border-left-color: #ffc46b; } .gw-log-line[data-level="warn"] .gw-log-level, .gw-log-line[data-level="warn"] .gw-log-msg { color: #ffd79a; } .gw-log-line[data-level="error"] { border-left-color: #ff6b7a; } .gw-log-line[data-level="error"] .gw-log-level, .gw-log-line[data-level="error"] .gw-log-msg { color: #ffb3ba; } /* --------------------------- what this shows ---------------------------- */ .gw-explain { padding: 18px 20px; } .gw-dl { margin: 0; display: grid; } .gw-dl-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 6px 24px; padding: 11px 0; border-bottom: 1px solid var(--hair); } .gw-dl-row:last-of-type { border-bottom: 0; } .gw-dl dt { font-size: 0.86rem; font-weight: 600; color: var(--ink); } .gw-dl dd { margin: 0; font-size: 0.86rem; color: var(--mut); min-width: 0; overflow-wrap: anywhere; } .gw-caveat { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--mut); } /* ------------------------------- footer --------------------------------- */ .gw-footer { border-top: 1px solid var(--line); background: var(--panel2); padding-block: 22px; margin-top: 10px; } .gw-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.83rem; color: var(--mut); } /* ------------------------------ responsive ------------------------------ */ @media (max-width: 1020px) { .gw-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .gw-panel--half { grid-column: 1 / -1; } } @media (max-width: 860px) { .gw-grid { grid-template-columns: minmax(0, 1fr); } .gw-panel--wide, .gw-panel--half { grid-column: 1 / -1; } .gw-controls { grid-template-columns: minmax(0, 1fr); } .gw-dl-row { grid-template-columns: minmax(0, 1fr); gap: 3px; } .gw-pipeline { max-height: none; } } @media (max-width: 620px) { body { font-size: 14.5px; } .gw-wrap { padding-inline: 15px; } .gw-scenarios { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .gw-section { padding-block: 24px; } .gw-panel { padding: 14px; border-radius: var(--r); } .gw-explain { padding: 14px; } .gw-note { padding: 13px 14px; } .gw-actions .gw-btn { flex: 1 1 auto; } .gw-status { flex-basis: 100%; } .gw-prov-meta { grid-template-columns: minmax(0, 1fr); } /* the state word duplicates the glyph colour; the duration is worth more here */ .gw-stage-state { display: none; } .gw-stage-ms { margin-left: auto; } } @media (max-width: 400px) { .gw-scenarios { grid-template-columns: minmax(0, 1fr); } .gw-title { font-size: 1.7rem; } .gw-theme-label { display: none; } .gw-stage-detail, .gw-attempts { padding-left: 22px; } .gw-stat-grid { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); } } /* --------------------------- reduced motion ----------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .gw-scenario:hover:enabled { transform: none; } .gw-btn:active:enabled { transform: none; } }