/*
  Blak Signal — the public page.

  Black is the ground, copper is light. The only large source of colour on the
  page is the eclipse itself: everything else is near-white text, neutral
  hairlines and small amber accents. No surface is tinted brown, and nothing
  here loads from another origin.
*/

@font-face {
  font-family: "Oxanium";
  src: url("/assets/oxanium-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Ground. Near-absolute black; surfaces sit a hair above it. */
  --void: #040405;
  --surface: #0a0a0c;
  --surface-soft: #08080a;

  /* Hairlines and technical edges — neutral, so no surface reads warm. */
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Cool-neutral text, so the only warm thing on the page is the light. */
  --text: #f2f4f4;
  --text-dim: #b9bcc0;
  --text-mid: #8e9495;
  --text-faint: #6e737a;
  --text-ghost: #585b60;

  /* Copper is light: the eclipse, the one button, focus, small accents. */
  --copper: #ba6b28;
  --action: #e98940;
  --amber: #ee9a44;
  --amber-hot: #ffce96;

  /* Status. Meaning only, never the page's mood. */
  --ready: #86e3a4;
  --attention: var(--amber);
  --danger: #e0685a;
  --neutral: #a8acb0;
  /* A measurement that could not be made: cool and quiet, never the colour of a failure. */
  --unmeasured: #9fb0c0;

  /* Score bands. Excellent is an active-terminal green; the remaining scale is unchanged. */
  --score-excellent: #00f56a;
  --score-strong: #a8d64e;
  --score-fair: #f2bf3a;
  --score-watch: #f26b47;
  --score-weak: #e5534f;
  --score-critical: #dc3434;

  /*
    The seven areas wear two neighbouring tones of the light, alternating along
    them: copper, then burnished gold. A tone is an area's identity — icon,
    micro-label, edges — never a reading: a score keeps its band's colour. Kept as
    RGB channels, so an edge can take its tone at a low alpha.
  */
  --tone-copper: 236 138 62;
  --tone-gold: 208 168 94;
  --area-tone: var(--tone-copper);

  /*
    The areas' surfaces, warm near-blacks and never brown: the cards a step above
    the ground, lighter under the pointer and in focus; the panel of the area in
    focus is the clearest surface of the report, still dark.
  */
  --card-surface: #0e0d0b;
  --card-surface-hover: #12110e;
  --card-surface-selected: #141310;
  --card-line: rgba(255, 240, 222, 0.075);
  --card-line-hover: rgba(255, 236, 212, 0.14);
  --panel-surface: #11100d;
  --panel-line: rgba(255, 240, 222, 0.085);
  /* A change of focus settles quickly and softly. */
  --focus-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Report content uses the viewport; the gutters keep its editorial measure. */
  --gutter: clamp(1.375rem, 5vw, 6rem);

  --sans: "Segoe UI Variable Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --score-font: "Oxanium", "Bahnschrift", var(--sans);
  /* The report's copper for text accents: warm and quiet, never neon. */
  --ember: #ec8c52;
  /*
    The report's text, in four steps: a soft, slightly grey off-white for what
    matters most, a light grey for what supports it, a mid grey for metadata, and
    a cool grey for technical labels. Nothing in the report is set in pure white.
  */
  --ink-1: #e8e8e5;
  --ink-2: #c7c7c3;
  --ink-3: #8e8e89;
  --ink-label: #adb2b6;

  color-scheme: dark;
}

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

html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
}

body {
  /* Also on the body: the eclipse blends with this box, not with the canvas. */
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  min-height: 100vh;
  /* The eclipse is clipped by its own field; this is the second line of defence. */
  overflow-x: hidden;
}

::selection {
  background: rgba(233, 137, 64, 0.3);
  color: #fff;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: var(--action);
  text-decoration-color: rgba(233, 137, 64, 0.35);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--amber-hot);
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* ------------------------------------------------------------------ eclipse */

/*
  The brand asset: a Blender render, cropped square around the disc so the
  disc's centre is the image's centre. The field clips the bleed — a decoration
  that reaches past the viewport would otherwise widen the document and give a
  phone a sideways scroll.

  `screen` is why it reads as part of the page instead of a picture pasted on
  it: the render's black drops into the page's black and only the corona adds
  light. It is also how the piece looks in Blender, where disc and background
  are the same absolute black and the ring alone draws the silhouette.
*/
.eclipse-field {
  /*
    Half a disc, on the right edge, a third of the way down: the centre sits
    essentially on the viewport's edge, so the page gets the lit limb and the
    corona coming off it, and the headline keeps the black to its left.
  */
  --eclipse-size: min(1900px, 104vw);
  --eclipse-top: -0.24;
  --eclipse-right: -0.47;
  --eclipse-opacity: 0.9;
  --eclipse-glow: 1;
  /*
    The render's breakthrough bead sits at the top of the disc. Turned a quarter
    counter-clockwise it lands on the left limb, which is the half the page sees,
    and the headline gets the lit edge instead of the dim one.
  */
  --eclipse-rotate: -90deg;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--eclipse-size);
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  /*
    Not a negative z-index: that paints before the body's own background, which
    would bury the eclipse under it. At 0 it lands after that background — the
    black it has to blend into — and the content, at 1, still covers it.
  */
  z-index: 0;
}

.eclipse {
  position: absolute;
  top: calc(var(--eclipse-size) * var(--eclipse-top));
  right: calc(var(--eclipse-size) * var(--eclipse-right));
  width: var(--eclipse-size);
  height: var(--eclipse-size);
  /*
    Orientation and the scroll parallax, on the wrapper: the disc's centre is the
    element's centre, so the rotation never moves it. app.js sets the parallax.
  */
  transform: translate3d(0, var(--eclipse-parallax, 0px), 0) rotate(var(--eclipse-rotate));
}

.eclipse-disc {
  width: 100%;
  height: 100%;
  background: url("/assets/blak-signal-hero-v1.webp") center / contain no-repeat;
  opacity: var(--eclipse-opacity);
  filter: brightness(var(--eclipse-glow));
  transition: filter 1.8s ease, opacity 1.2s ease;
  animation: eclipse-breath 24s ease-in-out infinite;
}

/* Barely there on purpose: presence, not an effect. */
@keyframes eclipse-breath {
  0%,
  100% {
    transform: scale(1);
    opacity: calc(var(--eclipse-opacity) * 0.94);
  }
  50% {
    transform: scale(1.014);
    opacity: var(--eclipse-opacity);
  }
}

/* While a scan runs the eclipse gains a little presence and breathes faster. */
body[data-state="queued"] .eclipse-field {
  --eclipse-glow: 1.07;
}

body[data-state="running"] .eclipse-field {
  --eclipse-glow: 1.16;
}

body[data-state="running"] .eclipse-disc {
  animation-duration: 9s;
}

/* The report is a document: the light is a trace at the corner, nothing more. */
body[data-view="report"] .eclipse-field {
  --eclipse-opacity: 0.1;
  --eclipse-top: -0.42;
}

/* --------------------------------------------------------------- structure */

.masthead,
.page,
.site-footer {
  position: relative;
  z-index: 1;
  /*
    No centred container: the shell is the viewport, and one gutter is the left
    rule everything lines up on — wordmark, eyebrow, headline, form, method,
    the editorial band and the footer. What is capped is reading width, below.
  */
  padding-inline: var(--gutter);
}

.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  padding-top: 2.25rem;
  /* The header is the one place the content crosses the corona. Nothing on black. */
  text-shadow: 0 0 2px rgba(4, 4, 5, 0.9), 0 1px 14px rgba(4, 4, 5, 0.85);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  /* The header's height, which the hero is placed from; the lettering sits centred in it. */
  height: 2.921rem;
  text-decoration: none;
  color: var(--text);
}

.wordmark-image {
  display: block;
  width: 15rem;
  height: auto;
}

.wordmark-primary {
  color: #f4f5f5;
}

.wordmark-secondary {
  color: var(--action);
}

.masthead-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-top: 0.6875rem;
}

.masthead-nav a {
  font-size: 0.875rem;
  color: var(--text-dim);
  text-decoration: none;
}

.masthead-nav a:hover {
  color: var(--text);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

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

.hero {
  padding-top: clamp(3.5rem, 11vh, 7rem);
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
}

.hero h1 {
  margin-top: 1.75rem;
  /* Three lines, with the question landing alone on the last one. */
  max-width: 9.6em;
  font-size: clamp(2.35rem, 5vw, 4.25rem);
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -0.028em;
  color: #fff;
}

.accent {
  color: var(--action);
}

.lede {
  margin-top: 1.75rem;
  max-width: 30rem;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--text-dim);
}

.hero-note {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.375rem;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--text-ghost);
}

.hero-note span {
  white-space: nowrap;
}

.hero-note span:not(:last-child)::after {
  content: "·";
  padding: 0 1.25rem;
}

/* -------------------------------------------------------------------- form */

.scan-form {
  margin-top: 2.5rem;
  max-width: 40rem;
}

.field {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.3125rem 0.3125rem 0.3125rem 1.125rem;
  background: #0c0c0e;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field:focus-within {
  border-color: rgba(233, 137, 64, 0.5);
  box-shadow: 0 0 0 1px rgba(233, 137, 64, 0.2);
}

.field-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  color: var(--action);
}

.field-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.875rem 0;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.9375rem;
}

/* The bar itself carries the focus ring, and it is unmissable. */
.field-input:focus {
  outline: none;
}

.field-input::placeholder {
  color: #5a5d63;
}

.field-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  flex: none;
  align-self: stretch;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 7px;
  background: var(--action);
  color: #180a02;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.field-button:hover:not(:disabled) {
  background: var(--amber);
}

.field-button:disabled {
  background: #2a2723;
  color: var(--text-faint);
  cursor: default;
}

.form-error {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  color: var(--danger);
}

/* ------------------------------------------------------------------ method */

.method {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  padding-top: 2.5rem;
  padding-bottom: clamp(3rem, 8vh, 5rem);
}

.method article {
  padding-right: 2.5rem;
  padding-left: 2.25rem;
  border-left: 1px solid var(--line);
}

.method article:first-child {
  border-left: 0;
  padding-left: 0;
}

.method-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--action);
}

.method h2 {
  margin-top: 1.25rem;
  max-width: 22rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.method p {
  margin-top: 0.625rem;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--text-mid);
}

/* --------------------------------------------------------------- manifesto */

.manifesto {
  border-top: 1px solid var(--line);
  padding-top: 2.5rem;
  padding-bottom: clamp(2.5rem, 7vh, 4rem);
}

.manifesto-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem 4rem;
  align-items: start;
  margin-top: 1.5rem;
}

.manifesto h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fafbfb;
}

.manifesto p {
  max-width: 30rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-mid);
}

/* ---------------------------------------------------------------- progress */

.progress {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  padding-top: clamp(2.25rem, 5vh, 3.25rem);
  padding-bottom: clamp(3rem, 7vh, 4.5rem);
  border-top: 1px solid var(--line);
}

.progress-state {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--action);
}

.progress-text {
  margin-top: 1.125rem;
  max-width: 24em;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #f4f5f5;
}

.progress-detail {
  margin-top: 0.5rem;
  max-width: 24em;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-faint);
}

.progress-url {
  margin-top: 1.125rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------ report: the screen */

body[data-view="report"] .hero,
body[data-view="report"] .method,
body[data-view="report"] .manifesto,
body[data-view="report"] .site-footer,
body[data-view="report"] .eclipse-field {
  display: none;
}

/* The report uses more of the viewport than the home: about 91% of it, as the mock does. */
body[data-view="report"] {
  --gutter: clamp(1.375rem, 4.25vw, 5.5rem);
}

/* The report's header, as the mock sets it: the wordmark with the sections beside it. */
body[data-view="report"] .masthead {
  align-items: center;
  padding-top: 1.125rem;
}

body[data-view="report"] .wordmark {
  height: 2.034375rem;
}

body[data-view="report"] .wordmark-image {
  width: 10.375rem;
}

body[data-view="report"] .masthead-nav {
  flex: 1 1 auto;
  gap: clamp(1.5rem, 2.3vw, 2.5rem);
  margin-left: clamp(1rem, 1.8vw, 2rem);
  padding-top: 0;
}

body[data-view="report"] .masthead-nav a {
  color: var(--ink-2);
}

body[data-view="report"] .masthead-nav a:hover {
  color: var(--ink-1);
}

.result {
  width: 100%;
  max-width: none;
  padding-top: 0.75rem;
  padding-bottom: clamp(1.75rem, 3vh, 2.5rem);
}

.report-back {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.375rem 0;
  background: none;
  border: 0;
  color: var(--ink-2);
  font-size: 0.875rem;
  cursor: pointer;
}

.report-back:hover {
  color: var(--ember);
}

.report-back .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 0.25rem;
  padding-bottom: 0.4375rem;
}

.report-url {
  font-size: clamp(1.5rem, 1.7vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink-1);
  overflow-wrap: anywhere;
}

.report-when,
.report-final {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.report-when {
  margin-top: 0.375rem;
}

.report-share {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
  padding: 0.5625rem 1rem;
  background: #070708;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  color: var(--ink-1);
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.report-share:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.report-share .icon {
  width: 1.125rem;
  height: 1.125rem;
}

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

.panel {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* ------------------------------------------------------------ Blak Signal Score */

.blak-signal-score-block {
  width: 100%;
}

/*
  The score hero, as the approved mock composes it: the ring, a hairline, the
  conclusion, and the seven areas' radar on the right. Near-black with a minimal
  gradient for depth; nothing else is drawn on it.
*/
.blak-signal-score {
  --blak-signal-headline-size: clamp(2.5rem, 2.2vw, 2.75rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(100deg, #040405 0%, #020203 60%, #050506 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Ring, conclusion and radar on one row: the radar takes what the other two leave, and its labels set the panel's height. */
.blak-signal-score-main {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  min-height: clamp(16.5rem, 19.2vw, 22rem);
  padding: clamp(0.75rem, 0.85vw, 1rem) clamp(1.5rem, calc(15.3vw - 10.75rem), 7.75rem) clamp(0.75rem, 0.85vw, 1rem) clamp(1.75rem, 3.05vw, 3.75rem);
}

/* The score's own column: the ring and its secondary confidence metric. */
.blak-signal-score-ring {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  min-width: 0;
  margin: 0;
  padding-right: clamp(2rem, 3.45vw, 4.5rem);
}

.blak-signal-score-ring > svg {
  grid-area: 1 / 1;
  display: block;
  width: clamp(12rem, 15.75vw, 18.5rem);
  height: auto;
  overflow: visible;
}

.blak-signal-score-ring-track,
.blak-signal-score-ring-arc,
.blak-signal-score-ring-corona,
.blak-signal-score-ring-hotspot {
  fill: none;
  stroke-width: 13;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 160px 160px;
}

/* A track that is almost black; the arc is warm copper, with a soft light of its own. */
.blak-signal-score-ring-track {
  stroke: #28282b;
}

.blak-signal-score-ring-arc {
  stroke: url(#blak-signal-ring-gradient);
}

.blak-signal-score-ring-arc {
  filter: drop-shadow(0 0 4px rgba(255, 122, 34, 0.28));
  transition: stroke-dashoffset 0.6s ease-out;
}

.blak-signal-score-ring-arc.is-empty,
.blak-signal-score-ring-corona.is-empty {
  stroke-linecap: butt;
}

/* A third, procedural layer: one faint displaced edge plus four short tongues of light. */
.blak-signal-score-ring-corona-layer {
  filter: url(#blak-signal-ring-corona-filter);
  pointer-events: none;
}

.blak-signal-score-ring-corona,
.blak-signal-score-ring-hotspot {
  stroke: url(#blak-signal-ring-corona-gradient);
}

.blak-signal-score-ring-corona {
  stroke-width: 6;
  opacity: 0.2;
}

.blak-signal-score-ring-hotspot {
  stroke-width: 9;
  opacity: 0.04;
  animation-name: blak-signal-ring-hotspot;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  animation-iteration-count: infinite;
}

.corona-stop-copper {
  stop-color: #d96520;
}

.corona-stop-hot {
  stop-color: #ffb257;
}

.corona-stop-ember {
  stop-color: #f47b26;
}

.ring-stop-energy {
  stop-opacity: 0.94;
  animation: blak-signal-ring-corona 20s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.ring-stop-copper {
  stop-color: #c85a18;
  animation-delay: 0s;
}

.ring-stop-orange {
  stop-color: #ff7a22;
  animation-delay: -4s;
}

.ring-stop-solar {
  stop-color: #ffa24a;
  animation-delay: -8s;
}

.ring-stop-ember {
  stop-color: #e46b20;
  animation-delay: -12s;
}

.ring-stop-return {
  stop-color: #c85a18;
  animation-delay: -16s;
}

/* Out-of-phase stops move intensity through the copper without rotating the ring. */
@keyframes blak-signal-ring-corona {
  0%,
  100% {
    stop-opacity: 0.9;
  }
  38% {
    stop-opacity: 1;
  }
  72% {
    stop-opacity: 0.94;
  }
}

@keyframes blak-signal-ring-hotspot {
  0%,
  9%,
  100% {
    stroke-dashoffset: var(--hotspot-from);
    opacity: 0.04;
  }
  31% {
    opacity: 0.52;
  }
  56% {
    stroke-dashoffset: var(--hotspot-to);
    opacity: 0.28;
  }
  76% {
    stroke-dashoffset: var(--hotspot-to);
    opacity: 0.06;
  }
}

.blak-signal-score-ring-number,
.blak-signal-score-ring-out-of,
.blak-signal-score-ring-name {
  fill: var(--text);
  font-family: var(--sans);
}

/* Sizes are the SVG's own units: the ring scales, and its three lines keep their relation. */
.blak-signal-score-ring-number {
  fill: var(--ink-1);
  font-family: var(--score-font);
  font-size: 5.875rem;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.blak-signal-score-ring-number.score-band-excellent {
  fill: var(--score-excellent);
  filter: drop-shadow(0 0 4px rgba(0, 245, 106, 0.14));
}

.blak-signal-score-ring-number.score-band-strong {
  fill: var(--score-strong);
}

.blak-signal-score-ring-number.score-band-fair {
  fill: var(--score-fair);
}

.blak-signal-score-ring-number.score-band-watch {
  fill: var(--score-watch);
}

.blak-signal-score-ring-number.score-band-weak {
  fill: var(--score-weak);
}

.blak-signal-score-ring-number.score-band-critical {
  fill: var(--score-critical);
}

/* The scale recedes; the name is technical: mono, and spaced. */
.blak-signal-score-ring-out-of {
  fill: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
}

.blak-signal-score-ring-name {
  fill: var(--ink-label);
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.18em;
}

/* The column's measure is the approved headline's longer line (about 10.1em), so the hairline under the copy ends with it, as in the mock. */
.blak-signal-verdict {
  width: calc(var(--blak-signal-headline-size) * 10.35 + clamp(1.75rem, 3.1vw, 3.5rem));
  min-width: 0;
  padding-left: clamp(1.75rem, 3.1vw, 3.5rem);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.blak-signal-overline {
  font-family: var(--mono);
  font-size: clamp(0.75rem, 0.76vw, 0.875rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ember);
}

/*
  The conclusion, in the interface's sans: large but calm — a light medium weight,
  comfortable lines and a slightly negative track, in a soft off-white. Only the
  phrase that carries its meaning is copper.
*/
.blak-signal-headline {
  margin-top: clamp(0.5rem, 0.72vw, 1rem);
  font-family: var(--sans);
  /* Wherever the column is wider, the headline keeps the mock's two lines. */
  max-width: 10.6em;
  font-size: var(--blak-signal-headline-size);
  font-weight: 460;
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--ink-1);
}

.blak-signal-headline-accent {
  color: var(--ember);
}

/* Clearly secondary: lighter grey, a comfortable size, more air around it. */
.blak-signal-score-reading {
  margin-top: clamp(0.875rem, 1.1vw, 1.25rem);
  font-size: clamp(0.9375rem, 1.04vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
}

/* How much of the score the analysis resolved: quiet, neutral and inside the ring's centre composition. */
.blak-signal-confidence {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: center;
  display: grid;
  grid-template-columns: 0.75rem minmax(0, auto);
  align-items: start;
  gap: 0.375rem;
  width: max-content;
  max-width: 100%;
  margin-top: 77%;
  color: var(--ink-3);
}

.blak-signal-confidence-icon {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.0625rem;
  color: inherit;
  filter: none;
}

.blak-signal-confidence-copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.blak-signal-confidence-label {
  font-family: var(--mono);
  font-size: 0.5625rem;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.blak-signal-confidence-value {
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-2);
}

/* The one next step: a hairline, an icon, a label and a short line. */
.blak-signal-guidance {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.95vw, 2rem);
  margin-top: clamp(1.25rem, 1.6vw, 1.875rem);
  padding-top: clamp(1.125rem, 1.45vw, 1.625rem);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.blak-signal-guidance-icon {
  width: 1.875rem;
  height: 1.875rem;
  flex: none;
  color: var(--ember);
}

.blak-signal-guidance-label {
  font-family: var(--mono);
  font-size: clamp(0.75rem, 0.78vw, 0.8125rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ember);
}

.blak-signal-guidance-text {
  margin-top: 0.1875rem;
  font-size: clamp(0.9375rem, 1vw, 1.1875rem);
  line-height: 1.5;
  color: var(--ink-2);
}

/*
  The seven areas' radar. The chart is SVG; each axis's icon, name and score sit
  around it as HTML, so their text keeps its size whatever the chart's. The radar
  is its own container: the chart takes the room its labels leave, up to 20rem.
*/
.blak-signal-radar {
  --radar-icon: clamp(1.75rem, 1.9vw, 2.375rem);
  /* How far the widest label reaches past the chart's edge. */
  --radar-side: clamp(6rem, 6vw, 7.25rem);
  width: 100%;
  min-width: 0;
  margin: 0;
  /* The least air between the conclusion and the nearest label. */
  padding-left: clamp(0.75rem, 1.2vw, 1.5rem);
  container-type: inline-size;
}

.blak-signal-radar-plot {
  --radar-chart: clamp(11rem, calc(100cqi - 2 * var(--radar-side)), clamp(20rem, 16.7vw, 24rem));
  /* A label's icon, a sixth past the ring of 100 (100 of the chart's 208 units). */
  --radar-reach: calc(var(--radar-chart) * 0.56);
  position: relative;
  width: var(--radar-chart);
  height: var(--radar-chart);
  /* Room for the top label above the chart, and for the two that open under their icons below it. */
  margin: calc(var(--radar-reach) - var(--radar-chart) / 2 + var(--radar-icon) / 2) auto
    calc(var(--radar-reach) * 0.79 - var(--radar-chart) / 2 + var(--radar-icon) / 2 + 2.75rem);
}

.blak-signal-radar-chart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.blak-signal-radar-ring,
.blak-signal-radar-spoke,
.blak-signal-radar-gap {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* The structure is barely there: graphite rings and spokes, the ring of 100 a touch firmer. */
.blak-signal-radar-ring {
  stroke: rgba(255, 255, 255, 0.07);
}

.blak-signal-radar-ring.is-outer {
  stroke: rgba(255, 255, 255, 0.12);
}

.blak-signal-radar-spoke {
  stroke: rgba(255, 255, 255, 0.09);
  transition: stroke 0.18s ease;
}

.blak-signal-radar-spoke.is-unmeasured {
  stroke-dasharray: 2 4;
}

/* What an area is short of, from its vertex to the ring of 100: lighter than the grid, so the dent reads. */
.blak-signal-radar-gap {
  stroke: rgba(232, 232, 229, 0.4);
}

.blak-signal-radar-shape {
  fill: url(#blak-signal-radar-fill);
  stroke: #f59a47;
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(245, 138, 60, 0.35));
}

/* Copper, denser toward the edge, so the shape's outline carries the reading. */
.radar-stop-centre {
  stop-color: #e8742e;
  stop-opacity: 0.16;
}

.radar-stop-edge {
  stop-color: #f08a3c;
  stop-opacity: 0.36;
}

.blak-signal-radar-vertex {
  fill: #f7934a;
  filter: drop-shadow(0 0 3px rgba(247, 147, 74, 0.5));
  transition: r 0.18s ease, fill 0.18s ease;
}

.blak-signal-radar-slice {
  fill: transparent;
}

/* The area in focus under the cards keeps a quiet mark on its axis: a warmer spoke. A hover still reads above it. */
.blak-signal-radar-spoke.is-selected {
  stroke: rgba(247, 147, 74, 0.34);
}

.blak-signal-radar-spoke.is-active {
  stroke: rgba(247, 147, 74, 0.6);
}

.blak-signal-radar-vertex.is-active {
  r: 5.2px;
  fill: #ffb070;
  filter: drop-shadow(0 0 6px rgba(255, 160, 90, 0.75));
}

/* The labels' box covers the chart without taking its pointer: only the labels themselves do. */
.blak-signal-radar-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A label is a point, its icon's centre; what it shows opens from there by placement. */
.blak-signal-radar-label {
  position: absolute;
  left: calc(50% + var(--radar-x) * var(--radar-reach));
  top: calc(50% + var(--radar-y) * var(--radar-reach));
  width: 0;
  height: 0;
  transition: opacity 0.18s ease;
}

.blak-signal-radar-door {
  position: absolute;
  top: calc(var(--radar-icon) / -2);
  left: calc(var(--radar-icon) / -2);
  display: flex;
  align-items: flex-start;
  gap: clamp(0.625rem, 0.62vw, 0.75rem);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 4px;
  color: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}

.blak-signal-radar-label.is-left .blak-signal-radar-door {
  left: auto;
  right: calc(var(--radar-icon) / -2);
  flex-direction: row-reverse;
  text-align: right;
}

.blak-signal-radar-label.is-below-right .blak-signal-radar-door,
.blak-signal-radar-label.is-below-left .blak-signal-radar-door {
  flex-direction: column;
  gap: 0.25rem;
}

.blak-signal-radar-label.is-below-left .blak-signal-radar-door {
  left: auto;
  right: calc(var(--radar-icon) / -2);
  align-items: flex-end;
  text-align: right;
}

/* The cards' own icons, in the same copper. */
.blak-signal-radar-icon {
  display: grid;
  place-items: center;
  width: var(--radar-icon);
  height: var(--radar-icon);
  flex: none;
  color: var(--amber);
  filter: drop-shadow(0 0 6px rgba(238, 154, 68, 0.16));
  transition: filter 0.18s ease, transform 0.18s ease;
}

.blak-signal-radar-icon .icon {
  width: 100%;
  height: 100%;
  stroke-width: 1.6;
}

.blak-signal-radar-copy {
  display: flex;
  flex-direction: column;
}

/* Beside its icon, the name sits on the icon's centre line and the score hangs under it. */
.blak-signal-radar-name {
  font-size: clamp(0.8125rem, 0.78vw, 0.9375rem);
  line-height: var(--radar-icon);
  color: var(--ink-1);
}

.blak-signal-radar-score {
  margin-top: -0.3125rem;
  font-family: var(--score-font);
  font-size: clamp(1rem, 1vw, 1.25rem);
  line-height: 1.2;
  color: var(--ink-3);
}

.blak-signal-radar-label.is-below-right .blak-signal-radar-name,
.blak-signal-radar-label.is-below-left .blak-signal-radar-name {
  line-height: 1.3;
}

.blak-signal-radar-label.is-below-right .blak-signal-radar-score,
.blak-signal-radar-label.is-below-left .blak-signal-radar-score {
  margin-top: 0.0625rem;
}

.blak-signal-radar-label.is-selected .blak-signal-radar-icon {
  filter: drop-shadow(0 0 7px rgba(238, 154, 68, 0.42)) brightness(1.1);
}

/* An area in hand: its icon lights, the others step back a little. */
.blak-signal-radar.is-active .blak-signal-radar-label:not(.is-active) {
  opacity: 0.6;
}

.blak-signal-radar-label.is-active .blak-signal-radar-icon {
  filter: drop-shadow(0 0 7px rgba(238, 154, 68, 0.6)) brightness(1.15);
  transform: scale(1.08);
}

/* The area's full name and score, at the centre, only while an area is in hand. */
.blak-signal-radar-readout {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  width: max-content;
  max-width: calc(var(--radar-chart) * 0.74);
  padding: 0.4375rem 0.75rem 0.5rem;
  background: rgba(5, 5, 6, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.blak-signal-radar.is-active .blak-signal-radar-readout {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease;
}

.blak-signal-radar-readout-name {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--ink-2);
}

.blak-signal-radar-readout-score {
  font-family: var(--score-font);
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ink-1);
}

/*
  The three zones' spacing on a desktop, where they share one row: more air round
  the panel and either side of the divider, a radar further right, and labels that
  orbit clear of the ring of 100 — the vertex is the data, the icon its legend.
  Tablet and phone keep the rules above.
*/
@media (min-width: 1181px) {
  body[data-view="report"] .masthead {
    padding-top: 0.75rem;
  }

  .result {
    padding-top: 0.375rem;
  }

  .report-back {
    gap: 0.625rem;
    padding-block: 0.125rem;
    font-size: 0.8125rem;
  }

  .report-back .icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .report-head {
    margin-top: 0;
    padding-bottom: 0.25rem;
  }

  .report-url {
    font-size: clamp(1.625rem, 1.5vw, 1.875rem);
    line-height: 1.2;
  }

  .report-when,
  .report-final {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  .report-when {
    margin-top: 0.25rem;
  }

  .blak-signal-score-main {
    min-height: 0;
    padding: 0.75rem clamp(1.5rem, 2vw, 2.5rem) 0.75rem clamp(1.75rem, 2.2vw, 2.625rem);
  }

  .blak-signal-score-ring {
    padding-right: clamp(2rem, 2.5vw, 3rem);
  }

  .blak-signal-score-ring > svg {
    width: clamp(13rem, 13.75vw, 16.25rem);
  }

  .blak-signal-verdict {
    width: clamp(34rem, 35vw, 40rem);
    padding-left: clamp(2rem, 2.5vw, 3rem);
  }

  .blak-signal-overline {
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  .blak-signal-headline {
    max-width: none;
    margin-top: 0.5rem;
  }

  .blak-signal-headline.verdict-short {
    --blak-signal-headline-size: clamp(2.875rem, 2.5vw, 3.125rem);
  }

  .blak-signal-headline.verdict-medium {
    --blak-signal-headline-size: clamp(2.5rem, 2.2vw, 2.75rem);
  }

  .blak-signal-headline.verdict-long {
    --blak-signal-headline-size: clamp(2.125rem, 2vw, 2.4375rem);
  }

  .blak-signal-score-reading {
    margin-top: 0.75rem;
    font-size: 1rem;
    line-height: 1.4;
  }

  .blak-signal-confidence-label {
    font-size: 0.5625rem;
    line-height: 1.25;
  }

  .blak-signal-confidence-value {
    font-size: 1rem;
    line-height: 1;
  }

  .blak-signal-guidance {
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 0.875rem;
  }

  .blak-signal-guidance-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .blak-signal-guidance-label {
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  .blak-signal-guidance-text {
    margin-top: 0.125rem;
    font-size: 1rem;
    line-height: 1.4;
  }

  .blak-signal-radar {
    /* Between the ring of 100 and the nearest edge of a label's icon. */
    --radar-icon: clamp(1.625rem, 1.6vw, 1.875rem);
    --radar-clearance: 0.75rem;
    --radar-side: clamp(6rem, 6vw, 7rem);
    padding-left: clamp(1rem, 1.5vw, 1.75rem);
  }

  .blak-signal-radar-plot {
    --radar-chart: clamp(11rem, calc(100cqi - 2 * var(--radar-side)), 16rem);
    --radar-reach: calc(var(--radar-chart) * 100 / 208 + var(--radar-clearance) + var(--radar-icon) / 2);
    margin: calc(var(--radar-reach) - var(--radar-chart) / 2 + var(--radar-icon) / 2 + 0.1875rem) auto
      calc(var(--radar-reach) * 0.79 - var(--radar-chart) / 2 + var(--radar-icon) / 2 + 2rem + 0.125rem);
  }

  .blak-signal-radar-name {
    font-size: clamp(0.8125rem, 0.72vw, 0.875rem);
  }

  /* The first axis points straight up and its score hangs toward the chart: that label sits a touch higher. */
  .blak-signal-radar-label:first-child {
    translate: 0 -0.1875rem;
  }

  .blak-signal-radar-label.is-below-right,
  .blak-signal-radar-label.is-below-left {
    translate: 0 0.125rem;
  }

  /* Each label reads as one unit: the text a step closer to its icon, the score tucked under its name. */
  .blak-signal-radar-door {
    gap: clamp(0.5625rem, 0.55vw, 0.6875rem);
  }

  .blak-signal-radar-score {
    margin-top: -0.5rem;
  }
}

@media (min-width: 1181px) and (max-width: 1359px) {
  .blak-signal-radar {
    --radar-icon: 1.625rem;
    --radar-clearance: 0rem;
    padding-left: 2.25rem;
  }
}

.blak-signal-areas {
  margin-top: clamp(1.375rem, 1.5vw, 1.75rem);
}

/* The title and its count on the left; on the right, a quiet line saying the cards are the way in. */
.blak-signal-areas-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-bottom: 0.75rem;
}

.blak-signal-areas-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem clamp(1rem, 1.2vw, 1.375rem);
}

.blak-signal-areas-intro h2 {
  font-size: clamp(1.25rem, 1.2vw, 1.5rem);
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-1);
}

/* The count, set off from the title by a hairline, as in the approved mock. */
.blak-signal-areas-overline {
  padding-left: clamp(1rem, 1.2vw, 1.375rem);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.blak-signal-areas-hint {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* Four across, then three across the same width: both rows span the grid, as in the mock. */
.blak-signal-area-tabs {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.875rem, 0.85vw, 1rem);
}

/*
  A card, as the approved mock composes it: the icon in its own column, and the
  name, score, conclusion and "Ver detalhes →" on one text column beside it. The
  last row takes the card's remaining height, so every CTA in a row lines up. The
  whole card is the control, a tab over the panel below: a warm near-black a step
  above the ground, a warm hairline, and the area's tone on its icon and CTA.
*/
.blak-signal-area-card {
  --area-tone: var(--tone-copper);
  position: relative;
  grid-column: span 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 1rem;
  width: 100%;
  min-height: 10.75rem;
  min-width: 0;
  margin: 0;
  padding: 1.25rem;
  background-color: var(--card-surface);
  background-image: linear-gradient(180deg, rgba(255, 244, 228, 0.016) 0%, rgba(255, 244, 228, 0) 100%);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.24s var(--focus-ease),
    background-color 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.blak-signal-area-card[data-tone="gold"] {
  --area-tone: var(--tone-gold);
}

.blak-signal-area-card:nth-child(n + 5) {
  grid-column: span 4;
}

.blak-signal-area-card:hover {
  background-color: var(--card-surface-hover);
  border-color: var(--card-line-hover);
}

/*
  The area in focus: two pixels up, a lighter surface with the faintest wash of its
  tone, and its tone on the edge. Colour is never the only sign: its CTA says where
  the detail is, and its arrow turns to point there.
*/
.blak-signal-area-card[aria-selected="true"] {
  background-color: var(--card-surface-selected);
  background-image: linear-gradient(180deg, rgb(var(--area-tone) / 0.03) 0%, rgb(var(--area-tone) / 0) 60%);
  border-color: rgb(var(--area-tone) / 0.46);
  box-shadow: inset 0 1px 0 rgb(var(--area-tone) / 0.08);
  transform: translateY(-2px);
}

.blak-signal-area-card[aria-selected="true"]:hover {
  border-color: rgb(var(--area-tone) / 0.58);
}

.blak-signal-area-card:focus-visible {
  outline: 2px solid rgb(var(--area-tone) / 0.85);
  outline-offset: 3px;
}

.blak-signal-area-card[aria-disabled="true"] {
  cursor: default;
}

/* The header is one unit laid on the card's grid: the icon in its column, the name beside it, centred on one line. */
.blak-signal-area-head {
  display: contents;
}

/*
  Every icon in its area's tone, the halo of the Blak Signal mark, with the faintest
  warmth around it, and a little more on the card in focus. The scores carry the
  meaning; the icons carry the brand.
*/
.blak-signal-area-icon {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: rgb(var(--area-tone));
  filter: drop-shadow(0 0 6px rgb(var(--area-tone) / 0.16));
  transition: filter 0.24s ease;
}

.blak-signal-area-card:hover .blak-signal-area-icon {
  filter: drop-shadow(0 0 7px rgb(var(--area-tone) / 0.26));
}

.blak-signal-area-card[aria-selected="true"] .blak-signal-area-icon {
  filter: drop-shadow(0 0 8px rgb(var(--area-tone) / 0.42)) brightness(1.1);
}

.blak-signal-area-icon .icon {
  width: 100%;
  height: 100%;
  stroke-width: 1.6;
}

.blak-signal-area-name {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-1);
}

/* The score has presence and its band's colour; the scale stays small, neutral and on the number's baseline. */
.blak-signal-area-score {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0.375rem;
  font-family: var(--score-font);
  font-size: clamp(2.25rem, 2vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  white-space: nowrap;
}

.blak-signal-area-score small {
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}

/* The same bands on the cards and on the hero's radar. */
.blak-signal-area-score .score-band-excellent,
.blak-signal-radar .score-band-excellent {
  color: var(--score-excellent);
  text-shadow: 0 0 8px rgba(0, 245, 106, 0.14);
}

.blak-signal-area-score .score-band-strong,
.blak-signal-radar .score-band-strong {
  color: var(--score-strong);
}

.blak-signal-area-score .score-band-fair,
.blak-signal-radar .score-band-fair {
  color: var(--score-fair);
}

.blak-signal-area-score .score-band-watch,
.blak-signal-radar .score-band-watch {
  color: var(--score-watch);
}

.blak-signal-area-score .score-band-weak,
.blak-signal-radar .score-band-weak {
  color: var(--score-weak);
}

.blak-signal-area-score .score-band-critical,
.blak-signal-radar .score-band-critical {
  color: var(--score-critical);
}

/* One conclusion, one or two lines at a measure that reads at a glance. */
.blak-signal-area-reading {
  grid-column: 2;
  grid-row: 3;
  max-width: 36ch;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  color: #d8d8d4;
  text-wrap: pretty;
}

/*
  "Ver detalhes →": text and arrow as one unit, in the area's tone, at the foot of
  the text column. Its row takes the card's remaining height, so every CTA in a row
  lines up; the margin keeps a clear gap above it. On the card in focus it reads
  "Detalhes abaixo", and its arrow turns down, toward the panel.
*/
.blak-signal-area-cta {
  grid-column: 2;
  grid-row: 4;
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  color: rgb(var(--area-tone));
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  transition: filter 0.24s ease;
}

.blak-signal-area-card:hover .blak-signal-area-cta {
  filter: brightness(1.12);
}

.blak-signal-area-cta .icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.24s var(--focus-ease);
}

.blak-signal-area-card:not([aria-selected="true"]):hover .blak-signal-area-cta .icon {
  transform: translateX(3px);
}

.blak-signal-area-card[aria-selected="true"] .blak-signal-area-cta .icon {
  transform: rotate(90deg);
}

/* The report's closing line: quiet, under a hairline — what this is, and when the analysis ran. */
.report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-top: clamp(1.75rem, 2vw, 2.5rem);
  padding-top: clamp(1.25rem, 1.75vw, 1.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.report-footer p {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.report-footer-mark,
.report-footer-status {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
}

.report-footer-mark {
  background: #ffe3cf;
  box-shadow: 0 0 0 2px rgba(233, 112, 42, 0.6), 0 0 9px rgba(233, 112, 42, 0.55);
}

.report-footer-status {
  background: #5ff091;
}

.area-note {
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-faint);
}

.diagnosis {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
}

.diagnosis > div {
  padding: 1.625rem 1.75rem;
}

.diagnosis > div + div {
  border-left: 1px solid var(--line);
}

.label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.verdict-status {
  margin-top: 0.875rem;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.verdict-failed {
  color: var(--danger);
}

.verdict-inconclusive {
  color: var(--neutral);
}

.verdict-technical {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

.verdict-reading {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-dim);
}

.verdict-message {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.verdict-hint {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  color: var(--text-faint);
}

/* Inline, not flex: the count and its unit are one line of text to read and to copy. */
.metric-value {
  margin-top: 0.5rem;
  font-size: clamp(2.75rem, 5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #fff;
}

.metric-unit {
  font-size: 0.38em;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--copper);
}

.metric-note {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-faint);
}

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

.classification-summary {
  margin-top: 1rem;
  overflow: hidden;
}

.classification-summary > summary {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.classification-summary > summary::-webkit-details-marker {
  display: none;
}

.classification-summary > summary:hover {
  background: rgba(255, 255, 255, 0.015);
}

.classification-summary > summary .chevron {
  margin-top: 0.1875rem;
}

.classification-summary > summary h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.classification-summary > summary p {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-faint);
}

.summary-block {
  padding: 0 1.25rem 1.25rem 3.125rem;
}

.summary {
  display: grid;
  border: 1px solid var(--line);
}

.summary-primary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 8px 8px 0 0;
}

.summary-secondary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.summary li {
  min-width: 0;
  padding: 0.75rem 0.875rem;
}

.summary li + li {
  border-left: 1px solid var(--line);
}

.summary-value {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
}

.summary .label {
  margin-top: 0.25rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
}

/* ----------------------------------------------------------- area in focus */

/*
  The one area in detail, under the cards: the clearest surface of the report,
  still dark. Its tone carries over from the card that chose it — the icon, the
  micro-label, a narrow bar on the head's edge and the small marks inside — while
  every reading keeps its own colour.
*/
.area-focus {
  --area-tone: var(--tone-copper);
  margin-top: clamp(1.25rem, 1.6vw, 2rem);
  border-radius: 12px;
  /* A choice lands the panel a little below the top edge, never flush against it. */
  scroll-margin-top: 1.25rem;
}

.area-focus[data-tone="gold"],
.area-panel[data-tone="gold"] {
  --area-tone: var(--tone-gold);
}

.area-focus:focus-visible {
  outline: 2px solid rgb(var(--area-tone) / 0.7);
  outline-offset: 4px;
}

.area-panel {
  --area-tone: var(--tone-copper);
  /* The panel's small marks — section icons, chevrons, the future CTAs, links — take its tone. */
  --action: rgb(var(--area-tone));
  overflow: hidden;
  background: var(--panel-surface);
  border: 1px solid var(--panel-line);
  border-radius: 12px;
}

.area-panel a {
  text-decoration-color: rgb(var(--area-tone) / 0.35);
}

/* A change of focus, not a presentation: the panel rises into place as one piece. */
.area-panel.is-entering {
  animation: area-panel-enter 0.26s var(--focus-ease);
}

@keyframes area-panel-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.capability > details > summary,
.repeated-signals > summary {
  list-style: none;
}

.capability > details > summary::-webkit-details-marker,
.repeated-signals > summary::-webkit-details-marker {
  display: none;
}

.capability-overview:hover,
.repeated-signals > summary:hover,
.pages > summary:hover {
  background: rgba(255, 255, 255, 0.015);
}

/* The head: icon, micro-label, the name with its score at the far end, what the area looks at, and its status. */
.area-panel-head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(1.25rem, 1.7vw, 2rem);
  padding: clamp(1.5rem, 1.75vw, 2rem) clamp(1.5rem, 2.1vw, 2.5rem) clamp(1.375rem, 1.6vw, 1.875rem);
  background: linear-gradient(90deg, rgb(var(--area-tone) / 0.04) 0%, rgb(var(--area-tone) / 0) 56%);
  border-bottom: 1px solid var(--panel-line);
}

/* The edge in the area's tone: orientation, not a colour for the panel. */
.area-panel-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgb(var(--area-tone));
}

.area-section-icon {
  display: grid;
  place-items: center;
  margin-top: 0.125rem;
  color: rgb(var(--area-tone));
  filter: drop-shadow(0 0 8px rgb(var(--area-tone) / 0.2));
}

.area-section-icon .icon {
  width: clamp(2.25rem, 2.3vw, 2.75rem);
  height: clamp(2.25rem, 2.3vw, 2.75rem);
  stroke-width: 1.45;
}

.area-heading {
  min-width: 0;
}

.area-kicker {
  font-family: var(--mono);
  font-size: clamp(0.6875rem, 0.7vw, 0.8125rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(var(--area-tone));
}

/* The name and its score share a line: the score at the far end, in its band's colour. */
.area-title-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1.5rem;
  margin-top: 0.375rem;
}

.section-title {
  font-size: clamp(1.375rem, 1.5vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-1);
}

.area-score {
  font-family: var(--score-font);
  font-size: clamp(2.25rem, 2.3vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  white-space: nowrap;
}

.area-score small {
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: clamp(0.8125rem, 0.8vw, 0.9375rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}

.area-score .score-band-excellent {
  color: var(--score-excellent);
  text-shadow: 0 0 8px rgba(0, 245, 106, 0.12);
}

.area-score .score-band-strong {
  color: var(--score-strong);
}

.area-score .score-band-fair {
  color: var(--score-fair);
}

.area-score .score-band-watch {
  color: var(--score-watch);
}

.area-score .score-band-weak {
  color: var(--score-weak);
}

.area-score .score-band-critical {
  color: var(--score-critical);
}

.area-description {
  max-width: 56rem;
  margin-top: 0.5rem;
  font-size: clamp(0.9375rem, 0.95vw, 1.0625rem);
  line-height: 1.5;
  color: var(--ink-2);
}

.area-panel-head .badge {
  margin-top: 0.875rem;
}

.area-body {
  padding: 0 clamp(1.5rem, 2.1vw, 2.5rem) 0.5rem;
}

.area-didactic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 1.25rem 0 1.5rem;
  border-bottom: 1px solid var(--line);
}

.didactic-block {
  min-width: 0;
  padding: 0.25rem 2.1rem 0.25rem 1.35rem;
}

.didactic-block:first-child {
  padding-left: 0;
}

.didactic-block + .didactic-block {
  border-left: 1px solid var(--line);
}

.didactic-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--action);
}

.didactic-heading .icon {
  width: 1.65rem;
  height: 1.65rem;
}

.didactic-heading h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-1);
}

.didactic-lead,
.didactic-copy {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.didactic-finding {
  --finding-accent: var(--neutral);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.18);
}

.didactic-finding.is-ok {
  --finding-accent: var(--ready);
}

.didactic-finding.is-priority {
  --finding-accent: var(--danger);
}

.didactic-finding.is-recommended {
  --finding-accent: var(--amber);
}

.didactic-finding.is-opportunity {
  --finding-accent: var(--amber-hot);
}

.didactic-finding.is-unmeasured {
  --finding-accent: var(--unmeasured);
}

.didactic-finding-dot {
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.3rem;
  border-radius: 50%;
  background: var(--finding-accent);
}

.didactic-finding-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-1);
  overflow-wrap: anywhere;
}

.didactic-finding-copy {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.atlas-control {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.05rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--action);
  font-size: 0.8125rem;
  font-weight: 600;
}

.atlas-control .icon {
  width: 1rem;
  height: 1rem;
}

.atlas-control:disabled {
  color: rgb(var(--area-tone) / 0.62);
  cursor: not-allowed;
}

/* ------------------------------------------------------------- action plan */

.action-plan {
  padding: 0.9rem 0.85rem 1.15rem;
  border-bottom: 1px solid var(--line);
}

.action-plan-header {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
}

.action-plan-icon {
  display: grid;
  place-items: center;
  color: var(--action);
}

.action-plan-icon .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.action-plan.is-clear .action-plan-icon {
  color: var(--score-excellent);
}

.action-plan-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.9rem;
}

.action-plan-title-line h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-1);
}

.action-plan-status {
  display: inline-block;
  padding: 0.16rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.1em;
}

.action-plan-status.has-actions {
  color: var(--danger);
}

.action-plan-status.is-clear {
  color: var(--score-excellent);
}

.action-plan-copy > p {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-3);
}

.action-plan-order,
.action-plan-completed {
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.action-list {
  margin-top: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
}

.action-item {
  display: grid;
  grid-template-columns: 2rem auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem 1rem;
  min-height: 4.2rem;
  padding: 0.72rem 0.9rem;
}

.action-item + .action-item {
  border-top: 1px solid var(--line);
}

.action-number {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--unmeasured);
}

.action-item > .badge {
  justify-self: start;
}

.action-item-copy {
  min-width: 0;
}

.action-item-copy h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-1);
  overflow-wrap: anywhere;
}

.action-item-copy > p {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.action-item-copy .action-item-scope {
  color: var(--unmeasured);
}

.action-guidance {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  background: none;
  border: 0;
  color: var(--action);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.action-guidance .icon {
  width: 1rem;
  height: 1rem;
}

.action-guidance:disabled {
  color: rgb(var(--area-tone) / 0.68);
  cursor: not-allowed;
}

.action-unmeasured {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  margin-top: 0.85rem;
  padding: 0.8rem 0.9rem;
  border-top: 1px solid var(--line);
  color: var(--unmeasured);
}

.action-unmeasured > .icon {
  width: 1.35rem;
  height: 1.35rem;
}

.action-unmeasured h4 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-2);
}

.action-unmeasured p {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--unmeasured);
}

.area-layer {
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.area-layer-summary {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 0.85rem;
  cursor: pointer;
  list-style: none;
}

.area-layer-summary::-webkit-details-marker {
  display: none;
}

.area-layer-summary > .icon:first-child {
  width: 1.65rem;
  height: 1.65rem;
  color: var(--action);
}

.area-layer-summary > .chevron {
  color: var(--action);
}

.area-layer-copy h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-1);
}

.area-layer-copy p {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-3);
}

.area-layer-meta {
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.area-technical-body,
.pages-body {
  padding: 0 0.85rem 1.25rem 3.75rem;
}

.area-guidance {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 0.85rem;
}

.area-guidance-icon {
  color: var(--action);
}

.area-guidance-icon .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.area-guidance-copy h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-1);
}

.area-guidance-copy p {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--ink-3);
}

.area-guidance-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.guidance-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 2.8rem;
  padding: 0.65rem 1rem;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--action);
  border-radius: 6px;
  color: var(--ink-1);
  font-size: 0.8125rem;
  font-weight: 600;
}

.guidance-button .icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--action);
}

.guidance-button-llm {
  border-color: rgba(169, 140, 255, 0.72);
}

.guidance-button-llm .icon {
  color: #b7a3ec;
}

.guidance-button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.section-empty {
  padding: 1.25rem 0;
  font-size: 0.9375rem;
  color: var(--text-dim);
}

/* --------------------------------------------------------- classifications */

/*
  The seven public classifications. Colour carries the kind of reading, never a
  grade: what could not be measured is quiet and dashed, not red.
*/

.badge {
  display: inline-block;
  padding: 0.15em 0.45em;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  white-space: nowrap;
}

.badge.is-ok {
  color: var(--ready);
}

.badge.is-priority {
  color: var(--danger);
}

.badge.is-recommended {
  color: var(--amber);
}

.badge.is-opportunity {
  color: var(--amber-hot);
}

.badge.is-info {
  color: var(--neutral);
}

.badge.is-unmeasured {
  color: var(--unmeasured);
  border-style: dashed;
}

.badge.is-na {
  color: var(--text-faint);
}

/* ----------------------------------------------------------------- capabilities */

.capability-list {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.capability {
  --capability-accent: var(--line-strong);
  position: relative;
}

.capability + .capability {
  border-top: 1px solid var(--line);
}

.capability::before {
  display: none;
}

.capability.is-priority {
  --capability-accent: var(--danger);
}

.capability.is-recommended {
  --capability-accent: var(--amber);
}

.capability.is-opportunity {
  --capability-accent: var(--amber-hot);
}

.capability.is-ok {
  --capability-accent: var(--ready);
}

.capability.is-unmeasured {
  --capability-accent: var(--unmeasured);
}

.capability-overview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  padding: 1rem 0.25rem;
  cursor: pointer;
}

.capability-overview > .chevron {
  margin-top: 0.1875rem;
}

.capability-overview > .badge {
  margin-top: 0.125rem;
}

.capability-main {
  min-width: 0;
}

.capability-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: #f5f7f6;
  overflow-wrap: anywhere;
}

.capability-reading {
  max-width: 46rem;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.capability-meta {
  margin-top: 0.65rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.capability-detail {
  padding: 0 0.25rem 1.5rem 2rem;
}

.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.tool-chips li {
  max-width: 100%;
  padding: 0.1875rem 0.5rem;
  background: rgb(var(--area-tone) / 0.07);
  border: 1px solid rgb(var(--area-tone) / 0.22);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.signal-collection + .signal-collection,
.repeated-signals {
  margin-top: 1.25rem;
}

.signal-collection-title {
  margin-bottom: 0.625rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.exception-list .signal-collection-title {
  color: var(--capability-accent);
}

.repeated-signals {
  border-top: 1px solid var(--line);
}

.repeated-signals > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text-dim);
}

/* ----------------------------------------------------------------- signals */

.signal-list {
  overflow: hidden;
  background: #070708;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.signal {
  --accent: var(--line-strong);
  position: relative;
  padding: 1rem 1.125rem 1.125rem 1.375rem;
}

.signal + .signal {
  border-top: 1px solid var(--line);
}

.signal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

.signal.is-ok {
  --accent: var(--ready);
}

.signal.is-priority {
  --accent: var(--danger);
}

.signal.is-recommended {
  --accent: var(--amber);
}

.signal.is-opportunity {
  --accent: var(--amber-hot);
}

.signal.is-na {
  --accent: var(--line);
}

.signal.is-unmeasured::before {
  background: repeating-linear-gradient(to bottom, var(--unmeasured) 0 4px, transparent 4px 8px);
}

.signal-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.signal-header > .badge {
  flex: none;
  margin-top: 0.125rem;
}

.chevron {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--text-faint);
  transition: transform 0.18s ease;
}

details[open] > summary .chevron {
  transform: rotate(90deg);
}

.signal-main {
  flex: 1 1 auto;
  min-width: 0;
}

.signal-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #f5f7f6;
  overflow-wrap: anywhere;
}

.signal-meta {
  display: block;
  margin-top: 0.1875rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

.signal-detail {
  margin-top: 0.875rem;
}

.signal-interpretation {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #dfe2e3;
  overflow-wrap: anywhere;
}

.signal-facts {
  display: grid;
  gap: 0.875rem;
  margin: 0;
}

.signal-facts dd {
  max-width: 44rem;
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.signal-attribution {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--unmeasured);
}

.signal-authorities,
.signal-technical {
  margin-top: 0.875rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

.signal-technical span {
  display: block;
}

/* ---------------------------------------------------------------- evidence */

.evidence {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
}

.evidence > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0 0.25rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--text-dim);
}

.evidence > summary::-webkit-details-marker {
  display: none;
}

.evidence > summary:hover {
  color: var(--text);
}

.evidence-item {
  padding: 0.875rem 0 0.25rem;
}

.evidence-item + .evidence-item {
  border-top: 1px dashed var(--line);
}

.evidence-type {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--action);
}

.evidence-item > .kv-key {
  margin-top: 0.875rem;
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.875rem 1.75rem;
  margin-top: 0.75rem;
}

.kv-key {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-ghost);
}

.kv-value {
  margin-top: 0.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-mid);
  overflow-wrap: anywhere;
}

pre {
  margin: 0.5rem 0 0;
  padding: 0.875rem 1rem;
  background: #060607;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-mid);
  overflow-x: auto;
}

/* ------------------------------------------------------------------- pages */

.pages-note {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

.page-list {
  margin-top: 0.75rem;
}

.page-item {
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}

.page-item:first-child {
  border-top: 0;
}

.page-url {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.page-final,
.page-meta {
  margin-top: 0.3125rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page-tools-label {
  margin-top: 0.625rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-ghost);
}

/* ------------------------------------------------------------------ footer */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  padding-top: 1.75rem;
  padding-bottom: 3rem;
}

.site-footer::before {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 0;
  height: 1px;
  background: var(--line);
}

.footer-mark {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.footer-sep,
.footer-line {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--text-faint);
}

/* ------------------------------------------------- hero on a wide desktop */

/*
  The shell is the viewport; these are the hero's own limits, widened in steps so
  a big screen gets a composition made for it. Measured, not guessed: the
  headline sets one line at 1297px @68px and 1602px @84px, so a max-width just
  above half of that is what lands the question on the second line.
*/

@media (min-width: 1280px) {
  .hero h1 {
    max-width: 10.6em;
  }

  .lede {
    max-width: 34rem;
  }

  .scan-form {
    max-width: 42rem;
  }
}

@media (min-width: 1440px) {
  .hero h1 {
    /* Bigger and wider, not smaller to fit: 76px at 1440, 84px from 1584 up. */
    max-width: 10.8em;
    font-size: clamp(4.25rem, 5.3vw, 5.25rem);
  }

  .lede {
    max-width: 43rem;
    font-size: 1.125rem;
  }

  .scan-form {
    max-width: 46rem;
  }

  /* A few pixels of presence on the one action of the page. */
  .field-input {
    padding-block: 1.0625rem;
  }
}

@media (min-width: 1800px) {
  .lede {
    max-width: 47rem;
    font-size: 1.1875rem;
  }

  .scan-form {
    max-width: 53rem;
  }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .blak-signal-area-card,
  .blak-signal-area-card:nth-child(n + 5) {
    grid-column: span 6;
  }

  .blak-signal-area-card:last-child {
    grid-column: 4 / span 6;
  }

  .blak-signal-score-main {
    grid-template-columns: auto minmax(0, 1fr);
    padding-block: clamp(1.25rem, 1.8vw, 2.25rem) clamp(1.25rem, 1.5vw, 2rem);
    padding-right: clamp(1.5rem, 3vw, 3.5rem);
  }

  .blak-signal-verdict {
    width: auto;
  }

  .blak-signal-score-ring > svg {
    width: 13.5rem;
  }

  /* The radar keeps its size on a row of its own, under the score and the conclusion. */
  .blak-signal-radar {
    grid-column: 1 / -1;
    margin-top: 1.25rem;
    padding-left: 0;
  }
}

@media (max-width: 980px) {
  .masthead-nav {
    gap: 1.5rem;
  }

  .method {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .method article {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
  }

  .manifesto-body {
    grid-template-columns: 1fr;
  }

  .diagnosis {
    grid-template-columns: 1fr;
  }

  .diagnosis > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  /* The headline scales with the column here, so its second line stays whole beside the ring. */
  .blak-signal-score {
    --blak-signal-headline-size: clamp(2.125rem, 4.9vw, 2.5rem);
  }

  .blak-signal-score-ring {
    padding-right: 1.75rem;
  }

  .blak-signal-score-ring > svg {
    width: 12rem;
  }

  .blak-signal-verdict {
    padding-left: 1.75rem;
  }

  .summary-secondary {
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
  }

  .summary-secondary li + li {
    border-left: 0;
  }

  .area-didactic {
    grid-template-columns: 1fr;
  }

  .didactic-block,
  .didactic-block:first-child {
    padding: 1.1rem 0.5rem;
  }

  .didactic-block + .didactic-block {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .area-guidance {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .area-guidance-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .eclipse-field {
    /*
      A phone has no room for both: a corona wide enough to read as the eclipse
      covers the headline. The disc goes above the viewport, the corona stops
      short of the eyebrow, and the two small lines at the top are lifted off it.
    */
    --eclipse-size: min(560px, 145vw);
    --eclipse-top: -0.5;
    --eclipse-right: -0.44;
    --eclipse-opacity: 0.8;
  }

  .eclipse-disc {
    background-image: url("/assets/blak-signal-hero-sm-v1.webp");
  }

  .masthead {
    padding-top: 1.75rem;
  }

  .masthead-nav {
    display: none;
  }

  .wordmark-image {
    width: 12.5rem;
  }

  .hero {
    padding-top: clamp(5rem, 16vh, 8rem);
  }

  .field {
    flex-wrap: wrap;
    padding: 0.3125rem;
    row-gap: 0.3125rem;
  }

  .field-icon {
    margin-left: 0.8125rem;
  }

  .field-button {
    flex: 1 0 100%;
    padding: 0.875rem 1.25rem;
  }

  .report-head {
    flex-direction: column;
  }

  .blak-signal-score-main {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 1.5rem;
    min-height: 0;
    padding: 1.75rem 1.25rem 2rem;
  }

  .blak-signal-score-ring {
    padding-right: 0;
  }

  .blak-signal-score-ring > svg {
    width: min(62vw, 14.5rem);
  }

  .blak-signal-verdict {
    width: 100%;
    padding-left: 0;
    border-left: 0;
    text-align: center;
  }

  .blak-signal-headline {
    font-size: clamp(2rem, 9vw, 2.625rem);
    line-height: 1.08;
  }

  .blak-signal-score-reading {
    font-size: 1.0625rem;
  }

  .blak-signal-guidance {
    justify-content: center;
    text-align: left;
  }

  /* Under the next step, as wide as the panel allows: every label stacks on its icon, centred on its point. */
  .blak-signal-radar {
    --radar-icon: 1.375rem;
    --radar-side: 3.25rem;
    margin-top: 0;
  }

  .blak-signal-radar-plot {
    --radar-reach: calc(var(--radar-chart) * 0.64);
    margin: calc(var(--radar-reach) - var(--radar-chart) / 2 + 1.875rem) auto calc(var(--radar-reach) * 0.79 - var(--radar-chart) / 2 + 1.875rem);
  }

  .blak-signal-radar-label .blak-signal-radar-door,
  .blak-signal-radar-label.is-left .blak-signal-radar-door,
  .blak-signal-radar-label.is-below-right .blak-signal-radar-door,
  .blak-signal-radar-label.is-below-left .blak-signal-radar-door {
    top: 0;
    left: 0;
    right: auto;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .blak-signal-radar-copy {
    align-items: center;
  }

  .blak-signal-radar-name,
  .blak-signal-radar-label.is-below-right .blak-signal-radar-name,
  .blak-signal-radar-label.is-below-left .blak-signal-radar-name {
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .blak-signal-radar-score,
  .blak-signal-radar-label.is-below-right .blak-signal-radar-score,
  .blak-signal-radar-label.is-below-left .blak-signal-radar-score {
    margin-top: 0;
    font-size: 0.875rem;
  }

  .blak-signal-area-tabs {
    gap: 0.75rem;
  }

  .blak-signal-area-card,
  .blak-signal-area-card:nth-child(n + 5),
  .blak-signal-area-card:last-child {
    grid-column: 1 / -1;
    column-gap: 1.125rem;
    min-height: 0;
    padding: 1.375rem 1.25rem 1.25rem;
  }

  .blak-signal-area-name {
    letter-spacing: 0.12em;
  }

  .blak-signal-area-score {
    margin-top: 1.125rem;
    font-size: 2.375rem;
  }

  .blak-signal-area-score small {
    margin-left: 0.625rem;
    font-size: 0.875rem;
  }

  .blak-signal-area-reading {
    max-width: 32ch;
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .blak-signal-area-cta {
    gap: 0.625rem;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    line-height: inherit;
  }

  .blak-signal-areas-intro h2 {
    line-height: inherit;
  }

  .blak-signal-areas-overline {
    padding-left: 0;
    border-left: 0;
    font-size: 0.75rem;
  }

  .classification-summary > summary {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .summary-block {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .diagnosis > div {
    padding: 1.25rem;
  }

  .capability-overview {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  .area-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .capability-detail,
  .area-technical-body,
  .pages-body {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .summary-primary {
    grid-template-columns: 1fr 1fr;
  }

  .summary-primary li:last-child {
    grid-column: 1 / -1;
  }

  /* Text keeps its measure; badges drop below instead of squeezing the diagnosis. */
  .capability-overview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0.5rem;
  }

  .capability-overview > .badge {
    grid-column: 2;
    justify-self: start;
    margin: 0;
  }

  /* The head gives its whole width to the words: the icon sits over the micro-label, and the score keeps the name's line. */
  .area-panel-head {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.375rem 1.125rem 1.25rem 1.375rem;
  }

  .area-section-icon {
    justify-self: start;
    margin: 0 0 0.75rem;
  }

  .area-section-icon .icon {
    width: 1.875rem;
    height: 1.875rem;
  }

  .area-title-line {
    column-gap: 1rem;
  }

  .section-title {
    font-size: 1.375rem;
  }

  .area-score {
    font-size: 2.125rem;
  }

  .area-layer-summary {
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .area-layer-meta {
    grid-column: 2;
  }

  .area-layer-summary > .chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .area-guidance-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .guidance-button {
    width: 100%;
  }

  .action-plan {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .action-plan-header {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    align-items: start;
  }

  .action-plan-order,
  .action-plan-completed {
    grid-column: 2;
    white-space: normal;
  }

  .action-item {
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: start;
    gap: 0.55rem 0.75rem;
    padding: 0.9rem 0.75rem;
  }

  .action-number {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .action-item > .badge,
  .action-item-copy,
  .action-guidance {
    grid-column: 2;
    justify-self: start;
  }

  .action-guidance {
    white-space: normal;
  }

  .signal-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .signal-header > .badge {
    justify-self: start;
  }

  .kv-grid {
    grid-template-columns: 1fr;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .eclipse-disc {
    animation: none;
    opacity: var(--eclipse-opacity);
    transition: none;
  }

  .eclipse {
    transform: rotate(var(--eclipse-rotate));
  }

  .ring-stop-energy {
    animation: none;
    stop-opacity: 0.94;
  }

  .blak-signal-score-ring-corona-layer {
    filter: url(#blak-signal-ring-corona-static-filter);
  }

  .blak-signal-score-ring-corona {
    opacity: 0.16;
  }

  .blak-signal-score-ring-hotspot {
    animation: none;
    opacity: 0.12;
  }

  /* The card in focus stays marked — surface, edge, CTA — without moving, and a new panel is simply there. */
  .blak-signal-area-card[aria-selected="true"],
  .blak-signal-area-card:not([aria-selected="true"]):hover .blak-signal-area-cta .icon {
    transform: none;
  }

  .area-panel.is-entering {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}