@layer components {
  /* Pages index */
  .pages__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-8);
  }

  .pages__heading {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    letter-spacing: -0.02em;
  }

  .pages__description {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-ink-light);
    margin-block-end: var(--space-8);
    line-height: 1.6;
  }

  .pages__action {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-6);
    background: var(--color-ink);
    color: var(--color-paper);
    text-decoration: none;
    border: 1px solid var(--color-ink);
    cursor: pointer;

    &:hover, &:focus-visible { opacity: 0.85; }
    &:focus-visible { outline: none; }
  }

  /* Quiet variant — New page sits next to the primary AI action so the
     AI button reads as the dominant move without screaming. */
  .pages__action--ghost {
    background: transparent;
    color: var(--color-ink);
    border-color: var(--color-rule-strong, var(--color-rule));
  }

  /* Trigger group in the header. Buttons stay on one row; the disclosable
     composer panel below is a sibling of .pages__header, not a child of
     this group, so opening it can never drag the heading vertically. */
  .pages__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
  }

  /* Inline composer that drops below the header. Editorial-quiet: paired
     hairlines above and below, generous block padding, full main-column
     width. Lives in the document flow (not an overlay) so the user stays
     grounded in the same context they triggered it from. The visual
     signal between closed and open is the panel's presence + the
     hairlines, not motion — a tween would short-circuit anyway because
     [hidden] flips display: none. */
  .pages__generate {
    margin-block: var(--space-6) var(--space-8);
    padding-block: var(--space-6);
    border-top: var(--border);
    border-bottom: var(--border);

    &[hidden] {
      display: none;
    }
  }

  /* Fill the admin column. The 38rem prose measure is for reading
     surfaces (public articles, copydesk); this is a working surface
     where the user composes a prompt and the surrounding rows
     (page list, header) already span the column. */
  .pages__generate-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .pages__generate-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .pages__generate-input {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    padding: var(--space-3) var(--space-4);
    border: var(--border);
    background: var(--color-paper);
    color: var(--color-ink);
    width: 100%;
    min-height: 5rem;
    resize: vertical;

    &::placeholder { color: var(--color-muted); }
    &:focus-visible { outline: none; border-color: var(--color-accent); }
  }

  .pages__generate-hint {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--color-muted);
    line-height: 1.5;
    margin: 0;
    max-width: 38rem;
  }

  .pages__generate-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  /* Research in-progress banner. Sits between the header and the pages list
     while the Writer agent is running. Editorial-quiet: thin top + bottom
     hairlines, italic body text, no card. The visual weight comes from
     being the only block in that vertical lane, not from a colored fill. */
  .pages__research-status {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-muted);
    line-height: 1.5;
    padding: var(--space-4) 0;
    margin: 0 0 var(--space-4) 0;
    border-top: var(--border);
    border-bottom: var(--border);
  }

  .pages__research-link {
    font-style: normal;
    color: var(--color-ink);
    text-decoration: underline;
    margin-inline-start: var(--space-2);

    &:hover { color: var(--color-accent); }
  }

  /* The list owns the column track, and rows opt into it with `subgrid`. A
     grid per row cannot align across rows: each row would size its own columns,
     so STATUS drifted right on any row without a date. Declaring the tracks
     once here is what makes the column actually a column. */
  .pages__list {
    display: grid;
    grid-template-columns: var(--space-4) minmax(0, 1fr) auto auto;
    border-top: var(--border);
  }

  /* Columns, not a space-between flex row. The old row let status and date
     land wherever the title happened to end, so STATUS appeared at a different
     x on every line and could not be scanned down. The marker gutter is
     reserved on every row, including healthy ones, so flagged rows read down a
     straight edge and titles don't shift when a flag appears. */
  .pages__item {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
    column-gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: var(--border);
  }

  /* Below 40rem there is no room for four columns, so the row stacks: title on
     its own line, status and date beneath it. Dropping out of subgrid here is
     deliberate — column alignment stops being worth anything once each row is
     two lines tall. */
  @media (max-width: 40rem) {
    .pages__list {
      display: flex;
      flex-direction: column;
    }

    .pages__item {
      grid-template-columns: var(--space-4) minmax(0, 1fr);
      row-gap: var(--space-1);
    }

    .pages__item-status,
    .pages__item-date {
      grid-column: 2;
      text-align: start;
    }
  }

  .pages__item-marker {
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: 50%;
    background: transparent;
    align-self: center;
    justify-self: center;
  }

  .pages__item--needs-attention .pages__item-marker {
    background: var(--color-ink);
  }

  .pages__item-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    min-width: 0;
  }

  .pages__item-title {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--color-ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover { color: var(--color-accent); }
  }

  /* Sized by the subgrid track, so every label starts on the same x. */
  .pages__item-status {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    white-space: nowrap;

    &--published { color: var(--color-accent); }
    &--archived { color: var(--color-rule-strong); }
  }

  .pages__item-locale {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-rule-strong);
    margin-inline-start: var(--space-1);
  }

  .pages__item-date {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-muted);
    white-space: nowrap;
    text-align: end;
  }

  /* The per-row note. Sits with the title rather than in its own block so a
     flagged row grows by one line instead of restructuring. */
  .pages__item-meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  .pages__item-meta--needs-attention {
    color: var(--color-ink);
  }

  .pages__item-locales {
    display: inline-flex;
    gap: var(--space-1);
  }

  .pages__empty {
    font-family: var(--font-body);
    color: var(--color-muted);
    font-style: italic;
    padding: var(--space-8) 0;
  }

  /* Page show — narrow centered column, Interface Craft alignment */
  .page {
    max-width: var(--content-narrow);
    margin-inline: auto;
  }

  .page__header {
    margin-block-end: var(--space-8);
    padding-block-end: var(--space-6);
    border-bottom: var(--border);
  }

  /* The meta row carries a filled pill (.copy-page__trigger), so the gap under
     the headline has to clear a solid black shape, not just a line of muted
     text. At --text-4xl (up to 3.125rem) --space-2 read as attached; --space-6
     also fixes the header's rhythm, which was tighter above the meta row than
     below it. */
  .page__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-block-end: var(--space-6);
    overflow-wrap: break-word;
  }

  .page__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
    margin-block-end: var(--space-4);
  }

  .page__date {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-muted);
  }

  /* Page Freshness Monitor — public "Updated N days ago" stamp.
     Subordinate to the publish date: italic muted text inline with
     .page__date as secondary metadata, not a chip that shouts louder
     than the canonical fact. */
  .page__updated {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-muted);
  }

  /* Admin-only "Refresh now" + "Undo refresh" buttons in page__meta.
     Pill shape + sentence-case to match .copy-page__trigger's button
     language (rather than competing square chips). */
  .page__refresh-form {
    display: contents;
  }

  .page__refresh-btn {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    border: var(--border);
    border-radius: 2rem;
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
  }

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

  /* Undo is recoverable — don't outshout Delete (which owns --color-accent).
     Same neutral chrome as Refresh; the label carries the meaning. */
  .page__refresh-btn--undo {
    color: var(--color-muted);
  }

  .page__nav {
    margin-block-start: var(--space-12);
    padding-block-start: var(--space-8);
    border-top: var(--border);
  }

  .page__nav-link {
    display: block;
    text-decoration: none;
    color: var(--color-ink);

    &:hover .page__nav-title { text-decoration: underline; }
  }

  .page__nav-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--space-1);
  }

  .page__nav-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
  }

  .page__actions {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);

    /* Reset button_to form wrapper */
    & form {
      margin: 0;
      padding: 0;
      display: inline;
    }
  }

  .page__action {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: inherit;
    vertical-align: baseline;

    &:hover { color: var(--color-ink); }
  }

  .page__action--danger {
    color: var(--color-accent);

    &:hover { color: var(--color-accent-hover); }
  }

  /* Article content area with optional sticky TOC sidebar.
     The .page is centered at --content-narrow (38rem) inside the 64rem
     app-main, creating ~13rem of gutter on each side. The TOC sits in
     the left gutter via absolute positioning + sticky list. */
  .page__content {
    position: relative;
  }

  .toc {
    display: none;
  }

  @media (min-width: 72rem) {
    .toc:not([hidden]) {
      display: block;
      position: absolute;
      inset-inline-end: calc(100% + var(--space-6));
      top: 0;
      bottom: 0;
      width: 10rem;
    }

    .toc__list {
      position: sticky;
      top: var(--space-8);
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .toc__item {
      margin-block-end: var(--space-2);
    }

    .toc__item--nested {
      padding-inline-start: var(--space-3);
    }

    .toc__link {
      font-size: var(--text-xs);
      line-height: 1.4;
      color: var(--color-muted);
      text-decoration: none;
      display: block;
      transition: color 150ms ease;

      &:hover { color: var(--color-ink); }
    }

    .toc__link--active {
      color: var(--color-ink);
    }

    .toc-mobile:not([hidden]) {
      display: none;
    }
  }

  /* Mobile TOC — collapsible disclosure, shown below 72rem */
  .toc-mobile:not([hidden]) {
    margin-block-end: var(--space-8);
    border: var(--border);
    border-radius: var(--space-2);
    padding: var(--space-4) var(--space-6);
  }

  .toc-mobile__summary {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--color-ink-light);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &::after {
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      border-inline-end: 1.5px solid var(--color-muted);
      border-bottom: 1.5px solid var(--color-muted);
      transform: rotate(-45deg);
      transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1);
      flex-shrink: 0;
    }

    &::-webkit-details-marker { display: none; }
  }

  .toc-mobile[open] .toc-mobile__summary::after {
    transform: rotate(45deg);
  }

  .toc-mobile__list {
    list-style: none;
    padding: var(--space-4) 0 0 0;
    margin: var(--space-4) 0 0 0;
    border-top: var(--border);
    display: flex;
    flex-direction: column;
    gap: 0;

    /* Staggered reveal */
    animation: toc-reveal 300ms cubic-bezier(0.25, 1, 0.5, 1);
  }

  @keyframes toc-reveal {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .toc-mobile__item {
    border-bottom: 1px solid var(--color-rule);

    &:last-child { border-bottom: none; }
  }

  .toc-mobile__item--nested {
    padding-inline-start: var(--space-4);
  }

  .toc-mobile__link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    text-decoration: none;
    display: block;
    padding: var(--space-3) 0;
    transition: color 150ms ease;

    &:hover { color: var(--color-ink); }

    &:active {
      color: var(--color-ink);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .toc-mobile__list { animation: none; }
  }

  .page__body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.75;

    & h2 {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 400;
      margin-block: var(--space-8) var(--space-3);
    }

    & h3 {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 400;
      margin-block: var(--space-6) var(--space-2);
    }

    /* Markdown bodies emit the full heading range, and `# ` produces a body
       h1 alongside the template's .page__title. Styled as a section head so it
       never outranks the article title it sits beneath. */
    & h1 {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 400;
      margin-block: var(--space-8) var(--space-3);
    }

    & h4, & h5, & h6 {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 400;
      margin-block: var(--space-5) var(--space-2);
    }

    & hr {
      border: 0;
      border-block-start: var(--border);
      margin-block: var(--space-8);
    }

    & p { margin-block-end: var(--space-4); color: var(--color-ink-light); }
    & ul, & ol { margin-block-end: var(--space-4); padding-inline-start: var(--space-6); color: var(--color-ink-light); }
    /* Lexxy's nested-list spacing keys off a class only its editor emits, so
       reset the doubled indent and the trailing gap for converted Markdown. */
    & :is(ul, ol) :is(ul, ol) { margin-block: 0; margin-inline-start: 0; }
    & blockquote { border-inline-start: 2px solid var(--color-rule-strong); padding-inline-start: var(--space-4); margin-inline: 0; color: var(--color-muted); font-style: italic; }
    & pre { background: var(--color-paper-tint); padding: var(--space-4); overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-sm); }
    & code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-paper-tint); padding: var(--space-1); }
    & pre code { background: none; padding: 0; }
    & img { max-width: 100%; margin-block: var(--space-4); }
    & a { color: var(--color-accent); }

    /* Redcarpet emits a bare <table>, not Lexxy's scrolling wrapper, and the
       document sets `overflow-x: clip` — so without its own scroll container a
       wide table is clipped with no way to reach the hidden columns. Hairline
       rules rather than Lexxy's boxed grid, matching the tables elsewhere. */
    & table {
      display: block;
      overflow-x: auto;
      max-inline-size: 100%;
      border-collapse: collapse;
      margin-block-end: var(--space-4);
      color: var(--color-ink-light);
      font-size: var(--text-sm);
    }

    & :is(th, td) {
      border: 0;
      border-block-end: var(--border);
      padding: var(--space-2) var(--space-3);
      text-align: start;
    }

    & th {
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: var(--text-xs);
      color: var(--color-muted);
    }
  }

  /* Page form */
  .page-editor__heading {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-block-end: var(--space-8);
  }

  .page__translations {
    margin-block-start: var(--space-8);
    border-top: var(--border);
    padding-block-start: var(--space-6);
  }

  .page__translations-heading {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--color-ink);
    margin-block-end: var(--space-4);
    letter-spacing: -0.01em;
  }

  .page__translations-list {
    display: flex;
    flex-direction: column;
    border-top: var(--border);
    margin-block-end: var(--space-4);
  }

  .page__translation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom: var(--border);
    padding: var(--space-3) 0;

    @media (max-width: 32rem) {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .page__translation-info {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
  }

  .page__translation-locale {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
  }

  .page__translation-title {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink);
  }

  .page__translation-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
  }

  .page__translation-actions form {
    display: contents;
  }

  .page__translations-empty {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-muted);
    margin-block-end: var(--space-4);
  }

  .page__translations-add {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  /* Distribution entries — mirrors translations pattern */
  .page__distributions {
    margin-block-start: var(--space-8);
    border-top: var(--border);
    padding-block-start: var(--space-6);
  }

  .page__distributions-heading {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--color-ink);
    margin-block-end: var(--space-4);
    letter-spacing: -0.01em;
  }

  .page__distributions-list {
    display: flex;
    flex-direction: column;
    border-top: var(--border);
    margin-block-end: var(--space-4);
  }

  .page__distributions-empty {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-muted);
    margin-block-end: var(--space-4);
  }

  .page__distribution {
    padding: var(--space-3) 0;
    border-bottom: var(--border);
  }

  .page__distribution-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .page__distribution-icon {
    width: 1em;
    height: 1em;
    color: var(--color-muted);
    flex-shrink: 0;
  }

  .page__distribution-type {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink);
  }

  .page__distribution-status {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .page__distribution-status--published {
    color: var(--color-accent);
  }

  .page__distribution-status--scheduled {
    color: var(--color-ink-light);
  }

  .page__distribution-preview {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    margin-block-start: var(--space-1);
  }

  .page__distribution-error {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--color-accent);
    margin-block-start: var(--space-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .page__distribution-status--failed {
    color: var(--color-accent);
  }

  .page__distribution-status--posting {
    color: var(--color-muted);
    font-style: italic;
  }

  .page__distribution--link {
    display: block;
    text-decoration: none;
    color: inherit;

    &:hover {
      background: var(--color-paper-tint);
    }
  }

  .page__distribution-actions {
    display: flex;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
  }

  .page__distribution-actions form {
    display: contents;
  }

  /* Distribution form fields */
  .page-form__field {
    margin-block-end: var(--space-4);
  }

  .page-form__label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-muted);
    letter-spacing: 0.04em;
    margin-block-end: var(--space-1);
  }

  .page-form__input {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: var(--border);
    background: var(--color-paper);
  }

  .page-form__input:focus,
  .page-form__input::placeholder {
    outline: none;
    border-color: var(--color-rule-strong);
  }

  .page-form__input::placeholder {
    color: var(--color-muted);
  }

  /* Character counter */
  .page-form__char-count {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-muted);
    text-align: end;
    margin-block-start: var(--space-1);
  }

  .page-form__char-count--over {
    color: var(--color-accent);
    font-weight: 600;
  }

  /* Distribution images */
  .page__distribution-thumb {
    display: block;
    max-width: 6rem;
    max-height: 6rem;
    object-fit: cover;
    margin-block-start: var(--space-2);
    border: var(--border);

    @media (max-width: 32rem) {
      max-width: 4rem;
      max-height: 4rem;
    }
  }

  .page__distribution-image {
    display: block;
    max-width: 100%;
    max-height: 24rem;
    object-fit: contain;
    border: var(--border);
    background: var(--color-paper-tint);

    @media (max-width: 32rem) {
      max-height: 16rem;
    }
  }

  .page__distribution-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    border: var(--border);
    background: var(--color-paper-tint);
  }

  .page__distribution-image-empty-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-muted);
  }

  .page-form__prompt {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: var(--border);
    background: var(--color-paper);
    resize: vertical;
    min-height: 3rem;
    max-height: 8rem;

    &:focus-visible {
      border-color: var(--color-accent);
      outline: none;
    }

    &::placeholder {
      color: var(--color-muted);
    }
  }

  .page-form__hint {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-muted);
    font-style: italic;
    margin-block-start: var(--space-1);
  }

  .page-form__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .page-form__file-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
    padding: var(--space-2) var(--space-4);
    border: var(--border-strong);
    background: var(--color-paper);
    cursor: pointer;

    &:hover {
      color: var(--color-accent);
      border-color: var(--color-accent);
    }
  }

  .page-form__file-input:focus-visible + .page-form__file-label {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  /* Video preview */
  .page__distribution-video {
    display: block;
    max-width: 100%;
    max-height: 24rem;
    border: var(--border);
    background: var(--color-paper-tint);

    @media (max-width: 32rem) {
      max-height: 16rem;
    }
  }

  .page-form__locale-badge {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-block-end: var(--space-2);
  }

  .page-form__locale {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink);
    padding: var(--space-1) var(--space-2);
    border: var(--border);
  }

  .page-form__locale-hint {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-muted);
    font-style: italic;
  }

  .page-form__translate-action {
    margin-inline-start: auto;
    background: none;
    border: none;
    color: var(--color-muted);
    font: inherit;
    font-size: var(--text-sm);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 0;

    &:hover { color: var(--color-ink); }

    &:disabled {
      opacity: 0.5;
      cursor: default;
      text-decoration: none;
    }
  }

  .page-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .page-form__errors {
    color: var(--color-accent);
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-4);
    background: var(--color-accent-wash);
  }

  .page-form__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    width: 100%;
    border: none;
    border-bottom: var(--border-strong);
    background: transparent;
    padding: var(--space-3) 0;
    color: var(--color-ink);

    &:focus-visible { border-color: var(--color-accent); outline: none; }
    &::placeholder { color: var(--color-muted); }
  }

  .page-form__body {
    min-height: 24rem;
  }

  .page-form__seo {
    border-top: var(--border);
    padding-block-start: var(--space-4);
  }

  .page-form__seo-toggle {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-muted);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker { display: none; }
    &::marker { content: ""; }
    &:hover { color: var(--color-ink); }
  }

  .page-form__seo-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block-start: var(--space-4);
  }

  .page-form__seo-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .page-form__seo-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .page-form__seo-input {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    border: var(--border);
    background: var(--color-paper);
    color: var(--color-ink);
    resize: vertical;

    &:focus-visible { border-color: var(--color-accent); outline: none; }
    &::placeholder { color: var(--color-rule-strong); }
  }

  /* Inline checkbox variant for boolean toggles inside .page-form__seo (e.g.
     auto_refresh). Checkbox sits flush with the label rather than stacking. */
  .page-form__seo-field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
  }

  .page-form__seo-checkbox {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-ink);
    cursor: pointer;
  }

  .page-form__seo-label--inline {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
    cursor: pointer;
  }

  .page-form__seo-hint {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-muted);
    font-style: italic;
    margin: 0;
  }

  /* Schedule publish — a peer section to "SEO & sharing", not a stray field.
     It shipped in #548 with markup and no CSS at all, so every part of it was
     browser default: a native datetime control out of family with the form's
     hairline inputs, and an OS-chrome button dangling off the end of a
     sentence. Two paths are offered and the block is built to say so: pick a
     time in the field, or take the desk's suggestion. */
  .page-form__schedule {
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-6);
    border-top: var(--border);
  }

  .page-form__schedule-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-block-end: var(--space-3);
  }

  /* Matches .page-form__seo-input rather than the native control. inline-size
     is fit-content because a datetime-local is a fixed-width control: stretched
     to 100% it leaves a wide empty gutter after the calendar icon. */
  .page-form__schedule-input {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink);
    inline-size: fit-content;
    max-inline-size: 100%;
    padding: var(--space-2) var(--space-3);
    border: var(--border);
    border-radius: 0;
    background: var(--color-paper);

    &:focus-visible {
      outline: 2px solid var(--color-ink);
      outline-offset: 2px;
      border-color: var(--color-rule-strong);
    }
  }

  .page-form__schedule-hint {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--color-muted);
    max-inline-size: 52ch;
    margin: var(--space-2) 0 0;
  }

  /* The suggestion is a distinct offer, so it gets its own air and a hairline
     above it — separated by a rule rather than boxed into a card, per the
     house style. Baseline-level with the CTA so the eye reads slot then action. */
  .page-form__schedule-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-4);
    border-top: var(--border);

    @media (max-width: 34rem) {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-4);
    }
  }

  .page-form__schedule-slot {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
  }

  .page-form__schedule-slot-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* The slot itself is the fact the editor is deciding about, so it carries the
     weight — the hour especially, which the old :long format never printed. */
  .page-form__schedule-slot-time {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-ink);
  }

  .page-form__schedule-slot-basis {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-muted);
    max-inline-size: 62ch;
  }

  /* Secondary CTA. The filled-ink treatment belongs to "Update page" — one
     primary per screen — so this reads as the weightier of the two borders in
     the block: hairline for the input, strong for an action. */
  .page-form__schedule-apply {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
    background: var(--color-paper);
    border: var(--border-strong);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;

    &:hover {
      background: var(--color-ink);
      color: var(--color-paper);
      border-color: var(--color-ink);
    }

    &:focus-visible {
      outline: 2px solid var(--color-ink);
      outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  /* Held and scheduled states. No status colour exists in this palette by
     design, so the words carry the meaning and a tint carries the emphasis. */
  .page-form__schedule-status {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink);
    max-inline-size: 60ch;
    margin: var(--space-6) 0 0;
  }

  .page-form__schedule-status--held {
    background: var(--color-paper-tint);
    padding: var(--space-3) var(--space-4);
  }

  .page-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-start: var(--space-4);
    border-top: var(--border);

    @media (max-width: 32rem) {
      flex-direction: column;
      gap: var(--space-3);
      align-items: stretch;
    }
  }

  /* Custom status select (replaces native <select>) */
  .status-select {
    position: relative;
  }

  .status-select__trigger {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
    border: var(--border);
    background: var(--color-paper);
    color: var(--color-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);

    &:hover { color: var(--color-ink); border-color: var(--color-rule-strong); }
  }

  .status-select__chevron {
    font-size: var(--text-xs);
    line-height: 1;
  }

  .status-select__menu {
    position: absolute;
    bottom: calc(100% + var(--space-2));
    inset-inline-start: 0;
    z-index: 10;
    min-width: 14rem;
    background: var(--color-paper);
    border: var(--border-strong);
    box-shadow: var(--shadow-dropdown);
    flex-direction: column;
    display: none;
  }

  .status-select__menu.status-select__menu--open {
    display: flex;
  }

  .status-select__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
    background: none;
    border: none;
    border-bottom: var(--border);
    cursor: pointer;
    text-align: start;

    &:last-child { border-bottom: none; }
    &:hover { background: var(--color-paper-tint); }
  }

  .status-select__hint {
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  .page-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .page-form__cancel {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 0.15em;

    &:hover { color: var(--color-ink); }
  }

  .page-form__submit {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-6);
    background: var(--color-ink);
    color: var(--color-paper);
    border: none;
    cursor: pointer;

    &:hover { opacity: 0.85; }
  }

  /* Dashboard page list */
  .dashboard__section {
    margin-block-start: var(--space-12);
  }

  .dashboard__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-4);
  }

  .dashboard__section-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
  }

  .dashboard__section-link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-muted);

    &:hover { color: var(--color-ink); }
  }

  .dashboard__page {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
  }

  .dashboard__page-title {
    font-family: var(--font-body);
    color: var(--color-ink);
    text-decoration: none;

    &:hover { color: var(--color-accent); }
  }

  .dashboard__page-status {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);

    &--published { color: var(--color-accent); }
  }

  .dashboard__empty {
    font-family: var(--font-body);
    color: var(--color-muted);
    font-style: italic;
  }

  /* Copy page dropdown */
  .copy-page {
    position: relative;
  }

  .copy-page__trigger {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-paper);
    background: var(--color-ink);
    border: none;
    border-radius: 2rem;
    padding: 0.375rem var(--space-4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: opacity 150ms ease;

    &:hover {
      opacity: 0.75;
    }
  }

  .copy-page__icon {
    opacity: 0.7;
  }

  .copy-page__menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    inset-inline-start: 0;
    inset-inline-end: auto;
    z-index: 10;
    min-width: 18rem;
    max-width: calc(100vw - 2 * var(--page-gutter));
    background: var(--color-paper);
    border: var(--border-strong);
    box-shadow: var(--shadow-dropdown);
    flex-direction: column;
    display: none;
  }

  .copy-page__menu.copy-page__menu--open {
    display: flex;
  }

  .copy-page__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
    text-decoration: none;
    background: none;
    border: none;
    border-bottom: var(--border);
    cursor: pointer;
    text-align: start;

    &:last-child { border-bottom: none; }
    &:hover { background: var(--color-paper-tint); }
  }

  .copy-page__hint {
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--color-muted);
  }
}

/* Sponsor links */

.sponsor-links {
  margin-top: var(--space-12);
  max-width: var(--content-narrow);
}

.sponsor-links__heading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}

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

.sponsor-links__item {
  border-top: var(--border);
  padding: var(--space-3) 0;
}

.sponsor-links__item:last-child {
  border-bottom: var(--border);
}

.sponsor-links__text {
  color: var(--color-ink);
  text-decoration: none;
}

.sponsor-links__text:hover {
  text-decoration: underline;
}

.sponsor-links__domain {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* Advertise page */

/* ---- /advertise page (compose-and-preview flow) ---- */

.advertise {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-8) var(--page-gutter);
}

.advertise__header {
  margin-bottom: var(--space-10);
}

.advertise__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.advertise__description {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: 1.6;
  max-width: var(--content-narrow);
}

.advertise__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.advertise__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.advertise__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.advertise__select,
.advertise__input {
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-3);
  border: var(--border);
  background: var(--color-paper);
  color: var(--color-ink);
}

.advertise__select:focus-visible,
.advertise__input:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 1px;
}

.advertise__submit {
  margin-top: var(--space-2);
}

.advertise__button {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  padding: var(--space-3) var(--space-6);
  background: var(--color-ink);
  color: var(--color-paper);
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.advertise__button:hover {
  opacity: 0.9;
}

.advertise__coming-soon {
  color: var(--color-muted);
  line-height: 1.5;
  margin-top: var(--space-4);
}

/* ---- Live preview frame ---- */

.advertise-preview {
  margin-top: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--border);
}

.advertise-preview__hero {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}

.advertise-preview__lede {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
}

.advertise-preview__divider {
  border: 0;
  border-top: var(--border);
  margin: var(--space-5) 0 var(--space-4);
}

.advertise-preview__frame {
  padding: var(--space-2) 0 var(--space-4);
}

.advertise-preview__slot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.advertise-preview__slot--taken {
  opacity: 0.55;
}

.advertise-preview__slot--yours {
  background: color-mix(in oklch, var(--color-ink) 7%, transparent);
  padding-inline: var(--space-3);
  margin-inline: calc(-1 * var(--space-3));
}

/* Taken slot label: italic muted, signals "this row is passive" */
.advertise-preview__slot-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-style: italic;
}

/* Empty slot button: a real <button>, full-width, looks like a clickable
   row. Ink color so it reads as interactive vs the muted "taken" rows.
   Hover/focus give a stronger tint than the taken state's opacity drop. */
.advertise-preview__slot-button {
  display: block;
  width: 100%;
  padding: 0;
  text-align: start;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.advertise-preview__slot--empty {
  padding-inline: var(--space-3);
  margin-inline: calc(-1 * var(--space-3));
}

.advertise-preview__slot--empty:hover,
.advertise-preview__slot--empty:focus-within {
  background: color-mix(in oklch, var(--color-ink) 10%, transparent);
}

.advertise-preview__slot-button:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Weekly total ---- */

.advertise-total {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: var(--border);
  border-bottom: var(--border);
  flex-wrap: wrap;
}

.advertise-total__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.advertise-total__price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.advertise-total__note {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-muted);
  flex-basis: 100%;
}