/* Dark is the base palette; light overrides it below. Every colour a rule needs
   is a token here, so a theme is a palette swap and never a second set of rules.
   theme.js resolves the OS preference into data-theme before first paint. */
:root {
  color-scheme: dark;

  --bg: #0b0c0f;
  --surface: #13151a;
  --raised: #191c23;
  --line: #24272f;
  --hairline: #1b1e25;

  --text: #e9ebf0;
  --dim: #99a1b1;
  --faint: #676e7d;

  --accent: #8ab4ff;
  --alert: #f2726d;
  --warn: #e3ab4d;
  --good: #4fd6a6;

  --halo: #1a1e28;
  --glass: rgba(11, 12, 15, .72);
  --glass-strong: rgba(11, 12, 15, .8);
  --on-accent: #0b0c0f;
  --shade: 0 0 0 0 transparent;

  --measure: 44rem;
  --wide: 64rem;
  /* Reading measure for running text inside the wide frame. Wider than --measure
     because a 44rem column stranded in a 64rem page reads as a layout mistake. */
  --read: 54rem;
  --radius: 12px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #ffffff;
  --surface: #f7f8fa;
  --raised: #eceff4;
  --line: #d3d8e0;
  --hairline: #e4e7ed;

  --text: #14161a;
  --dim: #515863;
  --faint: #79808d;

  /* Darkened from the dark-theme hues: the same colour that reads as an accent on
     near-black fails contrast on white. */
  --accent: #2560d4;
  --alert: #c8352e;
  --warn: #8a5d05;
  --good: #0a8259;

  --halo: #eaeff9;
  --glass: rgba(255, 255, 255, .78);
  --glass-strong: rgba(255, 255, 255, .86);
  --on-accent: #ffffff;
  /* Borders alone separate cards on dark; on white they need a little lift. */
  --shade: 0 1px 2px rgba(20, 22, 26, .05);
}

* { box-sizing: border-box; }

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

/* Both bars are sticky, so an anchor would otherwise land underneath them. */
[id] { scroll-margin-top: 124px; }

body {
  margin: 0;
  background: radial-gradient(1100px 520px at 50% -240px, var(--halo) 0%, transparent 72%) var(--bg);
  color: var(--text);
  font: 15.5px/1.65 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent); }
a:hover { text-decoration-color: currentColor; }

code {
  background: var(--raised);
  border: 1px solid var(--hairline);
  padding: 0 5px;
  border-radius: 5px;
  font-size: .86em;
}

.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--dim); }
.faint { color: var(--faint); }
.alert { color: var(--alert); }
.warn { color: var(--warn); }

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

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 28px;
  height: 56px;
  background: var(--glass);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.brand {
  color: var(--text);
  font-weight: 620;
  font-size: 14.5px;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--good) 18%, transparent);
  vertical-align: 1px;
}

.top nav { display: flex; gap: 4px; margin-right: auto; }
.top nav a {
  color: var(--dim);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 11px;
  border-radius: 7px;
}
.top nav a:hover { color: var(--text); background: var(--surface); }
.top nav a.here { color: var(--text); background: var(--raised); }

.session { display: flex; align-items: center; gap: 14px; margin: 0; }
.identity { color: var(--faint); font-size: 13px; }

main { max-width: var(--measure); margin: 0 auto; padding: 44px 28px 96px; }
main.wide { max-width: var(--wide); }

/* ------------------------------------------------------------ typography */

h1 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -.022em;
  margin: 0 0 10px;
  font-weight: 640;
}

h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
  font-weight: 600;
  margin: 52px 0 18px;
}

h3 { font-size: 15.5px; margin: 0; font-weight: 600; letter-spacing: -.006em; }

/* The headline is a sentence, not a title, so it needs a reading size. */
h1.story {
  font-size: 21px;
  line-height: 1.42;
  letter-spacing: -.014em;
  font-weight: 600;
  margin: 0 0 4px;
  text-wrap: pretty;
}

.lead {
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: -.012em;
  color: var(--text);
  margin: 0 0 4px;
  text-wrap: pretty;
}

.crumb { margin: 0 0 26px; font-size: 13.5px; }
.crumb a { text-decoration: none; color: var(--dim); }
.crumb a:hover { color: var(--text); }

.sub { color: var(--dim); font-size: 14px; margin: 10px 0 0; }

/* Every page shares one frame width so the chrome does not jump between tabs.
   Rows and cards use all of it; running text stops at a reading measure, because
   a 60rem line of 15.5px body copy is not readable. Display type is exempt - it
   is large enough to carry the full width. */
.lead,
.sub,
.sowhat,
.themes li,
.todo .why,
.entry .headline,
.finding .more p,
.prose p,
.prose li { max-width: var(--read); }

/* ------------------------------------------------------------------ bits */

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  flex: none;
}
.dot.failing { background: var(--alert); }
.dot.unverified, .dot.never-fetched { background: var(--warn); }

.tag {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 550;
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 560;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--raised);
  color: var(--dim);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.chip.now { color: var(--alert); border-color: color-mix(in oklab, var(--alert) 34%, transparent); }
.chip.this_quarter { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 30%, transparent); }
.chip.gap { color: var(--alert); border-color: color-mix(in oklab, var(--alert) 34%, transparent); }
.chip.partial { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 30%, transparent); }
.chip.covered { color: var(--good); border-color: color-mix(in oklab, var(--good) 30%, transparent); }
.chip.again { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 30%, transparent); }

.button {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
}
.button:hover { filter: brightness(1.07); }

.link {
  background: none;
  border: 0;
  color: var(--dim);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}
.link:hover { color: var(--text); }

/* Sits right of the tabs on an app page and right of the wordmark on the login
   page, which is what the two auto margins between them resolve to. */
.theme {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  flex: none;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--dim);
  cursor: pointer;
}
.theme:hover { color: var(--text); background: var(--surface); border-color: var(--hairline); }
.theme svg { width: 16px; height: 16px; display: block; }
:root[data-theme="light"] .theme .moon { display: none; }
:root:not([data-theme="light"]) .theme .sun { display: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shade);
}

/* ----------------------------------------------------------- sign-in */

.gate { max-width: 25rem; margin: 8vh auto 0; }
.gate h1 { font-size: 24px; }
.signin { display: flex; gap: 9px; margin-top: 22px; }
.signin input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 13px;
  color: var(--text);
  font-size: 14px;
}
.signin input:focus { outline: 2px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset: 1px; }

/* -------------------------------------------------------- report index */

.stack { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 10px; }

.entry {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shade);
  transition: border-color .13s ease, background .13s ease;
}
.entry:hover { border-color: color-mix(in oklab, var(--accent) 45%, transparent); background: var(--raised); }
.entry time { font-size: 12.5px; color: var(--faint); letter-spacing: .02em; }
.entry .headline {
  margin: 7px 0 0;
  font-size: 16.5px;
  line-height: 1.45;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.entry .tally { margin: 12px 0 0; display: flex; gap: 16px; font-size: 12.5px; color: var(--faint); }
.entry .tally b { color: var(--dim); font-weight: 600; }

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

.jump {
  position: sticky;
  top: 56px;
  z-index: 10;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  margin: 30px -28px 0;
  padding: 13px 28px;
  background: var(--glass-strong);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  scrollbar-width: none;
}
.jump::-webkit-scrollbar { display: none; }
.jump a {
  color: var(--dim);
  text-decoration: none;
  font-size: 12.5px;
  white-space: nowrap;
  letter-spacing: .01em;
}
.jump a:hover { color: var(--text); }
.jump a b { color: var(--faint); font-weight: 600; margin-left: 4px; }
.jump + h2 { margin-top: 34px; }

.themes { margin: 0; padding: 0; list-style: none; }
.themes li {
  padding: 15px 0;
  border-top: 1px solid var(--hairline);
  text-wrap: pretty;
}
.themes li:first-child { border-top: 0; padding-top: 0; }

.todo { margin: 0; padding: 0; list-style: none; }
.todo li { padding: 16px 0; border-top: 1px solid var(--hairline); }
.todo li:first-child { border-top: 0; padding-top: 0; }
.todo .what { display: flex; gap: 10px; align-items: baseline; }
.todo .what strong { font-weight: 600; letter-spacing: -.006em; text-wrap: pretty; }
.todo .why { margin: 6px 0 0 0; color: var(--dim); font-size: 14px; text-wrap: pretty; }

/* findings: the summary is the whole story, the body is on demand */

.finding {
  border-top: 1px solid var(--hairline);
  padding-left: 14px;
  border-left: 2px solid transparent;
}
.finding:first-of-type { border-top: 0; }
.finding.we_lack { border-left-color: var(--alert); }
.finding.we_partially_have { border-left-color: var(--warn); }
.finding.we_have { border-left-color: color-mix(in oklab, var(--good) 55%, transparent); }

.finding > summary {
  cursor: pointer;
  padding: 17px 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.finding > summary::-webkit-details-marker { display: none; }
.finding > summary:hover .who-what { color: var(--accent); }

/* Grid, not a wrapping flex row: a long title must not push the chip and the
   caret onto a line of their own. */
.who-what { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: start; }
.who-what .line { text-wrap: pretty; }
.who-what .who { color: var(--dim); font-size: 13px; font-weight: 600; letter-spacing: .01em; margin-right: 7px; }
.who-what .what { font-weight: 550; letter-spacing: -.008em; }

.edge { display: inline-flex; align-items: center; gap: 10px; padding-top: 3px; }

.caret {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--faint);
  border-bottom: 1.6px solid var(--faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s ease, border-color .15s ease;
}
summary:hover .caret { border-color: var(--accent); }
details[open] > summary .caret { transform: rotate(225deg) translateY(-2px); }

.sowhat { color: var(--dim); font-size: 14.5px; margin: 0; text-wrap: pretty; }

.finding .more {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 14.5px;
}
.finding .more p { margin: 0 0 10px; text-wrap: pretty; }
.finding .more p:last-child { margin-bottom: 0; }
.finding .more .label { color: var(--faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: 3px; }
.finding .meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 12.5px; color: var(--faint); }
/* Sits next to the link it qualifies, so the gap between them is the smaller one. */
.finding .meta .hint { margin-left: -6px; font-style: italic; }

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

/* ------------------------------------------------------------ discovery */

.finds { margin: 0; padding: 0; list-style: none; }
.finds li { padding: 17px 0; border-top: 1px solid var(--hairline); }
.finds li:first-child { border-top: 0; padding-top: 0; }
.finds .head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.finds p { margin: 6px 0 0; color: var(--dim); font-size: 14.5px; text-wrap: pretty; }
.finds .meta { margin-top: 8px; font-size: 12.5px; color: var(--faint); }

/* ---------------------------------------------------------- competitors */

.summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--dim);
}
.summary-row .num { color: var(--text); font-weight: 600; }

.filter { margin-left: auto; }
.filter input { position: absolute; opacity: 0; pointer-events: none; }
.filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  user-select: none;
}
.filter label:hover { color: var(--text); }
.filter input:checked + label { color: var(--text); border-color: color-mix(in oklab, var(--alert) 50%, transparent); background: var(--surface); }
.filter input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

body:has(.filter input:checked) .row:not(.attention) { display: none; }
body:has(.filter input:checked) .tier:not(:has(.attention)) { display: none; }
/* The heading count is the unfiltered total, so it lies while the filter is on. */
body:has(.filter input:checked) .tier .count { display: none; }

.tier { margin-top: 46px; }
.tier > h2 { margin: 0 0 6px; }
.tier > .caption { color: var(--faint); font-size: 13px; margin: 0 0 10px; }

.rows { margin: 0; padding: 0; list-style: none; }

.row { border-top: 1px solid var(--hairline); }
.row > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 4px;
}
.row > summary::-webkit-details-marker { display: none; }
.row > summary:hover { background: var(--surface); }
.row > summary:hover .name { color: var(--accent); }
.row .name { font-weight: 550; letter-spacing: -.006em; }
.row .health { display: flex; gap: 5px; margin-left: auto; flex: none; }
.row .counts { color: var(--faint); font-size: 12.5px; white-space: nowrap; flex: none; min-width: 5.5rem; text-align: right; }
.row .caret { flex: none; margin-right: 6px; }
.row[open] > summary { background: var(--surface); }

.row .detail { padding: 4px 4px 22px 4px; }
.row .note { color: var(--dim); font-size: 14px; margin: 0 0 14px; max-width: var(--measure); text-wrap: pretty; }

.srcs { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.srcs li {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
}
.srcs li:first-child { border-top: 0; }
.srcs a { overflow-wrap: anywhere; }
.srcs .tag { min-width: 5rem; }

/* Indented past the status dot so the label lines up with the source rows. */
.row .home { display: flex; gap: 12px; align-items: center; margin: 10px 0 0; padding-left: 19px; font-size: 13.5px; }
.row .home .tag { min-width: 5rem; }

/* ------------------------------------------------------------------ docs */

.prose { margin-top: 34px; }
.prose p { color: var(--dim); text-wrap: pretty; margin: 0 0 14px; }
.prose ul, .prose ol { color: var(--dim); margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 9px; text-wrap: pretty; }
.prose strong { color: var(--text); font-weight: 600; }
.prose .chip { vertical-align: baseline; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.facts li {
  flex: 1 1 8rem;
  margin: 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: var(--shade);
}
.facts b { display: block; font-size: 25px; font-weight: 640; letter-spacing: -.02em; }
.facts span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }

/* Numbered rather than bulleted, because the order is the explanation. */
.steps { counter-reset: step; list-style: none; padding-left: 0; }
.steps li { counter-increment: step; position: relative; padding-left: 34px; margin-bottom: 14px; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--raised);
  border: 1px solid var(--hairline);
  color: var(--faint);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
}

pre {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; font-size: 13px; line-height: 1.7; color: var(--text); }

/* ------------------------------------------------------------ diagnostics */

.fold {
  margin-top: 52px;
  border-top: 1px solid var(--hairline);
}
.fold > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
  font-weight: 600;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { color: var(--text); }
.fold[open] > summary { color: var(--dim); }
.fold .body { padding-bottom: 28px; font-size: 14px; color: var(--dim); }
.fold ul { margin: 0; padding-left: 18px; }
.fold li { margin-bottom: 5px; text-wrap: pretty; }

@media (max-width: 720px) {
  .top { gap: 8px; padding: 0 16px; }
  /* Three tabs plus the wordmark overflow a phone, and the tabs are the identity
     here anyway. Only dropped where a nav exists to replace it. */
  .top:has(nav) .brand { display: none; }
  .top nav { gap: 0; }
  .top nav a { padding: 6px 8px; }
  .identity { display: none; }
  .link { white-space: nowrap; }
  main { padding: 30px 16px 72px; }
  h1 { font-size: 25px; }
  h1.story { font-size: 19px; }
  .lead { font-size: 17px; }
  /* The bar scrolls with the scrollbar hidden, so the fade is the only hint. */
  .jump {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .row .counts { display: none; }
}