/* Omnio admin (the admin portal): the House Lights colours (DESIGN.md) for a calm, dense admin tool. Dark only, system
   fonts only. Amber means "you are here" (the selected page and tab, focus) and nothing else. */

:root {
  --ground: #05151c;
  --ground-deep: #040f14;
  --ground-low: #0f2029;
  --ground-container: #13262f;
  --ground-high: #1a2f39;
  --ground-highest: #223843;
  --ground-bright: #2b424d;
  --rail: #120e0c;
  --ivory: #efe6d8;
  --ivory-2: #b2b0a7;
  --ivory-3: rgba(239, 230, 216, 0.55);
  --amber: #f2a54a;
  --on-ivory: #14110d;
  --quiet: rgba(239, 230, 216, 0.32);
  --edge: rgba(239, 230, 216, 0.45);
  --hair: rgba(239, 230, 216, 0.12);
  --warn: #e0b97a;
  --error: #e39a8a;
  --ok: #9cc7a4;
  --r-hair: 4px;
  --r-chip: 5px;
  --r-button: 6px;
  --r-card: 10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ground);
  color: var(--ivory);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

a { color: var(--ivory); text-decoration-color: var(--quiet); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--ivory); }
code, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12.5px; }
h1 { font-size: 22px; line-height: 28px; font-weight: 700; margin: 0; }
h2 { font-size: 15px; line-height: 20px; font-weight: 600; margin: 0 0 8px; }
h3 { font-size: 13px; line-height: 18px; font-weight: 600; margin: 0 0 6px; }

:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(242, 165, 74, 0.35); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--ivory-2); }
.small { font-size: 12px; line-height: 16px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Crash text sits in its own bidi island: right-to-left letters in it can't reorder the words around it. */
.crash { unicode-bidi: isolate; }
.marker { unicode-bidi: isolate; color: var(--ivory-2); font-style: normal; border: 1px dashed var(--quiet); border-radius: var(--r-hair); padding: 0 4px; }

/* Admin portal shell: the top bar (name, tabs, Sign out) above the open tab, which fills the rest of the window.
   Each tab's root (.tab-root) is a size container named "tab": a tab's narrow layout follows the room the tab
   has (container queries on "tab"), and its rules sit under its own class (.tab-crashes): no tab changes another. */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 0 12px; background: var(--rail); border-bottom: 1px solid var(--hair); }
.wordmark { font-size: 18px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; padding: 0 10px 18px; }
.wordmark span { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ivory-2); letter-spacing: 0; }
.topbar .wordmark { padding: 11px 12px 11px 4px; }
.topbar .wordmark span { display: inline; margin-left: 6px; font-size: 18px; line-height: 22px; }
.admin-tabs { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 0 4px; min-width: 0; }
.admin-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--ivory-2); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; }
.admin-tab:hover { color: var(--ivory); }
.admin-tab[aria-current="true"] { color: var(--ivory); border-bottom-color: var(--amber); }
.topbar .signout { min-height: 44px; }
.tab-root { flex: 1 1 auto; display: flex; flex-direction: column; container: tab / inline-size; }
.tab-body { flex: 1 1 auto; }

/* A tab's page menu (the Crashes tab: Issues, Releases, Status). */
.rail { background: var(--rail); display: flex; flex-direction: column; gap: 2px; padding: 18px 10px; }
.nav-item { display: block; position: relative; padding: 8px 10px; border-radius: var(--r-button); color: var(--ivory-2); text-decoration: none; font: inherit; background: none; border: 0; text-align: left; cursor: pointer; width: 100%; }
.nav-item:hover { color: var(--ivory); background: rgba(239, 230, 216, 0.06); }
.nav-item[aria-current="page"] { color: var(--ivory); font-weight: 600; background: rgba(239, 230, 216, 0.08); }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 7px; width: 3px; height: 22px; background: var(--amber); border-radius: 2px; }

/* The Crashes tab: its menu on the left (it stays in view while the page scrolls), the page on the right. */
.tab-crashes .tab-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); background: linear-gradient(to right, var(--rail) 196px, var(--ground) 196px); }
.tab-crashes .rail { position: sticky; top: 0; align-self: start; }

main { padding: 22px 28px 48px; max-width: 1640px; outline: none; }
main:focus, main:focus-visible { outline: none; box-shadow: none; }
.screen > * + * { margin-top: 16px; }
.page-head { display: flex; align-items: baseline; gap: 16px; }
.lede { color: var(--ivory-2); max-width: 900px; margin: 6px 0 0; }
.loading { color: var(--ivory-2); padding: 22px 28px; margin: 0; }
.back { color: var(--ivory-2); text-decoration: none; display: inline-block; }
.back:hover { color: var(--ivory); }

/* Buttons: one filled ivory action per view, the rest outlined. */
.btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-button); border: 1px solid var(--quiet); background: rgba(9, 18, 24, 0.4); color: var(--ivory); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--ground-high); }
.btn-primary { background: var(--ivory); color: var(--on-ivory); border-color: var(--ivory); }
.btn-primary:hover { background: #fff7ea; }
.btn.disabled, .btn:disabled { opacity: 0.45; cursor: default; }
.btn:disabled:hover { background: rgba(9, 18, 24, 0.4); }
.btn-quiet { height: 28px; padding: 0 10px; font-weight: 500; color: var(--ivory-2); border-color: var(--hair); background: none; }
.btn-quiet:hover { color: var(--ivory); border-color: var(--quiet); }

/* Tabs and filters. */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hair); }
.tab { padding: 8px 14px; color: var(--ivory-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ivory); }
.tab[aria-current="page"] { color: var(--ivory); font-weight: 600; border-bottom-color: var(--amber); }
.filters, .confirm-new { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 16px; color: var(--ivory-2); }
.field-wide { flex: 1 1 260px; max-width: 420px; }
input, select { height: 32px; padding: 0 8px; background: var(--ground-low); color: var(--ivory); border: 1px solid var(--edge); border-radius: var(--r-button); font: inherit; }
input::placeholder { color: var(--ivory-3); }
input[type="checkbox"] { height: 16px; width: 16px; accent-color: var(--ivory); }
.field-wide input { width: 100%; }
.bulk { display: flex; align-items: center; gap: 8px; }
.bulk-status { margin: 0 0 0 8px; color: var(--ivory-2); }
.bulk-count { min-width: 96px; color: var(--ivory-2); font-variant-numeric: tabular-nums; }

/* Tables: dense rows separated by hairlines. */
.grid { width: 100%; border-collapse: collapse; }
.grid th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ivory-2); padding: 6px 10px; border-bottom: 1px solid var(--quiet); white-space: nowrap; }
.grid th.num { text-align: right; }
.grid td { padding: 8px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.grid tbody tr:hover { background: rgba(239, 230, 216, 0.03); }
.grid .pick { width: 28px; padding-right: 0; }
.grid .when { white-space: nowrap; color: var(--ivory-2); }
.grid td.num, .grid td .small { white-space: nowrap; }
.issues .problem { max-width: 0; width: 55%; }
.issues .title { font-weight: 600; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.issues .title:hover { text-decoration: underline; }
.issues .culprit { color: var(--ivory-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.issues .events div { margin-bottom: 4px; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.row-regressed .title::after { content: ""; }
tr.current td { background: var(--ground-low); }
tr.row-warn td, tr.row-unknown td { background: rgba(239, 230, 216, 0.025); }

.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--quiet); border-radius: var(--r-chip); font-size: 11.5px; font-weight: 500; color: var(--ivory); background: rgba(9, 18, 24, 0.4); white-space: nowrap; }
.pill-regressed { border-color: var(--error); color: var(--error); }
.pill-ok { border-color: var(--ok); color: var(--ok); }
.pill-unknown { color: var(--ivory-2); border-style: dashed; }
.pill-caught { color: var(--ivory-2); }

.spark { display: inline-block; vertical-align: middle; }
.spark .bar { fill: var(--ivory-2); }
.spark .bar.zero { fill: var(--ground-bright); }

.pager { display: flex; align-items: center; gap: 8px; }
.notice { color: var(--ivory-2); margin: 0; padding: 14px 16px; background: var(--ground-low); border-radius: var(--r-card); }
.notice-error { color: var(--error); }
.warn { color: var(--warn); margin: 6px 0 0; }
p.warn[role="alert"] { padding: 10px 14px; border: 1px solid rgba(224, 185, 122, 0.45); border-radius: var(--r-card); background: rgba(224, 185, 122, 0.06); }
.help { color: var(--ivory-2); font-size: 12px; line-height: 16px; margin: 4px 0 0; }

/* Issue detail. */
.issue-title { font-size: 20px; line-height: 26px; overflow-wrap: anywhere; }
.issue-head .culprit { color: var(--ivory-2); margin: 4px 0 0; overflow-wrap: anywhere; }
.state { margin: 8px 0 0; color: var(--ivory-2); }
.actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; padding: 14px 16px; background: var(--ground-low); border-radius: var(--r-card); }
.choice { max-width: 280px; }
.facts { display: flex; flex-wrap: wrap; gap: 28px; }
.fact-label { font-size: 12px; line-height: 16px; color: var(--ivory-2); }
.fact-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.block { padding-top: 6px; }
.block > h2 .h-note, .block-head h2 .h-note, h3 .h-note { font-weight: 400; color: var(--ivory-2); font-size: 12px; margin-left: 10px; }
.tag-grid { display: grid; grid-template-columns: minmax(280px, 1.4fr) repeat(3, minmax(160px, 1fr)); gap: 18px; }
.tags-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.tags-list dt { color: var(--ivory-2); }
.tags-list dd { margin: 0; overflow-wrap: anywhere; }
.breakdown-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.breakdown ul { list-style: none; margin: 0; padding: 0; }
.breakdown li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-bottom: 1px solid var(--hair); overflow-wrap: anywhere; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.block-head h2 { margin: 0; }
.block-head .head-actions { display: flex; align-items: center; gap: 8px; }
.other-tags { margin-top: 14px; }
.tags-list.free dt code { color: var(--ivory-2); }
.crumbs td.when { width: 1%; }
.trace-box { background: var(--ground-deep); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 12px 14px; }
.exception + .exception { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hair); }
.exception .value { margin: 0 0 8px; overflow-wrap: anywhere; }
.frames { list-style: none; margin: 0; padding: 0; }
.frame { padding: 2px 0; color: var(--ivory-2); overflow-wrap: anywhere; }
.frame.app { color: var(--ivory); font-weight: 700; }
.frame.app code { font-weight: 700; }
.folded details > summary { cursor: pointer; color: var(--ivory-3); font-size: 12px; padding: 2px 0; }
.folded details[open] > summary { color: var(--ivory-2); }
.folded .frames { padding-left: 14px; border-left: 1px solid var(--hair); }
.addr2line { margin: 4px 0 8px 14px; padding: 8px 10px; background: var(--ground-low); border-radius: var(--r-button); font-weight: 400; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.addr2line code { color: var(--ivory); font-weight: 400; overflow-wrap: anywhere; }
.addr2line .help { flex-basis: 100%; margin: 0; }
pre.raw { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ivory); }
.event-nav { display: flex; align-items: center; gap: 8px; }
details.json > summary { cursor: pointer; font-weight: 600; }
details.json pre { margin-top: 10px; background: var(--ground-deep); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 12px 14px; max-height: 560px; overflow: auto; }

/* Releases and status. */
.release-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.release-action .warn, .release-action .help { max-width: 290px; }
.release-action input { width: 92px; }
.releases td.action { width: 290px; min-width: 290px; }
.releases .pill { white-space: normal; height: auto; min-height: 20px; }
.undo-check { margin: 0 0 6px; max-width: 290px; }
.usage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.usage { padding: 12px 14px; background: var(--ground-low); border-radius: var(--r-card); }
.usage-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
progress { width: 100%; height: 6px; appearance: none; border: 0; border-radius: 999px; background: rgba(239, 230, 216, 0.16); overflow: hidden; }
progress::-webkit-progress-bar { background: rgba(239, 230, 216, 0.16); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--ivory-2); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--ivory-2); }
.actions-row { display: flex; gap: 8px; margin-top: 12px; }
/* Signed out: no menu, the sign-in card in the middle of the page. */
.shell.bare { align-items: center; justify-content: center; padding: 16px 0; background: var(--ground); }
.card.signed-out .btn { margin-top: 18px; width: 100%; justify-content: center; height: 44px; }

/* Sign-in pages. Their controls are 44 px high at every width (they are used on a phone too). */
body.sign-in { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.card { width: min(380px, calc(100vw - 32px)); padding: 28px; background: var(--ground-low); border: 1px solid var(--hair); border-radius: 14px; }
.card .wordmark { padding: 0 0 22px; }
.card h1 { font-size: 20px; margin-bottom: 6px; }
.card form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.card input { width: 100%; height: 44px; }
.card .btn { height: 44px; justify-content: center; }
.card > .btn { margin-top: 18px; width: 100%; }
.card .status { min-height: 40px; color: var(--ivory-2); margin: 14px 0 0; }

/* Narrow screens (a phone, a small window). When the Crashes tab has less than 1024 px, its menu sits on top,
   the issue list is a stack of cards (each value with its name, as the header row is gone) and every tap target
   is at least 44 px. Only a stack trace or code box may scroll sideways, inside its own box; the page never does.
   Every narrow rule is a container query on the tab's root, under .tab-crashes: another tab is never touched. */
.cell-label { display: none; }
.hit { display: contents; }

@container tab (max-width: 1079px) {
  /* The tag block's four columns need about 1070 px next to the menu: below that the counts share the rows. */
  .tab-crashes .tag-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .tab-crashes .tag-grid > :first-child { grid-column: 1 / -1; }
}

@container tab (max-width: 1023px) {
  /* One column: the menu row (only as high as it needs, on every page, short or long), then the page. */
  .tab-crashes .tab-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; background: var(--ground); }
  .tab-crashes .rail { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0 6px; border-bottom: 1px solid var(--hair); }
  .tab-crashes .nav-item { width: auto; min-height: 44px; padding: 12px 14px; }
  .tab-crashes .nav-item[aria-current="page"]::before { left: 14px; right: 14px; top: auto; bottom: 4px; width: auto; height: 3px; }
  .tab-crashes main { padding: 16px 16px 40px; }
  .tab-crashes .loading { padding: 16px; }
  .tab-crashes .back { padding: 12px 0; }

  .tab-crashes .btn, .tab-crashes .btn-quiet { height: auto; min-height: 44px; }
  .tab-crashes input:not([type="checkbox"]), .tab-crashes select { height: 44px; }
  .tab-crashes .hit { display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; cursor: pointer; }
  .tab-crashes .tabs { flex-wrap: wrap; }
  .tab-crashes .tab { padding: 12px 14px; }
  .tab-crashes .filters .field { flex: 1 1 140px; }
  .tab-crashes .filters .field input, .tab-crashes .filters .field select { width: 100%; }
  .tab-crashes .field-wide { max-width: none; }
  .tab-crashes .bulk, .tab-crashes .pager, .tab-crashes .event-nav, .tab-crashes .block-head, .tab-crashes .block-head .head-actions { flex-wrap: wrap; }
  .tab-crashes .bulk-status { margin: 0; }
  /* The Releases and sessions tables keep their columns and scroll sideways inside their own box. */
  .tab-crashes .grid.releases, .tab-crashes .grid.sessions { display: block; overflow-x: auto; }

  /* The issue list: one card per issue, the problem on top, its numbers below. */
  .tab-crashes .grid.issues, .tab-crashes .grid.issues thead, .tab-crashes .grid.issues tbody { display: block; }
  .tab-crashes .grid.issues thead tr { display: block; border-bottom: 1px solid var(--quiet); }
  .tab-crashes .grid.issues th { display: none; }
  .tab-crashes .grid.issues th.pick { display: block; width: auto; padding: 0; border: 0; }
  .tab-crashes .grid.issues th .cell-label { display: inline; }
  .tab-crashes .grid.issues tbody tr { display: grid; grid-template-columns: 44px repeat(2, minmax(0, 1fr)); column-gap: 10px; padding: 0 0 12px; border-bottom: 1px solid var(--hair); }
  .tab-crashes .grid.issues td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  .tab-crashes .grid.issues td.pick { grid-row: span 9; width: auto; }
  .tab-crashes .grid.issues td.problem { grid-column: 2 / -1; max-width: none; width: auto; }
  .tab-crashes .grid.issues td:not(.pick):not(.problem) { margin-top: 10px; }
  .tab-crashes .grid.issues td .cell-label { display: block; font-size: 12px; line-height: 16px; color: var(--ivory-2); }
  .tab-crashes .issues .title { white-space: normal; overflow-wrap: anywhere; padding: 12px 0; }
  .tab-crashes .issues .culprit { white-space: normal; overflow-wrap: anywhere; }

  /* An issue's page. */
  .tab-crashes .facts { gap: 14px 28px; }
  .tab-crashes .event-nav .muted { min-width: 0; overflow-wrap: anywhere; }
  .tab-crashes .grid td { overflow-wrap: anywhere; }
  .tab-crashes .events-table td.when a { display: inline-block; padding: 12px 0; }
  .tab-crashes .folded details > summary { padding: 14px 0; }
  .tab-crashes details.json > summary { padding: 12px 0; }
}

@container tab (min-width: 600px) and (max-width: 1023px) {
  .tab-crashes .grid.issues tbody tr { grid-template-columns: 44px repeat(5, minmax(0, 1fr)); }
}

@container tab (max-width: 599px) {
  .tab-crashes .grid th, .tab-crashes .grid td { padding-left: 6px; padding-right: 6px; }
  .tab-crashes .events-table td.when { white-space: normal; }
}