/* EdgeCheck web UI. Design tokens are upstream Boop's (server/web/src/app.css); the
   component rules are the Svelte components' scoped styles, flattened into classes. */
:root {
  --up-bg: #FDFDFE;
  --up-bg-hover: #FAFAFC;
  --up-ink: #1A1B25;
  --up-text: #1A1B25;
  --up-text-secondary: #6B6D7C;
  --up-text-muted: #9C9EAB;
  --up-text-inactive: #B4B6C2;
  --up-text-faint: #C2C4CE;
  --up-text-on-dark: #FDFDFE;
  --up-border-hairline: #F0F1F5;
  --up-border-control: #E4E6EE;
  --up-accent: #7C83E8;
  --up-accent-hover: #5A62D4;
  --up-accent-tint: #EEF0FB;
  --up-operational: #DBDFF8;
  --up-operational-strong: #A9ADD9;
  --up-degraded-strong: #E0912F;
  --up-outage: #9B7BEA;
  --up-outage-strong: #8A63E0;
  --up-alt-mint: #5FBF9F;
  --up-shadow-knob: 0 1px 3px rgba(23, 24, 31, 0.15);
  --up-ring-inset: inset 0 0 0 1px rgba(23, 24, 31, 0.06);

  --up-font: 'Figtree', system-ui, sans-serif;
  --up-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --up-type-wordmark: 700 20px/1.2 var(--up-font);
  --up-type-metric: 700 24px/1.2 var(--up-font);
  --up-type-row-title: 600 15px/1.3 var(--up-font);
  --up-type-status-line: 500 15px/1.4 var(--up-font);
  --up-type-setting: 600 14px/1.3 var(--up-font);
  --up-type-ui: 600 13px/1.4 var(--up-font);
  --up-type-meta: 500 13px/1.4 var(--up-font);
  --up-type-small: 600 12px/1.4 var(--up-font);
  --up-type-caption: 500 11px/1.4 var(--up-font);
  --up-type-code: 400 12px/1.6 var(--up-font-mono);

  --up-radius-row: 6px;
  --up-radius-control: 8px;
  --up-radius-tooltip: 10px;
  --up-radius-card: 14px;
  --up-radius-pill: 999px;
  --up-space-2: 8px;
  --up-space-3: 10px;
  --up-space-4: 16px;
  --up-space-5: 24px;
  --up-space-6: 40px;
  --up-space-7: 56px;
  --up-page-max: 720px;
  --up-page-pad: 32px;

  --ec-info-strong: var(--up-operational-strong);
  --ec-success-strong: var(--up-alt-mint);
  --ec-warning-strong: var(--up-degraded-strong);
  --ec-error-strong: var(--up-outage-strong);
  --ec-critical-strong: #6A45C4;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--up-bg); color: var(--up-text); font: var(--up-type-meta); -webkit-font-smoothing: antialiased; }
a { color: var(--up-accent); text-decoration: none; }
a:hover { color: var(--up-accent-hover); }
button, input, select { font: inherit; }
code, pre { font: var(--up-type-code); }
h1, h2, h3, p { margin: 0; }
button, a, select, input { transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out, box-shadow 120ms ease-out; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }
[hidden] { display: none !important; }

/* ---- layout ---- */
.page { max-width: var(--up-page-max); margin: 0 auto; padding: 0 var(--up-page-pad) var(--up-space-7); }
.stack { display: flex; flex-direction: column; gap: var(--up-space-5); }
.row { display: flex; align-items: center; gap: var(--up-space-3); flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--up-text-muted); }
.secondary { color: var(--up-text-secondary); }
.faint { color: var(--up-text-faint); }
.caption { font: var(--up-type-caption); }
.small { font: var(--up-type-small); }
.mono { font: var(--up-type-code); }
.lead { font: var(--up-type-meta); line-height: 1.6; }
.mt { margin-top: 12px; }
.mt2 { margin-top: 16px; }
@media (max-width: 600px) { :root { --up-page-pad: 16px; } }

header.top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--up-ink); }
.brand:hover { color: var(--up-ink); }
.mark { width: 22px; height: 22px; border-radius: var(--up-radius-pill); background: var(--up-accent); position: relative; }
.mark::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--up-bg); }
.wordmark { font: var(--up-type-wordmark); letter-spacing: 0.02em; }
.top-right { display: flex; align-items: center; gap: 18px; }
.linkish { background: none; border: none; cursor: pointer; padding: 0; font: var(--up-type-ui); color: var(--up-text-muted); }
.linkish:hover { color: var(--up-ink); }
.linkish.accent { color: var(--up-accent); }
.linkish.accent:hover { color: var(--up-accent-hover); }

nav.tabs { display: flex; gap: var(--up-space-5); border-bottom: 1px solid var(--up-border-hairline); margin-bottom: var(--up-space-5); overflow-x: auto; }
nav.tabs a { font: var(--up-type-ui); padding: 0 0 10px; color: var(--up-text-muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
nav.tabs a:hover { color: var(--up-ink); }
nav.tabs a.active { color: var(--up-ink); border-bottom-color: var(--up-accent); }

footer.bottom { margin-top: var(--up-space-6); padding-top: var(--up-space-4); border-top: 1px solid var(--up-border-hairline); }

/* ---- components ---- */
.card { background: var(--up-bg); border: 1px solid var(--up-border-hairline); border-radius: var(--up-radius-card); padding: var(--up-space-5); }
.card.flush { padding: var(--up-space-2); padding-top: var(--up-space-4); }
.card.compact { padding: 14px var(--up-space-4); }
.card > header { display: flex; align-items: center; justify-content: space-between; gap: var(--up-space-3); margin-bottom: var(--up-space-4); }
.card.flush > header { padding: 0 var(--up-space-4); }
.card > header h2 { font: var(--up-type-setting); color: var(--up-ink); }

.btn { font: var(--up-type-ui); border: none; cursor: pointer; border-radius: var(--up-radius-control); display: inline-flex; align-items: center; justify-content: center; gap: var(--up-space-2); height: 34px; padding: 0 16px; white-space: nowrap; }
.btn.sm { height: 28px; padding: 0 12px; }
.btn:disabled { cursor: default; }
.btn.primary { background: var(--up-accent); color: var(--up-text-on-dark); }
.btn.primary:hover:not(:disabled) { background: var(--up-accent-hover); color: var(--up-text-on-dark); }
.btn.primary:disabled { background: var(--up-text-inactive); }
.btn.secondary { background: var(--up-bg); color: var(--up-ink); box-shadow: inset 0 0 0 1px var(--up-border-control); }
.btn.secondary:hover:not(:disabled) { background: var(--up-bg-hover); }
.btn.ghost { background: transparent; color: var(--up-accent); }
.btn.ghost:hover:not(:disabled) { background: var(--up-accent-tint); color: var(--up-accent-hover); }
.btn.danger { background: transparent; color: var(--up-text-secondary); box-shadow: inset 0 0 0 1px var(--up-border-control); }
.btn.danger:hover:not(:disabled) { color: var(--up-outage-strong); background: var(--up-bg-hover); }

.input, .select { height: 34px; padding: 0 12px; border-radius: var(--up-radius-control); border: 1px solid var(--up-border-control); background: var(--up-bg); color: var(--up-ink); font: var(--up-type-meta); min-width: 0; }
.input:focus, .select:focus { outline: none; border-color: var(--up-accent); box-shadow: 0 0 0 3px var(--up-accent-tint); }
.input.mono { font: var(--up-type-code); }
.select { padding-right: 28px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--up-text-muted) 50%), linear-gradient(135deg, var(--up-text-muted) 50%, transparent 50%); background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size: 5px 5px; background-repeat: no-repeat; }

.badge { display: inline-flex; align-items: center; gap: 7px; font: var(--up-type-small); white-space: nowrap; min-width: 76px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge.info { color: var(--ec-info-strong); }
.badge.success { color: var(--ec-success-strong); }
.badge.warning { color: var(--ec-warning-strong); }
.badge.error { color: var(--ec-error-strong); }
.badge.critical { color: var(--ec-critical-strong); }

.status { display: inline-flex; align-items: center; gap: 7px; font: var(--up-type-small); white-space: nowrap; }
.status.ok { color: var(--up-alt-mint); }
.status.warn { color: var(--up-degraded-strong); }
.status.bad { color: var(--up-outage-strong); }
.status.muted { color: var(--up-text-inactive); }

.notice { padding: 12px 14px; border-radius: var(--up-radius-control); font: var(--up-type-meta); line-height: 1.5; }
.notice.info { background: var(--up-accent-tint); color: var(--up-accent-hover); }
.notice.good { background: #DDF3EA; color: #2E7D63; }
.notice.warn { background: #FCE8D0; color: #9A5B12; }
.notice.bad { background: #E8DFFA; color: #5B3BB0; }

.empty { text-align: center; padding: var(--up-space-6) var(--up-space-4); }
.empty h3 { font: var(--up-type-row-title); color: var(--up-ink); margin-bottom: 6px; }
.empty p { color: var(--up-text-muted); }

.setting { display: flex; align-items: center; justify-content: space-between; gap: var(--up-space-4); padding: 12px 0; border-top: 1px solid var(--up-border-hairline); }
.setting:first-child { border-top: none; }
.setting .label { font: var(--up-type-setting); color: var(--up-ink); }
.setting .hint { font: var(--up-type-caption); color: var(--up-text-muted); margin-top: 2px; max-width: 380px; }

.switch { width: 34px; height: 20px; border-radius: var(--up-radius-pill); border: none; padding: 0; position: relative; cursor: pointer; background: var(--up-border-control); flex-shrink: 0; }
.switch.on { background: var(--up-accent); }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--up-bg); box-shadow: var(--up-shadow-knob); transition: left 120ms ease-out; }
.switch.on .knob { left: 16px; }

.code { display: flex; gap: 8px; align-items: flex-start; }
.code pre { flex: 1; min-width: 0; margin: 0; padding: 12px 14px; border-radius: var(--up-radius-control); background: var(--up-bg-hover); box-shadow: var(--up-ring-inset); overflow-x: auto; white-space: pre; }
.code .copy { flex: none; margin-top: 6px; }

.pill { display: inline-flex; align-items: center; gap: 6px; font: var(--up-type-code); padding: 3px 10px; border-radius: var(--up-radius-pill); background: var(--up-accent-tint); color: var(--up-accent-hover); }
.pill.muted { background: var(--up-bg-hover); color: var(--up-text-muted); box-shadow: var(--up-ring-inset); }
.pill button { background: none; border: none; cursor: pointer; padding: 0; color: inherit; font: inherit; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; gap: 6px; font: var(--up-type-small); padding: 4px 10px; border-radius: var(--up-radius-pill); background: var(--up-bg-hover); box-shadow: var(--up-ring-inset); }
.tag .k { color: var(--up-text-muted); font-weight: 500; }

.k { font: var(--up-type-caption); color: var(--up-text-muted); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.facts > div { display: flex; flex-direction: column; gap: 2px; font: var(--up-type-meta); min-width: 0; }
.facts > div > :last-child { overflow: hidden; text-overflow: ellipsis; }
.facts.ruled { margin-top: var(--up-space-5); padding-top: var(--up-space-4); border-top: 1px solid var(--up-border-hairline); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--up-space-3); }
.metric .label { font: var(--up-type-caption); color: var(--up-text-muted); }
.metric .value { font: var(--up-type-metric); color: var(--up-ink); margin-top: 4px; }
@media (max-width: 600px) { .facts, .metrics { grid-template-columns: 1fr 1fr; } }

.crumb { display: flex; gap: 8px; align-items: center; font: var(--up-type-meta); min-width: 0; }
.crumb .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-row { display: flex; align-items: center; justify-content: space-between; gap: var(--up-space-3); }

/* ---- inbox ---- */
.toolbar { display: flex; gap: var(--up-space-3); align-items: center; flex-wrap: wrap; }
.toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--up-text-secondary); cursor: pointer; user-select: none; }
.toggle input { accent-color: var(--up-accent); margin: 0; }
.live { display: inline-flex; align-items: center; gap: 6px; font: var(--up-type-caption); color: var(--up-text-muted); }
.live .dot { width: 6px; height: 6px; color: var(--up-alt-mint); }
.day { font: var(--up-type-caption); color: var(--up-text-faint); padding: 10px var(--up-space-4) 6px; }
.ev { display: grid; grid-template-columns: 120px minmax(0, 1fr) 76px 64px; gap: var(--up-space-4); align-items: center; padding: 12px var(--up-space-4); border-radius: var(--up-radius-control); color: var(--up-ink); }
.ev:hover { background: var(--up-bg-hover); color: var(--up-ink); }
.ev .proj { font: var(--up-type-meta); color: var(--up-text-secondary); display: flex; gap: 6px; align-items: center; min-width: 0; }
.ev .proj span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev .main { min-width: 0; }
.ev .title { font: var(--up-type-row-title); display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ev .title .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev .count { font: var(--up-type-small); color: var(--up-accent-hover); background: var(--up-accent-tint); border-radius: var(--up-radius-pill); padding: 1px 8px; flex: none; }
.ev .body { font: var(--up-type-meta); color: var(--up-text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev .lvl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ev .silenced { font: var(--up-type-caption); color: var(--up-text-inactive); }
.ev .time { font: var(--up-type-caption); color: var(--up-text-muted); text-align: right; }
.more { display: flex; justify-content: center; gap: 12px; padding: 10px 0 4px; }
@media (max-width: 600px) {
  .ev { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
  .ev .proj { grid-column: 1; grid-row: 1; }
  .ev .time { grid-column: 2; grid-row: 1; }
  .ev .main { grid-column: 1 / span 2; grid-row: 2; }
  .ev .lvl { display: none; }
}

/* ---- event detail ---- */
.head { display: flex; flex-direction: column; gap: 8px; }
.meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: var(--up-type-meta); }
.meta .proj { display: inline-flex; gap: 6px; align-items: center; }
h1.title { font: var(--up-type-metric); letter-spacing: -0.01em; word-break: break-word; }
p.body { font: var(--up-type-status-line); color: var(--up-text-secondary); white-space: pre-wrap; word-break: break-word; }
.menu { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--up-border-hairline); border-radius: var(--up-radius-tooltip); background: var(--up-bg); }
.menu button { text-align: left; background: none; border: none; cursor: pointer; font: var(--up-type-meta); color: var(--up-ink); padding: 8px 10px; border-radius: var(--up-radius-control); }
.menu button:hover { background: var(--up-bg-hover); }
.rule { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: var(--up-type-meta); }
.exc { display: flex; flex-direction: column; gap: 6px; }
.exc-type { font: var(--up-type-row-title); }
.exc-msg { font: var(--up-type-code); color: var(--up-text-secondary); white-space: pre-wrap; word-break: break-word; }
.frames { display: flex; flex-direction: column; gap: 3px; }
.frame { padding: 8px 12px; border-radius: var(--up-radius-row); background: var(--up-bg-hover); display: flex; flex-direction: column; gap: 2px; }
.frame.inapp { background: var(--up-accent-tint); box-shadow: var(--up-ring-inset); }
.frame .fn { font: var(--up-type-ui); color: var(--up-ink); word-break: break-all; }
.frame .loc { color: var(--up-text-secondary); word-break: break-all; }
.kvs { display: flex; flex-direction: column; gap: 10px; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline; font: var(--up-type-meta); }
.kv .v { word-break: break-all; }
.crumbs { display: flex; flex-direction: column; gap: 6px; }
.bc { display: grid; grid-template-columns: 110px 110px 1fr; gap: 12px; font: var(--up-type-meta); }
.bc-m { word-break: break-word; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.action { display: inline-flex; align-items: center; gap: 6px; font: var(--up-type-ui); height: 34px; padding: 0 16px; border-radius: var(--up-radius-control); background: var(--up-accent); color: var(--up-text-on-dark); }
.action:hover { background: var(--up-accent-hover); color: var(--up-text-on-dark); }
.tree { font: var(--up-type-code); overflow-x: auto; }
.tree details { margin-left: 14px; }
.tree summary { cursor: pointer; list-style: none; margin-left: -14px; }
.tree summary::before { content: '▸ '; color: var(--up-text-muted); }
.tree details[open] > summary::before { content: '▾ '; }
.tree .leaf { margin-left: 0; }
.tree .key { color: var(--up-text-secondary); }
.tree .str { color: #2E7D63; word-break: break-all; }
.tree .num { color: var(--up-accent-hover); }
.tree .lit { color: var(--up-outage-strong); }
.dls { display: flex; flex-direction: column; gap: 8px; }
.dl { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items: center; font: var(--up-type-meta); }
details.raw > summary { cursor: pointer; font: var(--up-type-ui); color: var(--up-accent); list-style: none; }
@media (max-width: 600px) { .kv, .bc { grid-template-columns: 1fr; } }

/* ---- projects & settings ---- */
.phead { display: flex; align-items: center; gap: 12px; }
.ptext { flex: 1; min-width: 0; }
.pname { display: flex; align-items: baseline; gap: 8px; }
.pname .n { font: var(--up-type-row-title); color: var(--up-ink); }
details.pedit > summary { list-style: none; cursor: pointer; }
details.pedit > summary::-webkit-details-marker { display: none; }
details.pedit[open] .edit { margin-top: 12px; }
.icons { display: flex; flex-wrap: wrap; gap: 6px; }
.icons button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--up-radius-control); border: 1px solid transparent; background: none; cursor: pointer; }
.icons button:hover { background: var(--up-bg-hover); }
.icons button.sel { border-color: var(--up-accent); background: var(--up-accent-tint); }
.sils { display: flex; flex-direction: column; gap: 8px; }
.sil { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sil-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sil-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.sil-form .input { flex: 1; min-width: 140px; }
.banner { background: #FCE8D0; color: #9A5B12; padding: 10px 14px; border-radius: var(--up-radius-control); font: var(--up-type-meta); margin-bottom: var(--up-space-5); }

/* ---- login & setup ---- */
.login { max-width: 360px; margin: var(--up-space-6) auto 0; }
.login form { display: flex; flex-direction: column; gap: 10px; }
.hero { margin: var(--up-space-5) 0; }
.hero h1 { font: var(--up-type-metric); }
.steps { display: flex; flex-direction: column; gap: var(--up-space-4); }
.step-n { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--up-accent-tint); color: var(--up-accent-hover); font: var(--up-type-small); align-items: center; justify-content: center; margin-right: 8px; }

/* ---- organisations ---- */
.select.sm { height: 28px; font: var(--up-type-ui); padding-left: 10px; }
.switcher { display: inline-flex; align-items: center; gap: 6px; }
.who { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.members { display: flex; flex-direction: column; }
.member { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--up-border-hairline); }
.member:first-child { border-top: none; }
.member .who2 { min-width: 0; }
.member .who2 .n { font: var(--up-type-setting); color: var(--up-ink); }
@media (max-width: 600px) { .who { display: none; } .member { flex-wrap: wrap; } }
@media (min-width: 601px) { .member > .row { flex-wrap: nowrap; flex-shrink: 0; } }

/* ---- jobs ---- */
.run-running { color: var(--up-accent); }
.run-succeeded { color: var(--ec-success-strong); }
.run-failed { color: var(--ec-error-strong); }
.run-overdue, .run-missed { color: var(--ec-critical-strong); }
.run-abandoned, .run-new { color: var(--up-text-inactive); }
.job { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: var(--up-space-4); align-items: center; padding: 12px var(--up-space-4); border-radius: var(--up-radius-control); color: var(--up-ink); }
.job:hover { background: var(--up-bg-hover); color: var(--up-ink); }
.job .main { min-width: 0; }
.job .title { font: var(--up-type-row-title); display: flex; gap: 8px; align-items: baseline; }
.job .body { font: var(--up-type-meta); color: var(--up-text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jdot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.strip { display: flex; gap: 2px; align-items: flex-end; height: 22px; }
.strip span { width: 6px; height: 100%; border-radius: 2px; background: currentColor; opacity: .85; }
pre.output { max-height: 480px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 600px) { .strip { display: none; } .job { grid-template-columns: 12px minmax(0, 1fr); } }

.slack-steps { margin: 0; padding-left: 18px; display: grid; gap: 4px; }