/* brockily — the palette carries over from the desktop apps so the two read as
   one product rather than a rewrite. */
:root {
  --bg: #0b0e14;
  --panel: #10141d;
  --panel-2: #141926;
  --line: #232a3a;
  --ink: #f1ede5;
  --muted: #8e97aa;
  /* Was #4c6fff, which measured 4.20:1 on --panel-2 and 4.41:1 on --panel —
     below the 4.5 WCAG AA needs for body text, and it is used for inline
     links inside panels. #5f80ff clears it on every background here. */
  --accent: #5f80ff;
  --refused: #ff6b5e;
  --partial: #f0b34a;
  --allowed: #3ecf8e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

main { max-width: 940px; margin: 0 auto; padding: 0 24px 96px; }

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

.top {
  max-width: 940px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.brand {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 19px;
  text-decoration: none;
}

.stages { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.stages a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
}
.stages a:hover { border-color: var(--accent); color: var(--ink); }
.stages a.on { color: var(--ink); border-color: var(--accent); background: #141b2e; }
.stages .num {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--line); color: var(--ink);
  display: grid; place-items: center; font-size: 11px;
}
.stages .arrow { color: var(--line); }

footer {
  max-width: 940px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

/* --- hero --------------------------------------------------------------- */

.hero { padding: 40px 0 32px; }
.hero h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  max-width: 20ch;
}
.hero h1 em { font-style: normal; color: var(--refused); }
.sub { color: var(--muted); max-width: 62ch; margin: 0; }

.stage-head { padding: 24px 0 28px; }
.stage-head h1 { font-size: 30px; letter-spacing: -0.02em; margin: 6px 0 10px; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}
.eyebrow a { color: var(--accent); text-decoration: none; }

/* --- the gate ----------------------------------------------------------- */

.gate {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  margin: 8px 0 40px;
}
.gate--refused { border-left-color: var(--refused); }
.gate--partial { border-left-color: var(--partial); }
.gate--allowed { border-left-color: var(--allowed); }

.gate-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.gate-head h2 { margin: 6px 0 0; font-size: 23px; letter-spacing: -0.01em; }

.stamp {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  padding: 7px 13px; border-radius: 6px; border: 1px solid;
  white-space: nowrap;
}
.stamp--refused { color: var(--refused); border-color: var(--refused); background: #2a1512; }
.stamp--partial { color: var(--partial); border-color: var(--partial); background: #2a2212; }
.stamp--allowed { color: var(--allowed); border-color: var(--allowed); background: #12281f; }

.reason { color: var(--muted); margin: 16px 0 0; max-width: 68ch; }
.reason.muted { opacity: 0.72; font-size: 15px; }

.scores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-top: 24px;
}
.score {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px;
}
.score .k { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted); }
.score .v { display: block; font-size: 26px; font-weight: 700; margin-top: 4px; }
.score .note { font-size: 12px; color: var(--muted); }
.bar { height: 4px; background: var(--line); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }

.actions { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.actions ul, .gaps { margin: 12px 0 0; padding-left: 20px; color: var(--muted); }
.actions li, .gaps li { margin-bottom: 8px; }
.actions strong, .gaps strong { color: var(--ink); }

.deep { margin: 24px 0 0; }
.deep a { color: var(--accent); text-decoration: none; font-size: 15px; }

/* --- explanation -------------------------------------------------------- */

.why { padding: 16px 0 8px; border-top: 1px solid var(--line); }
.why h3 { font-size: 20px; margin: 32px 0 22px; letter-spacing: -0.01em; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; }
.cols h4 { margin: 0 0 8px; font-size: 15px; }
.cols p { margin: 0; color: var(--muted); font-size: 15px; }
code {
  background: var(--panel-2); border: 1px solid var(--line);
  padding: 1px 5px; border-radius: 4px; font-size: 13px;
}

/* --- rows --------------------------------------------------------------- */

.rows { display: flex; flex-direction: column; gap: 10px; }
.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 12px; padding: 18px 20px; text-decoration: none;
}
a.row:hover { border-color: var(--accent); }
.row--refused { border-left-color: var(--refused); }
.row--partial { border-left-color: var(--partial); }
.row--allowed { border-left-color: var(--allowed); }
.row-main h3 { margin: 0 0 4px; font-size: 17px; }
.row-main p { margin: 0; color: var(--muted); font-size: 14px; max-width: 60ch; }
.row-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pill {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.pill--refused { color: var(--refused); border-color: var(--refused); }
.pill--partial { color: var(--partial); border-color: var(--partial); }
.pill--allowed { color: var(--allowed); border-color: var(--allowed); }
.mini { font-size: 12px; color: var(--muted); }

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

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px; margin-bottom: 20px;
}
.panel h3 { margin: 0 0 16px; font-size: 17px; }
.panel h4 { margin: 22px 0 6px; font-size: 14px; color: var(--muted); }
.count {
  font-size: 12px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px; margin-left: 8px;
}

.sources { list-style: none; margin: 0; padding: 0; }
.sources li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.sources li:first-child { border-top: 0; padding-top: 0; }
.cite { color: var(--accent); font-size: 13px; font-weight: 700; white-space: nowrap; }
.label { margin: 0 0 3px; font-size: 15px; }
.url { margin: 0; font-size: 13px; }
.url a { color: var(--muted); }
.excerpt { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

.dossier { margin: 0; }
.dossier dt {
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px;
  color: var(--muted); margin-top: 16px;
}
.dossier dt:first-child { margin-top: 0; }
.dossier dd { margin: 5px 0 0; }

.tally { display: flex; gap: 34px; margin-bottom: 26px; flex-wrap: wrap; }
.tally .v { font-size: 30px; font-weight: 700; display: block; }
.tally .k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }

.empty { color: var(--muted); }

/* The counterexample beneath the hero refusal: proof the gate discriminates
   rather than simply blocks. */
.counter { margin: -20px 0 44px; }
.counter .eyebrow { margin-bottom: 12px; }
.note-line { color: var(--muted); font-size: 14px; margin: 14px 0 0; }

/* Source quality, shown per source. It is recorded honestly even where a source
   is a vendor writing about its own category — see /scoring. */
.quality {
  font-size: 11px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 8px; margin-left: 8px; white-space: nowrap;
}
.explainer { margin: 18px 0 0; font-size: 14px; }
.explainer a { color: var(--accent); text-decoration: none; }

/* A citation should go somewhere. An inert [S1] asks the reader to trust the
   claim-to-source link, which is the one thing this product says you should not
   have to do. */
.cite-link { color: var(--accent); text-decoration: none; font-weight: 700; }
.cite-link:hover { text-decoration: underline; }
.claims { list-style: none; margin: 0; padding: 0; }
.claims li { padding: 14px 0; border-top: 1px solid var(--line); }
.claims li:first-child { border-top: 0; padding-top: 0; }
.claim { margin: 0 0 4px; }
.carrier { margin: 0; color: var(--muted); font-size: 14px; }


/* --- write actions ------------------------------------------------------- */
/* Added when the site stopped being a read-only demonstration: creating a
   venture, and ticking a task in the run queue. */

.cta-line { margin: 1.4rem 0 0; display: flex; align-items: center;
            gap: 0.9rem; flex-wrap: wrap; }

.cta {
  display: inline-block; padding: 0.7rem 1.3rem; border-radius: 8px;
  background: var(--ink); color: var(--bg); font-weight: 600;
  text-decoration: none; border: 1px solid var(--ink); cursor: pointer;
  font-size: 0.95rem; font-family: inherit;
}
.cta:hover { opacity: 0.86; }
.cta-note { font-size: 0.85rem; color: var(--muted); }

.venture-form { display: flex; flex-direction: column; gap: 1.1rem; }
.venture-form label { display: flex; flex-direction: column; gap: 0.35rem; }
.venture-form .k { font-size: 0.8rem; text-transform: uppercase;
                   letter-spacing: 0.06em; color: var(--muted); }
.venture-form .k em { font-style: normal; opacity: 0.7; text-transform: none;
                      letter-spacing: 0; }
.venture-form input, .venture-form textarea {
  width: 100%; padding: 0.65rem 0.75rem; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font: inherit; font-size: 0.95rem;
}
.venture-form textarea { resize: vertical; min-height: 4.5rem; }
.venture-form input:focus, .venture-form textarea:focus {
  outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink);
}
.venture-form .cta { align-self: flex-start; margin-top: 0.3rem; }

.task-form { display: inline; margin: 0; }
.task-btn {
  padding: 0.32rem 0.7rem; border-radius: 6px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font: inherit;
  font-size: 0.78rem; cursor: pointer;
}
.task-btn:hover { border-color: var(--ink); }
.task-btn--quiet { color: var(--muted); }

.rows--done { margin-top: 2rem; opacity: 0.75; }
.rows-head { font-size: 0.8rem; text-transform: uppercase;
             letter-spacing: 0.06em; color: var(--muted); margin: 0 0 0.6rem; }
.row--done .row-main h3 { text-decoration: line-through;
                          text-decoration-thickness: 1px; }

.mini--yours { border: 1px solid var(--line); border-radius: 4px;
               padding: 0.05rem 0.4rem; }
.sandbox-note { margin-top: 1.6rem; }

.reason--error { color: var(--refused); }
.excerpt--error { color: var(--refused); }

/* --- newsletter and footer ---------------------------------------------- */
.foot-links { margin-top: 0.5rem; font-size: 0.85rem; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--ink); }

.consent { flex-direction: row !important; align-items: flex-start; gap: 0.6rem !important; }
.consent input { width: auto; margin-top: 0.2rem; flex: 0 0 auto; }
.consent span { font-size: 0.9rem; color: var(--muted); line-height: 1.45; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; padding: 0.6rem 1rem;
              background: var(--ink); color: var(--bg); border-radius: 6px; }
.danger { background: transparent; border: 1px solid var(--line); color: var(--muted);
          border-radius: 6px; padding: 0.32rem 0.7rem; font: inherit;
          font-size: 0.78rem; cursor: pointer; }
.danger:hover { border-color: var(--refused); color: var(--refused); }
.band { font-size: 0.75rem; color: var(--muted); display: block; }
.quality--bad { color: var(--refused); }
a.task-btn { text-decoration: none; display: inline-block; }

/* --- accessibility ------------------------------------------------------- */
/* Inline links in prose carry an underline. Colour alone to distinguish a link
   fails WCAG 1.4.1, and these sit inside running text where there is no other
   cue that they are clickable. Navigation and card links keep their own
   treatment, because position and shape already say what they are. */
.reason a, .sub a, .explainer a, .eyebrow a, .deep a, .gaps a, .consent a,
.foot-links a, .cta-note a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Every interactive thing shows where the keyboard is. The browser default is
   suppressed by the dark palette on several of these. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}