/*
 * The panel's page.
 *
 * Borrows the console's components wholesale — verdict block, bands, writing, calls — and
 * only changes the frame around them. Two surfaces showing the same evidence differently
 * would be two chances to disagree about what a candidate did.
 *
 * The part that is genuinely different is print. In practice this ends up as a PDF in a
 * hiring pack, and a page that prints badly gets screenshotted instead, which is how a
 * result ends up circulating as a cropped image with no caveats attached to it.
 */

body { background: var(--paper); display: block; }

.wrap { max-width: 940px; margin: 0 auto; padding: 26px 26px 60px; }
.wrap.narrow { max-width: 460px; padding-top: 70px; }

.rep-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--rule);
}
.rep-head .sub { margin-left: 9px; }

.rep-name { font: 600 30px/1.15 var(--serif); margin: 0 0 4px; letter-spacing: -.02em; }
.rep-meta {
  margin: 0 0 20px; font: 500 12.5px/1.4 var(--mono); color: var(--ink-3);
}

.rep-foot {
  margin: 26px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
  border-top: 1px solid var(--rule); padding-top: 14px;
}

/* ── print ───────────────────────────────────────────────────────────────
 *
 * Backgrounds are kept, because the verdict's colour is carrying meaning rather than
 * decoration — printed grey it becomes four identical panels. Panels are told not to break
 * across pages: a written justification split down the middle loses the half that mattered.
 */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .rep-head button, #print { display: none; }
  .panel {
    box-shadow: none; border: 1px solid var(--rule-2);
    break-inside: avoid; page-break-inside: avoid;
  }
  .write, .call, .band { break-inside: avoid; page-break-inside: avoid; }
  h2 { break-after: avoid; page-break-after: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── technique, and the queries behind it ────────────────────────────────
 *
 * Two sections that only exist because the candidate now writes their own SQL. The checks
 * read as a list of facts, because that is what they are; the transcript reads as code,
 * because a reader is scanning it for shape rather than prose.
 */
.checks { display: flex; flex-direction: column; gap: 11px; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check .mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font: 600 12px/1 var(--sans);
  background: var(--bad-bg); color: var(--bad);
}
.check.on .mark { background: var(--teal-bg); color: var(--teal); }
.check .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.check .t b { font: 600 14.5px/1.35 var(--sans); }
.check .t .a { font: 400 13px/1.55 var(--sans); color: var(--ink-3); }

.queries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.queries .q {
  border-left: 3px solid var(--rule-2); padding: 2px 0 2px 11px;
}
.queries .q.kept { border-left-color: var(--teal); }
.queries .q.failed { border-left-color: var(--rule); opacity: .62; }
.queries pre {
  margin: 0; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 12.5px/1.6 var(--mono); color: var(--ink);
}
.queries .a {
  display: block; margin-top: 2px;
  font: 400 11.5px/1.5 var(--mono); color: var(--ink-3);
}
.queries .q.failed .a { color: var(--bad); }

/* The technique inventory. A count, a name, a sentence — never a bar or a grade. */
.used { display: flex; flex-direction: column; gap: 10px; }
.use { display: flex; gap: 11px; align-items: baseline; }
.use .n {
  flex: none; min-width: 22px; text-align: right;
  font: 600 15px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.use .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.use .t b { font: 600 14.5px/1.35 var(--sans); }
.use .t .a { font: 400 13px/1.55 var(--sans); color: var(--ink-3); }

/* The banner on /sample. Warn-toned rather than accent-toned: it is a caveat, not a feature. */
.sample-note {
  background: var(--warn-bg); border: 1px solid var(--warn);
  border-radius: 9px; padding: 14px 16px; margin-bottom: 22px;
}
.sample-note b { display: block; margin-bottom: 5px; font: 600 14.5px/1.3 var(--sans); }
.sample-note p {
  margin: 0 0 6px; font: 400 13.5px/1.6 var(--sans); color: var(--ink-2); max-width: 74ch;
}
.sample-note p:last-child { margin-bottom: 0; }

/* Which language a transcript line was written in. Shown only when both appear. */
.queries .lang {
  display: inline-block; margin-bottom: 4px; padding: 1px 7px; border-radius: 4px;
  background: var(--room); color: var(--ink-3);
  font: 600 10px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}

/* ── what to ask next ────────────────────────────────────────────────────
 *
 * Directly under the verdict, because it is the second thing a reader wants and the first
 * thing they can act on. Numbered rather than bulleted: they are in the order they matter,
 * and somebody preparing an interview wants to know which to spend time on if they only
 * get to one.
 * --------------------------------------------------------------------- */

.next-round .probes {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 16px;
  counter-reset: probe;
}
.next-round .probes li { position: relative; padding-left: 34px; counter-increment: probe; }
.next-round .probes li::before {
  content: counter(probe);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent);
  font: 600 12px/1 var(--sans);
}
.next-round .area {
  display: inline-block; margin-bottom: 5px;
  font: 600 11px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.next-round .ask { margin: 0 0 5px; font: 400 15px/1.5 var(--sans); color: var(--ink); }
.next-round .why { margin: 0; font: 400 13.5px/1.55 var(--sans); color: var(--ink-2); }

/*
 * Against their own team.
 *
 * Directly above the abstract standing line and visually heavier than it, because it is
 * the comparison a reader came for and the other two are context. It only ever renders
 * when at least three of the team have sat it.
 */
.vs-team {
  margin: 14px 0 0; padding: 12px 14px;
  border: 1px solid var(--rule-2); border-radius: 8px;
  background: var(--sunken);
  font: 400 14.5px/1.5 var(--sans); color: var(--ink);
}
.vs-team b { font-variant-numeric: tabular-nums; }
.vs-team span {
  display: block; margin-top: 4px;
  font: 400 12.5px/1.45 var(--sans); color: var(--ink-3);
}

/* ── sending it on ───────────────────────────────────────────────────────
 *
 * The panel that offers the narrower link, and the only thing on this page that asks the
 * reader to do something rather than telling them something.
 *
 * It sits directly under the verdict because that is where the decision is made: somebody
 * reads "Advance", thinks the hiring manager should see this, and forwards the address bar
 * — which forwards the verdict, every call, what the candidate wrote and the queries
 * behind it. The offer has to be at that moment or it may as well not exist.
 *
 * Styled as a quiet utility rather than a call to action. It is a choice about who sees a
 * person's assessment, and a page that made it look inviting would be encouraging the
 * choice rather than presenting it.
 * --------------------------------------------------------------------- */

.share-summary { background: var(--sunken); }
.share-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.share-row input {
  flex: 1; min-width: 200px;
  padding: 9px 12px;
  border: 1px solid var(--rule-2); border-radius: 7px;
  background: var(--card); color: var(--ink-2);
  font: 400 12.5px/1.3 var(--mono);
  /* Truncated rather than wrapped: it is one token to copy, not text to read. */
  text-overflow: ellipsis;
}
.share-row input:focus { outline: 0; border-color: var(--accent); }
.share-row .ghost { flex: none; }
/* An anchor styled as a button needs the vertical rhythm a button gets for free. */
.share-row a.ghost { display: inline-flex; align-items: center; text-decoration: none; }

/*
 * Not printed. A hiring pack does not need a link somebody cannot click, and a printed
 * page carrying the address of a shareable summary is a way for that address to escape
 * onto a photocopier.
 */
@media print { .share-summary { display: none; } }

/* ── the signature ──────────────────────────────────────────────────────
 *
 * This document's most common form is a PDF in a hiring pack, several pages long, read by
 * people who were not the ones who generated it. It had a name at the top and nothing at the
 * bottom — fine on screen, wrong on paper, where page four arrives carrying a named person's
 * assessment with no indication of what produced it.
 *
 * Deliberately quiet. It is a provenance note, not a logo placement: the reader's attention
 * belongs to the candidate above it.
 * --------------------------------------------------------------------- */

.rep-foot {
  margin: 26px 0 0; padding-top: 16px; border-top: 2px solid var(--bronze);
  display: flex; gap: 11px; align-items: flex-start;
}
.rep-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
}
.rep-foot b { display: block; font: 600 13.5px/1.5 var(--sans); color: var(--ink); }
.rep-foot span {
  display: block; max-width: 68ch;
  font: 400 12.5px/1.6 var(--sans); color: var(--ink-3);
}

/* Kept with whatever precedes it rather than orphaned onto a page of its own. */
@media print { .rep-foot { break-before: avoid; page-break-before: avoid; } }

/* ── the measures, inside the verdict card ───────────────────────────────
 *
 * They were a separate panel further down, under a pair of chip lists up here saying which
 * were strong and which were weak — the same information twice, in two formats, in two
 * places. Three bars is little enough to sit in the card, and putting them here lets the page
 * answer its own question: this is the call, and this is what it rests on.
 * --------------------------------------------------------------------- */

.measures { margin: 16px 0 4px; display: flex; flex-direction: column; gap: 11px; }
.measures .band + .band { border-top: 1px solid var(--rule); padding-top: 11px; }
.measures .band .l { width: 168px; }
.measures .band .b { width: 84px; letter-spacing: 0; font-size: 11.5px; text-transform: none; }
.measures .band.strong .b { color: var(--teal); }
.measures .band.weak .b { color: var(--bad); }
.measures .band .h { margin: 5px 0 0 180px; font-size: 12.5px; }

@media (max-width: 620px) {
  .measures .band .l { width: auto; flex: 1; }
  .measures .band .track { flex: none; width: 64px; }
  .measures .band .h { margin-left: 0; margin-top: 7px; }
}

/* ── what each measure meant ─────────────────────────────────────────── */

.measure-detail h2 { margin-bottom: 4px; }
.md-head { margin: 0 0 10px; font: 500 14px/1.5 var(--mono); color: var(--ink-2); }
.md-body { margin: 0 0 12px; max-width: 72ch; font-size: 14px; line-height: 1.62; }
.md-work {
  margin: 0; padding: 11px 14px; max-width: 72ch;
  background: var(--sunken); border-left: 3px solid var(--accent); border-radius: 0 7px 7px 0;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}
.md-work b { color: var(--ink); }

/* ── the craft rating ────────────────────────────────────────────────────
 *
 * Deliberately styled as a label rather than as a score: no bar, no percentage, no position
 * on a scale. It is the one thing on this page a reader is being handed to weigh themselves,
 * and giving it the same furniture as the measures above would undo the sentence that says
 * it does not count.
 * --------------------------------------------------------------------- */

/* The panel itself sits quieter than the measures, which is the point of it. */
.panel.tech { background: var(--sunken); }
.tech-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.tech-rating {
  font: 600 15px/1 var(--sans); padding: 5px 11px; border-radius: 20px;
  background: var(--room); color: var(--ink-2);
}
.tech-rating.t-strong { background: var(--teal-bg); color: var(--teal); }
.tech-rating.t-solid { background: var(--accent-bg); color: var(--accent); }
.tech-rating.t-limited { background: var(--bad-bg); color: var(--bad); }
.tech-lang { font: 500 12.5px/1 var(--mono); color: var(--ink-3); }
.tech-line { margin: 0 0 5px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.tech-line.miss { color: var(--ink-3); }

/* ── what we noticed ─────────────────────────────────────────────────── */

.obs { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.obs li { font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* ── the calls, with the reasoning attached ──────────────────────────────
 *
 * `asking`, `trap` and `missed` are the three lines that turn "said X, it was Y" into
 * something a reader who has never seen this company can actually judge. They are quieter
 * than the call itself and louder than the metadata, because they are the explanation rather
 * than the finding.
 * --------------------------------------------------------------------- */

.call .a.asking { color: var(--ink-3); font-style: italic; }
.call .a.trap { color: var(--warn); }
.call .a.missed { color: var(--bad); font: 500 12.5px/1.5 var(--mono); }

/* ── the folded sections ─────────────────────────────────────────────────
 *
 * The transcript, the technique inventory and the four method checks are reference. A hiring
 * manager was being handed twelve raw queries directly under the verdict, with no context for
 * the questions and no way to tell a good one from a bad one. Deleting them would be worse —
 * some readers are technical, and a product that hides the working while claiming to show the
 * working has abandoned its own argument — so they fold instead.
 * --------------------------------------------------------------------- */

details.fold > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 9px;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before {
  content: "▸"; color: var(--ink-3); font-size: 12px; transition: transform .12s ease;
}
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary h2 { margin: 0; }
details.fold > summary:hover h2 { color: var(--accent); }
details.fold[open] > summary { margin-bottom: 14px; }

/* Everything open on paper: a folded section in a PDF is a section that does not exist. */
@media print {
  details.fold > summary::before { display: none; }
  details.fold > *:not(summary) { display: revert !important; }
}

/* ── the offer to summarise ──────────────────────────────────────────────
 *
 * Every other word on this page came out of arithmetic over what the candidate did, and that
 * is most of why it can be trusted. The moment part of it is written by a model, a reader
 * who cannot tell which part will discount all of it — so the offer names itself before it
 * is pressed and the result arrives boxed and labelled, never dropped into the flow as
 * though it were more of the same.
 *
 * Deliberately quiet. This is an aid to reading, not the product.
 * --------------------------------------------------------------------- */

.ai {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--rule-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.ai-note {
  flex: 1; min-width: 240px; max-width: 60ch;
  font: 400 12px/1.5 var(--sans); color: var(--ink-3);
}
.ai-go[disabled] { opacity: .6; cursor: progress; }

.ai-out {
  width: 100%; margin-top: 4px;
  padding: 13px 15px; border-radius: 8px;
  background: var(--bronze-bg); border-left: 3px solid var(--bronze);
  font: 400 14px/1.62 var(--serif); color: var(--ink-2);
  white-space: pre-wrap;
}
/* Bronze because it is the one colour here that implies neither good news nor bad — this is
 * a reading aid on a page about somebody's career, and it must not look like a verdict. */
.ai-out.working { color: var(--ink-3); font-style: italic; }
.ai-out.failed { background: var(--bad-bg); border-left-color: var(--bad); color: var(--bad); }

/*
 * Not printed. A hiring pack should carry what the assessment measured, and a paragraph a
 * model wrote about it on somebody's screen is not that — it is also, unlike everything else
 * on the page, not reproducible from the run.
 */
@media print { .ai { display: none; } }

/* ── the four tiers ──────────────────────────────────────────────────────
 *
 * The page used to be eleven panels of identical weight in one column. Everything the same
 * size, all of it prose, so a reader with five minutes had no way to tell which parts were
 * load-bearing — they read it top to bottom or not at all.
 *
 * Four tiers now, each visually distinct enough to be recognised without being read:
 *
 *   Decide   the verdict card — largest type, elevated, coloured edge
 *   Act      what to ask them — accented, narrow, unmistakably a list of actions
 *   Check    the evidence — ordinary white panels under a ruled heading
 *   Context  technical and behaviour — sunken, two-up, smaller type
 *
 * The hierarchy is carried by weight and ground rather than by colour, because the one thing
 * colour is doing on this page already is marking right from wrong, and a second meaning for
 * it would collide with the first.
 * --------------------------------------------------------------------- */

/* Tier 1 — the card that answers the question. */
.verdict-panel { padding: 26px 28px; box-shadow: var(--shadow); }
.verdict-panel .stamp { font-size: 26px; }
.verdict-panel .because { font-size: 15.5px; line-height: 1.6; max-width: 68ch; }

/* Tier 2 — the action, and the only accented block on the page. */
.tier.act {
  background: var(--accent-bg); border: 1px solid var(--accent);
  border-radius: 12px; padding: 20px 24px; margin: 22px 0;
}
.tier.act .tier-head {
  margin: 0 0 14px;
  font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2);
}
.tier.act .probes { margin: 0; }

/*
 * Tier 3 and 4 open with a ruled heading rather than a card.
 *
 * A section label that is itself a panel competes with the panels inside it. A rule and a
 * word cost nothing and are read as structure rather than as content.
 */
.tier-rule {
  display: flex; align-items: center; gap: 14px;
  margin: 34px 0 14px;
  font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}
.tier-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--rule-2);
}
.tier-rule.quiet { margin-top: 40px; color: var(--ink-3); opacity: .8; }

/* Tier 4 — context, two-up and set down into the page. */
.context {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}
.context .panel { background: var(--sunken); box-shadow: none; }
/* Named so the behavioural panel reads as context even when it stands on its own — the
 * grid drops to one column on a narrow screen and the tier would otherwise lose its cue. */
.panel.soft { background: var(--sunken); box-shadow: none; }
.context .panel h2 { font-size: 15px; }
.context .obs li { font-size: 13.5px; }

/* ── the shape of the sitting ────────────────────────────────────────────
 *
 * Six marks, left to right, in the order the decisions happened. The only element on this
 * page that is understood without reading — which is why it carries no labels, and why it
 * sits between the verdict and the measures rather than after them.
 *
 * Four green then two amber is a different candidate from two amber then four green: one
 * warmed up, one gave up. No amount of prose about individual calls delivers that as fast.
 * --------------------------------------------------------------------- */

.trail-wrap { margin: 18px 0 20px; }
.trail { display: flex; gap: 6px; align-items: stretch; }
/*
 * The mark stretches across its column; the column is what flexes.
 *
 * `flex: 1` used to sit on the mark itself, which was right while the mark was a direct
 * child of the row. Wrapping it to hang a number underneath made its parent a *column*, and
 * in a column `flex: 1` sets `flex-basis: 0` on the main axis — which is height. The bars
 * silently collapsed to nothing and the row rendered as six numbers over a colour key
 * explaining colours that were no longer on screen.
 */
.trail .d {
  flex: none; height: 30px; width: 100%; border-radius: 5px; display: block;
  background: var(--rule);
}
/*
 * Scoped to the mark, not to the row it sits in.
 *
 * These were written as `.trail .d.best`, which is true of the row and false of the legend —
 * so every swatch under the key rendered as a bare grey square while the words beside it
 * named five colours. A key that does not match the thing it explains is worse than no key.
 *
 * Two greens, because "right" and "right for the right reason" are different findings and a
 * reader should be able to see the difference without reading which is which.
 */
.d.best    { background: var(--teal); }
.d.ok      { background: var(--teal); opacity: .45; }
.d.shallow { background: var(--warn); }
.d.miss    { background: var(--bad); opacity: .55; }
.d.skip    { background: var(--rule-2); }

.trail-key {
  display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 9px;
  font: 400 11.5px/1.5 var(--sans); color: var(--ink-3);
}
.trail-key span { display: inline-flex; align-items: center; gap: 6px; }
.trail-key .d { width: 12px; height: 12px; flex: none; border-radius: 3px; }

/* ── where they would need support ───────────────────────────────────────
 *
 * Three panels stood here, one per measure, each restating a bar from the card above and
 * then explaining it — and two of the three routinely said a version of "this was good" at
 * four times the length of the bar that had already said so.
 *
 * Only the measures that did not come out Strong appear now. Explaining the exception is the
 * whole idea: attention is finite and belongs where the risk is, and a candidate strong on
 * everything gets no section at all, which is itself the fastest way to say it.
 * --------------------------------------------------------------------- */

.gaps .gap + .gap { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.gap-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.gap-name { font: 600 15px/1.3 var(--sans); }
.gap-band {
  font: 600 10.5px/1 var(--sans); letter-spacing: .04em;
  padding: 3px 7px; border-radius: 4px;
  background: var(--room); color: var(--ink-3);
}
.gap-band.weak { background: var(--bad-bg); color: var(--bad); }
.gap-band.mixed { background: var(--warn-bg); color: var(--warn); }
.gap-body { margin: 0 0 10px; max-width: 72ch; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.gap-work {
  margin: 0; padding: 11px 14px; max-width: 72ch;
  background: var(--sunken); border-left: 3px solid var(--accent); border-radius: 0 7px 7px 0;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}
.gaps.none p { margin: 0; max-width: 68ch; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

@media print {
  /* On paper the two-up context block reads better stacked at full width. */
  .context { grid-template-columns: 1fr; }
  .verdict-panel { box-shadow: none; }
}

/* ── numbered marks ──────────────────────────────────────────────────────
 *
 * A reader who wants to say "the third one" needs the row to be countable. Without numbers
 * the graphic answers "what shape was this sitting" and nothing else; with them it also
 * answers "which one was that", which is the question somebody asks immediately after.
 * --------------------------------------------------------------------- */

.trail .d-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.trail .d-wrap b {
  font: 500 10px/1 var(--mono); color: var(--ink-3); text-align: center;
  font-variant-numeric: tabular-nums;
}

/* States present are stated plainly; ones that did not occur stay in the key, greyed. */
/* The key sits below the row it explains, with air between them. */
.trail-key { margin-top: 12px; }
.trail-key .absent { opacity: .45; }
.trail-key .absent .d { opacity: .3; }

/* ── the other angles ────────────────────────────────────────────────────
 *
 * Measured, reported, and deliberately not scored — so they sit in the card a reader
 * actually reads, and wear different furniture from the bars above them. No track, no band
 * word, no colour that means good or bad: a label, a fact, and the detail under it.
 *
 * A hiring manager replacing a SQL screen arrives wanting the technical line, and it used to
 * be two screens below the verdict.
 * --------------------------------------------------------------------- */

.angles {
  display: grid; gap: 14px 26px; margin: 20px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-top: 16px; border-top: 1px solid var(--rule);
}
.angle { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.angle-k {
  font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.angle-v { font: 500 14px/1.4 var(--sans); color: var(--ink); }
.angle-v .tech-rating { font-size: 13px; padding: 2px 8px; vertical-align: 1px; }
.angle-n { font: 400 12px/1.5 var(--sans); color: var(--ink-3); }
/*
 * The behavioural counts that are worth a second look, and the one that is worth a first.
 *
 * Amber for a skip or a bought hint: both are ordinary, both are priced, and neither is a
 * problem on its own. Red only for leaving the page long enough to be warned, which is the
 * one fact in this strip a reader must not scan past.
 */
.ang-warn { color: var(--warn); }
.ang-bad { color: var(--bad); font-weight: 600; }

/*
 * A sitting that ended itself, above the verdict rather than inside it.
 *
 * Not a judgement about the analysis — the fact that changes how every number below it
 * should be read. A reader who meets the score first has already begun forming a view of
 * somebody who simply did less work, and no amount of explanation further down undoes a
 * first impression that was formed on a missing fact.
 * --------------------------------------------------------------------- */
.dq {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 0 16px; padding: 16px 18px; border-radius: 10px;
  background: var(--bad-bg); border: 1px solid var(--bad); border-left-width: 4px;
}
.dq-mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--bad); color: #fff; font: 800 16px/1 var(--sans);
}
.dq b { display: block; font: 600 16px/1.3 var(--sans); color: var(--bad); margin-bottom: 6px; }
.dq p { margin: 0 0 7px; font: 400 13.5px/1.6 var(--sans); color: var(--ink-2); max-width: 74ch; }
.dq p:last-child { margin-bottom: 0; }