/* =========================================================================
   You Compete Me - dashboard styling

   Hand-written rather than pulled from a framework: the whole page is under
   20 KB over the wire, which matters for a tool people open on a phone between
   meetings to find out what a competitor just did.
   ========================================================================= */

:root {
  --ink: #12151c;
  --ink-soft: #4a5260;
  --ink-faint: #767f8f;
  --paper: #f6f7f9;
  --card: #ffffff;
  --line: #e3e6ec;
  --line-soft: #eef0f4;

  --accent: #1d4ed8;
  --accent-soft: #eaefff;

  --critical: #b3261e;
  --critical-soft: #fdecea;
  --high: #b45309;
  --high-soft: #fdf3e3;
  --moderate: #0f766e;
  --moderate-soft: #e6f5f3;
  --low: #475569;
  --low-soft: #eef1f5;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(18, 21, 28, .06), 0 4px 12px rgba(18, 21, 28, .04);

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

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eaef;
    --ink-soft: #a7afbd;
    --ink-faint: #828b9b;
    --paper: #0f1217;
    --card: #171b22;
    --line: #272d38;
    --line-soft: #1f242d;
    --accent: #7ea2ff;
    --accent-soft: #1b2440;
    --critical-soft: #2d1715;
    --high-soft: #2b2112;
    --moderate-soft: #112623;
    --low-soft: #1c212a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

/* The `hidden` attribute is only a UA `display: none`, so any author rule that
   sets display - `.stack { display: grid }`, `.view`, `.auth` - silently wins
   and the element stays on screen. Everything here toggles visibility with
   `hidden`, so it is made to actually mean it. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: .5rem .85rem;
  transition: background .12s ease, border-color .12s ease;
}

button:hover { border-color: var(--ink-faint); }
button:disabled { opacity: .55; cursor: default; }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

button.primary:hover { filter: brightness(1.07); }

button.ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
button.ghost:hover { border-color: var(--line); }

input, select, textarea {
  font: inherit;
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
}

input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

textarea { resize: vertical; font-family: var(--font); }

label { display: block; font-weight: 600; font-size: .9rem; }
label > input, label > select, label > textarea { margin-top: .3rem; font-weight: 400; }
label small { display: block; font-weight: 400; color: var(--ink-faint); margin-top: .25rem; }
label small.important { color: var(--high); }

.noscript {
  margin: 4rem auto;
  max-width: 34rem;
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ------------------------------------------------------------------ brand */

.brand { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.brand.small { font-size: 1.05rem; white-space: nowrap; }
.brand-dot { color: var(--accent); }
.brand-line { color: var(--ink-soft); margin: .35rem 0 1.5rem; }

/* ------------------------------------------------------------------ auth */

.auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }

.auth-card {
  width: 100%;
  max-width: 24rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
}

.tabs { display: flex; gap: .25rem; margin-bottom: 1.25rem; }
.tab { flex: 1; border-color: transparent; color: var(--ink-soft); font-size: .9rem; }
.tab.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.stack { display: grid; gap: .9rem; }
.stack-lg { display: grid; gap: 1rem; }

.error {
  margin: 1rem 0 0;
  padding: .6rem .75rem;
  background: var(--critical-soft);
  color: var(--critical);
  border-radius: var(--radius-sm);
  font-size: .9rem;
}

/* ------------------------------------------------------------------ shell */

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1.25rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}

.nav { display: flex; gap: .15rem; flex: 1; flex-wrap: wrap; }

.nav-item {
  border-color: transparent;
  background: transparent;
  color: var(--ink-soft);
  font-size: .9rem;
  padding: .4rem .7rem;
}

.nav-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.topbar-right { display: flex; align-items: center; gap: .6rem; }
.tenant { font-weight: 600; font-size: .9rem; }

.badge {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

#main { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; }

.section-head {
  font-size: 1.05rem;
  margin: 2.25rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}

.section-head:first-child { margin-top: 0; }

.section-head small {
  display: block;
  font-size: .85rem;
  font-weight: 400;
  color: var(--ink-faint);
  margin-top: .2rem;
}

.lede { color: var(--ink-soft); max-width: 46rem; margin: 0 0 1.5rem; }
.hint { color: var(--ink-faint); font-size: .85rem; margin: .6rem 0 1.5rem; }

/* ------------------------------------------------------------------ metrics */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
  margin-bottom: .5rem;
}

.metric {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .8rem .9rem;
}

.metric-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.metric-label { font-size: .78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.metric-note { font-size: .8rem; color: var(--ink-soft); margin-top: .15rem; }

/* ------------------------------------------------------------------ callout */

.callout {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
}

.callout h3 { margin: 0 0 .4rem; font-size: 1rem; }
.callout ol { margin: .5rem 0 0; padding-left: 1.2rem; }
.callout li { margin-bottom: .3rem; }

/* ------------------------------------------------------------------ reading */

.reading {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--low);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.reading[data-threat="Critical"] { border-left-color: var(--critical); }
.reading[data-threat="High"] { border-left-color: var(--high); }
.reading[data-threat="Moderate"] { border-left-color: var(--moderate); }

.reading-head { padding: 1rem 1.15rem .75rem; }

.reading-meta {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: .5rem;
}

.chip {
  font-size: .72rem;
  font-weight: 600;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: var(--low-soft);
  color: var(--low);
  white-space: nowrap;
}

.chip[data-threat="Critical"] { background: var(--critical-soft); color: var(--critical); }
.chip[data-threat="High"] { background: var(--high-soft); color: var(--high); }
.chip[data-threat="Moderate"] { background: var(--moderate-soft); color: var(--moderate); }

.chip.quiet { background: transparent; color: var(--ink-faint); padding-left: 0; }

.reading h3 { margin: 0 0 .45rem; font-size: 1.1rem; line-height: 1.35; letter-spacing: -.01em; }
.reading p { margin: 0 0 .6rem; color: var(--ink-soft); }

.implication {
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: .6rem .75rem;
  color: var(--ink) !important;
  font-weight: 500;
}

/* The falsifier is the trust mechanism: it is shown, not hidden behind a
   disclosure, because a reader who can see what would disprove the call can
   calibrate how much to believe it. */
.falsifier {
  border-top: 1px dashed var(--line);
  padding: .65rem 1.15rem;
  font-size: .85rem;
  color: var(--ink-soft);
  background: var(--line-soft);
}

.falsifier strong { color: var(--ink); }

details.evidence { border-top: 1px solid var(--line); }
details.evidence > summary {
  padding: .6rem 1.15rem;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
details.evidence > summary:hover { color: var(--ink); }
details.evidence[open] > summary { border-bottom: 1px solid var(--line-soft); }

.evidence-item { padding: .7rem 1.15rem; border-bottom: 1px solid var(--line-soft); font-size: .88rem; }
.evidence-item:last-child { border-bottom: 0; }
.evidence-item[data-role="contradicts"] { background: var(--high-soft); }

blockquote {
  margin: .4rem 0;
  padding-left: .7rem;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
  font-style: italic;
}

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

.actions-block { border-top: 1px solid var(--line); background: var(--line-soft); }
.actions-block > h4 {
  margin: 0;
  padding: .6rem 1.15rem .2rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
}

.action {
  padding: .75rem 1.15rem;
  border-top: 1px solid var(--line-soft);
  background: var(--card);
}

.action-head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.action-title { font-weight: 600; }
.action-why { font-size: .88rem; color: var(--ink-soft); margin: .3rem 0 .5rem; }
.action-controls { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.action-controls button { font-size: .82rem; padding: .3rem .6rem; }

/* The drafted artefact - the script, the brief, the rewritten clause. This is
   the thing that makes an action get done rather than filed. */
.artifact {
  margin-top: .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.artifact > summary {
  padding: .45rem .65rem;
  background: var(--line-soft);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
}

.artifact pre {
  margin: 0;
  padding: .75rem;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.5;
  max-height: 24rem;
  overflow: auto;
}

/* ------------------------------------------------------------------ cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .75rem;
}

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

.card h4 { margin: 0 0 .35rem; font-size: .98rem; }
.card p { margin: 0 0 .5rem; font-size: .88rem; color: var(--ink-soft); }

.spark { display: flex; gap: 2px; align-items: flex-end; height: 2rem; margin: .5rem 0; }
.spark span {
  flex: 1;
  background: var(--accent);
  opacity: .35;
  border-radius: 1px;
  min-height: 2px;
}
.spark span.hot { opacity: 1; background: var(--critical); }

.bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin: .4rem 0; }
.bar > i { display: block; height: 100%; background: var(--accent); }
.bar.own > i { background: var(--moderate); }

/* ------------------------------------------------------------------ misc */

.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.filters > * { flex: 0 1 14rem; }
.check { display: flex; align-items: center; gap: .4rem; font-weight: 400; font-size: .9rem; }
.check input { width: auto; }

.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .5rem; }
.inline-form > input, .inline-form > select { flex: 0 1 13rem; }

.row {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  justify-content: space-between;
  padding: .7rem .9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}

.row-main { flex: 1 1 18rem; min-width: 0; }
.row-title { font-weight: 600; }
.row-sub { font-size: .85rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.row-side { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line-soft); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--ink-faint);
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.pager { display: flex; gap: .5rem; justify-content: center; margin-top: 1.25rem; align-items: center; }

.toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 50;
  max-width: 90vw;
}

.toast[data-kind="error"] { background: var(--critical); color: #fff; }

.spinner {
  display: inline-block;
  width: .9rem;
  height: .9rem;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -.1rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  * { transition: none !important; }
}

@media (max-width: 40rem) {
  .topbar { gap: .5rem; padding: .5rem .75rem; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  #main { padding: 1rem .75rem 4rem; }
  .metric-value { font-size: 1.25rem; }
}

/* ============================================================================
   Later additions. Everything below either overrides something above or adds a
   component that did not exist, and is kept in one block so the original file
   still reads as a whole.

   The brief was blunt and correct: the application looked like a text document.
   Nothing here adds a dependency - the icons are inline SVG in the markup and
   the colour is the same palette the public site uses, so the two halves of the
   product stop looking like different products.
   ========================================================================= */

:root {
  --accent: #3b4ef0;
  --accent-deep: #2234d4;
  --accent-soft: #eceefe;
  --warm: #f0803b;
  --warm-soft: #fdf0e7;
  --shadow-card: 0 1px 2px rgba(11, 14, 20, .04), 0 6px 18px rgba(11, 14, 20, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #7b8bff;
    --accent-deep: #94a1ff;
    --accent-soft: #1a2142;
    --warm: #ffa366;
    --warm-soft: #2a1d14;
    --shadow-card: none;
  }
}

/* ---------------------------------------------------------------- the shell */

.topbar {
  padding: .55rem 1.25rem;
  backdrop-filter: saturate(180%) blur(10px);
  background: color-mix(in srgb, var(--card) 88%, transparent);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.brand-mark {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 7px;
  background: linear-gradient(140deg, var(--accent), var(--warm));
  display: grid;
  place-items: center;
  color: #fff;
}
.brand-mark svg { width: 14px; height: 14px; display: block; }

.nav-item {
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.nav-item:hover { background: var(--paper); color: var(--ink); }
.nav-item.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
}

button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(34, 52, 212, .25), 0 4px 12px rgba(34, 52, 212, .18);
}
button.sm { font-size: .82rem; padding: .35rem .8rem; border-radius: 999px; white-space: nowrap; }

/* ------------------------------------------------------------------ metrics */

.metrics { gap: .85rem; margin-bottom: 1.4rem; }

.metric {
  position: relative;
  padding: 1rem 1.05rem;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* A hairline of colour along the top, so a row of numbers reads as a set of
   cards rather than four boxes of text. */
.metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--warm));
  opacity: .85;
}
.metric-value { font-size: 1.85rem; letter-spacing: -.03em; line-height: 1.1; }
.metric-label { margin-top: .3rem; font-size: .72rem; }

/* ----------------------------------------------------------- field guidance */

label small.hint {
  display: block;
  font-weight: 400;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: .2rem 0 .45rem;
}
label small.hint em { color: var(--ink-faint); font-style: normal; }

label > small.hint + input,
label > small.hint + textarea,
label > small.hint + select { margin-top: 0; }

/* ------------------------------------------------------- the setup checklist */

.setup {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.35rem 1.1rem;
  margin-bottom: 1.4rem;
  overflow: hidden;
}
.setup::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--warm));
}

.setup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.setup-head h3 { margin: 0 0 .2rem; font-size: 1.1rem; letter-spacing: -.015em; }
.setup-head p { margin: 0; font-size: .88rem; color: var(--ink-soft); max-width: 56ch; }

.setup-progress { display: flex; align-items: center; gap: .6rem; }
.setup-bar {
  display: block;
  width: 110px;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.setup-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--warm));
  transition: width .4s ease;
}
.setup-progress b { font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }

.step {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: .85rem;
  align-items: start;
  padding: .75rem 0;
  border-top: 1px solid var(--line-soft, var(--line));
}
.step:first-child { border-top: 0; padding-top: 0; }

.step-mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 700;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-faint);
}
.step-mark svg { width: 14px; height: 14px; }

.step.is-done .step-mark { background: var(--moderate-soft); border-color: transparent; color: var(--moderate); }
.step.is-todo .step-mark { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.step.is-waiting .step-mark { background: var(--warm-soft); border-color: transparent; color: var(--warm); }

.step-body h4 { margin: 0 0 .15rem; font-size: .95rem; }
.step-body p { margin: 0; font-size: .86rem; color: var(--ink-soft); }
.step.is-done .step-body h4 { color: var(--ink-soft); }
.step.is-done .step-body p { display: none; }

.suggestions { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.suggestions h4 {
  margin: 0 0 .6rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-faint);
}
.suggestions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.suggestions li { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.suggestions strong { font-size: .9rem; }
.suggestions p { margin: .1rem 0 0; font-size: .85rem; color: var(--ink-soft); }

@media (max-width: 620px) {
  .step { grid-template-columns: 26px 1fr; }
  .step > button { grid-column: 2; justify-self: start; margin-top: .4rem; }
  .suggestions li { flex-direction: column; align-items: flex-start; }
}

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

/* An empty screen is the normal state for the first few days, so it should read
   as "nothing yet, here is why" rather than as a failure. */
.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.5rem 1.4rem;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.6;
  text-align: center;
}

/* ------------------------------------------------------------------- cards */

.card { box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(11, 14, 20, .05), 0 10px 24px rgba(11, 14, 20, .08); }

.section-head { letter-spacing: -.02em; }

/* --------------------------------------------- a competitor doing nothing yet */

/* Until discovery has found pages there is nothing to detect a change in, so the
   card says so and offers one obvious action rather than three outline buttons
   that read as labels. */
.reading.is-idle { border-color: color-mix(in srgb, var(--high) 35%, var(--line)); }

.idle-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: .9rem 1.15rem;
  background: var(--high-soft);
  border-top: 1px solid color-mix(in srgb, var(--high) 20%, transparent);
}
.idle-prompt strong { font-size: .92rem; color: var(--ink); }
.idle-prompt p { margin: .2rem 0 0; font-size: .85rem; color: var(--ink-soft); max-width: 60ch; }
.idle-prompt button { flex: none; }

.hint {
  font-size: .86rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: .4rem 0 1rem;
}

/* ------------------------------------------------------------------ activity */

.activity-summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.activity-summary button { margin-left: auto; }
.chip.is-bad { background: var(--critical-soft); color: var(--critical); }

.activity {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.activity-row {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: .9rem;
  align-items: baseline;
  padding: .7rem 1rem;
  border-top: 1px solid var(--line-soft, var(--line));
  font-size: .88rem;
}
.activity-row:first-child { border-top: 0; }

.activity-state {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 999px;
  padding: .15rem .5rem;
  text-align: center;
  background: var(--low-soft);
  color: var(--low);
}
.activity-row.is-running .activity-state { background: var(--accent-soft); color: var(--accent); }
.activity-row.is-queued .activity-state { background: var(--line-soft, var(--line)); color: var(--ink-faint); }
.activity-row.is-succeeded .activity-state { background: var(--moderate-soft); color: var(--moderate); }
.activity-row.is-retrying .activity-state { background: var(--high-soft); color: var(--high); }
.activity-row.is-failed .activity-state,
.activity-row.is-deadlettered .activity-state { background: var(--critical-soft); color: var(--critical); }

.activity-row strong { font-weight: 600; font-size: .9rem; }
.activity-error { margin: .2rem 0 0; font-size: .82rem; color: var(--critical); }
.activity-note { margin: .2rem 0 0; font-size: .82rem; color: var(--ink-soft); }
.activity-when { font-size: .8rem; color: var(--ink-faint); white-space: nowrap; }

@media (max-width: 620px) {
  .activity-row { grid-template-columns: 86px 1fr; }
  .activity-when { grid-column: 2; }
}

.idle-prompt.is-thin { background: var(--accent-soft); border-top-color: color-mix(in srgb, var(--accent) 20%, transparent); }

/* ----------------------------------------------------------- page headings */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.page-head h2 { margin: 0 0 .25rem; font-size: 1.3rem; letter-spacing: -.02em; }
.page-head p { margin: 0; font-size: .9rem; color: var(--ink-soft); max-width: 62ch; }
.page-head button { flex: none; }

.panel-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.5rem;
}
.panel-card .hint { margin: .75rem 0 0; }
.panel-card .inline-form { margin: 0; }

/* -------------------------------------------------------- suggested rivals */

/* Named, with the evidence behind each. A count would be a tease, and the whole
   point of showing the field is that somebody spots a rival they had not thought
   about - which is also the most persuasive thing on the screen. */
.suggested-grid {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
}

.suggested {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
}
.suggested:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }

.suggested-main { min-width: 0; }
.suggested-head { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.suggested-head strong { font-size: .95rem; }
.suggested-domain { margin: .15rem 0 0; font-size: .82rem; color: var(--ink-faint); }
.suggested-why { margin: .35rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.suggested button { flex: none; }