/* The Clave operator console — "Control room".

   One stylesheet, no build step, no framework. It is a cousin of the
   owner app's "Soft workspace" rather than a copy: the same plum, the
   same face, a colder ground and much tighter spacing. The two are
   deliberately told apart at a glance, because one of them is showing
   you somebody else's data.

   Two rules govern everything here, and both were paid for in
   production next door:

   - A missing CSP directive fails silently and the page still returns
     200. `style-src 'self'` covers inline style attributes as well as
     stylesheets, so no template may carry one: every bar's geometry is
     an SVG presentation attribute, computed in Go, and only colour is
     a class.
   - A class a template names and no rule matches renders as nothing,
     and nothing catches it at runtime. A test reads the templates and
     holds that line.

   Only the latin subset of Outfit is vendored, so a character outside
   it falls back mid-sentence. Every glyph here is text or inline SVG
   for that reason — there is no icon font. */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light dark;

  --page: #f4f5f7;
  --panel: #ffffff;
  --rail: #1d1f26;
  --rail-ink: #e8e6ea;
  --rail-muted: #9a96a4;
  --line: #e2e3e8;
  --line-strong: #cbccd4;

  --ink: #1f2128;
  --muted: #5f636e;
  --faint: #8e93a0;

  --accent: #6b2d5c;
  --accent-tint: #f2e6ef;
  --on-accent: #fffefc;

  --ok: #24693f;
  --ok-tint: #e2f0e7;
  --wait: #8a5d0c;
  --wait-tint: #f7ebd4;
  --bad: #b02f26;
  --bad-tint: #f9e2e0;

  --text: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --shadow: 0 1px 2px rgba(31, 33, 40, .05);
  --radius: 10px;
}

/* The same roles, not a second palette. */
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0f1115;
    --panel: #181b21;
    --rail: #0a0c0f;
    --rail-ink: #e8e6ea;
    --rail-muted: #7f8492;
    --line: #262a33;
    --line-strong: #363b47;

    --ink: #eceef3;
    --muted: #a3a9b6;
    --faint: #737a89;

    --accent: #d29ac4;
    --accent-tint: #2e2130;
    --on-accent: #17131a;

    --ok: #6fc78c;
    --ok-tint: #14301f;
    --wait: #d9ab55;
    --wait-tint: #332812;
    --bad: #ec8479;
    --bad-tint: #351916;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

/* ----------------------------------------------------------------- frame */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

.console { display: flex; min-height: 100vh; }

.rail {
  flex: 0 0 216px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px 16px;
  background: var(--rail);
  color: var(--rail-ink);
  position: sticky;
  top: 0;
  height: 100vh;
}

.main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 28px 32px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.logo {
  font-family: var(--text);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.02em;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.logo-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.logo-tag {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rail-muted);
}

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--rail-muted);
  text-decoration: none;
  font-size: 14px;
}

.nav-item:hover { color: var(--rail-ink); background: rgba(255, 255, 255, .05); }
.nav-item.is-here { color: var(--rail-ink); background: rgba(255, 255, 255, .1); font-weight: 500; }

.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }

.rail-deploy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 10px;
}

.rail-deploy-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--rail-ink);
  overflow-wrap: anywhere;
}

.rail-deploy-release {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--rail-muted);
}

.rail-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--rail-muted);
}

.rail-note code {
  font-family: var(--mono);
  font-size: 11px;
}

.rail-who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.rail-email {
  font-size: 12px;
  color: var(--rail-muted);
  overflow-wrap: anywhere;
}

.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--rail-muted);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
  /* A box a finger can hit: 12px text on a 17px line is well under the
     24px a touch target needs, and this is a control of its own rather
     than a word in a sentence. The words keep their size. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.linkish:hover { color: var(--rail-ink); }

/* The bare frame: sign-in and the dead ends. */
.bare {
  max-width: 460px;
  margin: 0 auto;
  padding: 48px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.bare .logo { color: var(--ink); }
.bare .logo-tag { color: var(--faint); }
.bare-main { display: block; }

/* ------------------------------------------------------------------ type */

.page-head { display: flex; flex-direction: column; gap: 6px; }

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.page-meta, .lede {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.lede { font-size: 15px; }

.crumb { margin: 0 0 2px; font-size: 13px; }

.sub-title {
  margin: 20px 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faint);
}

.fine { margin: 12px 0 0; font-size: 13px; color: var(--faint); }
.faint { color: var(--faint); }
.bad { color: var(--bad); }
.mono { font-family: var(--mono); font-size: .86em; }
.nowrap { white-space: nowrap; }

/* Nearly every link on this surface is a control standing on its own: an
   account's name in a row of the feed, a name in a cell of a table, the
   line under a panel that opens the whole list. So a link takes the 24px
   a touch target needs, which a line of 13 or 14px text leaves at 16 to
   20. The words keep their size and the box grows around them.
   
   `.in-text` is the exception, and this surface has one: a link among the
   words of a sentence. That one has to stay an inline box, so the
   sentence can break through it and the line keeps its own height. */
.link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.link.in-text { display: inline; min-height: 0; }

.link.quiet { color: inherit; text-decoration-color: var(--line-strong); }
.link.quiet:hover { color: var(--accent); }

.empty { margin: 0; color: var(--faint); font-size: 14px; }

.quote {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
  font-size: 14px;
}

/* ----------------------------------------------------------- cards, forms */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.card-narrow { display: flex; flex-direction: column; gap: 12px; }

.stack { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; }

.field { display: flex; flex-direction: column; gap: 4px; }

.field-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--faint);
}

.field-inline { flex: 1 1 160px; }

.input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.input-small { padding: 6px 9px; font-size: 13px; }

.button {
  align-self: flex-start;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.button:hover { filter: brightness(1.08); }
.button-small { padding: 6px 12px; font-size: 13px; }

.button-quiet {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line-strong);
}

.notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}

.notice-bad { background: var(--bad-tint); color: var(--bad); }

/* ----------------------------------------------------------------- tiles */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}

a.tile:hover { border-color: var(--accent); }

.tile-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faint);
}

.tile-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.tile-note { font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.panel-head { display: flex; flex-direction: column; gap: 2px; }

.panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.panel-meta { margin: 0; font-size: 12.5px; color: var(--faint); }
.panel-foot { margin: 0; font-size: 13px; }

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
}

/* ---------------------------------------------------------------- charts */

.sparks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.spark-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.spark-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

.spark-label { font-size: 13px; color: var(--muted); }

.spark-total {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The chart's height is fixed here and its width fills the card; the
   viewBox meets rather than stretches, so a bar keeps its shape at any
   card width. */
.spark {
  width: 100%;
  height: 40px;
  display: block;
  overflow: visible;
}

.spark-bar { fill: currentColor; }
/* Today is a part-finished day. Drawn hollow so a short last bar reads
   as "still counting" rather than as a fall. */
.spark-bar.is-today { fill-opacity: .45; }

.spark-accent { color: var(--accent); }
.spark-ok { color: var(--ok); }
.spark-wait { color: var(--wait); }
.spark-bad { color: var(--bad); }

.spark-foot { margin: 0; font-size: 11.5px; color: var(--faint); }

.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(60px, 2fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}

.bar-label { color: var(--muted); overflow-wrap: anywhere; }
.bar-track { display: block; min-width: 0; }

.bar-svg {
  width: 100%;
  height: 6px;
  display: block;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.bar-fill { fill: currentColor; }
.bar-accent { color: var(--accent); }
.bar-neutral { color: var(--line-strong); }
.bar-wait { color: var(--wait); }
.bar-bad { color: var(--bad); }

.bar-count { font-variant-numeric: tabular-nums; font-weight: 500; }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; margin: 0 -4px; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.table th, .table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-weight: 400;
}

.table thead th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom-color: var(--line-strong);
  white-space: nowrap;
}

.table tbody tr:hover { background: var(--accent-tint); }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-log td { font-size: 13px; }
.detail { max-width: 340px; overflow-wrap: anywhere; }
.is-dim { opacity: .55; }

.who { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.who:hover .who-name { color: var(--accent); }

.avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.who-text { display: flex; flex-direction: column; min-width: 0; }
.who-name { font-weight: 500; }
.who-email { font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }

.site-name { display: block; font-weight: 500; }
.site-name + .mono { display: block; font-size: 11.5px; }

.plan { text-transform: capitalize; }
.plan-note { display: block; font-size: 11.5px; color: var(--faint); }
.plan-big { margin: 0; font-size: 20px; font-weight: 600; text-transform: capitalize; }

/* ----------------------------------------------------------------- chips */

.chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--line);
  color: var(--muted);
}

.chip-quiet { background: var(--line); color: var(--muted); }
.chip-accent { background: var(--accent-tint); color: var(--accent); }
.chip-ok { background: var(--ok-tint); color: var(--ok); }
.chip-wait { background: var(--wait-tint); color: var(--wait); }
.chip-warn { background: var(--wait-tint); color: var(--wait); }
.chip-bad { background: var(--bad-tint); color: var(--bad); }
.chip-kind-bug { background: var(--bad-tint); color: var(--bad); }
.chip-kind-friction { background: var(--wait-tint); color: var(--wait); }
.chip-kind-idea { background: var(--accent-tint); color: var(--accent); }

/* ------------------------------------------------------------------ feed */

.feed, .list, .messages { list-style: none; margin: 0; padding: 0; }

.feed-row, .list-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.feed-row:last-child, .list-row:last-child { border-bottom: 0; }
.feed-row-tall { align-items: flex-start; }

/* What a row is about, beside the chip that names the action and the age
   on the right.
   
   It breaks anywhere, because what goes in here is the two kinds of text
   that have no break in them: a resource id and whatever an owner typed.
   `min-width: 0` lets the box shrink and then the id, which is one
   unbreakable word, drew straight over the age beside it — on the page an
   operator opens first, at any window under about 1100px. The rule was on
   the message alone, which is the half somebody had already met. */
.feed-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: anywhere;
}
.feed-when { flex: 0 0 auto; color: var(--faint); font-size: 12px; white-space: nowrap; }

.messages { display: flex; flex-direction: column; gap: 10px; }

.message {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.message-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.message-when { margin-left: auto; color: var(--faint); font-size: 12px; }
.message-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-context { margin: 0; font-size: 12px; overflow-wrap: anywhere; }

/* --------------------------------------------------------------- filters */

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 6px; }

.filter {
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.filter:hover { border-color: var(--accent); color: var(--accent); }
.filter.is-chosen { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.filters-form { gap: 10px; }

.pager { margin: 4px 0 0; }

/* ----------------------------------------------------------------- small */

@media (max-width: 720px) {
  .console { flex-direction: column; }

  .rail {
    flex: 0 0 auto;
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .nav { flex-direction: row; flex-wrap: wrap; }
  .rail-foot { margin: 0 0 0 auto; }
  .rail-note { display: none; }
  .rail-who { border: 0; padding: 0; }
  .main { padding: 20px 16px 48px; }
}