/*
  components.css: reusable pieces. No page-specific rules here.
  Load order: tokens, base, components, pages.
*/

/* ------------------------------------------------------------------
   .sentence: the placard headline.
   The statement and "Yet" are separate block elements, so "Yet" always
   lands on its own line. The period after Yet is the .disc, never typed;
   the hidden "." gives screen readers the full stop. Put data-blink on the
   disc of the hero sentence only (see /js/blink.js).

   <h1 class="sentence">
     <span class="sentence__statement">Not there.</span>
     <span class="sentence__yet">Yet<span class="disc" aria-hidden="true" data-blink></span><span class="visually-hidden">.</span></span>
   </h1>
   ------------------------------------------------------------------ */

.sentence {
  font-family: var(--font-head);
  font-size: var(--step-hero);
  font-weight: 800;
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-head);
  text-align: start;
  text-wrap: wrap;
}

@media (min-width: 48em) {
  .sentence {
    max-inline-size: 12ch;
  }
}

.sentence__statement,
.sentence__yet {
  display: block;
}

/* ------------------------------------------------------------------
   .disc: the period, drawn. Used after YET in the wordmark and after
   "Yet" in every .sentence. Sized in em, so it scales with the text it
   ends. Its bottom sits on the baseline, sunk by --disc-drop like a round
   glyph; the gap and size match /img/wordmark.svg.
   Always aria-hidden, always followed by <span class="visually-hidden">.</span>
   ------------------------------------------------------------------ */

.disc {
  display: inline-block;
  inline-size: var(--disc-size);
  block-size: var(--disc-size);
  margin-inline-start: var(--disc-gap);
  border-radius: 50%;
  background-color: var(--accent);
  vertical-align: calc(var(--disc-drop) * -1);
}

@media (forced-colors: active) {
  .disc {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}

/* ------------------------------------------------------------------
   .wordmark: YET plus the disc, in running text and headings. Inherits
   the font size. Fixed to the display cut (opsz 96) so it always matches
   the SVG mark, whatever size it is set at.

   <span class="wordmark">YET<span class="disc" aria-hidden="true"></span><span class="visually-hidden">.</span></span>
   ------------------------------------------------------------------ */

.wordmark {
  font-family: var(--font-head);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  letter-spacing: var(--tracking-wordmark);
  white-space: nowrap;
}

/* An inline copy of /img/wordmark.svg takes the text colour of its parent
   (the file defaults to ink, which is what an <img> of it shows). */
.wordmark-svg {
  color: inherit;
}

/* ------------------------------------------------------------------
   .signature: the footer lock-up on every page. The wordmark above
   "Unfinished, on purpose." in serif italic at caption size.

   <p class="signature">
     <span class="wordmark">YET<span class="disc" aria-hidden="true"></span><span class="visually-hidden">.</span></span>
     <span class="signature__line">Unfinished, on purpose.</span>
   </p>
   ------------------------------------------------------------------ */

.signature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.signature .wordmark {
  font-size: var(--step-h2);
  line-height: 1;
}

.signature__line {
  font-family: var(--font-body);
  font-size: var(--step-caption);
  font-style: italic;
  line-height: 1.4;
}

/* ------------------------------------------------------------------
   .button: square, ink, no icon, no arrow.
   ------------------------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--space-8);
  padding: var(--space-4) var(--space-6);
  border: var(--rule) solid var(--ink);
  border-radius: var(--radius);
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--font-head);
  font-size: var(--step-body);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-ui) var(--ease),
    color var(--duration-ui) var(--ease);
}

.button:hover {
  background-color: var(--paper);
  color: var(--ink);
}

/* ------------------------------------------------------------------
   .label and .input: no box, just a rule to write on.
   The global :focus-visible outline stays on top of the accent rule, so
   focus never depends on a colour change alone.
   ------------------------------------------------------------------ */

.label {
  display: block;
  margin-block-end: var(--space-2);
  font-family: var(--font-head);
  font-size: var(--step-caption);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.input {
  display: block;
  inline-size: 100%;
  max-inline-size: var(--measure);
  padding-block: var(--space-2);
  padding-inline: 0;
  border: 0;
  border-block-end: var(--rule) solid var(--ink);
  border-radius: var(--radius);
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: var(--leading-body);
  appearance: none;
  transition: border-color var(--duration-ui) var(--ease);
}

.input:focus {
  border-block-end-color: var(--accent);
}

.input::placeholder {
  color: var(--grey);
  opacity: 1;
}

/* Keep browser autofill on paper instead of its own tint. Functional, not decoration. */
.input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100vmax var(--paper) inset;
  -webkit-text-fill-color: var(--ink);
}

/* ------------------------------------------------------------------
   .checkbox: a 20px square, accent fill when checked, serif label.
   The whole label is the click target.

   <label class="checkbox">
     <input class="checkbox__input" type="checkbox" name="...">
     <span>Label text</span>
   </label>
   ------------------------------------------------------------------ */

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-inline-size: var(--measure);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: var(--leading-body);
  cursor: pointer;
}

.checkbox__input {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  /* centre the box on the first line of the label */
  margin-block-start: calc((var(--leading-body) * 1em - 1.25rem) / 2);
  border: var(--rule) solid var(--ink);
  border-radius: var(--radius);
  background-color: var(--paper);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--duration-ui) var(--ease);
}

.checkbox__input:checked {
  background-color: var(--accent);
}

@media (forced-colors: active) {
  .checkbox__input {
    appearance: auto;
  }
}

/* ------------------------------------------------------------------
   .source: under every statistic.
   ------------------------------------------------------------------ */

.source {
  display: block;
  margin-block-start: var(--space-1);
  color: var(--grey);
  font-family: var(--font-body);
  font-size: var(--step-caption);
  line-height: 1.4;
}

.source a {
  color: inherit;
}

/* ------------------------------------------------------------------
   .stat-placeholder: an unverified number, or any other value still to be
   confirmed ([MONTH — confirm], [CITY — confirm], [URL — confirm]).
   Monospace and grey so it cannot pass for real copy. Write the exact
   text in the HTML; an empty element shows "[STAT — verify]".
   ------------------------------------------------------------------ */

/* Wraps like ordinary text, so a long placeholder ("[verify: EU-US Data Privacy
   Framework …]") never runs off a 320px screen and punctuation follows it. */
.stat-placeholder {
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: 400;
  letter-spacing: 0;
  white-space: normal;
}

.stat-placeholder:empty::before {
  content: "[STAT — verify]";
}

/* ------------------------------------------------------------------
   .flavour-band: a full-bleed band in a flavour colour.
   Place it outside .container (as a child of <main>) and put a
   .container inside it. Text is paper, except on Not Bitter, where paper
   fails contrast and the text is ink. Inside a band, links and focus
   rings use the text colour, because accent fails on the dark bands.
   ------------------------------------------------------------------ */

.flavour-band {
  --band-colour: var(--ink);
  inline-size: 100%;
  padding-block: var(--space-10);
  background-color: var(--band-colour);
  color: var(--paper);
}

.flavour-band--bitter {
  --band-colour: var(--flavour-bitter);
  color: var(--ink);
}

.flavour-band--finished {
  --band-colour: var(--flavour-finished);
}

.flavour-band--quiet {
  --band-colour: var(--flavour-quiet);
}

.flavour-band--tired {
  --band-colour: var(--flavour-tired);
}

.flavour-band a {
  color: inherit;
  text-decoration-color: currentColor;
}

.flavour-band :focus-visible {
  outline-color: currentColor;
}

/* ------------------------------------------------------------------
   .message: form feedback. Errors look the same as everything else;
   the brand does not shout, even about errors. Put the message in a
   role="status" region (or role="alert" for errors) so it is announced.
   ------------------------------------------------------------------ */

.message,
.message--error {
  max-inline-size: var(--measure);
  padding-block: var(--space-2);
  padding-inline-start: var(--space-4);
  border-inline-start: var(--rule) solid var(--accent);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: var(--leading-body);
}

/* ------------------------------------------------------------------
   .honeypot: a trap field for bots. Off-screen, not display:none, so
   naive bots still fill it in. Wrapper is aria-hidden, input has
   tabindex="-1" and autocomplete="off". The server drops any submission
   where it is not empty.
   ------------------------------------------------------------------ */

.honeypot {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------
   Site chrome: the header and footer every page shares. Copy the markup
   between the header:start / footer:start comments in index.html.
   ------------------------------------------------------------------ */

.site-header {
  padding-block: var(--space-5);
}

.site-header__home {
  display: inline-block;
  font-size: var(--step-h3);
  line-height: 1;
  text-decoration: none;
}

.site-footer {
  padding-block: var(--space-9) var(--space-10);
  border-block-start: var(--rule) solid var(--ink);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-block-start: var(--space-8);
}

.site-footer__made {
  margin-block-start: var(--space-5);
}

.site-footer__copy {
  margin-block-start: var(--space-2);
  color: var(--grey);
  font-size: var(--step-caption);
}

/* ------------------------------------------------------------------
   Header navigation: two links, next to the wordmark, wrapping on
   narrow screens. The current page's link carries aria-current.
   ------------------------------------------------------------------ */

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-family: var(--font-head);
  font-weight: 700;
}

[aria-current="page"]:not(.site-header__home) {
  text-decoration-thickness: calc(var(--rule) * 2);
}

/* ------------------------------------------------------------------
   .wall: the "Your Yet" sentences. Each item: statement and "Yet" on
   separate lines in the grotesque at --step-h2, the disc as the period
   (no blink), an optional .source, then the attribution in caption size.
   Markup is written by scripts/sync-wall.mjs and public/js/wall.js.
   ------------------------------------------------------------------ */

.wall {
  display: grid;
  gap: var(--space-10);
  padding: 0;
}

.wall__sentence {
  max-inline-size: 24ch;
  font-family: var(--font-head);
  font-size: var(--step-h2);
  font-weight: 800;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-head);
}

.wall__statement,
.wall__yet {
  display: block;
}

.wall__by {
  margin-block-start: var(--space-3);
  color: var(--grey);
  font-size: var(--step-caption);
}

.wall__item .source {
  margin-block-start: var(--space-3);
}

/* Nav links: padding brings the target to at least 24px tall (WCAG 2.5.8). */
.site-nav__list a {
  display: inline-block;
  padding-block: var(--space-1);
}