/* IBM Plex Mono — self-hosted (latin + latin-ext, weights 400-700). */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/ibm-plex-mono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/ibm-plex-mono-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/ibm-plex-mono-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* TopicStreams — The Wire An all-monospace "wire desk": the feed is a transmission tape indexed by time, with a single wire-red signal reserved for live/new. Light and dark themes via data-theme on . */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --paper: #E8E7E0; --paper-raise: #F1F0EA; --ink: #1A1A17; --ink-soft: #6E6D64; --ink-faint: #9D9B90; --rule: #CDCBC1; --signal: #C5341E; --signal-rgb: 197, 52, 30; --good: #3E6B47; --good-rgb: 62, 107, 71; --warn: #9A6A1A; --warn-rgb: 154, 106, 26; --masthead-rule: #1A1A17; --texture: rgba(0, 0, 0, 0.018); --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; } :root[data-theme="dark"] { --paper: #17160F; --paper-raise: #201E16; --ink: #E9E7DD; --ink-soft: #9A978A; --ink-faint: #6A6860; --rule: #332F26; --signal: #F0512E; --signal-rgb: 240, 81, 46; --good: #7FB07F; --good-rgb: 127, 176, 127; --warn: #D9A441; --warn-rgb: 217, 164, 65; --masthead-rule: #9A978A; --texture: rgba(255, 255, 255, 0.02); } html { -webkit-font-smoothing: antialiased; } body { font-family: var(--mono); background: var(--paper); color: var(--ink); line-height: 1.5; background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--texture) 39px, var(--texture) 40px); min-height: 100vh; } .sheet { max-width: 900px; margin: 0 auto; padding: 0 28px 80px; } a { color: inherit; } ::selection { background: rgba(var(--signal-rgb), 0.22); } /* ── Masthead status strip ─────────────────────────────── */ .masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 0 14px; border-bottom: 2px solid var(--masthead-rule); } .brand { font-weight: 700; font-size: 18px; letter-spacing: 0.04em; } .brand span { font-weight: 400; color: var(--ink-soft); margin-left: 2px; } .status { display: flex; align-items: center; gap: 16px; font-size: 11px; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; } .status .sep { color: var(--ink-faint); } .onair { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; } .onair .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); } /* live & healthy: the wire is open — pulsing red signal */ .onair[data-state="live"] .dot { background: var(--signal); box-shadow: 0 0 0 0 rgba(var(--signal-rgb), 0.55); animation: pulse 1.8s ease-out infinite; } /* failing, unreachable, or parsing nothing: solid red, no pulse, red label */ .onair[data-state="errors"] .dot, .onair[data-state="offline"] .dot, .onair[data-state="parsing"] .dot { background: var(--signal); } .onair[data-state="errors"] #scraper-status, .onair[data-state="offline"] #scraper-status, .onair[data-state="parsing"] #scraper-status { color: var(--signal); } /* partial outage: solid red dot, neutral label (distinct from full errors) */ .onair[data-state="degraded"] .dot { background: var(--signal); } .onair[data-state="degraded"] #scraper-status { color: var(--ink); } /* stalled or never-run: dim, no pulse */ .onair[data-state="stalled"] .dot, .onair[data-state="idle"] .dot { background: var(--ink-faint); } .onair[data-state="stalled"] #scraper-status, .onair[data-state="idle"] #scraper-status { color: var(--ink-soft); } .chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); background: none; border: 1px solid var(--rule); padding: 4px 9px; cursor: pointer; line-height: 1.2; } .chip:hover { border-color: var(--ink-soft); color: var(--ink); } #theme-toggle { min-width: 30px; text-align: center; } /* ── Tracking: topics as wire slugs ────────────────────── */ .tracking { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--rule); } .tracking__label { font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint); text-transform: uppercase; margin-right: 2px; } .topic-cards { display: contents; } /* Each slug is a wire channel you can tune to. Click the name to filter the feed to that topic; click again (or its ×) to release it. */ .topic-card { display: inline-flex; align-items: center; position: relative; border: 1px solid var(--rule); background: var(--paper-raise); color: var(--ink); transition: opacity .15s ease, background .15s ease, border-color .15s ease, color .15s ease; } .topic-card:hover { border-color: var(--ink-soft); } .topic-name { font-family: var(--mono); font-size: 12.5px; color: inherit; background: none; border: 0; cursor: pointer; padding: 5px 9px; line-height: 1.2; letter-spacing: inherit; } /* The × is held back until you reach for a slug — hover, keyboard focus, or when the slug is the channel you're already tuned to. Width animates so revealing it doesn't shove the row around. */ .delete-btn { border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-family: var(--mono); font-size: 14px; line-height: 1; max-width: 0; padding: 0; overflow: hidden; opacity: 0; transition: max-width .18s ease, opacity .15s ease, padding .18s ease; } .topic-card:hover .delete-btn, .topic-card:focus-within .delete-btn, .topic-card.is-active .delete-btn { max-width: 2em; opacity: 1; padding: 0 9px 0 0; } .delete-btn:hover, .topic-card.is-active .delete-btn:hover { color: var(--signal); } /* Tuned-in: the slug inverts to an ink stamp — the on-air channel. */ .topic-card.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); } .topic-card.is-active .delete-btn { color: var(--paper); } /* While one channel is live, the rest recede; they brighten on hover so they stay reachable. */ .topic-cards.is-filtering .topic-card:not(.is-active) { opacity: 0.38; } .topic-cards.is-filtering .topic-card:not(.is-active):hover { opacity: 0.8; } .topic-name:focus-visible, .delete-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; } .track-add { display: inline-flex; align-items: stretch; } #topic-input { font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: var(--paper); border: 1px dashed var(--rule); border-right: 0; padding: 5px 10px; width: 170px; } #topic-input::placeholder { color: var(--ink-faint); } #topic-input:focus { outline: none; border-color: var(--ink-soft); } #add-topic-btn { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); background: none; border: 1px dashed var(--rule); padding: 5px 10px; cursor: pointer; white-space: nowrap; } #add-topic-btn:hover { border-color: var(--ink-soft); color: var(--ink); } #add-topic-btn:disabled { opacity: 0.5; cursor: default; } /* ── The Wire head + filter ────────────────────────────── */ .wire { position: relative; } .wire__head { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 30px 0 12px; flex-wrap: wrap; } .wire__head h2 { font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; } .filters { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .filter__label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } /* Engine filter: one button per engine, each carrying its brand mark. Same tune-in model as the topic slugs — pick one to filter, click it again to release; the active one inverts to an ink stamp and the rest recede. */ .engine-filter { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .engine-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); background: var(--paper-raise); border: 1px solid var(--rule); padding: 4px 9px 4px 7px; cursor: pointer; line-height: 1.2; transition: opacity .15s ease, background .15s ease, border-color .15s ease, color .15s ease; } .engine-btn:hover { border-color: var(--ink-soft); } .engine-btn__logo { width: 15px; height: 15px; display: block; flex: none; border-radius: 3px; } .engine-btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); } .engine-filter.is-filtering .engine-btn:not(.is-active) { opacity: 0.4; } .engine-filter.is-filtering .engine-btn:not(.is-active):hover { opacity: 0.82; } .engine-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; } /* ── The transmission tape ─────────────────────────────── */ .news-container { /* Fill the space the removed scraper-log panel used to take. */ max-height: calc(100vh - 260px); min-height: 380px; overflow-y: auto; overflow-x: hidden; border-top: 1px solid var(--rule); } .news-list { list-style: none; } .news-item { display: grid; grid-template-columns: 92px 1fr; } .news-item__time { text-align: right; padding: 18px 18px 0 0; font-size: 12px; color: var(--ink-faint); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .news-item__body { position: relative; border-left: 1px solid var(--rule); padding: 18px 4px 22px 22px; } .news-item__body::before { content: ""; position: absolute; left: -4px; top: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); } .news-item--live .news-item__body::before { background: var(--signal); box-shadow: 0 0 0 0 rgba(var(--signal-rgb), 0.5); animation: pulse 1.8s ease-out infinite; } .news-item__dateline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .news-topic { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } .news-source { font-size: 11.5px; color: var(--ink-soft); } .news-source::before { content: "·"; margin-right: 10px; color: var(--ink-faint); } /* Excerpt/blurb under the headline; clamped to a couple of lines. */ .news-excerpt { margin: 6px 0 0; max-width: 64ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .news-new { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); display: none; } .news-item--live .news-new { display: inline; } /* Engine badges: which search engine(s) surfaced this entry. */ .news-engines { display: inline-flex; gap: 6px; flex-wrap: wrap; } .engine-badge { font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 7px; line-height: 1.5; } .news-link { text-decoration: none; display: block; } .news-title { font-size: 16.5px; font-weight: 500; line-height: 1.4; color: var(--ink); max-width: 64ch; /* Clamp truly long headlines to 3 lines with a real ellipsis, rather than letting them run on. (Note: Google sometimes truncates the headline text itself before we store it — that cut is in the data and looks the same as a complete short title, so it can't be ellipsised here.) */ display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-link:hover .news-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--ink-faint); } .feed-status { padding: 18px; text-align: center; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-faint); text-transform: uppercase; min-height: 8px; } .feed-status:empty { padding: 0; min-height: 0; } /* "Jump to latest" — floats over the bottom-right of the tape once scrolled. */ .feed-top { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--paper-raise); border: 1px solid var(--rule); padding: 7px 12px; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); } .feed-top.is-visible { opacity: 1; visibility: visible; transform: none; } .feed-top:hover { border-color: var(--ink-soft); } .feed-top .arrow { color: var(--signal); font-weight: 700; } @media (prefers-reduced-motion: reduce) { .feed-top { transition: none; } } /* Empty / loading placeholders (JS-injected text) */ .no-news, .loading { padding: 20px 0; color: var(--ink-faint); font-size: 12px; letter-spacing: 0.04em; } .news-list .no-news { text-align: center; padding: 28px; } /* ── Confirm dialog ────────────────────────────────────── */ .modal { /* margin:auto restores native centering that the global `* { margin:0 }` reset would otherwise strip from the modal dialog. */ margin: auto; border: 1px solid var(--rule); background: var(--paper-raise); color: var(--ink); font-family: var(--mono); padding: 22px; max-width: 380px; width: calc(100% - 40px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32); } .modal::backdrop { background: rgba(0, 0, 0, 0.45); } .modal__title { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; } .modal__body { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 20px; } .modal__actions { display: flex; justify-content: flex-end; gap: 10px; } .modal__btn { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 12px; cursor: pointer; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); } .modal__btn:hover { border-color: var(--ink-soft); } .modal__btn:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 2px; } .modal__btn--danger { border-color: var(--signal); color: var(--signal); } .modal__btn--danger:hover { background: var(--signal); color: var(--paper); } /* ── Toasts ────────────────────────────────────────────── */ .toast { position: fixed; top: 20px; right: 20px; z-index: 10000; max-width: 400px; padding: 12px 16px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink); background: var(--paper-raise); border: 1px solid var(--rule); border-left: 2px solid var(--ink-soft); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); animation: toastIn 0.22s ease-out; } .toast.success { border-left-color: var(--ink); } .toast.error { border-left-color: var(--signal); } .toast--out { animation: toastOut 0.22s ease-out forwards; } @keyframes toastIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateX(12px); } } /* ── Motion ────────────────────────────────────────────── */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--signal-rgb), 0.5); } 70% { box-shadow: 0 0 0 7px rgba(var(--signal-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--signal-rgb), 0); } } @media (prefers-reduced-motion: reduce) { .onair[data-state="live"] .dot, .news-item--live .news-item__body::before { animation: none; } .topic-card, .delete-btn, .engine-btn { transition: none; } } /* ── Responsive ────────────────────────────────────────── */ @media (max-width: 600px) { .sheet { padding: 0 16px 60px; } .status { gap: 12px; } .news-item { grid-template-columns: 64px 1fr; } .news-item__time { padding: 16px 12px 0 0; } .news-item__body { padding-left: 16px; } .news-title { font-size: 15px; } #topic-input { width: 130px; } } /* ── Monitor / ops page ─────────────────────────────────── */ /* The ops console reuses the wire-desk palette but, unlike the wire (where red = "live/good"), here semantic colors mean what dashboards usually mean: green healthy, amber degraded/odd, red blocked/rot, grey idle. */ .monitor__updated { color: var(--ink-soft); letter-spacing: 0.06em; } .kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 18px 0 4px; } .kpi { background: var(--paper); padding: 14px 14px 12px; } .kpi__n { font-size: 21px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; } .kpi__l { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; } .panel { padding: 22px 0 6px; } .panel h2 { font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: 12px; } .table-wrap { overflow-x: auto; border-top: 1px solid var(--rule); } .engines { width: 100%; border-collapse: collapse; font-size: 12.5px; } .engines th, .engines td { padding: 9px 12px; white-space: nowrap; border-bottom: 1px solid var(--rule); } .engines th { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; text-align: right; position: sticky; top: 0; background: var(--paper); } .engines th.al, .engines td.al, .engines .c-engine { text-align: left; } .engines td.r { text-align: right; } .engines td.num { font-variant-numeric: tabular-nums; } .engines tbody tr:hover { background: var(--paper-raise); } .c-engine { display: table-cell; } /* keep layout; dot+name inline */ .edot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 9px; vertical-align: middle; background: var(--ink-faint); } .edot[data-health="healthy"] { background: var(--good); } .edot[data-health="degraded"] { background: var(--warn); } .edot[data-health="blocked"], .edot[data-health="parsing"] { background: var(--signal); } .edot[data-health="cooldown"] { background: var(--warn); } .edot[data-health="idle"] { background: var(--ink-faint); } .ehealth { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; } .ehealth[data-health="healthy"] { color: var(--good); } .ehealth[data-health="degraded"] { color: var(--warn); } .ehealth[data-health="blocked"], .ehealth[data-health="parsing"] { color: var(--signal); } .ehealth[data-health="cooldown"] { color: var(--warn); } .ehealth[data-health="idle"] { color: var(--ink-faint); } /* Probe countdown shown beside a "cooldown" label, e.g. "~286s". Not uppercased (it's data, not a status word) and de-emphasized vs. the label. */ .ecooldown { margin-left: 6px; font-size: 10.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } td.hot { color: var(--signal); font-weight: 600; } td.warm { color: var(--warn); font-weight: 600; } .estatus[data-state="ok"] { color: var(--ink-soft); } .estatus[data-state="blocked"] { color: var(--signal); font-weight: 600; } .estatus[data-state="error"] { color: var(--warn); font-weight: 600; } .estatus[data-state="unknown"] { color: var(--ink-faint); } /* Cycle sparkline: a row of bars, oldest → newest. */ .spark { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-bottom: 14px; padding: 4px 0; border-bottom: 1px solid var(--rule); } .spark__bar { flex: 1 1 0; min-width: 4px; background: var(--good); opacity: 0.85; } .spark__bar[data-ok="0"] { background: var(--signal); } .cycles { display: flex; flex-direction: column; } .cycle { display: grid; grid-template-columns: 12px 92px 70px 1fr; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; } .cycle__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); } .cycle__dot[data-ok="0"] { background: var(--signal); } .cycle__when { color: var(--ink-faint); } .cycle__dur { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .cycle__meta { color: var(--ink-soft); } .failures { display: flex; flex-direction: column; } .failure { display: grid; grid-template-columns: 70px 84px 110px 52px 1fr; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; } .failure__time { color: var(--ink-faint); } .failure__topic { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; text-transform: lowercase; } .failure__status { font-weight: 600; } .failure__msg { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .failure__status[data-state="blocked"] { color: var(--signal); } .failure__status[data-state="error"] { color: var(--warn); } .failure__status[data-state="unknown"] { color: var(--ink-faint); } .muted { color: var(--ink-faint); font-size: 12px; letter-spacing: 0.04em; } .center { text-align: center; } @media (max-width: 760px) { .kpis { grid-template-columns: repeat(3, 1fr); } .failure { grid-template-columns: 64px 80px 1fr; } .failure__status, .failure__topic { display: none; } }