/*
  Needs You -- the operate surface.

  This is a page someone opens at 23:40 on a phone, in one hand, to unblock a
  machine that is waiting. Everything below follows from that:

  * Dark first, near-black canvas, elevation by luminance rather than by shadow,
    borders at a whisper. Nothing decorative competes with the one thing on the
    screen that is asking for a decision.
  * One accent -- indigo -- and it means "this is the action". Green means done,
    amber means running out of time, red means this cannot be undone. A colour
    is never the only carrier: every state also has a word.
  * The type stack is whatever the device already has. No font is fetched: a
    remote font is a request this page must not make and a flash of nothing it
    must not show.
  * Targets are 44px, the primary actions sit at the bottom of the detail view
    where a thumb is, and contrast is set for a screen held outdoors.

  The palette lives on `:root` as light, is swapped under `prefers-color-scheme`
  for anyone who has not chosen, and swapped again under `[data-theme]` for
  anyone who has -- so an explicit choice wins in both directions.
*/

/* --- palette ------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --bg: #f4f5f8;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #eceef2;
  --line: rgba(17, 22, 31, 0.11);
  --line-strong: rgba(17, 22, 31, 0.2);

  --text: #11161f;
  --text-2: #47515f;
  --text-3: #667082;

  --accent: #4650df;
  --accent-soft: rgba(70, 80, 223, 0.1);
  --accent-ink: #ffffff;

  --ok: #10673f;
  --ok-soft: rgba(16, 103, 63, 0.1);
  --warn: #85520a;
  --warn-soft: rgba(133, 82, 10, 0.12);
  --danger: #b3301b;
  --danger-soft: rgba(179, 48, 27, 0.1);

  --add: #10673f;
  --add-bg: rgba(16, 103, 63, 0.09);
  --del: #b3301b;
  --del-bg: rgba(179, 48, 27, 0.09);

  --radius: 12px;
  --radius-sm: 8px;
  --tap: 44px;
  --gap: 12px;
  --pad: 14px;
  --shell: 46rem;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0b0d;
    --surface-1: #101216;
    --surface-2: #171a20;
    --surface-3: #1f242c;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);

    --text: #e8ecf3;
    --text-2: #a7b0bf;
    --text-3: #7a8393;

    --accent: #7d8aff;
    --accent-soft: rgba(125, 138, 255, 0.14);
    --accent-ink: #0a0b0d;

    --ok: #4cc98a;
    --ok-soft: rgba(76, 201, 138, 0.13);
    --warn: #e6ac47;
    --warn-soft: rgba(230, 172, 71, 0.13);
    --danger: #ff6f57;
    --danger-soft: rgba(255, 111, 87, 0.13);

    --add: #4cc98a;
    --add-bg: rgba(76, 201, 138, 0.1);
    --del: #ff6f57;
    --del-bg: rgba(255, 111, 87, 0.1);
  }
}

:root[data-theme="dark"] {
  --bg: #0a0b0d;
  --surface-1: #101216;
  --surface-2: #171a20;
  --surface-3: #1f242c;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #e8ecf3;
  --text-2: #a7b0bf;
  --text-3: #7a8393;

  --accent: #7d8aff;
  --accent-soft: rgba(125, 138, 255, 0.14);
  --accent-ink: #0a0b0d;

  --ok: #4cc98a;
  --ok-soft: rgba(76, 201, 138, 0.13);
  --warn: #e6ac47;
  --warn-soft: rgba(230, 172, 71, 0.13);
  --danger: #ff6f57;
  --danger-soft: rgba(255, 111, 87, 0.13);

  --add: #4cc98a;
  --add-bg: rgba(76, 201, 138, 0.1);
  --del: #ff6f57;
  --del-bg: rgba(255, 111, 87, 0.1);
}

:root[data-density="compact"] {
  --gap: 8px;
  --pad: 10px;
}

/* --- base ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--sans);
  font-synthesis-weight: none;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-wrap: anywhere;
}

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -0.012em; }
p { margin: 0; }
code, pre { font-family: var(--mono); font-size: 0.875em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 30;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 16px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* --- chrome -------------------------------------------------------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 10px max(14px, env(safe-area-inset-left)) 10px max(14px, env(safe-area-inset-right));
  padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--line);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .top { background: var(--bg); }
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
  font-weight: 640;
  letter-spacing: -0.015em;
  min-height: var(--tap);
}

.wordmark-mark {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.top-nav { display: flex; gap: 4px; }

.top-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 560;
}
.top-link.is-here { color: var(--text); background: var(--surface-3); }

.main {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 18px max(14px, env(safe-area-inset-left))
    max(96px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* A sticky action bar already participates in `.main`'s flow. Leaving the
   ordinary page-end breathing room after it would make the bar unstick before
   the viewport bottom at the true end of the document. */
.main:has(> .bar) { padding-bottom: 0; }

.net {
  position: sticky;
  top: 0;
  z-index: 25;
  padding: 9px 14px;
  font-size: 0.875rem;
  font-weight: 560;
  text-align: center;
  background: var(--warn-soft);
  color: var(--warn);
  border-bottom: 1px solid var(--line);
}
.net[data-tone="error"] { background: var(--danger-soft); color: var(--danger); }

.noscript {
  padding: var(--pad);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 0.9375rem;
}

/* --- lanes --------------------------------------------------------------- */

.lane { display: flex; flex-direction: column; gap: var(--gap); }

.lane-h {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  font-weight: 640;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}

.lane-fold { gap: 0; }
.lane-fold > summary {
  min-height: var(--tap);
  padding: 0 4px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
}
.lane-fold > summary::-webkit-details-marker { display: none; }
.lane-fold > summary::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-right: 2px;
  transition: transform 120ms ease;
}
.lane-fold[open] > summary::before { transform: rotate(45deg); }
.lane-fold[open] > .cards { margin-top: var(--gap); }

.lane-note { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-3); }

.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 0.75rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.cards { display: flex; flex-direction: column; gap: var(--gap); }

.lane-empty { color: var(--text-3); font-size: 0.9375rem; padding: 2px 4px; }

/* --- card ---------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--pad);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.card.is-urgent { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.card.is-expired { opacity: 0.72; }
.card.is-busy { opacity: 0.6; }

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--text-2);
}

.who { display: inline-flex; align-items: flex-start; gap: 8px; min-width: 0; }
.who-text { min-width: 0; overflow-wrap: anywhere; }
.agent { color: var(--text); font-weight: 620; }
.dot { color: var(--text-3); margin: 0 5px; }

/* The hostname used to share a single, ellipsis-truncated line with the agent
   and project name -- on a long machine name that meant the one fact someone
   opened this card to check was the one word cut off. It gets its own line
   instead, quieter than the agent name, so nothing here is ever hidden. */
.who-text .host { display: block; margin-top: 2px; color: var(--text-3); font-size: 0.8125rem; }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ttl {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  color: var(--text-2);
}
.is-urgent .ttl { color: var(--warn); }
.is-expired .ttl { color: var(--danger); }

.title { font-size: 1.0625rem; line-height: 1.35; }
.title-link { color: var(--text); text-decoration: none; }
.title-link:hover { text-decoration: underline; }

.facts { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.fact { display: flex; gap: 8px; font-size: 0.9375rem; }
.fact dt {
  flex: none;
  width: 4.5rem;
  color: var(--text-3);
  font-size: 0.8125rem;
  padding-top: 2px;
}
.fact dd { margin: 0; color: var(--text-2); }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 560;
}
/* A card can carry several warnings at once -- stale, truncated, redacted --
   and a row of solid amber pills that size would out-shout the title, the
   blocker and the next action sitting right above it. An outline keeps every
   warning legible and still the same colour, without the row reading louder
   than the decision it is next to. */
.chip-warn { background: transparent; border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
.chip-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.chip-quiet { background: transparent; color: var(--text-3); }

/* --- actions ------------------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: 8px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 580;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn:hover { border-color: var(--text-3); }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { border-color: var(--accent); filter: brightness(1.08); }

.btn-danger { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); background: var(--danger-soft); }
.btn-danger:hover { border-color: var(--danger); }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--text-2); }

.btn:disabled,
.btn:disabled:hover {
  opacity: 0.42;
  cursor: default;
  filter: saturate(0.18) grayscale(0.35);
}

.btn-wide { width: 100%; }

.confirm {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: var(--pad);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}
.confirm-text { font-size: 0.9375rem; color: var(--text); }
.confirm-text strong { color: var(--danger); }
.confirm-row { display: flex; flex-wrap: wrap; gap: 8px; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; color: var(--text-2); }
.input {
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}
.input-code {
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  text-align: center;
  width: 100%;
}

.bar {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px max(14px, env(safe-area-inset-left));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  /* Opaque and a step up in luminance from the page behind it -- the same
     elevation rule as a card -- rather than a tint of the background it sits
     over. A translucent bar let the choice text underneath show through it;
     this cannot. */
  background: var(--surface-2);
  border-top: 1px solid var(--line-strong);
}

/* --- empty --------------------------------------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 52px 0 24px;
  text-align: center;
}
.empty-title { font-size: 1.5rem; letter-spacing: -0.02em; }
.liveness { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; color: var(--text-3); font-size: 0.875rem; }
.liveness li { display: inline-flex; align-items: center; gap: 8px; }

.synced { color: var(--text-3); font-size: 0.8125rem; text-align: center; }

/* --- detail -------------------------------------------------------------- */

.detail { display: flex; flex-direction: column; gap: 16px; }
.crumb { font-size: 0.875rem; }
.detail-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.8125rem; color: var(--text-2); }
.detail-title { font-size: 1.375rem; line-height: 1.28; }
.page-h { font-size: 1.375rem; }

.state-line { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 580;
}
.pill-open { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.pill-resolved { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.pill-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }

.detail-cols { display: flex; flex-direction: column; gap: 16px; }
.detail-main, .detail-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--pad);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.block-h { font-size: 0.8125rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); font-weight: 640; }
.block-lead, .block-note { font-size: 0.875rem; color: var(--text-3); }
.block-actions { display: flex; gap: 8px; }

.question { font-size: 1.0625rem; line-height: 1.5; white-space: pre-wrap; }

.choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.choice { padding: 11px; border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--line); }
.choice.is-destructive { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.choice-label { font-weight: 620; }
.choice-desc { font-size: 0.9375rem; color: var(--text-2); margin-top: 3px; }
.choice-effect { font-size: 0.9375rem; color: var(--text-2); margin-top: 5px; }
.arrow { color: var(--text-3); }

.tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  font-size: 0.6875rem;
  font-weight: 620;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-3);
  vertical-align: 2px;
}
.tag-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

.kv { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; }
.kv > div { display: flex; gap: 10px; }
.kv dt { flex: none; width: 7.5rem; color: var(--text-3); }
.kv dd { margin: 0; color: var(--text-2); min-width: 0; }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; }
.timeline-at { color: var(--text-3); font-variant-numeric: tabular-nums; }
.timeline-what { color: var(--text-2); }

/* --- evidence ------------------------------------------------------------ */

.artifact { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-3); }
.artifact + .artifact { margin-top: 8px; }
.artifact > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--tap); padding: 0 11px; cursor: pointer; }
.artifact-label { font-weight: 600; }
.artifact-meta { color: var(--text-3); font-size: 0.8125rem; }
.artifact > .chips, .artifact > p { padding: 0 11px; }
.artifact > .chips { padding-bottom: 8px; }
.artifact-origin { font-size: 0.8125rem; color: var(--text-3); padding-bottom: 9px; }
.artifact-actions { padding: 0 11px 11px; }

pre.diff, pre.plain {
  margin: 0;
  padding: 11px;
  overflow-x: auto;
  background: var(--surface-1);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  line-height: 1.5;
  tab-size: 2;
}
pre.diff .dl { display: block; padding: 0 4px; white-space: pre; }
pre.diff .add { background: var(--add-bg); color: var(--add); }
pre.diff .del { background: var(--del-bg); color: var(--del); }
pre.diff .hunk { color: var(--accent); }
pre.diff .meta { color: var(--text-3); }
pre.plain code { white-space: pre; }

/* --- pairing and settings ------------------------------------------------ */

.pair { display: flex; flex-direction: column; gap: 14px; max-width: 22rem; margin: 8vh auto 0; width: 100%; }
.pair-h { font-size: 1.5rem; }
.pair-lead, .field-help { font-size: 0.9375rem; color: var(--text-2); }
.field-help { font-size: 0.8125rem; color: var(--text-3); }
.pair-form { display: flex; flex-direction: column; gap: 10px; }

.alert { padding: 11px; border-radius: var(--radius-sm); font-size: 0.9375rem; }
.alert-error { background: var(--danger-soft); color: var(--danger); }
.alert-warn { background: var(--warn-soft); color: var(--warn); }

.choice-set { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.choice-set legend { padding: 0 0 6px; font-size: 0.8125rem; color: var(--text-3); }
.radio { display: flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; }
.radio input { width: 20px; height: 20px; accent-color: var(--accent); }

/* --- wider screens ------------------------------------------------------- */

@media (min-width: 900px) {
  :root { --shell: 62rem; --pad: 16px; }
  .main { padding-top: 26px; gap: 26px; }
  .detail-cols { flex-direction: row; align-items: flex-start; }
  .detail-main { flex: 1 1 62%; }
  .detail-side { flex: 1 1 34%; position: sticky; top: 84px; }
  .fact dt { width: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); --text-2: var(--text); --text-3: var(--text-2); }
}