:root {
    --bg: #0d1117;
    --bg-elev: #161b22;
    --bg-elev-2: #1c2129;
    --border: #30363d;
    --border-muted: #21262d;
    --fg: #e6edf3;
    --fg-muted: #8b949e;
    --accent: #2f81f7;
    --accent-fg: #ffffff;
    --green: #3fb950;
    --yellow: #d29922;
    --red: #f85149;
    --gray: #6e7681;
    --radius: 10px;
    --shadow: 0 1px 0 rgba(1, 4, 9, 0.1), 0 8px 24px rgba(1, 4, 9, 0.4);
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Top bar ---- */
.topbar {
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.brand-mark { font-size: 20px; }
.brand-name { font-size: 16px; letter-spacing: 0.2px; }

.user-box { display: flex; align-items: center; gap: 12px; }
.user-box .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--border);
}
.user-box .who { display: flex; flex-direction: column; line-height: 1.1; }
.user-box .who .login { font-weight: 600; font-size: 14px; }
.user-box .who .role { font-size: 11px; color: var(--fg-muted); }

/* ---- Layout ---- */
.container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 28px 20px 60px;
    flex: 1 0 auto;
}
.footer {
    border-top: 1px solid var(--border);
    color: var(--fg-muted);
    font-size: 12px;
    text-align: center;
    padding: 16px;
}
.loading { color: var(--fg-muted); padding: 40px 0; text-align: center; }

/* ---- Live progress (streaming consistency check / Reconcile modal) ---- */
.check-progress { padding: 32px 4px; }
.check-progress-track {
    height: 8px; border-radius: 4px; overflow: hidden;
    background: var(--bg-elev-2); border: 1px solid var(--border-muted);
}
.check-progress-fill {
    height: 100%; width: 0; border-radius: 4px;
    background: var(--accent); transition: width 0.3s ease;
}
.check-progress-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; margin-top: 10px; color: var(--fg-muted); font-size: 13px;
}
.check-progress-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-progress-count { flex: none; font-variant-numeric: tabular-nums; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elev-2);
    color: var(--fg);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.btn:hover { background: #262c36; text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: #1f6feb; }
.btn-ghost { background: transparent; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn .gh-icon { width: 16px; height: 16px; fill: currentColor; }

/* ---- Hero / login ---- */
.hero {
    text-align: center;
    padding: 70px 20px;
    max-width: 560px;
    margin: 0 auto;
}
.hero h1 { font-size: 30px; margin: 0 0 10px; }
.hero p { color: var(--fg-muted); font-size: 16px; margin: 0 0 28px; }
.hero .btn-primary { font-size: 15px; padding: 10px 20px; }
.hero .note { margin-top: 22px; font-size: 13px; color: var(--fg-muted); }

/* ---- Section headings & tabs ---- */
/* Row 1: title (left) + tabs (right). Row 2: the per-tab subtitle, forced
   full-width so its length can never push the tab bar sideways or wrap it. */
.page-head {
    display: flex; align-items: center;
    gap: 6px 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head h1 { font-size: 22px; margin: 0; margin-right: auto; }
.page-head .tabs { flex: none; }
.page-head .sub {
    flex: 1 0 100%; min-width: 0;
    color: var(--fg-muted); font-size: 13px;
}

.tabs {
    display: inline-flex; border: 1px solid var(--border); border-radius: 8px;
    /* Narrow viewports scroll the bar instead of squashing or overflowing it. */
    max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.tabs button {
    background: var(--bg-elev); color: var(--fg-muted); border: none;
    padding: 7px 16px; font-size: 14px; cursor: pointer; font-weight: 500;
    flex: none; white-space: nowrap;
}
.tabs button + button { border-left: 1px solid var(--border); }
.tabs button.active { background: var(--accent); color: var(--accent-fg); }

/* ---- Stat cards ---- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.stat {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.stat .num { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .label { color: var(--fg-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* ---- Scope cards ---- */
.scope {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 18px;
    overflow: hidden;
}
.scope-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-muted);
    background: var(--bg-elev-2);
}
.scope-id { display: flex; align-items: center; gap: 10px; }
.scope-id .avatar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); }
.scope-id .login { font-weight: 600; }
.scope-id .login.unknown { color: var(--fg-muted); font-style: italic; font-weight: 500; }
.fingerprint { font-family: var(--mono); font-size: 12px; color: var(--fg-muted); }
.scope-meta { font-size: 12px; color: var(--fg-muted); text-align: right; }

.badge {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--border);
}
.badge.you { color: var(--green); border-color: rgba(63,185,80,0.4); background: rgba(63,185,80,0.1); }
.badge.admin { color: var(--accent); border-color: rgba(47,129,247,0.4); background: rgba(47,129,247,0.1); }

.scope-body { padding: 16px 18px; }

.mini-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px; margin-bottom: 8px;
}
.mini {
    background: var(--bg); border: 1px solid var(--border-muted);
    border-radius: 8px; padding: 10px 12px;
}
.mini .n { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini .l { font-size: 11px; color: var(--fg-muted); }
.mini.zero .n { color: var(--gray); }

/* ---- Freshness ---- */
.section-label {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--fg-muted); margin: 18px 0 8px;
}
table.kinds { width: 100%; border-collapse: collapse; font-size: 13px; }
table.kinds th, table.kinds td {
    text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border-muted);
}
table.kinds th { color: var(--fg-muted); font-weight: 500; font-size: 12px; }
table.kinds td.kind { font-family: var(--mono); font-size: 12px; }
table.kinds tr:last-child td { border-bottom: none; }

/* Error detail row under an errored resource kind. */
table.kinds tr.kind-error-row td.kind-error {
    padding: 4px 10px 9px;
    font-size: 12px;
    background: rgba(248,81,73,0.06);
}
.kind-error-key {
    font-family: var(--mono); font-size: 11px; color: var(--fg-muted);
    margin-right: 8px; padding: 1px 6px; border-radius: 6px;
    border: 1px solid var(--border-muted); background: var(--bg);
}
.kind-error-msg { color: var(--red); font-family: var(--mono); font-size: 12px; word-break: break-word; }

/* ---- GitHub App rate limit ----
   The tiles are <rate-meter> web components (src/rate-meter.ts) that own their
   markup and styles in shadow DOM (themed via the :root custom properties,
   which inherit through it). Only the light-DOM grid lives here; its default
   align-items: stretch is wanted — tiles fill the row and align their bars at
   the bottom via margin-top: auto inside the component. */
.rate-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

/* Observed-rate tiles: a <rate-meter> plus its "observed ..." caption. The
   wrapper is the grid item, so the meter stretches to keep bars row-aligned. */
.rate-observed { display: flex; flex-direction: column; gap: 4px; }
.rate-observed rate-meter { flex: 1; }
.rate-observed-at {
    font-size: 11px; color: var(--fg-muted); text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ---- Upstream status badge (Requests view) ---- */
.status-code {
    display: inline-block; font-size: 11px; font-weight: 600;
    font-family: var(--mono); padding: 1px 7px; border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.status-code.ok    { color: var(--green);  background: rgba(63,185,80,0.12); }
.status-code.redir { color: var(--accent); background: rgba(47,129,247,0.12); }
.status-code.warn  { color: var(--yellow); background: rgba(210,153,34,0.12); }
.status-code.err   { color: var(--red);    background: rgba(248,81,73,0.12); }

.pill {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 1px 8px; border-radius: 999px; margin-right: 5px;
    font-variant-numeric: tabular-nums;
}
.pill.fresh { color: var(--green); background: rgba(63,185,80,0.12); }
.pill.stale { color: var(--yellow); background: rgba(210,153,34,0.12); }
.pill.error { color: var(--red); background: rgba(248,81,73,0.12); }
.pill.fetching { color: var(--accent); background: rgba(47,129,247,0.12); }
.pill.unknown { color: var(--gray); background: rgba(110,118,129,0.15); }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot.success { background: var(--green); }
.dot.error { background: var(--red); }
.dot.running { background: var(--yellow); }

.recent { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.recent li {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid var(--border-muted);
}
.recent li:last-child { border-bottom: none; }
.recent .r-kind { font-family: var(--mono); font-size: 12px; }
.recent .r-key { color: var(--fg-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent .r-trigger { font-size: 11px; color: var(--fg-muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; }
.recent .r-when { font-size: 12px; color: var(--fg-muted); }
.recent .r-error {
    flex-basis: 100%; margin-left: 17px;
    font-family: var(--mono); font-size: 11px; color: var(--red);
    white-space: normal; word-break: break-word;
}

.empty {
    text-align: center; color: var(--fg-muted);
    padding: 40px 20px; border: 1px dashed var(--border); border-radius: var(--radius);
}
.error-banner {
    background: rgba(248,81,73,0.1); border: 1px solid rgba(248,81,73,0.4);
    color: #ffb4ae; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px;
}

/* ---- Admin scope table ---- */
table.scopes { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table.scopes th, table.scopes td { padding: 10px 14px; border-bottom: 1px solid var(--border-muted); text-align: left; }
table.scopes th { color: var(--fg-muted); font-weight: 500; font-size: 12px; background: var(--bg-elev-2); }
table.scopes tr:last-child td { border-bottom: none; }
table.scopes td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.scopes .login-cell { display: flex; align-items: center; gap: 8px; }
table.scopes .avatar { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); }

/* ---- Webhook activity (admin) ---- */
.disp {
    display: inline-block; font-size: 11px; font-weight: 500;
    padding: 2px 8px; border-radius: 999px; text-transform: capitalize;
    font-family: var(--mono); letter-spacing: 0.02em;
}
.disp.applied     { color: var(--green);  background: rgba(63,185,80,0.12); }
.disp.write       { color: var(--yellow); background: rgba(210,153,34,0.12); }
.disp.invalidated { color: var(--accent); background: rgba(47,129,247,0.12); }
.disp.ignored     { color: var(--gray);   background: rgba(110,118,129,0.15); }
.disp.error       { color: var(--red);    background: rgba(248,81,73,0.12); }

.wh-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; font-size: 12px; }
.wh-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.wh-legend-text { color: var(--fg-muted); }

table.webhooks { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table.webhooks th, table.webhooks td { padding: 9px 14px; border-bottom: 1px solid var(--border-muted); text-align: left; vertical-align: middle; }
table.webhooks th { color: var(--fg-muted); font-weight: 500; font-size: 12px; background: var(--bg-elev-2); }
table.webhooks tr:last-child td { border-bottom: none; }
table.webhooks td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.webhooks .wh-event { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
table.webhooks .wh-repo { color: var(--fg-muted); white-space: nowrap; }
table.webhooks .wh-detail { color: var(--fg-muted); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The log tables must never push the page sideways: the long cells ELLIPSIZE
   instead (the full value is one click away in the row's detail panel).
   table-layout: fixed makes the widths below authoritative, which is what lets
   a cell actually shrink — under auto layout a long unbroken path wins the
   negotiation and drags the table off-screen. */
table.webhooks.rows-collapsible { table-layout: fixed; }
table.webhooks .wh-path {
    font-family: var(--mono); font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.webhooks .wh-caller { color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.webhooks .wh-delivery { overflow: hidden; text-overflow: ellipsis; }
/* Fixed layout needs explicit widths; the one column left unsized absorbs all
   remaining space, so each table gives its slack to the field worth reading in
   full (Path / Detail). Widths are per table — the two shapes differ. */
table.cols-requests th:nth-child(1) { width: 132px; } /* Result   */
table.cols-requests th:nth-child(2) { width: 92px; }  /* Upstream */
table.cols-requests th:nth-child(3) { width: 74px; }  /* Method   */
table.cols-requests th:nth-child(4) { width: 220px; } /* Caller   */
/* Path is column 5 and deliberately unsized: last, and takes all the slack. */
table.cols-webhooks th:nth-child(1) { width: 132px; } /* Result   */
table.cols-webhooks th:nth-child(2) { width: 190px; } /* Event    */
table.cols-webhooks th:nth-child(3) { width: 200px; } /* Repo     */
table.cols-webhooks th:nth-child(5) { width: 100px; } /* Delivery */
table.cols-webhooks th:nth-child(6) { width: 116px; } /* Received */
table.webhooks .wh-delivery { font-family: var(--mono); font-size: 12px; color: var(--fg-muted); }
table.webhooks .wh-when { color: var(--fg-muted); white-space: nowrap; }

/* ---- Request groups (Requests tab: Top requests / Top uncached) ---- */
/* ---- Wide log tables ---- */
/* The log tables carry more columns than the 1100px reading column comfortably
   holds. Rather than scroll (a table you have to drag sideways is a table you
   don't read), they widen SYMMETRICALLY into the page margins — equal on both
   sides, so the table stays centred in the window at every size — and only
   ellipsize once even that is not enough. The negative margins are dropped
   below the width where they would reach the window edge, so the page body
   never scrolls horizontally. --table-bleed is half the extra width. */
:root { --table-bleed: 200px; }
.table-wide { margin-left: calc(-1 * var(--table-bleed)); margin-right: calc(-1 * var(--table-bleed)); }
@media (max-width: 1560px) { :root { --table-bleed: 0px; } }

/* ---- Collapsible log rows ---- */
/* A caret in the first cell is the affordance; no extra column for it. */
table.webhooks tr.row-toggle { cursor: pointer; }
table.webhooks tr.row-toggle:hover > td { background: var(--bg-elev-2); }
table.webhooks tr.row-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The caret and the chip must stay on ONE line — the Result column is narrow
   and a long disposition ("passthrough") would otherwise push the caret onto a
   line of its own above it. */
table.webhooks tr.row-toggle > td:first-child { white-space: nowrap; }
table.webhooks tr.row-toggle > td:first-child::before {
    content: "▸";
    display: inline-block; width: 12px; margin-right: 4px;
    color: var(--fg-muted); font-size: 10px;
    transition: transform 0.12s ease;
}
table.webhooks tr.row-toggle.open > td:first-child::before { transform: rotate(90deg); }
table.webhooks tr.row-toggle.open > td { background: var(--bg-elev-2); border-bottom-color: transparent; }

/* The detail row is present but collapsed until its row is opened. */
table.webhooks tr.row-detail { display: none; }
table.webhooks tr.row-detail.open { display: table-row; }
table.webhooks tr.row-detail > td { background: var(--bg-elev-2); padding: 4px 14px 12px; }

.row-detail-grid {
    display: grid; grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 14px; margin: 0; font-size: 12px;
}
.row-detail-grid dt { color: var(--fg-muted); }
.row-detail-grid dd {
    margin: 0; font-family: var(--mono);
    /* The whole point of expanding is seeing the value in full. */
    overflow-wrap: anywhere; white-space: pre-wrap;
}

details.req-groups { margin-bottom: 18px; }
details.req-groups > summary {
    cursor: pointer; user-select: none; padding: 4px 0;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--fg-muted);
}
details.req-groups .grp-caption { color: var(--fg-muted); font-size: 12px; margin: 4px 0 8px; }
details.req-groups table.webhooks { margin-top: 6px; }
table.webhooks th.num { text-align: right; }
table.webhooks td.grp-breakdown .disp { margin-right: 6px; }

/* Passthrough "Why" chips: the reason vocabulary reads as neutral metadata
   (not a pass/fail verdict — some reasons are the cache working as designed),
   and the sampled query-parameter names are monospaced like a path. */
.disp.reason { color: var(--gray); background: rgba(110,118,129,0.15); }
/* The reason vocabulary and the sampled query shape are LITERAL values, so the
   .disp capitalize must not touch them: `unmodeled-query` is the exact string
   the server records, and query parameter names are case-SENSITIVE — rendering
   `?author,since` as "?Author,Since" would name parameters that do not exist. */
.disp.reason, .disp.qshape { text-transform: none; }

/* Debounce chips: "held" is a cost (neutral/warning), "saved" a benefit —
   greyed out when a route is paying the hold without coalescing anything. */
.disp.held       { color: var(--yellow); background: rgba(210,153,34,0.12); }
.disp.saved      { color: var(--green);  background: rgba(63,185,80,0.12); }
.disp.saved-none { color: var(--gray);   background: rgba(110,118,129,0.15); }

.disp.qshape {
    color: var(--accent); background: rgba(47,129,247,0.10);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Demo banner (styling preview only) ---- */
.demo-banner {
    background: linear-gradient(90deg, #1f6feb22, #a371f722);
    border-bottom: 1px solid var(--border);
    padding: 8px 20px; font-size: 13px;
    display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.demo-banner strong { color: var(--accent); }
.demo-banner .tabs button { padding: 4px 12px; font-size: 13px; }

/* ---- Admin: per-scope actions ---- */
.btn-sm { padding: 3px 10px; font-size: 12px; border-radius: 6px; }
.scope-actions { display: inline-flex; gap: 6px; margin-top: 6px; }
.scope-meta .scope-actions { justify-content: flex-end; }
td.actions-cell .scope-actions { margin-top: 0; }
table.scopes th:last-child, table.scopes td.actions-cell { white-space: nowrap; }

/* ---- Modal (browse + check) ---- */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(1, 4, 9, 0.66);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px; overflow-y: auto;
}
.modal-card {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    width: 100%; max-width: 960px; margin: auto;
}
.modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--border-muted);
    background: var(--bg-elev-2);
    position: sticky; top: 0; border-radius: var(--radius) var(--radius) 0 0;
}
.modal-title { font-weight: 600; font-size: 15px; }
.modal-close { padding: 4px 10px; font-size: 14px; line-height: 1; }
.modal-body { padding: 18px; }

/* ---- Detail views (inside modal) ---- */
.detail-sub { color: var(--fg-muted); font-size: 12px; font-family: var(--mono); margin-bottom: 16px; word-break: break-all; }
table.detail-table { width: 100%; margin-bottom: 6px; }
.detail-table .pr-title { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    font-size: 12px; color: var(--fg-muted);
    border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px;
    font-variant-numeric: tabular-nums;
}
.label-chip {
    display: inline-block; font-size: 11px; margin: 0 4px 2px 0;
    padding: 1px 7px; border-radius: 999px;
    background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--fg-muted);
}

.status-pill {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 1px 8px; border-radius: 999px; font-family: var(--mono);
}
.status-pill.success { color: var(--green); background: rgba(63,185,80,0.12); }
.status-pill.failure, .status-pill.error { color: var(--red); background: rgba(248,81,73,0.12); }
.status-pill.pending, .status-pill.expected { color: var(--yellow); background: rgba(210,153,34,0.12); }

/* ---- Consistency check: discrepancy issue pills + diff cells ---- */
.disp.issue-field-mismatch { color: var(--red);    background: rgba(248,81,73,0.12); }
.disp.issue-only-in-cache  { color: var(--yellow); background: rgba(210,153,34,0.12); }
.disp.issue-only-on-github { color: var(--accent); background: rgba(47,129,247,0.12); }
.detail-table .diff-cached { color: var(--yellow); font-family: var(--mono); font-size: 12px; }
.detail-table .diff-github { color: var(--green);  font-family: var(--mono); font-size: 12px; }

.ok-banner {
    background: rgba(63,185,80,0.1); border: 1px solid rgba(63,185,80,0.4);
    color: var(--green); border-radius: 8px; padding: 12px 16px; margin: 8px 0;
}
.notes { margin-top: 16px; font-size: 12px; color: var(--fg-muted); }
.note-line { padding: 4px 0; border-top: 1px solid var(--border-muted); }

/* ---- Copyable JSON block (the artifact pasted back for analysis) ---- */
.json-wrap { margin: 12px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.json-toolbar { display: flex; justify-content: flex-end; padding: 6px 8px; background: var(--bg-elev-2); border-bottom: 1px solid var(--border-muted); }
.json-block {
    margin: 0; padding: 12px 14px; max-height: 340px; overflow: auto;
    background: var(--bg); color: var(--fg);
    font-family: var(--mono); font-size: 12px; line-height: 1.5;
    white-space: pre; tab-size: 2;
}
details.raw { margin-top: 16px; }
details.raw > summary { cursor: pointer; color: var(--fg-muted); font-size: 13px; padding: 4px 0; }

@media (max-width: 600px) {
    .scope-meta { text-align: left; }
    .scope-meta .scope-actions { justify-content: flex-start; }
    .page-head { align-items: flex-start; }
    .modal-backdrop { padding: 12px 6px; }
}

/* ---- Timeline tab (the <gsm-timeline> traffic chart) ---- */
gsm-timeline { display: block; }
gsm-timeline .timeline-note { color: var(--fg-muted); padding: 12px 4px; }
gsm-timeline timeline-view {
    display: block;
    height: 460px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev);
    overflow: hidden;
    /* Theme the js-snippets <timeline-view> to the dashboard palette. */
    --timeline-bg: var(--bg-elev);
    --timeline-fg: var(--fg);
    --timeline-muted: var(--fg-muted);
    --timeline-grid: var(--border-muted);
    --timeline-hairline: var(--border);
    --timeline-now: var(--accent);
    --timeline-emphasis: var(--red);
    --timeline-font: var(--sans);
}