/*
 * HigherSelf Systems - components
 * ===============================
 * Load AFTER tokens.css. Contains base element styles and every named
 * component. No JavaScript is required for anything here to render.
 * No colour media queries: dark mode is handled entirely by tokens.css.
 *
 * Class contract (what the build agent can rely on):
 *
 *   Base        body, h1-h4, p, a, small, hr, ol/ul inside .prose
 *   Layout      .container, .prose, .section
 *   Labels      .eyebrow, .badge (+ .badge--sev-*, .badge--conf-*)
 *   Actions     .button, .button--secondary
 *   Finding     .finding (+ .finding--critical|high|medium|low) and its
 *               children: .finding__head, .finding__id, .finding__title,
 *               .finding__axes, .finding__section, .finding__limits
 *   Code        .code (figure), .code__caption, .code pre, spans .p (prompt)
 *               and .c (comment) inside code
 *   Callout     .callout (+ .callout--warning), .callout__label
 *   Table       .table-wrap > .table
 *   Disclosure  .disclosure, .disclosure__label
 *   Status      .status (+ .status__dot), for "in testing / not deployed"
 *   Steps       .steps, a calmer ordered list for browser instructions
 *
 * Everything degrades to readable plain HTML without this stylesheet.
 */

/* ------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------ */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-bg);
}

h1, h2, h3, h4 {
  line-height: var(--leading-heading);
  font-weight: 650;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); margin-top: var(--space-8); }
h3 { font-size: var(--text-xl);  margin-top: var(--space-7); }
h4 { font-size: var(--text-lg);  margin-top: var(--space-6); }

p  { margin: 0 0 var(--space-4); }

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

small, .small {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: var(--leading-caption);
}

hr {
  border: 0;
  border-top: var(--border-hairline);
  margin: var(--space-7) 0;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Visible focus, everywhere. Never remove without a replacement. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* ------------------------------------------------------------------
 * Layout
 * .container caps the page; .prose caps long-form reading width.
 * ------------------------------------------------------------------ */

.container {
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.prose { max-width: var(--width-prose); }
.prose > * + * { margin-top: 0; }
.prose ul, .prose ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }

.section { margin-block: var(--space-9); }

/* ------------------------------------------------------------------
 * Eyebrow - mono uppercase label above a heading
 * ------------------------------------------------------------------ */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
}

/* ------------------------------------------------------------------
 * Badges - the two independent axes of a finding.
 *
 * Severity:  .badge--sev-critical|high|medium|low
 *            Hue + written word. Tinted background, coloured text.
 * Confidence:.badge--conf-confirmed|strong|indicative
 *            Neutral hue, drawn from ink. Solidity encodes the axis:
 *            confirmed = solid fill, strong = tint + solid border,
 *            indicative = dashed outline. Never colour-coded.
 * ------------------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge--sev-critical { color: var(--color-sev-critical-text); background: var(--color-sev-critical-tint); }
.badge--sev-high     { color: var(--color-sev-high-text);     background: var(--color-sev-high-tint); }
.badge--sev-medium   { color: var(--color-sev-medium-text);   background: var(--color-sev-medium-tint); }
.badge--sev-low      { color: var(--color-sev-low-text);      background: var(--color-sev-low-tint); }

.badge--conf-confirmed {
  background: var(--color-conf-solid-bg);
  color: var(--color-conf-solid-text);
}
.badge--conf-strong {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}
.badge--conf-indicative {
  background: transparent;
  color: var(--color-ink-2);
  border-style: dashed;
  border-color: var(--color-border-strong);
}

/* ------------------------------------------------------------------
 * Buttons - one action style, one quiet alternative.
 * Solid ink, not accent: the accent is reserved for links and focus.
 * ------------------------------------------------------------------ */

.button {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-bg);
  text-decoration: none;
  cursor: pointer;
}
.button:hover {
  background: var(--color-ink-2);
  border-color: var(--color-ink-2);
  color: var(--color-bg);
}

.button--secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}
.button--secondary:hover {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-ink-2);
}

/* ------------------------------------------------------------------
 * Finding - the central component of the whole site.
 *
 * <article class="finding finding--high">
 *   <header class="finding__head">
 *     <p class="finding__id">Finding 1</p>
 *     <h3 class="finding__title">…</h3>
 *     <p class="finding__axes">
 *       <span class="badge badge--sev-high">Severity: high</span>
 *       <span class="badge badge--conf-confirmed">Confidence: confirmed</span>
 *     </p>
 *   </header>
 *   <div class="finding__section"> … what was found, in plain English … </div>
 *   <div class="finding__section"> <h4>Check it yourself</h4> <ol class="steps">…
 *   <div class="finding__section"> <h4>For your developer</h4> <figure class="code">…
 *   <p class="finding__limits"> … what this check cannot establish … </p>
 * </article>
 *
 * Design intent: severity tints only the 3px left rule and one badge.
 * The card body stays document-neutral, so the page stays calm at any
 * severity. Confidence never touches the severity hue.
 * ------------------------------------------------------------------ */

.finding {
  background: var(--color-surface);
  border: var(--border-hairline);
  border-left: var(--border-accent);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-4) 0;
}
.finding--critical { border-left-color: var(--color-sev-critical-text); }
.finding--high     { border-left-color: var(--color-sev-high-text); }
.finding--medium   { border-left-color: var(--color-sev-medium-text); }
.finding--low      { border-left-color: var(--color-sev-low-text); }

.finding__head { margin-bottom: var(--space-4); }

.finding__id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: 0 0 var(--space-2);
}

.finding__title {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}

.finding__axes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.finding__section { margin-bottom: var(--space-5); }
.finding__section > h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: 0 0 var(--space-3);
}
.finding__section > p:last-child,
.finding__section > ol:last-child,
.finding__section > figure:last-child { margin-bottom: 0; }

/* The honest boundary. Visually separated, deliberately not alarming:
 * dashed top rule, secondary ink, no hue. */
.finding__limits {
  border-top: 1px dashed var(--color-border-strong);
  padding-top: var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: var(--leading-caption);
}

/* ------------------------------------------------------------------
 * Steps - the browser verification the owner performs themselves.
 * Plain ordered list, calmer than default: mono counters, more air.
 * ------------------------------------------------------------------ */

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  width: 1.4rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------
 * Code - for the developer, not the founder.
 * <figure class="code">
 *   <figcaption class="code__caption">…</figcaption>
 *   <pre><code>…</code></pre>
 * </figure>
 * Optional spans inside code: .p = shell prompt (not selectable-looking),
 * .c = comment / expected-output annotation.
 * ------------------------------------------------------------------ */

.code {
  margin: 0 0 var(--space-4);
  background: var(--color-surface-2);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.code__caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-hairline);
}
.code pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-code);
  color: var(--color-ink);
}
.code code { font-size: inherit; }
.code .p { color: var(--color-code-comment); user-select: none; }
.code .c { color: var(--color-code-comment); }

/* ------------------------------------------------------------------
 * Callout - an aside that must be noticed without shouting.
 * Neutral by default; --warning uses the high-severity tint, never red.
 * ------------------------------------------------------------------ */

.callout {
  background: var(--color-surface);
  border: var(--border-hairline);
  border-left: var(--border-accent);
  border-left-color: var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}
.callout--warning {
  background: var(--color-sev-high-tint);
  border-left-color: var(--color-sev-high-text);
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.callout__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: 0 0 var(--space-2);
}
.callout > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
 * Table - documentation style: strong head rule, hairline rows.
 * Wrap in .table-wrap so narrow viewports scroll sideways rather than
 * crushing the content.
 * ------------------------------------------------------------------ */

.table-wrap { overflow-x: auto; margin: var(--space-5) 0; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-caption);
}
.table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  padding-bottom: var(--space-3);
}
.table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ink-2);
  text-align: left;
  padding: var(--space-2) var(--space-4) var(--space-2) 0;
  border-bottom: var(--border-strong);
  vertical-align: bottom;
}
.table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: var(--border-hairline);
  vertical-align: top;
}
.table th:last-child, .table td:last-child { padding-right: 0; }

/* ------------------------------------------------------------------
 * Disclosure - the Sofema relationship statement and anything like it.
 * It must be seen, not found: full-size body text, ink left rule,
 * labelled plainly. Never small print, never a footnote, never a hue
 * that reads as apology or alarm.
 * ------------------------------------------------------------------ */

.disclosure {
  border: var(--border-strong);
  border-left: var(--border-accent);
  border-left-color: var(--color-ink);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
}
.disclosure__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: 0 0 var(--space-3);
}
.disclosure p { font-size: var(--text-md); }
.disclosure > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
 * Status - factual state chips for evidence cards:
 * "Publicly reachable", "In testing", "Not deployed".
 * Neutral, mono, with a hollow dot. No green "success" treatment:
 * these are statements of fact, not achievements.
 * ------------------------------------------------------------------ */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
}
.status__dot {
  width: 0.5em;
  height: 0.5em;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  flex: none;
}
.status--live .status__dot { background: currentColor; }

/* ------------------------------------------------------------------
 * Narrow viewports: keep card padding usable at 320px.
 * ------------------------------------------------------------------ */

@media (max-width: 40rem) {
  .finding, .disclosure { padding: var(--space-4) var(--space-4); }
  .container { padding-inline: var(--space-4); }
}