/* Framework-neutral primitives. Consumers may compose layout, never fork these visual contracts. */
/* Generated from src/components/<name>/<name>.css in the order declared in scripts/build.mjs. Do not edit. */

/* ── prose ── */
/* Prose: the reading measure for argument, judgments and correspondence. */

.preceda-prose {
  max-inline-size: var(--preceda-measure-reading);
  color: var(--preceda-color-ink);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-size-17);
  font-optical-sizing: auto;
  line-height: var(--preceda-leading-reading);
}

/* ── running-head ── */
/* Running head and label: short chrome that orients, never paragraphs. */

.preceda-running-head,
.preceda-label {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-font-sans);
  font-size: var(--preceda-type-size-12);
  font-weight: 600;
  letter-spacing: var(--preceda-tracking-caps);
  line-height: var(--preceda-leading-heading);
  text-transform: uppercase;
}

/* ── citation ── */
/* Citation: the exact character sequence of a neutral or reporter citation. */

.preceda-citation {
  font-family: var(--preceda-font-mono);
  font-size: var(--preceda-type-size-13);
  font-variant-numeric: tabular-nums;
}

/*
 * Inline citation in reading text: the party names as a link on a quiet
 * rule, the verification mark as a superscript, then the reporter citation
 * in the reading face and the neutral citation in mono.
 *   <cite class="preceda-cite"><a class="preceda-cite__name">Arnesh Kumar
 *   <i class="preceda-cite__v">v.</i> State of Bihar</a><sup …>¶</sup>,
 *   <span class="preceda-cite__reporter">(2014) 8 SCC 273</span>
 *   <span class="preceda-citation">2014 INSC 463</span></cite>
 */

.preceda-cite {
  font-style: normal;
}

.preceda-cite__name {
  color: inherit;
  font-style: italic;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
  text-decoration-skip-ink: auto;
}

a.preceda-cite__name:hover {
  text-decoration-color: var(--preceda-color-binding);
}

a.preceda-cite__name:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-cite__v {
  font-style: italic;
}

.preceda-cite .preceda-status--superscript {
  margin-inline-start: 0;
}

.preceda-cite__reporter {
  font-variant-numeric: var(--preceda-numerals-lining);
}

.preceda-cite .preceda-citation {
  color: var(--preceda-color-ink-secondary);
  font-size: var(--preceda-type-citation-size);
}

/* Refused: kept on the page, struck, and never a link. */
.preceda-cite--struck,
.preceda-cite--struck .preceda-cite__name,
.preceda-cite--struck .preceda-citation {
  color: var(--preceda-tone-struck-ink);
  text-decoration-line: line-through;
  text-decoration-color: var(--preceda-tone-struck-rule);
  text-decoration-thickness: 1px;
}

/* Awaiting verification: the name keeps its link, the rule turns umber. */
.preceda-cite--verify .preceda-cite__name {
  text-decoration-color: var(--preceda-tone-verify-rule);
  text-decoration-style: dotted;
}

/* ── rule ── */
/* Rule: a printed rule that groups the record instead of a container. */

.preceda-rule {
  block-size: 1px;
  border: 0;
  background: var(--preceda-color-rule);
}

/* ── sheet ── */
/* Sheet: a raised page lying on the desk. */

.preceda-sheet {
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-raised);
  border: 1px solid var(--preceda-color-rule);
  border-radius: var(--preceda-radius-small);
  box-shadow: var(--preceda-shadow-sheet);
}

/* ── button ── */
/*
 * Button: one clear next act. Binding fill for the primary act; quiet otherwise.
 *
 * Variants: primary (the 0.1 default), secondary (ruled), quiet (text only),
 * ink (the letter act: "Send", "Open a matter"), destructive (binding rule,
 * fills on hover), icon-only. Sizes md (default, 40px) and sm (32px drawn,
 * 40px hit area). The catalogue forces hover, focus-visible and active with
 * `data-force-state`, derived from these rules at build time.
 */

.preceda-button {
  font-family: var(--preceda-font-sans);
  font-size: var(--preceda-type-size-14);
  font-weight: 600;
  transition:
    color var(--preceda-duration-fast) var(--preceda-ease-standard),
    background-color var(--preceda-duration-fast) var(--preceda-ease-standard),
    border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--preceda-space-2);
  min-block-size: var(--preceda-space-10);
  padding: var(--preceda-space-2) var(--preceda-space-4);
  border: 1px solid var(--preceda-color-binding);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-action-ink);
  background: var(--preceda-color-binding);
  line-height: var(--preceda-type-ui-leading);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.preceda-button:hover:not(:disabled):not([aria-disabled='true']) {
  border-color: var(--preceda-color-binding-hover);
  background: var(--preceda-color-binding-hover);
}

.preceda-button:active:not(:disabled):not([aria-disabled='true']) {
  border-color: var(--preceda-color-binding-hover);
  background: var(--preceda-color-binding-hover);
  translate: 0 1px;
}

/* ── Secondary: a ruled act beside the primary one. ── */
.preceda-button--secondary {
  border-color: var(--preceda-color-rule-strong);
  color: var(--preceda-color-ink);
  background: transparent;
}

.preceda-button--secondary:hover:not(:disabled):not([aria-disabled='true']),
.preceda-button--secondary:active:not(:disabled):not([aria-disabled='true']) {
  border-color: var(--preceda-color-ink);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-hover);
}

/* ── Quiet: text in binding ink; the least weight an act can have. ── */
.preceda-button--quiet {
  color: var(--preceda-color-binding-ink);
  background: transparent;
}

.preceda-button--quiet {
  border-color: transparent;
  padding-inline: var(--preceda-space-2);
}

.preceda-button--quiet:hover:not(:disabled):not([aria-disabled='true']),
.preceda-button--quiet:active:not(:disabled):not([aria-disabled='true']) {
  border-color: transparent;
  color: var(--preceda-color-binding-ink);
  background: var(--preceda-color-binding-tint);
}

/* ── Ink: the letter act. Set in the serif, ink on paper, inverted by lamp. ── */
.preceda-button--ink {
  border-color: var(--preceda-color-ink);
  color: var(--preceda-color-paper);
  background: var(--preceda-color-ink);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-body-size);
  font-weight: 400;
  font-optical-sizing: auto;
}

.preceda-button--ink:hover:not(:disabled):not([aria-disabled='true']),
.preceda-button--ink:active:not(:disabled):not([aria-disabled='true']) {
  border-color: var(--preceda-color-ink-secondary);
  background: var(--preceda-color-ink-secondary);
}

/* ── Destructive: a binding rule and a plain verb; fills only under the hand. ── */
.preceda-button--destructive {
  border-color: var(--preceda-color-binding);
  color: var(--preceda-color-binding-ink);
  background: transparent;
}

.preceda-button--destructive:hover:not(:disabled):not([aria-disabled='true']),
.preceda-button--destructive:active:not(:disabled):not([aria-disabled='true']) {
  border-color: var(--preceda-color-binding);
  color: var(--preceda-color-action-ink);
  background: var(--preceda-color-binding);
}

/* ── Sizes. sm draws 32px and keeps a 40px hit area. ── */
.preceda-button--sm {
  min-block-size: var(--preceda-space-8);
  padding: var(--preceda-space-1) var(--preceda-space-3);
  font-size: var(--preceda-type-size-13);
}

.preceda-button--ink.preceda-button--sm {
  font-size: var(--preceda-type-ui-size);
}

.preceda-button--sm::after {
  position: absolute;
  inset: calc(var(--preceda-space-1) * -1) 0;
  content: '';
}

/* ── Icon-only: square, labelled by aria-label. ── */
.preceda-button--icon {
  inline-size: var(--preceda-space-10);
  padding: 0;
}

.preceda-button--icon.preceda-button--sm {
  inline-size: var(--preceda-space-8);
}

.preceda-button--icon.preceda-button--sm::after {
  inset: calc(var(--preceda-space-1) * -1);
}

.preceda-button__icon {
  flex-shrink: 0;
}

/* ── Full width (mobile sheets, sign-in). ── */
.preceda-button--block {
  inline-size: 100%;
}

/* ── Disabled: legible, flat, not a colour cue alone (cursor + no hover). ── */
.preceda-button:disabled,
.preceda-button[aria-disabled='true']:not([aria-busy='true']) {
  border-color: var(--preceda-color-rule);
  color: var(--preceda-color-ink-tertiary);
  background: var(--preceda-color-paper-sunken);
  cursor: not-allowed;
}

.preceda-button--quiet:disabled,
.preceda-button--quiet[aria-disabled='true']:not([aria-busy='true']) {
  border-color: transparent;
  background: transparent;
}

/* ── Loading: the working point and a present-tense label; focus stays. ── */
.preceda-button[aria-busy='true'] {
  cursor: progress;
}

.preceda-button__working {
  flex-shrink: 0;
  inline-size: var(--preceda-space-1);
  block-size: var(--preceda-space-1);
  background: currentColor;
  animation: preceda-button-working calc(var(--preceda-duration-slow) * 4) var(--preceda-ease-standard) infinite alternate;
}

@keyframes preceda-button-working {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.25;
  }
}

/* ── Group: related acts on one line. `--attached` shares rules. ── */
.preceda-button-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--preceda-space-2);
}

.preceda-button-group--end {
  justify-content: flex-end;
}

.preceda-button-group--attached {
  flex-wrap: nowrap;
  gap: 0;
}

.preceda-button-group--attached > .preceda-button:not(:first-child) {
  margin-inline-start: -1px;
}

.preceda-button-group--attached > .preceda-button:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.preceda-button-group--attached > .preceda-button:first-child:not(:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.preceda-button-group--attached > .preceda-button:last-child:not(:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

@media (pointer: coarse) {
  .preceda-button {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }

  .preceda-button--icon {
    inline-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }

  .preceda-button--sm {
    min-block-size: var(--preceda-space-8);
  }

  .preceda-button--sm::after {
    inset: calc(var(--preceda-space-1) * -1.5) 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-button {
    transition-duration: 0s;
  }

  .preceda-button:active:not(:disabled):not([aria-disabled='true']) {
    translate: none;
  }

  .preceda-button__working {
    animation: none;
  }
}

/* ── link ── */
/*
 * Link: oxblood text on a quiet printed underline.
 *
 * `.preceda-link` (0.1) is the standalone chrome link in Inter. Variants:
 * `--inline` takes the voice of the sentence it sits in; `--standalone` is a
 * serif destination on its own line (the gate); `--back` returns up the
 * record ("‹ Matters"); `--subdued` is a secondary destination in tertiary
 * ink. `.preceda-link-list` sets next steps on one line between middots.
 */

.preceda-link {
  font-family: var(--preceda-font-sans);
  font-size: var(--preceda-type-size-14);
  font-weight: 600;
  transition:
    color var(--preceda-duration-fast) var(--preceda-ease-standard),
    background-color var(--preceda-duration-fast) var(--preceda-ease-standard),
    border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-link {
  color: var(--preceda-color-binding-ink);
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.preceda-link:hover {
  text-decoration-color: currentColor;
}

.preceda-link:active {
  color: var(--preceda-color-binding-hover);
}

/* Links reset as buttons (a text act that is not navigation). */
button.preceda-link {
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration-line: underline;
}

/* ── Inline: inherits the sentence's family, size and weight. ── */
.preceda-link--inline {
  font: inherit;
  text-decoration-color: var(--preceda-color-rule-strong);
}

/* ── Standalone: a serif destination with its own hit area. ── */
.preceda-link--standalone {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--preceda-space-10);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-body-size);
  font-weight: 400;
  line-height: var(--preceda-type-body-leading);
  text-decoration: none;
}

.preceda-link--standalone > .preceda-link__text {
  padding-block-end: var(--preceda-space-1);
  border-block-end: 1px solid var(--preceda-color-rule);
  transition: border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-link--standalone:hover > .preceda-link__text {
  border-block-end-color: currentColor;
}

/* ── Back: up one level of the record. ── */
.preceda-link--back {
  display: inline-flex;
  align-items: center;
  gap: var(--preceda-space-1);
  min-block-size: var(--preceda-space-10);
  color: var(--preceda-color-ink);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-reading-size);
  font-weight: 400;
  line-height: var(--preceda-type-ui-leading);
  text-decoration: none;
}

.preceda-link--back:hover {
  color: var(--preceda-color-binding-ink);
}

.preceda-link__glyph {
  color: var(--preceda-color-ink-secondary);
  font-size: var(--preceda-type-subheading-size);
  line-height: 1;
  translate: 0 calc(var(--preceda-space-1) * -0.25);
}

.preceda-link--back:hover .preceda-link__glyph {
  color: currentColor;
}

/* ── Subdued: a secondary destination (tertiary ink, not disabled). ── */
.preceda-link--subdued {
  color: var(--preceda-color-ink-tertiary);
}

.preceda-link--subdued:hover {
  color: var(--preceda-color-ink-secondary);
}

/* ── External: a trailing arrow glyph says the destination leaves Preceda. ── */
.preceda-link__external {
  margin-inline-start: var(--preceda-space-1);
  vertical-align: baseline;
}

.preceda-link__hint {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Next-step list: short destinations on one line, set between middots. ── */
.preceda-link-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--preceda-space-2);
  margin: 0;
  padding: 0;
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  list-style: none;
}

.preceda-link-list__label {
  margin-inline-end: var(--preceda-space-1);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
}

.preceda-link-list__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--preceda-space-2);
}

/* The middot trails its item, so a wrapped line ends on it rather than starting with it. */
.preceda-link-list__item:not(:last-child)::after {
  color: var(--preceda-color-ink-tertiary);
  content: '·';
}

.preceda-link-list .preceda-link {
  font: inherit;
}

@media (pointer: coarse) {
  .preceda-link--standalone,
  .preceda-link--back {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }

  .preceda-link-list__item .preceda-link {
    padding-block: var(--preceda-space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-link,
  .preceda-link--standalone > .preceda-link__text {
    transition-duration: 0s;
  }
}

/* ── focus ── */
/* Focus: one visible, opaque focus ring for every shared interactive element. */

.preceda-button:focus-visible,
.preceda-link:focus-visible,
.preceda-field:focus-visible,
.preceda-tab:focus-visible,
.preceda-dialog:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

/* T4 feedback + overlays */
.preceda-note__action:focus-visible,
.preceda-note__dismiss:focus-visible,
.preceda-banner__action:focus-visible,
.preceda-banner__dismiss:focus-visible,
.preceda-toast__action:focus-visible,
.preceda-toast__dismiss:focus-visible,
.preceda-dialog__close:focus-visible,
.preceda-menu-trigger:focus-visible,
.preceda-bottom-sheet__grip:focus-visible,
.preceda-bottom-sheet__close:focus-visible,
.preceda-dock__grip:focus-visible,
.preceda-dock__summary:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

/* ── field ── */
/*
 * Field: a ruled input with a label above and an associated error below.
 *
 * `.preceda-field` (0.1) is the control itself. `.preceda-field-group` stacks
 * label, control, hint and error. Controls: text (Inter, short data), textarea
 * (the serif, counsel's own writing; grows with content), search (a leading
 * glyph, a shortcut hint and a clear act), code (mono, tracked, one-time
 * codes) and `--ruled` (a bottom rule only, for answers set inside a letter).
 */

.preceda-field {
  min-block-size: 2.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--preceda-color-rule-strong);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-raised);
  font: inherit;
}

.preceda-field {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--preceda-space-10);
  padding: var(--preceda-space-2) var(--preceda-space-3);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
  transition: border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-field::placeholder {
  color: var(--preceda-color-ink-tertiary);
  opacity: 1;
}

.preceda-field:hover:not(:disabled):not(:read-only):not([aria-invalid='true']) {
  border-color: var(--preceda-color-ink-tertiary);
}

.preceda-field:focus-visible {
  border-color: var(--preceda-color-ink);
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-field[aria-invalid='true'] {
  border-color: var(--preceda-color-error);
}

.preceda-field:disabled {
  border-color: var(--preceda-color-rule);
  color: var(--preceda-color-ink-tertiary);
  background: var(--preceda-color-paper-sunken);
  cursor: not-allowed;
}

.preceda-field:read-only:not(:disabled) {
  border-color: var(--preceda-color-hairline);
  background: transparent;
}

.preceda-field-error {
  color: var(--preceda-color-error);
  font-family: var(--preceda-font-sans);
  font-size: var(--preceda-type-size-13);
}

/* ── Group: label, control, hint, error. ── */
.preceda-field-group {
  display: grid;
  gap: var(--preceda-space-2);
  min-inline-size: 0;
}

.preceda-field-label {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-field-label__optional {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: normal;
  letter-spacing: 0;
}

.preceda-field-hint,
.preceda-field-counter {
  margin: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-field-group .preceda-field-error {
  margin: 0;
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-field-error::before {
  content: '— ';
}

.preceda-field-group__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--preceda-space-4);
}

.preceda-field-counter {
  margin-inline-start: auto;
  font-variant-numeric: var(--preceda-numerals-tabular);
}

/* ── Textarea: the serif; grows with content up to its cap. ── */
.preceda-field--textarea {
  display: block;
  /* `rows` sets the resting height; the React TextArea grows it with content. */
  min-block-size: 0;
  padding: var(--preceda-space-3) var(--preceda-space-4);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  font-optical-sizing: auto;
  resize: none;
}

.preceda-field--textarea.preceda-field--resizable {
  resize: vertical;
}

/* ── Code: a one-time code or identifier, mono and tracked. ── */
.preceda-field--code {
  font-family: var(--preceda-type-citation-family);
  font-size: var(--preceda-type-heading-size);
  font-variant-numeric: var(--preceda-numerals-tabular);
  letter-spacing: 0.4em;
  text-align: center;
}

/* ── Ruled: a bottom rule only, for an answer set within correspondence. ── */
.preceda-field--ruled {
  padding-inline: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
}

.preceda-field--ruled:focus-visible {
  outline-offset: var(--preceda-space-1);
}

/* ── Search: glyph, input, shortcut hint and clear act on one ruled line. ── */
.preceda-search {
  position: relative;
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.preceda-search__glyph {
  position: absolute;
  inset-inline-start: var(--preceda-space-3);
  color: var(--preceda-color-ink-tertiary);
  pointer-events: none;
}

.preceda-search .preceda-field {
  padding-inline: calc(var(--preceda-space-3) + var(--preceda-icon-size-20) + var(--preceda-space-2)) var(--preceda-space-12);
}

.preceda-search--lg .preceda-field {
  min-block-size: var(--preceda-space-12);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-reading-size);
}

.preceda-search .preceda-field::-webkit-search-cancel-button {
  appearance: none;
}

.preceda-search__end {
  position: absolute;
  inset-inline-end: var(--preceda-space-1);
  display: flex;
  align-items: center;
  gap: var(--preceda-space-1);
}

.preceda-search__shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--preceda-space-6);
  margin-inline-end: var(--preceda-space-2);
  padding: 0 var(--preceda-space-1);
  border: 1px solid var(--preceda-color-rule);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-citation-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-search__status {
  display: flex;
  align-items: center;
  gap: var(--preceda-space-2);
  min-block-size: var(--preceda-space-5);
  margin: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-search__status[data-tone='error'] {
  color: var(--preceda-color-error);
}

.preceda-field__working {
  flex-shrink: 0;
  inline-size: var(--preceda-space-1);
  block-size: var(--preceda-space-1);
  background: var(--preceda-color-binding);
  animation: preceda-field-working calc(var(--preceda-duration-slow) * 4) var(--preceda-ease-standard) infinite alternate;
}

@keyframes preceda-field-working {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.25;
  }
}

@media (pointer: coarse) {
  .preceda-field {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }

  /* iOS zooms into any control set below 16px; short-data fields rise on touch. */
  .preceda-field:not(.preceda-field--code) {
    font-size: var(--preceda-type-reading-size);
  }

  /* There is no "/" key to reach on a phone. */
  .preceda-search__shortcut {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-field {
    transition-duration: 0s;
  }

  .preceda-field__working {
    animation: none;
  }
}

/* ── tabs ── */
/*
 * Tabs: orientation within one surface, underlined in binding when selected.
 *
 * Two forms. Utility tabs (the 0.1 default) are small Inter for tool panes
 * and insight switches. Desk tabs (`--desk`) are the serif sections of the
 * matter desk: Draft · Authorities · Facts · Chronology, the current one in
 * ink over a binding rule. Both scroll sideways when they overflow, snapping
 * to a tab; `.preceda-tab-panels--swipe` lets the phone swipe between panes.
 */

.preceda-tabs {
  display: flex;
  gap: 1.25rem;
  border-block-end: 1px solid var(--preceda-color-rule);
}

/*
 * The row scrolls, and a scroll container clips its own border, so the rule
 * is painted as a 1px background band inside the padding box instead. The
 * selected tab's underline (margin -1px) then sits on it, unclipped.
 */
.preceda-tabs {
  gap: var(--preceda-space-5);
  padding-block-end: 1px;
  border-block-end: 0;
  background: linear-gradient(to top, var(--preceda-color-rule) 1px, transparent 1px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--preceda-space-4);
  scrollbar-width: none;
}

.preceda-tabs::-webkit-scrollbar {
  display: none;
}

.preceda-tab {
  margin-block-end: -1px;
  padding: 0.625rem 0.125rem;
  border: 0;
  border-block-end: 2px solid transparent;
  color: var(--preceda-color-ink-tertiary);
  background: transparent;
  font-family: var(--preceda-font-sans);
  font-size: var(--preceda-type-size-13);
  cursor: pointer;
}

.preceda-tab {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--preceda-space-1);
  min-block-size: var(--preceda-space-10);
  padding: var(--preceda-space-2) var(--preceda-space-0);
  line-height: var(--preceda-type-ui-leading);
  white-space: nowrap;
  scroll-snap-align: start;
  transition:
    color var(--preceda-duration-fast) var(--preceda-ease-standard),
    border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-tab:hover {
  color: var(--preceda-color-ink);
}

/* binding-ink for the rule too: it must still read at 3:1 under the lamp. */
.preceda-tab[aria-selected='true'] {
  border-block-end-color: var(--preceda-color-binding-ink);
  color: var(--preceda-color-binding-ink);
}

.preceda-tab:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: calc(var(--preceda-space-1) * -0.5);
}

.preceda-tab[aria-disabled='true'] {
  color: var(--preceda-color-ink-tertiary);
  cursor: not-allowed;
  text-decoration-line: line-through;
  text-decoration-color: var(--preceda-color-rule-strong);
}

.preceda-tab__count {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-variant-numeric: var(--preceda-numerals-tabular);
}

/* A closable tab (the transient Case tab): the tab and its cross side by side. */
.preceda-tabs__item {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--preceda-space-0);
  scroll-snap-align: start;
}

.preceda-tabs__close.preceda-button {
  min-block-size: var(--preceda-space-8);
  inline-size: var(--preceda-space-8);
  color: var(--preceda-color-ink-tertiary);
}

.preceda-tabs__close.preceda-button:hover:not(:disabled) {
  color: var(--preceda-color-binding-ink);
}

/* ── Desk tabs: the serif sections of the matter desk. ── */
.preceda-tabs--desk {
  gap: var(--preceda-space-6);
}

.preceda-tabs--desk .preceda-tab {
  padding-block: var(--preceda-space-2);
  border-block-end-width: 1px;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  font-optical-sizing: auto;
  line-height: var(--preceda-type-body-leading);
}

.preceda-tabs--desk .preceda-tab:hover {
  border-block-end-color: var(--preceda-color-rule-strong);
  color: var(--preceda-color-ink);
}

.preceda-tabs--desk .preceda-tab[aria-selected='true'] {
  border-block-end-color: var(--preceda-color-binding-ink);
  color: var(--preceda-color-ink);
}

.preceda-tabs--desk .preceda-tab__count {
  font-family: var(--preceda-type-folio-family);
  font-size: var(--preceda-type-folio-size);
}

/* ── Panels ── */
.preceda-tab-panel:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-tab-panels--swipe {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.preceda-tab-panels--swipe::-webkit-scrollbar {
  display: none;
}

.preceda-tab-panels--swipe > .preceda-tab-panel {
  flex: 0 0 100%;
  min-inline-size: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.preceda-tab-panels--swipe > .preceda-tab-panel:focus-visible {
  outline-offset: calc(var(--preceda-space-1) * -0.5);
}

/* The phone sets desk tabs a step larger, as the reading size. */
@media (width < 640px) {
  .preceda-tabs--desk {
    gap: var(--preceda-space-8);
  }

  .preceda-tabs--desk .preceda-tab {
    font-size: var(--preceda-type-reading-size);
  }
}

@media (pointer: coarse) {
  .preceda-tab {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-tab {
    transition-duration: 0s;
  }
}

/* ── dialog ── */
/*
 * Dialog: one bounded question on a raised sheet over a dimmed desk.
 *
 * Built on the native modal `<dialog>` (top layer, inert page, `cancel` on
 * Esc). Anatomy: an optional small-caps kicker, the serif title, an optional
 * description, a scrolling body and a ruled foot of actions, the primary act
 * last. Below 640px it becomes a full-width sheet at the foot of the screen,
 * clear of the home indicator.
 */

.preceda-dialog {
  box-sizing: border-box;
  /* Centred in the top layer by the contract itself, not the UA sheet: a
     consumer's reset (Tailwind preflight's `* { margin: 0 }`) would otherwise
     pin the dialog to the top-left corner. */
  inset: 0;
  margin: auto;
  inline-size: calc(100% - var(--preceda-space-8));
  max-inline-size: calc(var(--preceda-space-24) * 6);
  max-block-size: calc(100dvh - var(--preceda-space-16));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--preceda-color-rule-strong);
  border-radius: var(--preceda-radius-medium);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-raised);
  box-shadow: var(--preceda-shadow-dialog);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
}

.preceda-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: preceda-dialog-in var(--preceda-duration-normal) var(--preceda-ease-standard);
}

.preceda-dialog::backdrop {
  background: color-mix(in srgb, var(--preceda-color-ink) 35%, transparent);
}

.preceda-dialog--narrow {
  max-inline-size: calc(var(--preceda-space-24) * 5);
}

.preceda-dialog--wide {
  max-inline-size: calc(var(--preceda-space-24) * 8);
}

.preceda-dialog__sheet {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  max-block-size: inherit;
  padding: var(--preceda-space-6) var(--preceda-space-8) var(--preceda-space-6);
}

.preceda-dialog__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--preceda-space-4);
  flex: none;
}

.preceda-dialog__kicker {
  grid-column: 1;
  margin: 0 0 var(--preceda-space-2);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-dialog__title {
  grid-column: 1;
  margin: 0;
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-heading-family);
  font-size: var(--preceda-type-heading-size);
  font-optical-sizing: auto;
  font-weight: var(--preceda-type-heading-weight);
  letter-spacing: var(--preceda-type-heading-tracking);
  line-height: var(--preceda-type-heading-leading);
}

.preceda-dialog__close {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--preceda-space-10);
  min-block-size: var(--preceda-space-10);
  margin-block-start: calc(var(--preceda-space-2) * -1);
  margin-inline-end: calc(var(--preceda-space-3) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink-tertiary);
  background: none;
  cursor: pointer;
}

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

.preceda-dialog__description {
  flex: none;
  margin-block: var(--preceda-space-2) 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-dialog__body {
  flex: 1 1 auto;
  min-block-size: 0;
  margin-block-start: var(--preceda-space-5);
  margin-inline: calc(var(--preceda-space-8) * -1);
  padding-inline: var(--preceda-space-8);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.preceda-dialog__actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--preceda-space-3);
  margin-block-start: var(--preceda-space-6);
  padding-block-start: var(--preceda-space-4);
  border-block-start: 1px solid var(--preceda-color-hairline);
}

/* A quiet line of consequence at the foot ("Anyone with the link can view."). */
.preceda-dialog__footnote {
  flex: none;
  margin: var(--preceda-space-4) 0 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-dialog__error {
  margin: var(--preceda-space-4) 0 0;
}

/* Static: drawn in the flow for documentation or a print view; not modal. */
.preceda-dialog--static {
  position: static;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  margin: 0;
  animation: none;
}

/* Stop the page scrolling beneath an open modal. */
html:has(.preceda-dialog[open]:modal),
html:has(.preceda-bottom-sheet[open]:modal) {
  overflow: hidden;
}

@keyframes preceda-dialog-in {
  from { opacity: 0; transform: translateY(var(--preceda-space-2)); }
  to { opacity: 1; transform: none; }
}

@media (width < 640px) {
  .preceda-dialog,
  .preceda-dialog--narrow,
  .preceda-dialog--wide {
    inline-size: 100%;
    max-inline-size: 100%;
    max-block-size: calc(100dvh - var(--preceda-space-6) - env(safe-area-inset-top));
    margin: auto 0 0;
    border-inline: 0;
    border-block-end: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .preceda-dialog__sheet {
    padding: var(--preceda-space-5) var(--preceda-space-5) calc(var(--preceda-space-4) + env(safe-area-inset-bottom));
  }

  .preceda-dialog__body {
    margin-inline: calc(var(--preceda-space-5) * -1);
    padding-inline: var(--preceda-space-5);
  }

  .preceda-dialog__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .preceda-dialog__actions > * {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }

  @keyframes preceda-dialog-in {
    from { transform: translateY(var(--preceda-space-6)); }
    to { transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-dialog[open] {
    animation: none;
  }
}

/* ── status ── */
/*
 * Verification status and tone. A mark is a glyph plus a small-caps label in
 * its tone's ink; colour is never the only signal. The same markup renders in
 * the margin (`--margin`) or after the cited text (`--superscript`), where the
 * label is kept for assistive technology but not shown. Per-status modifiers
 * below the base rules are generated from `verificationStatuses`.
 */

.preceda-status {
  display: inline-flex;
  align-items: baseline;
  gap: var(--preceda-space-1);
  color: var(--preceda-status-ink, var(--preceda-tone-neutral-ink));
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-weight: var(--preceda-type-label-weight);
  line-height: var(--preceda-type-label-leading);
}

.preceda-status__glyph {
  font-family: var(--preceda-font-serif);
  font-variant-numeric: var(--preceda-numerals-lining);
}

.preceda-status__label {
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
}

.preceda-status__note {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-status--margin {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--preceda-space-1);
  padding-inline-start: var(--preceda-space-3);
  border-inline-start: 1px solid var(--preceda-color-hairline);
}

.preceda-status--margin .preceda-status__note {
  flex-basis: 100%;
}

.preceda-status--superscript {
  display: inline;
  margin-inline-start: var(--preceda-space-0);
  line-height: 0;
  vertical-align: super;
}

.preceda-status--superscript .preceda-status__label,
.preceda-status--superscript .preceda-status__note {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Cited text a struck mark refers to: kept on the page, visibly refused. */
.preceda-struck {
  color: var(--preceda-tone-struck-ink);
  text-decoration-line: line-through;
  text-decoration-color: var(--preceda-tone-struck-rule);
  text-decoration-thickness: 1px;
}

/* Tone utilities: ink, rule and (where the tone has one) wash. */
.preceda-tone {
  color: var(--preceda-tone-ink);
  border-color: var(--preceda-tone-rule);
}

.preceda-tone--wash {
  background: var(--preceda-tone-wash);
}

/* Generated from src/tokens/index.ts. */

.preceda-tone--neutral {
  --preceda-tone-ink: var(--preceda-tone-neutral-ink);
  --preceda-tone-rule: var(--preceda-tone-neutral-rule);
  --preceda-tone-wash: var(--preceda-tone-neutral-wash);
}

.preceda-tone--binding {
  --preceda-tone-ink: var(--preceda-tone-binding-ink);
  --preceda-tone-rule: var(--preceda-tone-binding-rule);
  --preceda-tone-wash: var(--preceda-tone-binding-wash);
}

.preceda-tone--gilt {
  --preceda-tone-ink: var(--preceda-tone-gilt-ink);
  --preceda-tone-rule: var(--preceda-tone-gilt-rule);
  --preceda-tone-wash: var(--preceda-tone-gilt-wash);
}

.preceda-tone--verify {
  --preceda-tone-ink: var(--preceda-tone-verify-ink);
  --preceda-tone-rule: var(--preceda-tone-verify-rule);
  --preceda-tone-wash: var(--preceda-tone-verify-wash);
}

.preceda-tone--struck {
  --preceda-tone-ink: var(--preceda-tone-struck-ink);
  --preceda-tone-rule: var(--preceda-tone-struck-rule);
  --preceda-tone-wash: var(--preceda-tone-struck-wash);
}

.preceda-status--verified {
  --preceda-status-ink: var(--preceda-tone-binding-ink);
}

.preceda-status--transitional {
  --preceda-status-ink: var(--preceda-tone-neutral-ink);
}

.preceda-status--recalled {
  --preceda-status-ink: var(--preceda-tone-verify-ink);
}

.preceda-status--unverifiable {
  --preceda-status-ink: var(--preceda-tone-verify-ink);
}

.preceda-status--uncovered {
  --preceda-status-ink: var(--preceda-tone-verify-ink);
}

.preceda-status--corpus_unavailable {
  --preceda-status-ink: var(--preceda-tone-verify-ink);
}

.preceda-status--temporal_unresolved {
  --preceda-status-ink: var(--preceda-tone-verify-ink);
}

.preceda-status--absent {
  --preceda-status-ink: var(--preceda-tone-verify-ink);
}

.preceda-status--misattributed {
  --preceda-status-ink: var(--preceda-tone-struck-ink);
}

.preceda-status--impossible {
  --preceda-status-ink: var(--preceda-tone-struck-ink);
}

.preceda-status--inapplicable {
  --preceda-status-ink: var(--preceda-tone-struck-ink);
}

.preceda-status--recalled .preceda-status__glyph,
.preceda-status--unverifiable .preceda-status__glyph,
.preceda-status--uncovered .preceda-status__glyph,
.preceda-status--corpus_unavailable .preceda-status__glyph,
.preceda-status--temporal_unresolved .preceda-status__glyph,
.preceda-status--absent .preceda-status__glyph,
.preceda-status--misattributed .preceda-status__glyph,
.preceda-status--impossible .preceda-status__glyph,
.preceda-status--inapplicable .preceda-status__glyph {
  font-family: var(--preceda-font-sans);
  font-size: var(--preceda-type-small-size);
  letter-spacing: var(--preceda-tracking-verify);
}

.preceda-status--recalled.preceda-status--superscript,
.preceda-status--unverifiable.preceda-status--superscript,
.preceda-status--uncovered.preceda-status--superscript,
.preceda-status--corpus_unavailable.preceda-status--superscript,
.preceda-status--temporal_unresolved.preceda-status--superscript,
.preceda-status--absent.preceda-status--superscript,
.preceda-status--misattributed.preceda-status--superscript,
.preceda-status--impossible.preceda-status--superscript,
.preceda-status--inapplicable.preceda-status--superscript {
  margin-inline-start: var(--preceda-space-1);
}


/* ── icon ── */
/*
 * Icons: printed-rule line drawings on a 24 grid, stroked in currentColor.
 * Size with the modifiers; the stroke scales with the drawing.
 */

.preceda-icon {
  display: inline-block;
  flex-shrink: 0;
  inline-size: var(--preceda-icon-size, var(--preceda-icon-size-20));
  block-size: var(--preceda-icon-size, var(--preceda-icon-size-20));
  color: inherit;
  vertical-align: middle;
}

.preceda-icon--16 {
  --preceda-icon-size: var(--preceda-icon-size-16);
}

.preceda-icon--20 {
  --preceda-icon-size: var(--preceda-icon-size-20);
}

.preceda-icon--24 {
  --preceda-icon-size: var(--preceda-icon-size-24);
}

/* ── type ── */
/*
 * Type roles. Product code chooses a role, never a size: `.preceda-type-<role>`
 * sets family, size, leading, weight, tracking, caps and numerals together.
 * The role classes below the utilities are generated from `typeRoles`.
 */

.preceda-small-caps {
  font-variant-caps: var(--preceda-small-caps);
  letter-spacing: var(--preceda-tracking-small-caps);
}

.preceda-numerals-lining {
  font-variant-numeric: var(--preceda-numerals-lining);
}

.preceda-numerals-tabular {
  font-variant-numeric: var(--preceda-numerals-tabular);
}

.preceda-numerals-oldstyle {
  font-variant-numeric: var(--preceda-numerals-oldstyle);
}

/* Generated from src/tokens/index.ts. */

.preceda-type-display {
  font-family: var(--preceda-type-display-family);
  font-size: var(--preceda-type-display-size);
  font-weight: var(--preceda-type-display-weight);
  line-height: var(--preceda-type-display-leading);
  letter-spacing: var(--preceda-type-display-tracking);
  font-variant-caps: var(--preceda-type-display-caps);
  font-variant-numeric: var(--preceda-type-display-numerals);
  font-optical-sizing: auto;
}

.preceda-type-title {
  font-family: var(--preceda-type-title-family);
  font-size: var(--preceda-type-title-size);
  font-weight: var(--preceda-type-title-weight);
  line-height: var(--preceda-type-title-leading);
  letter-spacing: var(--preceda-type-title-tracking);
  font-variant-caps: var(--preceda-type-title-caps);
  font-variant-numeric: var(--preceda-type-title-numerals);
  font-optical-sizing: auto;
}

.preceda-type-heading {
  font-family: var(--preceda-type-heading-family);
  font-size: var(--preceda-type-heading-size);
  font-weight: var(--preceda-type-heading-weight);
  line-height: var(--preceda-type-heading-leading);
  letter-spacing: var(--preceda-type-heading-tracking);
  font-variant-caps: var(--preceda-type-heading-caps);
  font-variant-numeric: var(--preceda-type-heading-numerals);
  font-optical-sizing: auto;
}

.preceda-type-subheading {
  font-family: var(--preceda-type-subheading-family);
  font-size: var(--preceda-type-subheading-size);
  font-weight: var(--preceda-type-subheading-weight);
  line-height: var(--preceda-type-subheading-leading);
  letter-spacing: var(--preceda-type-subheading-tracking);
  font-variant-caps: var(--preceda-type-subheading-caps);
  font-variant-numeric: var(--preceda-type-subheading-numerals);
  font-optical-sizing: auto;
}

.preceda-type-reading {
  font-family: var(--preceda-type-reading-family);
  font-size: var(--preceda-type-reading-size);
  font-weight: var(--preceda-type-reading-weight);
  line-height: var(--preceda-type-reading-leading);
  letter-spacing: var(--preceda-type-reading-tracking);
  font-variant-caps: var(--preceda-type-reading-caps);
  font-variant-numeric: var(--preceda-type-reading-numerals);
  font-optical-sizing: auto;
}

.preceda-type-body {
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  font-weight: var(--preceda-type-body-weight);
  line-height: var(--preceda-type-body-leading);
  letter-spacing: var(--preceda-type-body-tracking);
  font-variant-caps: var(--preceda-type-body-caps);
  font-variant-numeric: var(--preceda-type-body-numerals);
  font-optical-sizing: auto;
}

.preceda-type-ui {
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  font-weight: var(--preceda-type-ui-weight);
  line-height: var(--preceda-type-ui-leading);
  letter-spacing: var(--preceda-type-ui-tracking);
  font-variant-caps: var(--preceda-type-ui-caps);
  font-variant-numeric: var(--preceda-type-ui-numerals);
}

.preceda-type-small {
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-weight: var(--preceda-type-small-weight);
  line-height: var(--preceda-type-small-leading);
  letter-spacing: var(--preceda-type-small-tracking);
  font-variant-caps: var(--preceda-type-small-caps);
  font-variant-numeric: var(--preceda-type-small-numerals);
}

.preceda-type-label {
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-weight: var(--preceda-type-label-weight);
  line-height: var(--preceda-type-label-leading);
  letter-spacing: var(--preceda-type-label-tracking);
  font-variant-caps: var(--preceda-type-label-caps);
  font-variant-numeric: var(--preceda-type-label-numerals);
  font-optical-sizing: auto;
}

.preceda-type-folio {
  font-family: var(--preceda-type-folio-family);
  font-size: var(--preceda-type-folio-size);
  font-weight: var(--preceda-type-folio-weight);
  line-height: var(--preceda-type-folio-leading);
  letter-spacing: var(--preceda-type-folio-tracking);
  font-variant-caps: var(--preceda-type-folio-caps);
  font-variant-numeric: var(--preceda-type-folio-numerals);
  font-optical-sizing: auto;
}

.preceda-type-citation {
  font-family: var(--preceda-type-citation-family);
  font-size: var(--preceda-type-citation-size);
  font-weight: var(--preceda-type-citation-weight);
  line-height: var(--preceda-type-citation-leading);
  letter-spacing: var(--preceda-type-citation-tracking);
  font-variant-caps: var(--preceda-type-citation-caps);
  font-variant-numeric: var(--preceda-type-citation-numerals);
}

/* ── mark ── */
/*
 * Marks: the seal, the wordmark and the lockup that sets them together.
 *
 * Every mark is an inline SVG of outlines filled with `currentColor`, so it
 * takes the theme from the surrounding text. An <img> of the same file cannot
 * inherit colour; inline the SVG (or use the React components) wherever the
 * mark must follow Paper and Lamp.
 *
 * The wordmark sizes like type: its height is derived from `font-size`
 * (generated below from the outline geometry), so PRECEDA set at 40px matches
 * the masthead the specimen typeset with `all-small-caps` at .22em tracking.
 */

.preceda-seal {
  display: inline-block;
  flex: none;
  inline-size: var(--preceda-seal-size, var(--preceda-space-8));
  block-size: var(--preceda-seal-size, var(--preceda-space-8));
  color: inherit;
  vertical-align: middle;
}

/* The edition colour. Gilt-ink, not decorative gilt: a standalone seal is a
   meaningful graphic and must hold contrast on every surface. */
.preceda-seal--gilt {
  color: var(--preceda-color-gilt-ink);
}

.preceda-wordmark {
  display: inline-block;
  flex: none;
  inline-size: auto;
  color: inherit;
}

/*
 * Lockup: seal + PRECEDA as one unit. `--header` is the app chrome (the
 * default), `--masthead` the front page and letterhead, `--stacked` the gate
 * and splash. The lockup is usually the home link; it never underlines.
 */
.preceda-lockup {
  --preceda-lockup-size: var(--preceda-type-size-17);
  --preceda-seal-size: var(--preceda-space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--preceda-space-3);
  font-size: var(--preceda-lockup-size);
  line-height: 1;
  color: var(--preceda-color-ink);
  text-decoration: none;
}

/* Seal size and gap in em are generated below from the outline geometry:
   masthead = a 28px seal and 14px gap beside 40px type (the specimen);
   stacked = a 44px seal, 22px above 40px type (the gate). */
.preceda-lockup--masthead {
  --preceda-lockup-size: var(--preceda-type-size-40);
}

.preceda-lockup--stacked {
  --preceda-lockup-size: var(--preceda-type-size-40);
  flex-direction: column;
}

a.preceda-lockup {
  border-radius: var(--preceda-radius-small);
}

a.preceda-lockup:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-space-2);
}


/* Generated from src/tokens/index.ts. */

.preceda-wordmark {
  block-size: 0.5131em;
  vertical-align: -0.0205em;
}

.preceda-wordmark--sealed {
  block-size: 0.7em;
  vertical-align: -0.1051em;
}

.preceda-lockup--masthead {
  --preceda-seal-size: 0.7em;
  gap: 0.35em;
}

.preceda-lockup--stacked {
  --preceda-seal-size: 1.1em;
  gap: 0.55em;
}

/* Below the tablet breakpoint the masthead and stacked lockups step to the
   title size; the header lockup keeps its size. */
@media (max-width: 639.98px) {
  .preceda-lockup--masthead,
  .preceda-lockup--stacked {
    --preceda-lockup-size: var(--preceda-type-size-30);
  }
}

/* ── working-line ── */
/*
 * Working line: the turn in progress as one line of chrome type with an
 * oxblood point. It replaces every spinner. The point may breathe while the
 * work is live; with reduced motion it is simply present. The elapsed time is
 * tabular so it does not jitter as it counts.
 */

.preceda-working-line {
  display: flex;
  align-items: baseline;
  gap: var(--preceda-space-2);
  min-inline-size: 0;
  margin: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-weight: var(--preceda-type-small-weight);
  line-height: var(--preceda-type-small-leading);
  letter-spacing: var(--preceda-type-small-tracking);
}

.preceda-working-line__point {
  flex: none;
  align-self: center;
  inline-size: calc(var(--preceda-space-1) + 1px);
  block-size: calc(var(--preceda-space-1) + 1px);
  background: var(--preceda-color-binding);
}

.preceda-working-line__text {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preceda-working-line__elapsed {
  flex: none;
  font-variant-numeric: var(--preceda-numerals-tabular);
}

.preceda-working-line__elapsed::before {
  content: "·";
  margin-inline-end: var(--preceda-space-2);
}

.preceda-working-line--editorial { padding-block: var(--preceda-space-2); }
.preceda-working-line--editorial .preceda-working-line__text {
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-reading-family);
  font-size: var(--preceda-type-reading-size);
  line-height: var(--preceda-type-reading-leading);
}

/* Ruled: sits on a hairline, as beneath the last letter in correspondence. */
.preceda-working-line--ruled {
  padding-block: var(--preceda-space-3);
  border-block-start: 1px solid var(--preceda-color-hairline);
}

/* Wrapping: long phrases wrap instead of truncating (desktop correspondence). */
.preceda-working-line--wrap .preceda-working-line__text {
  white-space: normal;
}

/* Waiting: the associate is waiting on counsel. The point is hollow. */
.preceda-working-line--waiting .preceda-working-line__point {
  box-sizing: border-box;
  border: 1px solid var(--preceda-color-binding);
  background: transparent;
}

/* Stalled: the turn has stopped short. Text moves to ink-secondary. */
.preceda-working-line--stalled {
  color: var(--preceda-color-ink-secondary);
}

.preceda-working-line--stalled .preceda-working-line__point {
  background: var(--preceda-color-ink-tertiary);
}

.preceda-working-line--live .preceda-working-line__point {
  animation: preceda-working-point calc(var(--preceda-duration-slow) * 7) var(--preceda-ease-standard) infinite;
}

@keyframes preceda-working-point {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-working-line--live .preceda-working-line__point {
    animation: none;
  }
}

/* ── progress ── */
/*
 * Progress: a determinate printed rule. The value is known, so the rule is
 * drawn to length; there is no indeterminate form (use the working line).
 * The fill length comes from `--preceda-progress-value` (0 to 1), set inline
 * by the consumer or the React component. The figure is always printed, so
 * the length is never the only signal.
 */

.preceda-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  row-gap: var(--preceda-space-2);
  column-gap: var(--preceda-space-3);
  min-inline-size: 0;
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
}

.preceda-progress__label {
  min-inline-size: 0;
  color: var(--preceda-color-ink-secondary);
}

.preceda-progress__value {
  color: var(--preceda-color-ink-tertiary);
  font-size: var(--preceda-type-small-size);
  font-variant-numeric: var(--preceda-numerals-tabular);
  text-align: end;
}

.preceda-progress__track {
  position: relative;
  grid-column: 1 / -1;
  block-size: calc(var(--preceda-space-1) / 2);
  overflow: hidden;
  background: var(--preceda-color-rule);
}

.preceda-progress__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: calc(clamp(0, var(--preceda-progress-value, 0), 1) * 100%);
  background: var(--preceda-color-binding);
  transition: inline-size var(--preceda-duration-normal) var(--preceda-ease-standard);
}

/* Neutral: a measure with no call to act (relevance, treatment share). */
.preceda-progress--neutral .preceda-progress__fill {
  background: var(--preceda-color-ink-tertiary);
}

/* Complete: the rule is full; the figure says so in words. */
.preceda-progress--complete .preceda-progress__value {
  color: var(--preceda-color-binding-ink);
}

/* Inline: a short rule beside a figure in a table cell or register row. */
.preceda-progress--inline {
  display: inline-grid;
  grid-template-columns: calc(var(--preceda-space-20)) auto;
  align-items: center;
  vertical-align: middle;
}

.preceda-progress--inline .preceda-progress__track {
  grid-column: 1;
  grid-row: 1;
}

.preceda-progress--inline .preceda-progress__value {
  grid-column: 2;
  grid-row: 1;
}

@media (prefers-reduced-motion: reduce) {
  .preceda-progress__fill {
    transition-duration: 0s;
  }
}

/* ── skeleton ── */
/*
 * Skeleton: the shape of type that has not arrived. Bars sit on the reading
 * rhythm (one bar per line of text) in the sunken paper tone, so the page
 * does not jump when the words land. The whole block breathes once every
 * couple of seconds while loading; with reduced motion it is still.
 */

.preceda-skeleton {
  --preceda-skeleton-bar: var(--preceda-space-3);
  --preceda-skeleton-pitch: var(--preceda-space-6);
  --preceda-skeleton-ink: color-mix(in srgb, var(--preceda-color-rule) 70%, transparent);
  display: grid;
  gap: calc(var(--preceda-skeleton-pitch) - var(--preceda-skeleton-bar));
  min-inline-size: 0;
  animation: preceda-skeleton-breathe calc(var(--preceda-duration-slow) * 8) var(--preceda-ease-standard) infinite;
}

.preceda-skeleton__shapes {
  display: contents;
}

.preceda-skeleton__bar {
  display: block;
  block-size: var(--preceda-skeleton-bar);
  inline-size: 100%;
  border-radius: var(--preceda-radius-small);
  background: var(--preceda-skeleton-ink);
}

.preceda-skeleton__bar--short { inline-size: 38%; }
.preceda-skeleton__bar--medium { inline-size: 64%; }
.preceda-skeleton__bar--long { inline-size: 86%; }

/* Heading-weight bar for a title line. */
.preceda-skeleton__bar--title {
  block-size: var(--preceda-space-5);
}

/* Small bar for a running head or label. */
.preceda-skeleton__bar--label {
  block-size: var(--preceda-space-2);
}

/* Sheet: a document on the desk — running head, title block, numbered paragraphs. */
.preceda-skeleton--sheet {
  gap: var(--preceda-space-8);
  padding: var(--preceda-space-10) var(--preceda-space-12);
  border: 1px solid var(--preceda-color-rule);
  border-radius: var(--preceda-radius-small);
  background: var(--preceda-color-paper-raised);
}

.preceda-skeleton__head {
  display: flex;
  justify-content: space-between;
  gap: var(--preceda-space-6);
  padding-block-end: var(--preceda-space-3);
  border-block-end: 1px solid var(--preceda-color-ink);
}

.preceda-skeleton__head .preceda-skeleton__bar {
  inline-size: 30%;
}

.preceda-skeleton__titleblock {
  display: grid;
  justify-items: center;
  gap: var(--preceda-space-3);
}

.preceda-skeleton__titleblock .preceda-skeleton__bar {
  inline-size: 52%;
}

.preceda-skeleton__titleblock .preceda-skeleton__bar + .preceda-skeleton__bar {
  inline-size: 36%;
}

.preceda-skeleton__paragraph {
  display: grid;
  grid-template-columns: var(--preceda-space-8) minmax(0, 1fr);
  align-items: start;
}

.preceda-skeleton__folio {
  inline-size: var(--preceda-space-2);
  block-size: var(--preceda-skeleton-bar);
  border-radius: var(--preceda-radius-small);
  background: var(--preceda-skeleton-ink);
}

.preceda-skeleton__lines {
  display: grid;
  gap: calc(var(--preceda-skeleton-pitch) - var(--preceda-skeleton-bar));
}

/* Register: rows separated by hairlines, as in the matters list. */
.preceda-skeleton--register {
  gap: 0;
}

.preceda-skeleton__row {
  display: grid;
  gap: var(--preceda-space-2);
  padding-block: var(--preceda-space-4);
  border-block-end: 1px solid var(--preceda-color-hairline);
}

.preceda-skeleton__row .preceda-skeleton__bar:first-child {
  inline-size: 58%;
  block-size: var(--preceda-space-4);
}

.preceda-skeleton__row .preceda-skeleton__bar + .preceda-skeleton__bar {
  inline-size: 34%;
  block-size: var(--preceda-space-2);
}

/* Static: no breathing (documentation, or a skeleton nested in a loading region that already breathes). */
.preceda-skeleton--static {
  animation: none;
}

@keyframes preceda-skeleton-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (width < 640px) {
  .preceda-skeleton--sheet {
    padding: var(--preceda-space-6) var(--preceda-space-5);
  }

  .preceda-skeleton__paragraph {
    grid-template-columns: var(--preceda-space-6) minmax(0, 1fr);
  }
}

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

/* ── note ── */
/*
 * Note: the clerk's note to counsel. A hairline, a small-caps run-in label
 * that names the kind of note in words, and the body in ink-secondary. Used
 * for system messages, bounded partials, missed deadlines and failures. Never
 * a red box, never an icon standing in for the word.
 *
 * Tones: info (neutral), caution (verify umber), error (binding). The label
 * word always differs by tone, so colour is never the only signal.
 */

.preceda-note {
  --preceda-note-ink: var(--preceda-tone-neutral-ink);
  --preceda-note-rule: var(--preceda-color-rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--preceda-space-3);
  row-gap: var(--preceda-space-2);
  margin: 0;
  padding-block: var(--preceda-space-3) var(--preceda-space-1);
  border-block-start: 1px solid var(--preceda-note-rule);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-note__body {
  grid-column: 1;
  min-inline-size: 0;
  margin: 0;
  max-inline-size: var(--preceda-measure-reading);
}

.preceda-note__label {
  margin-inline-end: var(--preceda-space-2);
  color: var(--preceda-note-ink);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
}

.preceda-note__title {
  color: var(--preceda-color-ink);
}

.preceda-note__title::after {
  content: " ";
}

.preceda-note__actions {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--preceda-space-1) var(--preceda-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
}

.preceda-note__actions > li + li::before {
  content: "·";
  margin-inline-end: var(--preceda-space-2);
  color: var(--preceda-color-ink-tertiary);
}

.preceda-note__action {
  padding: 0;
  border: 0;
  color: var(--preceda-color-binding-ink);
  background: none;
  font: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
  cursor: pointer;
}

.preceda-note__action:hover {
  text-decoration-color: currentColor;
}

.preceda-note__action:disabled {
  color: var(--preceda-color-ink-tertiary);
  text-decoration-line: none;
  cursor: default;
}

.preceda-note__dismiss {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--preceda-space-10);
  min-block-size: var(--preceda-space-10);
  margin-block-start: calc(var(--preceda-space-2) * -1);
  margin-inline-end: calc(var(--preceda-space-2) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink-tertiary);
  background: none;
  cursor: pointer;
}

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

.preceda-note--caution {
  --preceda-note-ink: var(--preceda-tone-verify-ink);
  --preceda-note-rule: var(--preceda-tone-verify-rule);
}

.preceda-note--error {
  --preceda-note-ink: var(--preceda-tone-binding-ink);
  --preceda-note-rule: var(--preceda-tone-binding-rule);
  color: var(--preceda-color-ink);
}

/* Compact: chrome sans at ui size, for notes inside forms, menus and dialogs. */
.preceda-note--compact {
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
}

.preceda-note--compact .preceda-note__label {
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: normal;
  font-weight: 600;
  letter-spacing: var(--preceda-tracking-caps);
  text-transform: uppercase;
}

/* ── banner ── */
/*
 * Banner: a page-level note that runs the full width of the page under the
 * masthead or above results — a printed strip between two rules, not a
 * floating card. One banner per page. The label names the kind in words; the
 * action is a single link or button at the end of the line.
 */

.preceda-banner {
  --preceda-banner-ink: var(--preceda-tone-neutral-ink);
  --preceda-banner-rule: var(--preceda-color-rule);
  --preceda-banner-wash: transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--preceda-space-2) var(--preceda-space-4);
  margin: 0;
  padding: var(--preceda-space-3) var(--preceda-space-4);
  border-block: 1px solid var(--preceda-banner-rule);
  color: var(--preceda-color-ink);
  background: var(--preceda-banner-wash);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
}

.preceda-banner__label {
  flex: none;
  color: var(--preceda-banner-ink);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
}

.preceda-banner__message {
  flex: 1 1 24ch;
  min-inline-size: 0;
  margin: 0;
}

.preceda-banner__detail {
  color: var(--preceda-color-ink-secondary);
}

.preceda-banner__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--preceda-space-2);
  margin-inline-start: auto;
}

.preceda-banner__action {
  padding: 0;
  border: 0;
  color: var(--preceda-color-binding-ink);
  background: none;
  font: inherit;
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
  cursor: pointer;
}

.preceda-banner__action:hover {
  text-decoration-color: currentColor;
}

.preceda-banner__dismiss {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--preceda-space-10);
  min-block-size: var(--preceda-space-10);
  margin-block: calc(var(--preceda-space-2) * -1);
  margin-inline-end: calc(var(--preceda-space-2) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink-tertiary);
  background: none;
  cursor: pointer;
}

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

.preceda-banner--caution {
  --preceda-banner-ink: var(--preceda-tone-verify-ink);
  --preceda-banner-rule: var(--preceda-tone-verify-rule);
  --preceda-banner-wash: var(--preceda-tone-verify-wash);
}

/* Binding ink does not reach 4.5:1 on the Lamp verify wash; the act is set in ink. */
.preceda-banner--caution .preceda-banner__action {
  color: var(--preceda-color-ink);
}

.preceda-banner--error {
  --preceda-banner-ink: var(--preceda-tone-binding-ink);
  --preceda-banner-rule: var(--preceda-tone-binding-rule);
  --preceda-banner-wash: var(--preceda-tone-binding-wash);
}

/* Centered: a standalone gate (limit reached) with the action beneath. */
.preceda-banner--centered {
  flex-direction: column;
  align-items: center;
  padding-block: var(--preceda-space-6);
  text-align: center;
}

.preceda-banner--centered .preceda-banner__message {
  flex: none;
  max-inline-size: var(--preceda-measure-reading);
}

.preceda-banner--centered .preceda-banner__actions {
  margin-inline-start: 0;
}

@media (width < 640px) {
  .preceda-banner {
    padding-inline: var(--preceda-space-4);
  }

  .preceda-banner__actions {
    margin-inline-start: 0;
  }
}

/* ── toast ── */
/*
 * Toast: a short confirmation of something counsel just did ("Link copied",
 * "Download started"). Printed on a raised slip with a hairline, stacked at
 * the foot of the viewport, dismissible, and announced by a live region that
 * stays in the document. Toasts never carry the only copy of an error that
 * needs action — that belongs in a Note.
 *
 * The region is a manual `popover` so toasts sit above an open dialog. Without
 * the popover API it falls back to a fixed layer at `--preceda-layer-toast`.
 */

.preceda-toast-region {
  position: fixed;
  inset: auto var(--preceda-space-6) var(--preceda-space-6) auto;
  z-index: var(--preceda-layer-toast);
  display: none;
  inline-size: min(calc(var(--preceda-space-24) * 4), calc(100vw - var(--preceda-space-12)));
  max-block-size: calc(100dvh - var(--preceda-space-12));
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  color: inherit;
  background: transparent;
}

.preceda-toast-region:popover-open,
.preceda-toast-region[data-open] {
  display: block;
}

.preceda-toast-region__list {
  display: flex;
  flex-direction: column;
  gap: var(--preceda-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.preceda-toast-region__announcer {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.preceda-toast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--preceda-space-2);
  padding: var(--preceda-space-2) var(--preceda-space-2) var(--preceda-space-2) var(--preceda-space-4);
  border: 1px solid var(--preceda-color-rule-strong);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-raised);
  box-shadow: var(--preceda-shadow-sheet);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
  animation: preceda-toast-in var(--preceda-duration-normal) var(--preceda-ease-standard);
}

.preceda-toast__message {
  min-inline-size: 0;
  margin: 0;
  padding-block: var(--preceda-space-2);
}

.preceda-toast__label {
  margin-inline-end: var(--preceda-space-2);
  color: var(--preceda-tone-binding-ink);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
}

.preceda-toast__actions {
  display: flex;
  align-items: center;
  gap: var(--preceda-space-1);
}

.preceda-toast__action {
  min-block-size: var(--preceda-space-10);
  padding: 0 var(--preceda-space-2);
  border: 0;
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-binding-ink);
  background: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.preceda-toast__action:hover {
  background: var(--preceda-color-binding-tint);
}

.preceda-toast__dismiss {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--preceda-space-10);
  min-block-size: var(--preceda-space-10);
  padding: 0;
  border: 0;
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink-tertiary);
  background: none;
  cursor: pointer;
}

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

/* Error: the label says so; the slip keeps its hairline in binding. */
.preceda-toast--error {
  border-color: var(--preceda-tone-binding-rule);
}

/* Static: a toast drawn in place for documentation, outside a region. */
.preceda-toast--static {
  animation: none;
}

@keyframes preceda-toast-in {
  from { opacity: 0; transform: translateY(var(--preceda-space-2)); }
  to { opacity: 1; transform: none; }
}

@media (width < 640px) {
  .preceda-toast-region {
    inset: auto var(--preceda-space-3) calc(var(--preceda-space-3) + env(safe-area-inset-bottom)) var(--preceda-space-3);
    inline-size: auto;
  }
}

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

/* ── empty-state ── */
/*
 * Empty state: an honest, quiet sentence where the work will be. No icon, no
 * illustration, no welcome card. One line of serif ("Nothing on the desk
 * yet."), at most one line of guidance, and at most one next act.
 */

.preceda-empty {
  display: grid;
  justify-items: start;
  gap: var(--preceda-space-2);
  margin: 0;
  padding-block: var(--preceda-space-8);
  color: var(--preceda-color-ink-secondary);
}

.preceda-empty__title {
  margin: 0;
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-subheading-family);
  font-size: var(--preceda-type-subheading-size);
  font-weight: var(--preceda-type-subheading-weight);
  line-height: var(--preceda-type-subheading-leading);
  font-optical-sizing: auto;
}

.preceda-empty__guidance {
  margin: 0;
  max-inline-size: var(--preceda-measure-reading);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-empty__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--preceda-space-2) var(--preceda-space-4);
  margin-block-start: var(--preceda-space-2);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
}

/* Desk: the empty sheet on the desk, centred in the sheet's reading area. */
.preceda-empty--desk {
  justify-items: center;
  align-content: center;
  min-block-size: 40dvh;
  padding: var(--preceda-space-16) var(--preceda-space-8);
  border: 1px solid var(--preceda-color-rule);
  border-radius: var(--preceda-radius-small);
  background: var(--preceda-color-paper-raised);
  box-shadow: var(--preceda-shadow-sheet);
  text-align: center;
}

/* Inline: inside a tab panel or list, set on a hairline, left-aligned. */
.preceda-empty--inline {
  padding-block: var(--preceda-space-5);
  border-block-start: 1px solid var(--preceda-color-hairline);
}

.preceda-empty--inline .preceda-empty__title {
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

@media (width < 640px) {
  .preceda-empty--desk {
    min-block-size: 32dvh;
    padding: var(--preceda-space-10) var(--preceda-space-5);
  }
}

/* ── error-page ── */
/*
 * Error page: not found, and something went wrong. Set like a notice pinned
 * in the reporter — a small-caps running head with the status in words and
 * figure, a serif title, one paragraph, and the ways back. No giant oxblood
 * numerals, no illustration.
 */

.preceda-error-page {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--preceda-space-4);
  inline-size: min(100%, var(--preceda-measure-reading));
  min-block-size: 60dvh;
  margin-inline: auto;
  padding: var(--preceda-space-16) var(--preceda-space-6);
}

.preceda-error-page__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-4);
  inline-size: 100%;
  padding-block-end: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-ink);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
}

.preceda-error-page__code {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-folio-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-caps: normal;
  font-variant-numeric: var(--preceda-numerals-tabular);
  letter-spacing: 0;
}

.preceda-error-page__title {
  margin: var(--preceda-space-4) 0 0;
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-title-family);
  font-size: var(--preceda-type-title-size);
  font-weight: var(--preceda-type-title-weight);
  line-height: var(--preceda-type-title-leading);
  letter-spacing: var(--preceda-type-title-tracking);
  font-optical-sizing: auto;
}

.preceda-error-page__body {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-reading-family);
  font-size: var(--preceda-type-reading-size);
  line-height: var(--preceda-type-reading-leading);
}

.preceda-error-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--preceda-space-3) var(--preceda-space-5);
  margin-block-start: var(--preceda-space-4);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
}

.preceda-error-page__reference {
  justify-self: stretch;
  margin: var(--preceda-space-6) 0 0;
  padding-block-start: var(--preceda-space-3);
  border-block-start: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
}

.preceda-error-page__reference code {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-citation-family);
  font-size: var(--preceda-type-citation-size);
}

@media (width < 640px) {
  .preceda-error-page {
    min-block-size: 50dvh;
    padding: var(--preceda-space-10) var(--preceda-space-5);
  }

  .preceda-error-page__title {
    font-size: var(--preceda-type-heading-size);
    line-height: var(--preceda-type-heading-leading);
  }
}

/* ── kbd ── */
/*
 * Kbd: a key, set as a small printed key-cap in chrome sans — a hairline with
 * a heavier foot. A combination nests keys inside one outer `kbd`; the joiner
 * ("+" or "then") is plain tertiary text between them.
 */

.preceda-kbd {
  display: inline-block;
  box-sizing: border-box;
  min-inline-size: var(--preceda-space-6);
  padding: 0 var(--preceda-space-1);
  border: 1px solid var(--preceda-color-rule);
  border-block-end-color: var(--preceda-color-rule-strong);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink-secondary);
  background: var(--preceda-color-paper-raised);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-weight: 500;
  font-variant-numeric: var(--preceda-numerals-tabular);
  line-height: var(--preceda-type-small-leading);
  text-align: center;
  white-space: nowrap;
}

.preceda-kbd-combo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--preceda-space-1);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  white-space: nowrap;
}

.preceda-kbd-combo__joiner {
  color: var(--preceda-color-ink-tertiary);
}

/* A shortcut list row: action on the left, keys on the right, on a hairline. */
.preceda-shortcut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-4);
  padding-block: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
}

.preceda-shortcut:last-child {
  border-block-end: 0;
}

/* ── menu ── */
/*
 * Menu: the menu-button pattern ("Actions ▾", the kebab ⋯). A raised slip in
 * the top layer (native `popover`), positioned against its trigger. Items are
 * chrome sans at ui size with 40px targets (44px under 640px); an optional
 * hint sits at the right ("Rich text", ".md") and an optional description
 * under the label ("Resolve export blockers first"). Destructive items are
 * set in binding ink and say what they destroy. Disabled items stay
 * focusable so their description is read, but cannot be chosen.
 */

.preceda-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--preceda-space-1);
  min-block-size: var(--preceda-space-10);
  padding: 0 var(--preceda-space-3);
  border: 1px solid var(--preceda-color-rule);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink-secondary);
  background: transparent;
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  font-weight: 500;
  line-height: var(--preceda-type-ui-leading);
  cursor: pointer;
  transition:
    color var(--preceda-duration-fast) var(--preceda-ease-standard),
    border-color var(--preceda-duration-fast) var(--preceda-ease-standard),
    background-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-menu-trigger:hover {
  border-color: var(--preceda-color-rule-strong);
  color: var(--preceda-color-ink);
}

.preceda-menu-trigger[aria-expanded="true"] {
  border-color: var(--preceda-color-rule-strong);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-hover);
}

.preceda-menu-trigger:disabled {
  color: var(--preceda-color-ink-disabled);
  cursor: not-allowed;
}

.preceda-menu-trigger__caret {
  display: inline-block;
  transition: transform var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-menu-trigger[aria-expanded="true"] .preceda-menu-trigger__caret {
  transform: rotate(180deg);
}

/* Kebab: an icon-only trigger with no rule, as in the running head's ⋯. */
.preceda-menu-trigger--kebab {
  justify-content: center;
  min-inline-size: var(--preceda-space-10);
  padding: 0;
  border-color: transparent;
  color: var(--preceda-color-ink-tertiary);
}

.preceda-menu-trigger--kebab:hover,
.preceda-menu-trigger--kebab[aria-expanded="true"] {
  border-color: transparent;
}

/* Quiet: text-only trigger in a running head or toolbar. */
.preceda-menu-trigger--quiet {
  border-color: transparent;
}

.preceda-menu {
  position: fixed;
  inset: auto;
  z-index: var(--preceda-layer-popover);
  box-sizing: border-box;
  display: none;
  min-inline-size: calc(var(--preceda-space-24) * 2.5);
  max-inline-size: min(calc(var(--preceda-space-24) * 4), calc(100vw - var(--preceda-space-4)));
  max-block-size: min(var(--preceda-floating-available, 70dvh), 70dvh);
  margin: 0;
  padding: var(--preceda-space-1);
  overflow-y: auto;
  border: 1px solid var(--preceda-color-rule-strong);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-raised);
  box-shadow: var(--preceda-shadow-sheet);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
}

.preceda-menu:popover-open,
.preceda-menu[data-open],
.preceda-menu--static {
  display: block;
}

.preceda-menu--static {
  position: relative;
  inset: auto;
  inline-size: max-content;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.preceda-menu__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--preceda-space-4);
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--preceda-space-10);
  padding: var(--preceda-space-2) var(--preceda-space-3);
  border: 0;
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink-secondary);
  background: none;
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.preceda-menu__item:hover,
.preceda-menu__item:focus-visible {
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-hover);
}

.preceda-menu__item:focus-visible {
  outline: 1px solid var(--preceda-color-focus);
  outline-offset: calc(1px * -1);
}

.preceda-menu__label {
  min-inline-size: 0;
}

.preceda-menu__hint {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-variant-numeric: var(--preceda-numerals-tabular);
  white-space: nowrap;
}

.preceda-menu__description {
  grid-column: 1 / -1;
  margin-block-start: var(--preceda-space-1);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-menu__item--destructive {
  color: var(--preceda-color-binding-ink);
}

.preceda-menu__item--destructive:hover,
.preceda-menu__item--destructive:focus-visible {
  color: var(--preceda-color-binding-ink);
  background: var(--preceda-color-binding-tint);
}

.preceda-menu__item[aria-disabled="true"] {
  color: var(--preceda-color-ink-tertiary);
  cursor: default;
}

.preceda-menu__item[aria-disabled="true"]:hover {
  color: var(--preceda-color-ink-tertiary);
  background: none;
}

.preceda-menu__item[aria-disabled="true"]:focus-visible {
  color: var(--preceda-color-ink-tertiary);
  background: var(--preceda-color-paper-sunken);
}

.preceda-menu__item[aria-checked] {
  grid-template-columns: var(--preceda-space-4) minmax(0, 1fr) auto;
}

.preceda-menu__check {
  color: var(--preceda-color-binding-ink);
}

.preceda-menu__separator {
  block-size: 1px;
  margin: var(--preceda-space-1) calc(var(--preceda-space-1) * -1);
  border: 0;
  background: var(--preceda-color-hairline);
}

.preceda-menu__group-label {
  margin: 0;
  padding: var(--preceda-space-2) var(--preceda-space-3) var(--preceda-space-1);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
}

@media (width < 640px) {
  .preceda-menu__item,
  .preceda-menu-trigger {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }

  .preceda-menu-trigger--kebab {
    min-inline-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-menu-trigger,
  .preceda-menu-trigger__caret {
    transition-duration: 0s;
  }
}

/* ── popover ── */
/*
 * Popover: a small non-modal panel anchored to its trigger — "Add to matter"
 * from a case, a filter, a footnote on desktop. Top layer via the native
 * `popover` attribute (light dismiss, Esc), positioned by the package's
 * internal helper. Content is interactive; for a one-line label use Tooltip.
 */

.preceda-popover {
  position: fixed;
  inset: auto;
  z-index: var(--preceda-layer-popover);
  box-sizing: border-box;
  display: none;
  inline-size: max-content;
  min-inline-size: calc(var(--preceda-space-24) * 2.5);
  max-inline-size: min(calc(var(--preceda-space-24) * 4), calc(100vw - var(--preceda-space-4)));
  max-block-size: min(var(--preceda-floating-available, 70dvh), 70dvh);
  margin: 0;
  padding: var(--preceda-space-4);
  overflow-y: auto;
  border: 1px solid var(--preceda-color-rule-strong);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-raised);
  box-shadow: var(--preceda-shadow-sheet);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
}

.preceda-popover:popover-open,
.preceda-popover[data-open],
.preceda-popover--static {
  display: block;
}

.preceda-popover--static {
  position: relative;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.preceda-popover:focus-visible {
  outline: 1px solid var(--preceda-color-focus);
  outline-offset: calc(1px * -1);
}

.preceda-popover__title {
  margin: 0 0 var(--preceda-space-3);
  padding-block-end: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-weight: var(--preceda-type-label-weight);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-popover__body {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
}

/* A flush list of choices inside a popover (matters, filters). */
.preceda-popover__list {
  display: grid;
  margin: 0 calc(var(--preceda-space-2) * -1);
  padding: 0;
  list-style: none;
}

.preceda-popover__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-3);
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--preceda-space-10);
  padding: var(--preceda-space-2);
  border: 0;
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink);
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.preceda-popover__option:hover {
  background: var(--preceda-color-paper-hover);
}

.preceda-popover__option:focus-visible {
  outline: 1px solid var(--preceda-color-focus);
  outline-offset: calc(1px * -1);
  background: var(--preceda-color-paper-hover);
}

.preceda-popover__option:disabled {
  color: var(--preceda-color-ink-secondary);
  cursor: default;
}

.preceda-popover__option-state {
  flex: none;
  color: var(--preceda-color-binding-ink);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
}

.preceda-popover__foot {
  margin: var(--preceda-space-3) 0 0;
  padding-block-start: var(--preceda-space-3);
  border-block-start: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
}

@media (width < 640px) {
  .preceda-popover__option {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

/* ── tooltip ── */
/*
 * Tooltip: a supplementary label for a control whose purpose is not written
 * beside it (an icon-only button, a truncated title). One short line of
 * chrome sans on ink, never interactive content, never the only copy of
 * required information. Shown on hover after a delay and on keyboard focus;
 * Esc hides it; the pointer can move onto it without it closing.
 */

.preceda-tooltip {
  position: fixed;
  inset: auto;
  z-index: var(--preceda-layer-popover);
  box-sizing: border-box;
  display: none;
  max-inline-size: min(calc(var(--preceda-space-24) * 3), calc(100vw - var(--preceda-space-4)));
  margin: 0;
  padding: var(--preceda-space-1) var(--preceda-space-2);
  overflow: visible;
  border: 0;
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-paper);
  background: var(--preceda-color-ink);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  letter-spacing: var(--preceda-type-small-tracking);
  pointer-events: auto;
}

.preceda-tooltip:popover-open,
.preceda-tooltip[data-open],
.preceda-tooltip--static {
  display: block;
  animation: preceda-tooltip-in var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-tooltip--static {
  position: relative;
  inline-size: max-content;
  animation: none;
}

.preceda-tooltip__keys {
  margin-inline-start: var(--preceda-space-2);
  color: var(--preceda-color-rule-strong);
  font-variant-numeric: var(--preceda-numerals-tabular);
}

@keyframes preceda-tooltip-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-tooltip:popover-open,
  .preceda-tooltip[data-open] {
    animation: none;
  }
}

/* The anchor wrapper takes no box of its own. */
.preceda-tooltip-anchor {
  display: contents;
}

/* ── bottom-sheet ── */
/*
 * Bottom sheet: the mobile surface that rises from the foot of the screen —
 * correspondence pulled up from the dock, a footnote opened from a mark.
 * A native modal `<dialog>` (top layer, inert page, Esc), with a grip that
 * drags between snap points (peek, half, full) and past the lowest to
 * dismiss. Safe-area insets pad the foot; when the on-screen keyboard opens,
 * the sheet rides above it so the composer stays in view.
 *
 * Snap heights are custom properties so a product can tune them; the current
 * drag offset and keyboard inset are written inline by the React component.
 */

.preceda-bottom-sheet {
  --preceda-bottom-sheet-peek: 36dvh;
  --preceda-bottom-sheet-half: 58dvh;
  --preceda-bottom-sheet-full: calc(100dvh - env(safe-area-inset-top) - var(--preceda-space-3));
  --preceda-bottom-sheet-height: var(--preceda-bottom-sheet-half);
  /* Unitless CSS px, written inline while dragging and while the keyboard is up. */
  --preceda-bottom-sheet-drag: 0;
  --preceda-bottom-sheet-keyboard: 0;
  position: fixed;
  inset: auto 0 calc(var(--preceda-bottom-sheet-keyboard) * 1px) 0;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: calc(var(--preceda-space-24) * 7);
  block-size: min(var(--preceda-bottom-sheet-height), calc(100dvh - var(--preceda-bottom-sheet-keyboard) * 1px - env(safe-area-inset-top)));
  max-block-size: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--preceda-color-rule-strong);
  border-block-end: 0;
  border-start-start-radius: var(--preceda-radius-medium);
  border-start-end-radius: var(--preceda-radius-medium);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper);
  box-shadow: var(--preceda-shadow-dialog);
  transform: translateY(calc(var(--preceda-bottom-sheet-drag) * 1px));
  transition:
    block-size var(--preceda-duration-slow) var(--preceda-ease-standard),
    transform var(--preceda-duration-slow) var(--preceda-ease-standard);
  touch-action: none;
}

.preceda-bottom-sheet[open],
.preceda-bottom-sheet--static {
  display: flex;
  flex-direction: column;
}

.preceda-bottom-sheet[open] {
  animation: preceda-bottom-sheet-in var(--preceda-duration-slow) var(--preceda-ease-standard);
}

.preceda-bottom-sheet::backdrop {
  background: color-mix(in srgb, var(--preceda-color-ink) 28%, transparent);
}

.preceda-bottom-sheet--peek { --preceda-bottom-sheet-height: var(--preceda-bottom-sheet-peek); }
.preceda-bottom-sheet--half { --preceda-bottom-sheet-height: var(--preceda-bottom-sheet-half); }

.preceda-bottom-sheet--full {
  --preceda-bottom-sheet-height: var(--preceda-bottom-sheet-full);
  border-inline: 0;
}

/* Content: the sheet takes the height of its content up to the half snap. */
.preceda-bottom-sheet--content {
  block-size: auto;
  max-block-size: var(--preceda-bottom-sheet-half);
}

.preceda-bottom-sheet[data-dragging] {
  transition: none;
  user-select: none;
}

/* Static: drawn in the flow for documentation. */
.preceda-bottom-sheet--static {
  position: relative;
  inset: auto;
  block-size: auto;
  transform: none;
}

.preceda-bottom-sheet__grip-row {
  display: flex;
  flex: none;
  justify-content: center;
  touch-action: none;
}

.preceda-bottom-sheet__grip {
  display: grid;
  place-items: center;
  inline-size: calc(var(--preceda-space-24) + var(--preceda-space-6));
  min-block-size: calc(var(--preceda-space-6));
  padding: 0;
  border: 0;
  border-radius: var(--preceda-radius-small);
  background: none;
  cursor: grab;
  touch-action: none;
}

.preceda-bottom-sheet[data-dragging] .preceda-bottom-sheet__grip {
  cursor: grabbing;
}

.preceda-bottom-sheet__grip-bar {
  display: block;
  inline-size: var(--preceda-space-16);
  block-size: calc(var(--preceda-space-1) - 1px);
  border-radius: var(--preceda-radius-round);
  background: var(--preceda-color-rule-strong);
}

.preceda-bottom-sheet__grip:hover .preceda-bottom-sheet__grip-bar {
  background: var(--preceda-color-ink-tertiary);
}

.preceda-bottom-sheet__header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--preceda-space-4);
  min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  padding: 0 var(--preceda-space-5) var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-rule);
}

.preceda-bottom-sheet__title {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-weight: var(--preceda-type-label-weight);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-bottom-sheet__close {
  display: inline-flex;
  align-items: center;
  gap: var(--preceda-space-1);
  min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  margin-inline-end: calc(var(--preceda-space-2) * -1);
  padding: 0 var(--preceda-space-2);
  border: 0;
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink);
  background: none;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-reading-size);
  cursor: pointer;
}

.preceda-bottom-sheet__close:hover {
  background: var(--preceda-color-paper-hover);
}

.preceda-bottom-sheet__body {
  flex: 1 1 auto;
  min-block-size: 0;
  padding: var(--preceda-space-4) var(--preceda-space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.preceda-bottom-sheet__footer {
  flex: none;
  padding: var(--preceda-space-3) var(--preceda-space-5) calc(var(--preceda-space-3) + env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--preceda-color-rule);
  background: var(--preceda-color-paper);
}

/* When the keyboard is up the home indicator is covered; drop its inset. */
.preceda-bottom-sheet[data-keyboard] .preceda-bottom-sheet__footer {
  padding-block-end: var(--preceda-space-3);
}

.preceda-bottom-sheet:not(:has(.preceda-bottom-sheet__footer)) .preceda-bottom-sheet__body {
  padding-block-end: calc(var(--preceda-space-4) + env(safe-area-inset-bottom));
}

/* Probes resolve the snap heights in px for the drag gesture. */
.preceda-bottom-sheet__probe {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 0;
  visibility: hidden;
  pointer-events: none;
}

.preceda-bottom-sheet__probe[data-probe="peek"] { block-size: var(--preceda-bottom-sheet-peek); }
.preceda-bottom-sheet__probe[data-probe="half"] { block-size: var(--preceda-bottom-sheet-half); }
.preceda-bottom-sheet__probe[data-probe="full"] { block-size: var(--preceda-bottom-sheet-full); }

@keyframes preceda-bottom-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(calc(var(--preceda-bottom-sheet-drag) * 1px)); }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-bottom-sheet {
    transition-duration: 0s;
  }

  .preceda-bottom-sheet[open] {
    animation: none;
  }
}

/* ── dock ── */
/*
 * Dock: the correspondence bar at the foot of the mobile desk. A grip, one
 * line — "Correspondence · 3 letters" with "1 question waiting" in binding at
 * right — then the composer and the working line. Pull the grip up, or tap
 * the line, to open the correspondence sheet. It never blocks reading: the
 * desk scrolls beneath it and pads its own foot by the dock height.
 */

.preceda-dock {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--preceda-space-3);
  min-inline-size: 0;
  padding: 0 var(--preceda-space-5) calc(var(--preceda-space-3) + env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--preceda-color-rule);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper);
  touch-action: none;
}

/* Fixed: pinned to the viewport foot. The product pads the page by its height. */
.preceda-dock--fixed {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--preceda-layer-dock);
}

.preceda-dock__grip {
  display: grid;
  place-items: center;
  justify-self: center;
  inline-size: calc(var(--preceda-space-24) + var(--preceda-space-6));
  max-inline-size: 100%;
  min-block-size: var(--preceda-space-6);
  padding: 0;
  border: 0;
  border-radius: var(--preceda-radius-small);
  background: none;
  cursor: grab;
}

.preceda-dock__grip-bar {
  display: block;
  inline-size: var(--preceda-space-16);
  block-size: calc(var(--preceda-space-1) - 1px);
  border-radius: var(--preceda-radius-round);
  background: var(--preceda-color-rule-strong);
}

.preceda-dock__grip:hover .preceda-dock__grip-bar {
  background: var(--preceda-color-ink-tertiary);
}

.preceda-dock__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-1) var(--preceda-space-4);
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  margin-block-start: calc(var(--preceda-space-3) * -1);
  padding: var(--preceda-space-2) 0;
  border: 0;
  border-block-end: 1px solid var(--preceda-color-hairline);
  color: inherit;
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.preceda-dock__title {
  flex: 0 1 auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-reading-family);
  font-size: var(--preceda-type-reading-size);
  line-height: var(--preceda-type-ui-leading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preceda-dock__count {
  color: var(--preceda-color-ink-secondary);
}

.preceda-dock__count::before {
  content: " · ";
}

.preceda-dock__status {
  flex: none;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
}

/* Waiting: a question awaits counsel. Words carry it; binding marks it. */
.preceda-dock__status--waiting {
  color: var(--preceda-color-binding-ink);
}

.preceda-dock__summary:hover .preceda-dock__title {
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-dock__content {
  display: grid;
  gap: var(--preceda-space-3);
  touch-action: auto;
}

.preceda-dock__content > .preceda-working-line {
  padding-block-start: var(--preceda-space-3);
  border-block-start: 1px solid var(--preceda-color-hairline);
}

@media (width >= 1024px) {
  /* The dock is a mobile construct; at desk width the correspondence pane is always open. */
  .preceda-dock--fixed {
    display: none;
  }
}

/* ── coachmark ── */
/*
 * Coachmark: the tour's slip of paper, pinned beside the part of the
 * workspace it describes. A small-caps count ("Tour · 3 of 9"), a serif head,
 * a sentence or two in ink-secondary, and Skip · Back · Next over a hairline.
 * Not a bubble: no beak, no drop colour, no pulsing dot. A binding rule runs
 * along the edge that faces the anchor, as a margin rule faces its paragraph.
 *
 * Top layer via `popover="manual"` (the page stays live), positioned by the
 * package's internal helper. The optional spotlight is a second top-layer
 * element under the card: a cutout over the anchor whose shadow dims the
 * rest of the page. It never takes a pointer, so the anchor stays usable.
 * Below the tablet width the React component renders the bottom Sheet.
 */

.preceda-coachmark {
  position: fixed;
  inset: auto;
  z-index: var(--preceda-layer-popover);
  box-sizing: border-box;
  display: none;
  inline-size: min(calc(var(--preceda-space-24) * 3.5), calc(100vw - var(--preceda-space-6)));
  max-block-size: min(var(--preceda-floating-available, 70dvh), 70dvh);
  margin: 0;
  padding: var(--preceda-space-4) var(--preceda-space-5) var(--preceda-space-3);
  overflow-y: auto;
  border: 1px solid var(--preceda-color-rule-strong);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-raised);
  box-shadow: var(--preceda-shadow-sheet);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  transition:
    left var(--preceda-duration-normal) var(--preceda-ease-standard),
    top var(--preceda-duration-normal) var(--preceda-ease-standard);
}

.preceda-coachmark:popover-open,
.preceda-coachmark[data-open],
.preceda-coachmark--static {
  display: block;
}

.preceda-coachmark:popover-open {
  animation: preceda-coachmark-in var(--preceda-duration-normal) var(--preceda-ease-standard);
}

/* The binding rule faces the anchor. */
.preceda-coachmark[data-side="bottom"] { border-block-start-color: var(--preceda-color-binding); }
.preceda-coachmark[data-side="top"] { border-block-end-color: var(--preceda-color-binding); }
.preceda-coachmark[data-side="right"] { border-inline-start-color: var(--preceda-color-binding); }
.preceda-coachmark[data-side="left"] { border-inline-end-color: var(--preceda-color-binding); }

/* No anchor on the page: the slip sits in the middle, the page dimmed whole. */
.preceda-coachmark--centred {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  border-block-start-color: var(--preceda-color-binding);
  transform: translate(-50%, -50%);
}

.preceda-coachmark--static {
  position: relative;
  max-inline-size: 100%;
  max-block-size: none;
  border-block-start-color: var(--preceda-color-binding);
  box-shadow: none;
  transition: none;
}

.preceda-coachmark:focus-visible {
  outline: 1px solid var(--preceda-color-focus);
  outline-offset: calc(1px * -1);
}

.preceda-coachmark__kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-3);
  margin: 0 0 var(--preceda-space-2);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-weight: var(--preceda-type-label-weight);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-coachmark__count {
  font-variant-numeric: var(--preceda-numerals-tabular);
}

.preceda-coachmark__title {
  margin: 0 0 var(--preceda-space-2);
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-subheading-family);
  font-size: var(--preceda-type-subheading-size);
  font-weight: var(--preceda-type-subheading-weight);
  letter-spacing: var(--preceda-type-subheading-tracking);
  line-height: var(--preceda-type-subheading-leading);
}

.preceda-coachmark__body {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
}

.preceda-coachmark__body > p {
  margin: 0;
}

.preceda-coachmark__body > * + * {
  margin-block-start: var(--preceda-space-2);
}

/* Acts inside the body (recorded questions): a flush list of serif choices. */
.preceda-coachmark__choices {
  display: grid;
  gap: var(--preceda-space-1);
  margin: var(--preceda-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.preceda-coachmark__choice {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--preceda-space-10);
  padding: var(--preceda-space-2) var(--preceda-space-3);
  border: 1px solid var(--preceda-color-rule);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.preceda-coachmark__choice:hover {
  border-color: var(--preceda-color-rule-strong);
  background: var(--preceda-color-paper-hover);
}

.preceda-coachmark__choice:focus-visible {
  outline: 1px solid var(--preceda-color-focus);
  outline-offset: 1px;
}

.preceda-coachmark__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--preceda-space-3);
  margin-block-start: var(--preceda-space-4);
  padding-block-start: var(--preceda-space-3);
  border-block-start: 1px solid var(--preceda-color-hairline);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
}

.preceda-bottom-sheet__footer .preceda-coachmark__controls {
  margin: 0;
  padding: 0;
  border: 0;
}

.preceda-coachmark__moves {
  display: inline-flex;
  align-items: center;
  gap: var(--preceda-space-2);
}

.preceda-coachmark__skip {
  min-block-size: var(--preceda-space-8);
  padding: 0;
  border: 0;
  color: var(--preceda-color-ink-secondary);
  background: none;
  font: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
  cursor: pointer;
}

.preceda-coachmark__skip:hover {
  color: var(--preceda-color-ink);
  text-decoration-color: currentColor;
}

.preceda-coachmark__skip:focus-visible {
  border-radius: var(--preceda-radius-small);
  outline: 1px solid var(--preceda-color-focus);
  outline-offset: 1px;
}

/* The spotlight: a cutout over the anchor; its shadow dims everything else. */
.preceda-coachmark-spotlight {
  position: fixed;
  inset: auto;
  z-index: var(--preceda-layer-popover);
  box-sizing: border-box;
  display: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--preceda-color-binding);
  border-radius: var(--preceda-radius-small);
  background: transparent;
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--preceda-color-ink) 28%, transparent);
  pointer-events: none;
  transition:
    left var(--preceda-duration-normal) var(--preceda-ease-standard),
    top var(--preceda-duration-normal) var(--preceda-ease-standard),
    width var(--preceda-duration-normal) var(--preceda-ease-standard),
    height var(--preceda-duration-normal) var(--preceda-ease-standard);
}

.preceda-coachmark-spotlight:popover-open,
.preceda-coachmark-spotlight[data-open] {
  display: block;
}

.preceda-coachmark-spotlight--none {
  inset: 0;
  inline-size: auto;
  block-size: auto;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--preceda-color-ink) 28%, transparent);
  box-shadow: none;
}

/* Narrow: the Sheet's body carries the head and the body; the foot the controls. */
.preceda-coachmark-sheet .preceda-coachmark__title {
  margin-block-start: 0;
}

@keyframes preceda-coachmark-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-coachmark,
  .preceda-coachmark-spotlight {
    transition: none;
  }

  .preceda-coachmark:popover-open {
    animation: none;
  }
}

@media (forced-colors: active) {
  .preceda-coachmark-spotlight {
    border-color: Highlight;
  }
}

/* ── status-label ── */
/*
 * Status label: a state set as a word, never a chip. Small caps in the
 * reading face for treatments and roles; chrome sans for register state lines.
 * The tone gives the ink; the word (and, for struck, the strike) carries the
 * meaning, so colour is never the only signal.
 */

.preceda-status-label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--preceda-space-1);
  color: var(--preceda-tone-neutral-ink);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-variant-numeric: var(--preceda-numerals-tabular);
  font-weight: var(--preceda-type-label-weight);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
  white-space: nowrap;
}

.preceda-status-label--sans {
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: normal;
  letter-spacing: var(--preceda-type-small-tracking);
  line-height: var(--preceda-type-small-leading);
}

.preceda-status-label__count::before {
  content: '\00B7';
  margin-inline-end: var(--preceda-space-1);
}

.preceda-status-label--neutral { color: var(--preceda-tone-neutral-ink); }
.preceda-status-label--binding { color: var(--preceda-tone-binding-ink); }
.preceda-status-label--gilt { color: var(--preceda-tone-gilt-ink); }
.preceda-status-label--verify { color: var(--preceda-tone-verify-ink); }
.preceda-status-label--struck { color: var(--preceda-tone-struck-ink); }

.preceda-status-label--struck .preceda-status-label__word {
  text-decoration-line: line-through;
  text-decoration-color: var(--preceda-tone-struck-rule);
  text-decoration-thickness: 1px;
}

/* The oxblood point: marks the open or current item beside its word. */
.preceda-status-label--point::before {
  display: inline-block;
  flex-shrink: 0;
  inline-size: calc(var(--preceda-space-1) + 1px);
  block-size: calc(var(--preceda-space-1) + 1px);
  align-self: center;
  margin-inline-end: var(--preceda-space-1);
  background: var(--preceda-color-binding);
  content: '';
}

/* A run of labels and plain words on one state line: "Draft in hand · 2 verified". */
.preceda-state-line {
  margin: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-state-line > * + *::before {
  content: '\00B7';
  margin-inline: var(--preceda-space-1);
  color: var(--preceda-color-ink-tertiary);
}

/* ── figure ── */
/*
 * Figure: one number that matters, set as a folio figure with a small-caps
 * caption. A row of figures is divided by rules, not boxed.
 */

.preceda-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--preceda-space-4) 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preceda-figures > * {
  flex: 1 1 0;
  min-inline-size: calc(var(--preceda-space-24) + var(--preceda-space-8));
  padding-inline: var(--preceda-space-5);
  border-inline-start: 1px solid var(--preceda-color-rule);
}

.preceda-figures > :first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.preceda-figure {
  display: flex;
  flex-direction: column;
  gap: var(--preceda-space-1);
  margin: 0;
}

.preceda-figure__value {
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-title-family);
  font-size: var(--preceda-type-title-size);
  font-optical-sizing: auto;
  font-variant-numeric: var(--preceda-numerals-tabular);
  font-weight: var(--preceda-type-title-weight);
  letter-spacing: var(--preceda-type-title-tracking);
  line-height: var(--preceda-leading-tight);
}

.preceda-figure__unit {
  margin-inline-start: var(--preceda-space-1);
  color: var(--preceda-color-ink-secondary);
  font-size: var(--preceda-type-body-size);
}

.preceda-figure__label {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-figure__note {
  margin: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-figure--binding .preceda-figure__value { color: var(--preceda-tone-binding-ink); }
.preceda-figure--verify .preceda-figure__value { color: var(--preceda-tone-verify-ink); }
.preceda-figure--gilt .preceda-figure__value { color: var(--preceda-tone-gilt-ink); }

.preceda-figure--small .preceda-figure__value {
  font-size: var(--preceda-type-heading-size);
}

/* Unknown or not yet assessed: an en rule, never a zero. */
.preceda-figure--empty .preceda-figure__value {
  color: var(--preceda-color-ink-tertiary);
}

.preceda-figure--loading .preceda-figure__value {
  color: var(--preceda-color-ink-tertiary);
}

/* ── ledger ── */
/*
 * Ledger: what the file holds, as key and value on printed rules. Keys in
 * small caps, values in the reading face. Groups carry a small-caps heading;
 * the open group ("The file does not yet hold") comes first in source order.
 */

.preceda-ledger {
  display: flex;
  flex-direction: column;
  gap: var(--preceda-space-8);
  min-inline-size: 0;
}

.preceda-ledger__group {
  min-inline-size: 0;
}

.preceda-ledger__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-4);
  margin: 0;
  padding-block-end: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-ink);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-weight: var(--preceda-type-label-weight);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-ledger__count {
  color: var(--preceda-color-ink-tertiary);
  font-variant-numeric: var(--preceda-numerals-tabular);
}

.preceda-ledger__group--open .preceda-ledger__count {
  color: var(--preceda-color-binding-ink);
}

.preceda-ledger__rows {
  margin: 0;
}

.preceda-ledger__row {
  display: grid;
  grid-template-columns: minmax(calc(var(--preceda-space-24) + var(--preceda-space-8)), 30%) minmax(0, 1fr) auto;
  column-gap: var(--preceda-space-5);
  row-gap: var(--preceda-space-1);
  align-items: baseline;
  padding-block: var(--preceda-space-3);
  border-block-end: 1px solid var(--preceda-color-hairline);
}

.preceda-ledger__key {
  grid-column: 1;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-body-leading);
}

.preceda-ledger__value {
  grid-column: 2;
  min-inline-size: 0;
  margin: 0;
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  overflow-wrap: break-word;
}

.preceda-ledger__meta {
  grid-column: 2;
  margin: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-ledger__meta > * + *::before {
  content: '\00B7';
  margin-inline: var(--preceda-space-1);
}

.preceda-ledger__action {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  font-family: var(--preceda-font-sans);
  font-size: var(--preceda-type-small-size);
}

/*
 * Record action: the quiet text control used across the record (Edit,
 * Answer in correspondence, View, Set as current). Button or link.
 */
.preceda-record-action {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--preceda-space-10);
  padding: 0 var(--preceda-space-1);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  border: 0;
  color: var(--preceda-color-binding-ink);
  background: none;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
  cursor: pointer;
}

.preceda-record-action:hover {
  text-decoration-color: currentColor;
}

.preceda-record-action:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-record-action:disabled {
  color: var(--preceda-color-ink-disabled);
  text-decoration-line: none;
  cursor: not-allowed;
}

/* Not on file: the value is the question, in italic ink-2. */
.preceda-ledger__row--open .preceda-ledger__value {
  color: var(--preceda-color-ink-secondary);
  font-style: italic;
}

.preceda-ledger__row--open .preceda-ledger__key {
  color: var(--preceda-color-binding-ink);
}

/* Inferred, not confirmed by counsel. */
.preceda-ledger__row--inferred .preceda-ledger__value {
  color: var(--preceda-color-ink-secondary);
}

/* Rejected by counsel: kept visible, struck. */
.preceda-ledger__row--rejected .preceda-ledger__value {
  color: var(--preceda-tone-struck-ink);
  text-decoration-line: line-through;
  text-decoration-color: var(--preceda-tone-struck-rule);
  text-decoration-thickness: 1px;
}

.preceda-ledger__row--editing {
  background: var(--preceda-color-paper-sunken);
  margin-inline: calc(var(--preceda-space-3) * -1);
  padding-inline: var(--preceda-space-3);
}

.preceda-ledger__row--editing .preceda-ledger__value > :is(input, textarea, select) {
  inline-size: 100%;
}

.preceda-ledger__empty {
  margin: 0;
  padding-block: var(--preceda-space-3);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  font-style: italic;
}

@media (width < 640px) {
  .preceda-ledger__row:not([data-layout='desk'] *) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .preceda-ledger__row:not([data-layout='desk'] *) > .preceda-ledger__key { grid-column: 1; }
  .preceda-ledger__row:not([data-layout='desk'] *) > :is(.preceda-ledger__value, .preceda-ledger__meta) { grid-column: 1 / -1; }
  .preceda-ledger__row:not([data-layout='desk'] *) > .preceda-ledger__action { grid-column: 2; }
}

[data-layout='compact'] .preceda-ledger__row {
  grid-template-columns: minmax(0, 1fr) auto;
}

[data-layout='compact'] .preceda-ledger__row > .preceda-ledger__key { grid-column: 1; }
[data-layout='compact'] .preceda-ledger__row > :is(.preceda-ledger__value, .preceda-ledger__meta) { grid-column: 1 / -1; }
[data-layout='compact'] .preceda-ledger__row > .preceda-ledger__action { grid-column: 2; }

.preceda-record-action[aria-pressed='true'],
.preceda-record-action[aria-current] {
  color: var(--preceda-color-ink);
  text-decoration-line: none;
  cursor: default;
}

.preceda-record-action[aria-busy='true'] {
  color: var(--preceda-color-ink-secondary);
  text-decoration-line: none;
  cursor: progress;
}

/* An open question keeps its whole line: the route to answer it sits beneath. */
.preceda-ledger__row--open > .preceda-ledger__action {
  grid-column: 2;
  grid-row: auto;
  justify-self: start;
  margin-inline-start: calc(var(--preceda-space-1) * -1);
}

/* ── table ── */
/*
 * Table: the record in columns. Rules, not boxes: a running head over an ink
 * rule, small-caps column heads over a second ink rule, hairlines between
 * rows. Citation columns are mono; struck rows stay on the table so counsel
 * can see what was refused and why. Below 640px (or `data-layout="compact"`)
 * each row stacks, labelled from `data-label`.
 */

.preceda-table {
  min-inline-size: 0;
  color: var(--preceda-color-ink);
}

.preceda-table__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-1) var(--preceda-space-4);
  margin-block-end: var(--preceda-space-6);
  padding-block-end: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-ink);
}

.preceda-table__title,
.preceda-table__count {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-variant-numeric: var(--preceda-numerals-tabular);
  font-weight: var(--preceda-type-label-weight);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-table__context {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-size-14);
  line-height: var(--preceda-type-label-leading);
}

.preceda-table__scroll {
  overflow-x: auto;
}

.preceda-table__table {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-table__table th {
  padding: 0 var(--preceda-space-3) var(--preceda-space-3) 0;
  border-block-end: 1px solid var(--preceda-color-ink);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-weight: var(--preceda-type-label-weight);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
  text-align: start;
  vertical-align: bottom;
  white-space: nowrap;
}

.preceda-table__table td {
  padding: var(--preceda-space-3) var(--preceda-space-3) var(--preceda-space-3) 0;
  border-block-end: 1px solid var(--preceda-color-hairline);
  vertical-align: top;
}

.preceda-table__table :is(th, td):last-child {
  padding-inline-end: 0;
}

.preceda-table__cell--mono {
  font-family: var(--preceda-type-citation-family);
  font-size: var(--preceda-type-citation-size);
  font-variant-numeric: var(--preceda-type-citation-numerals);
  line-height: var(--preceda-type-body-leading);
  white-space: nowrap;
}

.preceda-table__cell--numeric {
  font-variant-numeric: var(--preceda-numerals-tabular);
  text-align: end;
}

.preceda-table__table th.preceda-table__cell--numeric {
  text-align: end;
}

.preceda-table__cell--sans {
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-table__cell--muted {
  color: var(--preceda-color-ink-secondary);
}

.preceda-table__cell--key .preceda-cite__v,
.preceda-table__cell--key i {
  font-style: italic;
}

.preceda-table__row--struck td {
  color: var(--preceda-tone-struck-ink);
}

.preceda-table__row--struck :is(.preceda-table__cell--key, .preceda-table__cell--mono) {
  text-decoration-line: line-through;
  text-decoration-color: var(--preceda-tone-struck-rule);
  text-decoration-thickness: 1px;
}

.preceda-table__row--struck .preceda-table__cell--prose {
  color: var(--preceda-color-ink);
}

.preceda-table__row--current td:first-child {
  position: relative;
}

/* A binding hairline in the gutter, so the row's text does not move. */
.preceda-table__row--current td:first-child::after {
  position: absolute;
  inset-block: var(--preceda-space-3);
  inset-inline-start: calc(var(--preceda-space-3) * -1);
  inline-size: 1px;
  background: var(--preceda-color-binding);
  content: '';
}

.preceda-table__table tbody tr:has(a:hover, button:hover) td {
  background: var(--preceda-color-paper-hover);
}

.preceda-table__table a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-table__table a:hover {
  text-decoration-color: var(--preceda-color-binding);
}

/* Authority names read as the table's key, not as a column of links; the rule appears on hover. */
.preceda-table__cell--key a:not(:hover) {
  text-decoration-color: transparent;
}

.preceda-table__table a:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-table__note {
  margin: var(--preceda-space-4) 0 0;
  padding-block-start: var(--preceda-space-3);
  border-block-start: 1px solid var(--preceda-color-rule);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-size-14);
  line-height: var(--preceda-type-body-leading);
}

.preceda-table__empty td {
  padding-block: var(--preceda-space-8);
  color: var(--preceda-color-ink-secondary);
  font-style: italic;
  text-align: center;
}

.preceda-table--loading .preceda-table__table tbody {
  color: var(--preceda-color-ink-tertiary);
}

/* Stacked rows at narrow widths. */
[data-layout='compact'] .preceda-table__table :is(thead),
.preceda-table[data-layout='compact'] .preceda-table__table thead {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-layout='compact'] .preceda-table__table :is(tbody, tr, td),
.preceda-table[data-layout='compact'] .preceda-table__table :is(tbody, tr, td) {
  display: block;
}

[data-layout='compact'] .preceda-table__table tr,
.preceda-table[data-layout='compact'] .preceda-table__table tr {
  padding-block: var(--preceda-space-3);
  border-block-end: 1px solid var(--preceda-color-hairline);
}

[data-layout='compact'] .preceda-table__table td,
.preceda-table[data-layout='compact'] .preceda-table__table td {
  padding: var(--preceda-space-0) 0;
  border: 0;
  white-space: normal;
}

[data-layout='compact'] .preceda-table__table td[data-label]:not(:first-child)::before,
.preceda-table[data-layout='compact'] .preceda-table__table td[data-label]:not(:first-child)::before {
  display: block;
  color: var(--preceda-color-ink-tertiary);
  content: attr(data-label);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  font-style: normal;
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  text-decoration: none;
}

@media (width < 640px) {
  .preceda-table:not([data-layout='desk'], [data-layout='desk'] *) .preceda-table__table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .preceda-table:not([data-layout='desk'], [data-layout='desk'] *) .preceda-table__table :is(tbody, tr, td) {
    display: block;
  }

  .preceda-table:not([data-layout='desk'], [data-layout='desk'] *) .preceda-table__table tr {
    padding-block: var(--preceda-space-3);
    border-block-end: 1px solid var(--preceda-color-hairline);
  }

  .preceda-table:not([data-layout='desk'], [data-layout='desk'] *) .preceda-table__table td {
    padding: var(--preceda-space-0) 0;
    border: 0;
    white-space: normal;
  }

  .preceda-table:not([data-layout='desk'], [data-layout='desk'] *) .preceda-table__table td[data-label]:not(:first-child)::before {
    display: block;
    color: var(--preceda-color-ink-tertiary);
    content: attr(data-label);
    font-family: var(--preceda-type-label-family);
    font-size: var(--preceda-type-small-size);
    font-style: normal;
    font-variant-caps: var(--preceda-type-label-caps);
    letter-spacing: var(--preceda-type-label-tracking);
    text-decoration: none;
  }
}

/* ── register ── */
/*
 * Register: a list of matters (or judges, advocates, saved cases) set as a
 * ledger. Number, title with an instrument line, a state line in chrome sans,
 * and the date at the end. The open matter carries the oxblood point. The
 * whole row is one target; the title is the link.
 */

.preceda-register {
  min-inline-size: 0;
  color: var(--preceda-color-ink);
}

.preceda-register__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-3) var(--preceda-space-4);
  padding-block-end: var(--preceda-space-3);
  border-block-end: 1px solid var(--preceda-color-ink);
}

.preceda-register__title-block {
  min-inline-size: 0;
}

.preceda-register__heading {
  margin: 0;
  font-family: var(--preceda-type-heading-family);
  font-size: var(--preceda-type-heading-size);
  font-optical-sizing: auto;
  font-weight: var(--preceda-type-heading-weight);
  letter-spacing: var(--preceda-type-heading-tracking);
  line-height: var(--preceda-type-heading-leading);
}

.preceda-register__standfirst {
  margin: var(--preceda-space-1) 0 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
}

.preceda-register__columns,
.preceda-register__row {
  display: grid;
  grid-template-columns: calc(var(--preceda-space-12) + var(--preceda-space-1)) minmax(0, 46%) minmax(0, 1fr) minmax(calc(var(--preceda-space-24) + var(--preceda-space-4)), auto);
  column-gap: var(--preceda-space-3);
  align-items: baseline;
}

.preceda-register--unnumbered .preceda-register__columns,
.preceda-register--unnumbered .preceda-register__row {
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr) minmax(calc(var(--preceda-space-24) + var(--preceda-space-4)), auto);
}

.preceda-register__columns {
  padding-block: var(--preceda-space-6) var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-rule);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-register--pinned-columns .preceda-register__columns {
  position: sticky;
  inset-block-start: var(--preceda-register-pin-offset, 0);
  z-index: var(--preceda-layer-sticky);
  background: var(--preceda-color-paper);
}

.preceda-register__columns > :last-child {
  text-align: end;
}

.preceda-register__columns > :first-child:empty {
  visibility: hidden;
}

.preceda-register__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.preceda-register__row {
  position: relative;
  padding-block: var(--preceda-space-3) var(--preceda-space-4);
  border-block-end: 1px solid var(--preceda-color-hairline);
  transition: background-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-register__row:has(.preceda-register__link:hover) {
  background: var(--preceda-color-paper-hover);
}

.preceda-register__row:has(.preceda-register__link:focus-visible) {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: calc(var(--preceda-focus-offset) * -1);
}

.preceda-register__number {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--preceda-space-2);
  padding-inline-end: var(--preceda-space-3);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-body-size);
  font-variant-numeric: var(--preceda-numerals-tabular);
}

.preceda-register__row--current .preceda-register__number::before {
  display: inline-block;
  inline-size: calc(var(--preceda-space-1) + 1px);
  block-size: calc(var(--preceda-space-1) + 1px);
  align-self: center;
  background: var(--preceda-color-binding);
  content: '';
}

.preceda-register__main {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.preceda-register__title {
  margin: 0;
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  font-weight: 400;
  line-height: var(--preceda-type-body-leading);
}

.preceda-register__link {
  color: inherit;
  text-decoration: none;
}

.preceda-register__link:focus-visible {
  outline: none;
}

/* The row is the target: the title link's box covers it. */
.preceda-register__link::after {
  position: absolute;
  inset: 0;
  content: '';
}

.preceda-register__subtitle {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-size-14);
  line-height: var(--preceda-type-body-leading);
}

.preceda-register__status {
  min-inline-size: 0;
  margin: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-register__lead {
  color: var(--preceda-color-ink-secondary);
}

.preceda-register__lead--binding {
  color: var(--preceda-tone-binding-ink);
}

.preceda-register__lead--verify {
  color: var(--preceda-tone-verify-ink);
}

.preceda-register__status > * + *::before {
  content: '\00B7';
  margin-inline: var(--preceda-space-1);
}

.preceda-register__date {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-size-14);
  font-variant-numeric: var(--preceda-numerals-tabular);
  text-align: end;
  white-space: nowrap;
}

/* Controls in a row (delete, remove bookmark) sit above the stretched link. */
.preceda-register__actions {
  position: relative;
  z-index: var(--preceda-layer-sticky);
  grid-column: -2 / -1;
  justify-self: end;
}

.preceda-register__empty {
  margin: 0;
  padding-block: var(--preceda-space-8);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-body-size);
  font-style: italic;
}

/* ── Compact: the corridor register ───────────────────────────────────────── */

[data-layout='compact'] .preceda-register__columns {
  display: none;
}

[data-layout='compact'] .preceda-register__row {
  grid-template-columns: calc(var(--preceda-space-8) + var(--preceda-space-1)) minmax(0, 1fr);
  row-gap: var(--preceda-space-2);
  padding-block: var(--preceda-space-4) var(--preceda-space-5);
}

[data-layout='compact'] .preceda-register--unnumbered .preceda-register__row,
.preceda-register--unnumbered[data-layout='compact'] .preceda-register__row {
  grid-template-columns: minmax(0, 1fr);
}

[data-layout='compact'] .preceda-register__number {
  justify-content: flex-start;
  font-size: var(--preceda-type-reading-size);
}

[data-layout='compact'] .preceda-register__title {
  font-size: var(--preceda-type-reading-size);
  line-height: var(--preceda-leading-heading);
}

[data-layout='compact'] .preceda-register__subtitle {
  font-size: var(--preceda-type-body-size);
}

[data-layout='compact'] :is(.preceda-register__status, .preceda-register__date, .preceda-register__actions) {
  grid-column: -2 / -1;
  justify-self: start;
  text-align: start;
}

[data-layout='compact'] .preceda-register__date {
  margin-block-start: calc(var(--preceda-space-2) * -1);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
}

[data-layout='compact'] .preceda-register__lead--binding {
  display: block;
  font-size: var(--preceda-type-ui-size);
}

@media (width < 640px) {
  .preceda-register:not([data-layout='desk'], [data-layout='desk'] *) .preceda-register__columns {
    display: none;
  }

  .preceda-register:not([data-layout='desk'], [data-layout='desk'] *) .preceda-register__row {
    grid-template-columns: calc(var(--preceda-space-8) + var(--preceda-space-1)) minmax(0, 1fr);
    row-gap: var(--preceda-space-2);
    padding-block: var(--preceda-space-4) var(--preceda-space-5);
  }

  .preceda-register--unnumbered:not([data-layout='desk'], [data-layout='desk'] *) .preceda-register__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .preceda-register:not([data-layout='desk'], [data-layout='desk'] *) .preceda-register__number {
    justify-content: flex-start;
    font-size: var(--preceda-type-reading-size);
  }

  .preceda-register:not([data-layout='desk'], [data-layout='desk'] *) .preceda-register__title {
    font-size: var(--preceda-type-reading-size);
    line-height: var(--preceda-leading-heading);
  }

  .preceda-register:not([data-layout='desk'], [data-layout='desk'] *) .preceda-register__subtitle {
    font-size: var(--preceda-type-body-size);
  }

  .preceda-register:not([data-layout='desk'], [data-layout='desk'] *) :is(.preceda-register__status, .preceda-register__date, .preceda-register__actions) {
    grid-column: -2 / -1;
    justify-self: start;
    text-align: start;
  }

  .preceda-register:not([data-layout='desk'], [data-layout='desk'] *) .preceda-register__date {
    margin-block-start: calc(var(--preceda-space-2) * -1);
    color: var(--preceda-color-ink-tertiary);
    font-family: var(--preceda-type-small-family);
    font-size: var(--preceda-type-small-size);
  }

  .preceda-register:not([data-layout='desk'], [data-layout='desk'] *) .preceda-register__lead--binding {
    display: block;
    font-size: var(--preceda-type-ui-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-register__row {
    transition-duration: 0s;
  }
}

/* The page's act ("Open a matter") is T3's Button: ink in the head, a full-width
   secondary row in the footer of the compact register. */

.preceda-register__footer {
  padding-block: var(--preceda-space-6) 0;
}

[data-layout='compact'] :is(.preceda-register__status, .preceda-register__date):empty {
  display: none;
}

@media (width < 640px) {
  .preceda-register:not([data-layout='desk'], [data-layout='desk'] *) :is(.preceda-register__status, .preceda-register__date):empty {
    display: none;
  }
}

/* ── disclosure ── */
/*
 * Disclosure: a ruled section that opens in place. Native <details> and
 * <summary>; the summary is a small-caps label with an optional count and a
 * typographic indicator. Variants: `--ruled` (section between hairlines),
 * `--quiet` (a one-line "Working notes" style toggle).
 */

.preceda-disclosure {
  min-inline-size: 0;
  color: var(--preceda-color-ink);
}

.preceda-disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--preceda-space-2);
  min-block-size: var(--preceda-space-10);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-variant-numeric: var(--preceda-numerals-tabular);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.preceda-disclosure__summary::-webkit-details-marker {
  display: none;
}

.preceda-disclosure__summary::after {
  margin-inline-start: auto;
  color: var(--preceda-color-ink-tertiary);
  content: '\25BE' / '';
  font-family: var(--preceda-font-serif);
  font-variant-caps: normal;
  letter-spacing: 0;
  transform: rotate(-90deg);
  transition: transform var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-disclosure[open] > .preceda-disclosure__summary::after {
  transform: none;
}

.preceda-disclosure__summary:hover {
  color: var(--preceda-color-ink);
}

.preceda-disclosure__summary:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-disclosure__label {
  color: inherit;
}

.preceda-disclosure__count {
  color: var(--preceda-color-ink-tertiary);
}

.preceda-disclosure__count--binding {
  color: var(--preceda-tone-binding-ink);
}

.preceda-disclosure__meta {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: normal;
  letter-spacing: 0;
}

.preceda-disclosure__body {
  padding-block: var(--preceda-space-2) var(--preceda-space-4);
}

.preceda-disclosure--ruled {
  border-block: 1px solid var(--preceda-color-hairline);
}

.preceda-disclosure--ruled + .preceda-disclosure--ruled {
  border-block-start: 0;
}

.preceda-disclosure--quiet > .preceda-disclosure__summary {
  display: inline-flex;
  min-block-size: var(--preceda-space-10);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: normal;
  letter-spacing: 0;
}

.preceda-disclosure--quiet > .preceda-disclosure__summary::after {
  margin-inline-start: 0;
}

.preceda-disclosure--quiet > .preceda-disclosure__summary:hover {
  color: var(--preceda-color-ink-secondary);
}

.preceda-disclosure--disabled > .preceda-disclosure__summary {
  color: var(--preceda-color-ink-disabled);
  cursor: not-allowed;
}

@media (width < 1024px) {
  .preceda-disclosure__summary {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-disclosure__summary::after {
    transition-duration: 0s;
  }
}

/* ── timeline ── */
/*
 * Timeline: one dated ledger, newest first. Versions of a draft, the
 * chronology (deadlines with a small-caps DUE, missed deadlines first with
 * the word "Missed" in binding), tasks, and the audit trail. Rows are ruled;
 * there is no line of dots.
 */

.preceda-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--preceda-color-ink);
}

.preceda-timeline__item {
  display: grid;
  grid-template-columns: var(--preceda-space-24) calc(var(--preceda-space-20) + var(--preceda-space-1)) minmax(0, 1fr) auto;
  column-gap: var(--preceda-space-4);
  align-items: baseline;
  padding-block: var(--preceda-space-3);
  border-block-end: 1px solid var(--preceda-color-hairline);
}

.preceda-timeline--unmarked .preceda-timeline__item {
  grid-template-columns: var(--preceda-space-24) minmax(0, 1fr) auto;
}

.preceda-timeline__when {
  display: flex;
  flex-direction: column;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-size-14);
  font-variant-numeric: var(--preceda-numerals-tabular);
  line-height: var(--preceda-type-body-leading);
}

.preceda-timeline__time {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
}

.preceda-timeline__marker {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-variant-numeric: var(--preceda-numerals-tabular);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-body-leading);
}

.preceda-timeline__marker--binding { color: var(--preceda-tone-binding-ink); }
.preceda-timeline__marker--verify { color: var(--preceda-tone-verify-ink); }
.preceda-timeline__marker--gilt { color: var(--preceda-tone-gilt-ink); }
.preceda-timeline__marker--struck { color: var(--preceda-tone-struck-ink); }

.preceda-timeline__body {
  min-inline-size: 0;
}

.preceda-timeline__title {
  margin: 0;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-timeline__meta {
  margin: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-timeline__meta > * + *::before {
  content: '\00B7';
  margin-inline: var(--preceda-space-1);
}

.preceda-timeline__detail {
  margin-block-start: var(--preceda-space-2);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-size-14);
  line-height: var(--preceda-type-body-leading);
}

.preceda-timeline__actions {
  display: inline-flex;
  gap: var(--preceda-space-3);
  justify-self: end;
  font-family: var(--preceda-font-sans);
  font-size: var(--preceda-type-small-size);
}

/* Missed: first in the ledger, the word in binding, the date in binding. */
.preceda-timeline__item--missed .preceda-timeline__when {
  color: var(--preceda-tone-binding-ink);
}

.preceda-timeline__item--missed {
  border-block-end-color: var(--preceda-color-rule);
}

/* The version or entry on the desk now. */
.preceda-timeline__item--current .preceda-timeline__title {
  font-weight: 500;
}

.preceda-timeline__item--current {
  border-inline-start: 1px solid var(--preceda-color-binding);
  padding-inline-start: var(--preceda-space-3);
}

/* Done, completed, superseded: set back in ink-2. */
.preceda-timeline__item--done .preceda-timeline__title {
  color: var(--preceda-color-ink-secondary);
}

.preceda-timeline__item--error .preceda-timeline__marker {
  color: var(--preceda-color-error);
}

.preceda-timeline__empty {
  padding-block: var(--preceda-space-6);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  font-style: italic;
}

/* A group heading inside a long chronology: a month or a stage. */
.preceda-timeline__group {
  padding-block: var(--preceda-space-5) var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-ink);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
}

[data-layout='compact'] .preceda-timeline__item,
[data-layout='compact'] .preceda-timeline--unmarked .preceda-timeline__item,
.preceda-timeline--unmarked[data-layout='compact'] .preceda-timeline__item {
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: var(--preceda-space-1);
}

[data-layout='compact'] .preceda-timeline__when {
  flex-direction: row;
  gap: var(--preceda-space-2);
  align-items: baseline;
}

[data-layout='compact'] :is(.preceda-timeline__body, .preceda-timeline__marker) {
  grid-column: 1 / -1;
}

[data-layout='compact'] .preceda-timeline__actions {
  grid-column: 2;
  grid-row: 1;
}

@media (width < 640px) {
  .preceda-timeline:not([data-layout='desk'], [data-layout='desk'] *) .preceda-timeline__item {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--preceda-space-1);
  }

  .preceda-timeline:not([data-layout='desk'], [data-layout='desk'] *) .preceda-timeline__when {
    flex-direction: row;
    gap: var(--preceda-space-2);
    align-items: baseline;
  }

  .preceda-timeline:not([data-layout='desk'], [data-layout='desk'] *) :is(.preceda-timeline__body, .preceda-timeline__marker) {
    grid-column: 1 / -1;
  }

  .preceda-timeline:not([data-layout='desk'], [data-layout='desk'] *) .preceda-timeline__actions {
    grid-column: 2;
    grid-row: 1;
  }
}

.preceda-timeline--unmarked .preceda-timeline__marker {
  display: none;
}

/* ── verification ── */
/*
 * Verification mark forms beyond the base `.preceda-status` contract:
 * `--inline` (the Authorities Verification column: glyph, label · note) and
 * the interactive superscript (a button that opens its footnote). The glyph,
 * tone and strike per status come from the generated status rules.
 */

.preceda-status--inline {
  display: inline;
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-status--inline .preceda-status__glyph {
  margin-inline-end: 0;
}

.preceda-status--inline .preceda-status__label + .preceda-status__note::before,
.preceda-status--inline .preceda-status__glyph + .preceda-status__note::before {
  content: '\00B7';
  margin-inline-end: var(--preceda-space-1);
}

/* In the verify family the word VERIFY is the label; the status word is the note. */
.preceda-status__glyph--word {
  font-variant-caps: normal;
}

/* The superscript as a control: the glyph stays small, the target does not. */
button.preceda-status--superscript {
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
  color: var(--preceda-status-ink, var(--preceda-tone-neutral-ink));
  background: none;
  font: inherit;
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: 1;
  cursor: pointer;
}

button.preceda-status--superscript::after {
  position: absolute;
  inset: calc(var(--preceda-space-4) * -1) calc(var(--preceda-space-3) * -1);
  content: '';
}

button.preceda-status--superscript:hover .preceda-status__glyph {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}

button.preceda-status--superscript:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

button.preceda-status--superscript[aria-expanded='true'] .preceda-status__glyph {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}

/* A footnote opened from a superscript, set under the line it annotates. */
.preceda-footnote {
  display: block;
  margin-block: var(--preceda-space-2);
  padding: var(--preceda-space-2) var(--preceda-space-3);
  border-inline-start: 1px solid var(--preceda-color-rule-strong);
  color: var(--preceda-color-ink-secondary);
  background: var(--preceda-color-paper-sunken);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-style: normal;
  line-height: var(--preceda-type-small-leading);
}

.preceda-footnote[hidden] {
  display: none;
}

/* In a column of verdicts the label reads as a phrase: "¶ verified · quoted at ¶2". */
.preceda-status--inline .preceda-status__label {
  font-variant-caps: normal;
  letter-spacing: 0;
}

/* ── margin-note ── */
/*
 * Margin note: what the associate or the verifier says about one paragraph,
 * set small in the margin column (desk) or in the paragraph footnote
 * (compact). A glyph and a label in the tone's ink, then a sentence in ink-3.
 * Colour is never the only signal: every tone has its own glyph or word.
 */

.preceda-margin-note {
  display: block;
  margin: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  overflow-wrap: break-word;
}

.preceda-margin-note .preceda-status__glyph,
.preceda-margin-note .preceda-status__label {
  color: var(--preceda-status-ink, var(--preceda-tone-neutral-ink));
}

.preceda-margin-note .preceda-status__glyph {
  margin-inline-end: 0;
}

/* VERIFY stands on its own line, the note beneath it (workspace plate). */
.preceda-margin-note--word .preceda-status__glyph {
  display: block;
  margin-inline-end: 0;
  font-family: var(--preceda-font-sans);
  font-variant-caps: normal;
  letter-spacing: var(--preceda-tracking-verify);
}

.preceda-margin-note .preceda-status__label + .preceda-margin-note__text::before {
  content: '\00B7';
  margin-inline-end: var(--preceda-space-1);
  color: var(--preceda-color-ink-tertiary);
}

.preceda-margin-note__text {
  color: var(--preceda-color-ink-tertiary);
}

.preceda-margin-note__text a {
  color: var(--preceda-color-ink-secondary);
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: calc(var(--preceda-space-1) / 2);
}

.preceda-margin-note__text a:hover {
  color: var(--preceda-color-binding-ink);
}

/* Tone without a verification status (fact confirmed, support required). */
.preceda-margin-note--neutral { --preceda-status-ink: var(--preceda-tone-neutral-ink); }
.preceda-margin-note--binding { --preceda-status-ink: var(--preceda-tone-binding-ink); }
.preceda-margin-note--gilt { --preceda-status-ink: var(--preceda-tone-gilt-ink); }
.preceda-margin-note--verify { --preceda-status-ink: var(--preceda-tone-verify-ink); }
.preceda-margin-note--struck { --preceda-status-ink: var(--preceda-tone-struck-ink); }

/* The glyph word stands on its own line; the separator the inline form prints is not needed. */
.preceda-margin-note--word .preceda-status__sep {
  display: none;
}

/* A struck pilcrow is struck; a refusal in words (CHECK, DOES NOT GOVERN, STRUCK) is read, not struck. */
.preceda-margin-note--strike:not(.preceda-margin-note--word) .preceda-status__glyph,
.preceda-margin-note--strike:not(.preceda-margin-note--word) .preceda-status__label {
  text-decoration-line: line-through;
  text-decoration-color: var(--preceda-tone-struck-ink);
  text-decoration-thickness: 1px;
}

/* The scope notice when no receipt binds verdicts to this draft. */
.preceda-margin-note--unavailable {
  padding-block: var(--preceda-space-2);
  border-block: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-secondary);
}

/* In the margin the label is a phrase, not a running head: set in the note's case. */
.preceda-margin-note .preceda-status__label {
  font-variant-caps: normal;
  letter-spacing: 0;
}

/* ── document ── */
/*
 * Document sheet: the draft as a reporter page lying on the desk.
 *
 * Anatomy: running head (forum · state · number, ink rule beneath), a centred
 * small-caps title with a serif subtitle, then numbered paragraphs in a 36px
 * gutter with a 96px margin column on a hairline rule. Below the desk
 * breakpoint (1024px) the margin collapses: each paragraph shows its notes as
 * a superscript mark that opens an inline footnote.
 *
 * Layout is automatic by viewport, or forced for a subtree with
 * `data-layout="desk"` / `data-layout="compact"` on any ancestor.
 *
 * `.preceda-document__body` also styles plain semantic HTML (p, h1–h3, ol, ul,
 * blockquote, hr, table) so TipTap / ProseMirror output reads as the same page.
 *
 * `<pagebreak>` is the one other structural element: a multi-document set's
 * page break (`draft-page-break.ts`), never model-written content — the host
 * adds its class the same way it adds a `data-document-part` one. Deliberately
 * distinct from `hr` (already the section rule) so the two are never confused.
 */

.preceda-document {
  --preceda-document-gutter: calc(var(--preceda-space-8) + var(--preceda-space-1));
  --preceda-document-margin: var(--preceda-space-24);
  --preceda-document-gap: calc(var(--preceda-space-4) + var(--preceda-space-1) / 2);
  --preceda-document-text-size: var(--preceda-type-body-size);
  --preceda-document-text-leading: var(--preceda-type-body-leading);

  display: flex;
  flex-direction: column;
  gap: var(--preceda-space-6);
  min-inline-size: 0;
  color: var(--preceda-color-ink);
}

.preceda-document__toolbar {
  min-inline-size: 0;
}

.preceda-document__sheet {
  padding:
    calc(var(--preceda-space-8) + var(--preceda-space-1))
    calc(var(--preceda-space-10) + var(--preceda-space-1))
    var(--preceda-space-12);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-raised);
  box-shadow: var(--preceda-shadow-sheet);
}

/* ── Running head ─────────────────────────────────────────────────────────── */

.preceda-document__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-1) var(--preceda-space-4);
  margin-block-end: var(--preceda-space-8);
  padding-block-end: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-ink);
}

.preceda-document__forum {
  color: var(--preceda-color-ink-secondary);
}

.preceda-document__number {
  color: var(--preceda-document-number-ink, var(--preceda-color-ink-secondary));
}

.preceda-document__forum,
.preceda-document__number {
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-variant-numeric: var(--preceda-numerals-lining);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-document__state {
  color: var(--preceda-color-ink);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-size-14);
  font-variant-numeric: var(--preceda-numerals-tabular);
  line-height: var(--preceda-type-label-leading);
  white-space: nowrap;
}

.preceda-document__state[data-state='candidate'] {
  color: var(--preceda-color-ink-secondary);
  font-style: italic;
  white-space: normal;
}

.preceda-document__state[data-state='prepared'] {
  color: var(--preceda-color-binding-ink);
}

.preceda-document__state[data-state='empty'] {
  color: var(--preceda-color-ink-tertiary);
}

.preceda-document__end {
  display: inline-flex;
  align-items: baseline;
  gap: var(--preceda-space-4);
}

/* ── Title block ──────────────────────────────────────────────────────────── */

.preceda-document__titling {
  margin-block-end: var(--preceda-space-6);
  text-align: center;
}

.preceda-document__title {
  margin: 0;
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-subheading-size);
  font-optical-sizing: auto;
  font-variant-caps: var(--preceda-small-caps);
  font-variant-numeric: var(--preceda-numerals-lining);
  font-weight: var(--preceda-type-subheading-weight);
  letter-spacing: calc(var(--preceda-tracking-small-caps) / 2);
  line-height: var(--preceda-leading-heading);
  text-wrap: balance;
}

.preceda-document__subtitle {
  margin: var(--preceda-space-1) 0 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-size-15);
  line-height: var(--preceda-type-body-leading);
  text-wrap: balance;
}

/* ── Paragraph: number | text | margin ────────────────────────────────────── */

.preceda-paragraph {
  display: grid;
  grid-template-columns: var(--preceda-document-gutter, calc(var(--preceda-space-8) + var(--preceda-space-1))) minmax(0, 1fr) var(--preceda-document-margin, var(--preceda-space-24));
  column-gap: var(--preceda-document-gap, var(--preceda-space-4));
  margin-block-end: var(--preceda-space-4);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-document-text-size, var(--preceda-type-body-size));
  font-optical-sizing: auto;
  line-height: var(--preceda-document-text-leading, var(--preceda-type-body-leading));
}

.preceda-paragraph__number {
  padding-block-start: var(--preceda-space-0);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-size-14);
  font-variant-numeric: var(--preceda-numerals-tabular);
  line-height: inherit;
  text-align: end;
}

.preceda-paragraph__text {
  min-inline-size: 0;
}

.preceda-paragraph__text > p {
  margin: 0;
}

.preceda-paragraph__text > p + p {
  margin-block-start: var(--preceda-space-3);
}

.preceda-paragraph__margin {
  align-self: start;
  min-inline-size: 0;
  padding-block: var(--preceda-space-1);
  padding-inline-start: var(--preceda-space-3);
  border-inline-start: 1px solid var(--preceda-color-hairline);
}

.preceda-paragraph__margin:empty {
  border-inline-start-color: transparent;
}

.preceda-paragraph__margin > * + * {
  margin-block-start: var(--preceda-space-2);
}

/* The superscript that stands in for the margin at compact widths. */
.preceda-paragraph__marker {
  display: none;
  margin-inline-start: var(--preceda-space-0);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: 0;
  vertical-align: super;
}

.preceda-paragraph__marker .preceda-margin-note--word .preceda-status__glyph,
.preceda-paragraph__marker .preceda-status__glyph--word {
  font-family: var(--preceda-font-sans);
  letter-spacing: var(--preceda-tracking-verify);
}

.preceda-paragraph__marker .preceda-margin-note--strike .preceda-status__glyph {
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
}

.preceda-paragraph__footnote {
  display: none;
  grid-column: 2;
  margin-block-start: var(--preceda-space-2);
  padding: var(--preceda-space-2) var(--preceda-space-3);
  border-inline-start: 1px solid var(--preceda-color-rule-strong);
  background: var(--preceda-color-paper-sunken);
}

.preceda-paragraph__footnote > * + * {
  margin-block-start: var(--preceda-space-2);
}

/* A paragraph that states a heading inside the numbered sequence (Prayer). */
.preceda-paragraph--heading .preceda-paragraph__text {
  font-variant-caps: var(--preceda-small-caps);
  letter-spacing: var(--preceda-tracking-small-caps);
}

/* A paragraph under review (selected block, quote in correspondence). */
.preceda-paragraph--current .preceda-paragraph__number {
  color: var(--preceda-color-binding-ink);
}

/*
 * Redaction: a particular withheld from a published specimen (an address, a
 * parentage, a police station). An ink bar, never a blur. The element's own
 * words say what was withheld ("police station withheld"): they are set in
 * transparent ink so the bar takes their width, and assistive technology
 * reads them.
 */
.preceda-document__redaction {
  padding-inline: var(--preceda-space-1);
  color: transparent;
  background: var(--preceda-color-ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  user-select: none;
}

@media (forced-colors: active) {
  .preceda-document__redaction {
    color: CanvasText;
    background: Canvas;
    outline: 1px solid CanvasText;
  }
}

/*
 * The cut: where a specimen page omits paragraphs. A hairline across the
 * text column with a centred ellipsis in the folio face, so a reader never
 * mistakes an excerpt for the whole instrument.
 */
.preceda-document__cut {
  display: flex;
  align-items: center;
  gap: var(--preceda-space-3);
  margin-block: var(--preceda-space-2) var(--preceda-space-6);
  margin-inline: calc(var(--preceda-document-gutter) + var(--preceda-document-gap)) calc(var(--preceda-document-margin) + var(--preceda-document-gap));
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-folio-family);
  font-size: var(--preceda-type-folio-size);
  line-height: var(--preceda-type-folio-leading);
}

.preceda-document__cut::before,
.preceda-document__cut::after {
  flex: 1 1 0;
  block-size: 1px;
  background: var(--preceda-color-hairline);
  content: '';
}

/* ── Marker button (superscript form of the margin) ───────────────────────── */

.preceda-paragraph__marker-button {
  position: relative;
  display: inline-block;
  line-height: 1;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* Extends the hit area to a comfortable target without moving the glyph. */
.preceda-paragraph__marker-button::after {
  position: absolute;
  inset: calc(var(--preceda-space-4) * -1) calc(var(--preceda-space-3) * -1);
  content: '';
}

.preceda-paragraph__marker-button:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-paragraph__marker-glyphs {
  display: inline-flex;
  gap: var(--preceda-space-1);
}

/* ── Plain semantic HTML body (TipTap / ProseMirror output) ───────────────── */

.preceda-document__body {
  counter-reset: preceda-document-paragraph;
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-document-text-size);
  font-optical-sizing: auto;
  line-height: var(--preceda-document-text-leading);
  overflow-wrap: break-word;
}

.preceda-document__body:focus {
  outline: none;
}

.preceda-document__body--html {
  padding-inline:
    calc(var(--preceda-document-gutter) + var(--preceda-document-gap))
    calc(var(--preceda-document-margin) + var(--preceda-document-gap));
}

.preceda-document__body--html > :first-child {
  margin-block-start: 0;
}

.preceda-document__body--html > p {
  margin: 0 0 var(--preceda-space-4);
}

.preceda-document__body--numbered > p {
  position: relative;
  counter-increment: preceda-document-paragraph;
}

.preceda-document__body--numbered > p::before {
  position: absolute;
  inset-inline-start: calc((var(--preceda-document-gutter) + var(--preceda-document-gap)) * -1);
  inline-size: var(--preceda-document-gutter);
  color: var(--preceda-color-ink-tertiary);
  content: counter(preceda-document-paragraph);
  font-size: var(--preceda-type-size-14);
  font-variant-numeric: var(--preceda-numerals-tabular);
  text-align: end;
}

.preceda-document__body--html > h1 {
  margin: var(--preceda-space-8) 0 var(--preceda-space-4);
  font-size: var(--preceda-type-subheading-size);
  font-variant-caps: var(--preceda-small-caps);
  font-weight: 400;
  letter-spacing: calc(var(--preceda-tracking-small-caps) / 2);
  line-height: var(--preceda-leading-heading);
  text-align: center;
}

.preceda-document__body--html > h2 {
  margin: var(--preceda-space-8) 0 var(--preceda-space-3);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-small-caps);
  font-weight: 400;
  letter-spacing: var(--preceda-tracking-small-caps);
  line-height: var(--preceda-type-label-leading);
}

.preceda-document__body--html > h3 {
  margin: var(--preceda-space-6) 0 var(--preceda-space-2);
  font-size: inherit;
  font-variant-caps: var(--preceda-small-caps);
  font-weight: 400;
  letter-spacing: var(--preceda-tracking-small-caps);
  line-height: inherit;
}

/* Legacy drafts often carry a structural heading as a lone bold paragraph. */
.preceda-document__body--html > p > strong:only-child {
  font-variant-caps: var(--preceda-small-caps);
  font-weight: 400;
  letter-spacing: var(--preceda-tracking-small-caps);
}

.preceda-document__body--html :is(ol, ul) {
  margin: 0 0 var(--preceda-space-4);
  padding-inline-start: var(--preceda-space-6);
  border-inline-start: 1px solid var(--preceda-color-hairline);
}

.preceda-document__body--html ol {
  list-style-type: lower-alpha;
}

.preceda-document__body--html ol ol {
  list-style-type: lower-roman;
}

.preceda-document__body--html ol ol ol {
  list-style-type: decimal;
}

.preceda-document__body--html li {
  margin-block: var(--preceda-space-1);
  padding-inline-start: var(--preceda-space-1);
}

.preceda-document__body--html li::marker {
  color: var(--preceda-color-ink-tertiary);
  font-variant-numeric: var(--preceda-numerals-tabular);
}

.preceda-document__body--html li > p {
  margin: 0;
}

/* Review notes are an opinion on a page: section rubrics and ruled evidence. */
.preceda-document[data-artifact-kind='review_note'] .preceda-document__body--html > ol {
  padding-inline-start: 0;
  list-style: none;
  font-variant-caps: var(--preceda-small-caps);
  letter-spacing: var(--preceda-tracking-small-caps);
}

.preceda-document[data-artifact-kind='review_note'] .preceda-document__body--html > ol > li {
  padding-block-start: var(--preceda-space-5);
  border-block-start: 1px solid var(--preceda-color-hairline);
}

.preceda-document[data-artifact-kind='review_note'] .preceda-document__body--html > ul {
  padding-inline-start: 0;
  list-style: none;
}

.preceda-document[data-artifact-kind='review_note'] .preceda-document__body--html > ul > li {
  padding-block: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-hairline);
}

.preceda-document__body--html blockquote {
  margin: 0 0 var(--preceda-space-4);
  padding-inline-start: var(--preceda-space-4);
  border-inline-start: 1px solid var(--preceda-color-rule-strong);
  color: var(--preceda-color-ink-secondary);
  font-style: italic;
}

.preceda-document__body--html blockquote > p {
  margin: 0;
}

.preceda-document__body--html hr {
  block-size: 1px;
  margin: var(--preceda-space-6) 0;
  border: 0;
  background: var(--preceda-color-rule);
}

/* A page break between the documents of one multi-document set: a dashed
   rule with a small-caps label, clearly distinct from the plain `hr` above.
   Each document numbers its own paragraphs, so the counter restarts here. */
.preceda-document__body--html sectionpagebreak,
.preceda-document__body--html pagebreak {
  display: block;
  position: relative;
  margin: var(--preceda-space-8) 0;
  border-block-start: 1px dashed var(--preceda-color-rule-strong);
  text-align: center;
  counter-reset: preceda-document-paragraph;
}

.preceda-document__body--html sectionpagebreak::after,
.preceda-document__body--html pagebreak::after {
  content: 'Page break';
  display: inline-block;
  translate: 0 -50%;
  padding-inline: var(--preceda-space-2);
  background: var(--preceda-color-paper-raised);
  color: var(--preceda-color-ink-secondary);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-small-caps);
  letter-spacing: var(--preceda-tracking-small-caps);
  line-height: var(--preceda-type-label-leading);
}

/* An intra-document break keeps the paragraph counter. */
.preceda-document__body--html sectionpagebreak { counter-reset: none; }

@media print {
  .preceda-document__body--html sectionpagebreak,
  .preceda-document__body--html pagebreak {
    margin: 0;
    border: 0;
    break-after: page;
  }

  .preceda-document__body--html sectionpagebreak::after,
  .preceda-document__body--html pagebreak::after {
    content: none;
  }

  .preceda-document__body--html tr {
    break-inside: avoid;
  }
}

.preceda-document__body--html strong {
  font-weight: 600;
}

.preceda-document__body--html s {
  color: var(--preceda-tone-struck-ink);
  text-decoration-color: var(--preceda-tone-struck-rule);
}

.preceda-document__body--html a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-document__body--html a:hover {
  text-decoration-color: var(--preceda-color-binding);
}

/* TipTap's citation highlight: the reporter underline, not a tint. */
.preceda-document__body--html mark {
  color: inherit;
  background: none;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-binding);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-document__body--html code {
  font-family: var(--preceda-font-mono);
  font-size: var(--preceda-type-citation-size);
  font-variant-numeric: var(--preceda-numerals-tabular);
}

/* The editable token remains in the DOM; the Reporter presents its label on a rule. */
.preceda-document__body--html .preceda-document__blank {
  display: inline-block;
  min-inline-size: var(--preceda-space-12);
  border-block-end: 1px solid var(--preceda-color-ink-secondary);
  color: var(--preceda-color-ink-secondary);
  vertical-align: baseline;
}

.preceda-document__body--html .preceda-document__blank[data-document-blank] {
  font-size: 0;
  white-space: nowrap;
}

.preceda-document__body--html .preceda-document__blank[data-document-blank]::after {
  content: attr(data-document-blank);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-small-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

/* A focused editor exposes the real token, so every caret edit is visible. */
.preceda-document__body--html.ProseMirror-focused .preceda-document__blank[data-document-blank] {
  font-size: inherit;
  white-space: normal;
}

.preceda-document__body--html.ProseMirror-focused .preceda-document__blank[data-document-blank]::after {
  display: none;
}

/* Tables — a paperbook's index, a list of dates and events, a schedule — are
   ruled as a court document is ruled: every cell boxed on a hairline, the
   header row in small caps over a strong rule. Cells wrap at word boundaries
   rather than widen the sheet, so an index or a list of dates stays inside the
   page on a phone without splitting a word; a wrapped editor table
   (`.tableWrapper`) scrolls sideways instead of overflowing. */
.preceda-document__body--html table {
  inline-size: 100%;
  margin: 0 0 var(--preceda-space-5);
  border-collapse: collapse;
  border: 1px solid var(--preceda-color-rule);
  font-size: var(--preceda-type-body-size);
  font-variant-numeric: var(--preceda-numerals-tabular);
  line-height: var(--preceda-document-text-leading);
}

.preceda-document__body--html :is(th, td) {
  padding: var(--preceda-space-2) var(--preceda-space-3);
  border: 1px solid var(--preceda-color-rule);
  text-align: start;
  vertical-align: top;
  overflow-wrap: break-word;
}

.preceda-document__body--html th {
  border-block-end-color: var(--preceda-color-rule-strong);
  color: var(--preceda-color-ink-secondary);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-small-caps);
  font-weight: 400;
  letter-spacing: var(--preceda-tracking-small-caps);
  vertical-align: bottom;
}

.preceda-document__body--html :is(th, td) > p {
  margin: 0;
}

.preceda-document__body--html :is(th, td) > p + p {
  margin-block-start: var(--preceda-space-2);
}

.preceda-document__body--html .tableWrapper {
  margin: 0 0 var(--preceda-space-5);
  overflow-x: auto;
}

.preceda-document__body--html .tableWrapper > table {
  margin: 0;
}

/* The editor's cell selection (ProseMirror tables): the reporter underline tint. */
.preceda-document__body--html .selectedCell {
  background: var(--preceda-color-paper-sunken);
}

/* A margin note placed immediately before its paragraph floats into the margin. */
.preceda-document__body--html > .preceda-margin-note {
  float: inline-end;
  clear: inline-end;
  inline-size: var(--preceda-document-margin);
  margin-inline-end: calc((var(--preceda-document-margin) + var(--preceda-document-gap)) * -1);
  padding-block: var(--preceda-space-1);
  padding-inline-start: var(--preceda-space-3);
  border-inline-start: 1px solid var(--preceda-color-hairline);
}

/* ── Instrument parts: the role map (D-020) ─────────────────────────────────
 * The renderer maps host-issued instrument roles (from the registered or
 * inferred outline, never from markup) to these classes on top-level blocks.
 * Parts outside the numbered run carry no paragraph number.
 */

.preceda-document__body--html > .preceda-document__part--cause-title,
.preceda-document__body--html > .preceda-document__part--parties,
.preceda-document__body--html > .preceda-document__part--title {
  text-align: center;
}

.preceda-document__body--html > .preceda-document__part--cause-title {
  margin-block-end: var(--preceda-space-3);
  font-variant-caps: var(--preceda-small-caps);
  letter-spacing: var(--preceda-tracking-small-caps);
}

.preceda-document__body--html > .preceda-document__part--parties {
  margin-block-end: var(--preceda-space-3);
}

.preceda-document__body--html > .preceda-document__part--title {
  margin-block: var(--preceda-space-6) var(--preceda-space-6);
  font-size: var(--preceda-type-subheading-size);
  font-variant-caps: var(--preceda-small-caps);
  letter-spacing: calc(var(--preceda-tracking-small-caps) / 2);
  line-height: var(--preceda-leading-heading);
  text-wrap: balance;
}

.preceda-document__body--html > .preceda-document__part--verification {
  color: var(--preceda-color-ink-secondary);
}

.preceda-document__body--html > .preceda-document__part--verification:not(.preceda-document__part--verification + .preceda-document__part--verification) {
  margin-block-start: var(--preceda-space-8);
  padding-block-start: var(--preceda-space-4);
  border-block-start: 1px solid var(--preceda-color-hairline);
}

.preceda-document__body--html > .preceda-document__part--annexures {
  color: var(--preceda-color-ink-secondary);
  font-size: var(--preceda-type-size-14);
}

.preceda-document__body--numbered > p:is(
  .preceda-document__part--cause-title,
  .preceda-document__part--parties,
  .preceda-document__part--title,
  .preceda-document__part--verification,
  .preceda-document__part--annexures
) {
  counter-increment: none;
}

.preceda-document__body--numbered > p:is(
  .preceda-document__part--cause-title,
  .preceda-document__part--parties,
  .preceda-document__part--title,
  .preceda-document__part--verification,
  .preceda-document__part--annexures
)::before {
  content: none;
}

/* ── Court filing lists (owner, 2026-09-24) ─────────────────────────────────
 * `--court-lists` on a body: every list numbered 1., 2., 3. (bullets
 * included), sub-points (i), (ii), and the grounds lettered A., B., C. The
 * product marks the grounds and sub-point lists with host-issued parts
 * (`grounds`, `grounds-labelled`, `subpoints`), the same channel as the
 * instrument roles; a read-only body may also carry the numbering as `type`.
 * Plain grounds paragraphs take a letter in the gutter where the others take
 * a number; a paragraph that letters itself keeps its own label.
 */

@counter-style preceda-parenthesized-roman {
  system: extends lower-roman;
  prefix: '(';
  suffix: ') ';
}

@counter-style preceda-parenthesized-decimal {
  system: extends decimal;
  prefix: '(';
  suffix: ') ';
}

.preceda-document__body--court-lists :is(ol, ul) {
  list-style-type: decimal;
}

.preceda-document__body--court-lists :is(ol, ul) :is(ol, ul),
.preceda-document__body--court-lists > :is(ol, ul).preceda-document__part--subpoints,
.preceda-document__body--court-lists ol[type='i'] {
  list-style-type: preceda-parenthesized-roman;
}

.preceda-document__body--court-lists :is(ol, ul) :is(ol, ul) :is(ol, ul) {
  list-style-type: preceda-parenthesized-decimal;
}

.preceda-document__body--court-lists > :is(ol, ul).preceda-document__part--grounds,
.preceda-document__body--court-lists > ol[type='A'] {
  list-style-type: upper-alpha;
}

.preceda-document__body--html > :not(.preceda-document__part--grounds) + .preceda-document__part--grounds {
  counter-reset: preceda-document-ground;
}

.preceda-document__body--numbered > p:is(.preceda-document__part--grounds, .preceda-document__part--grounds-labelled) {
  counter-increment: none;
}

.preceda-document__body--numbered > p.preceda-document__part--grounds {
  counter-increment: preceda-document-ground;
}

.preceda-document__body--numbered > p.preceda-document__part--grounds::before {
  content: counter(preceda-document-ground, upper-alpha);
}

.preceda-document__body--numbered > p.preceda-document__part--grounds-labelled::before {
  content: none;
}

/* ── Page preview: the court filing view ─────────────────────────────────────
 * The filed pages, set by the product's own print document in a frame (the
 * frame's document carries the filing format; nothing here sets its type).
 */

.preceda-document__pages {
  min-inline-size: 0;
  background: var(--preceda-color-paper-sunken);
}

.preceda-document__pages-frame {
  display: block;
  inline-size: 100%;
  min-block-size: var(--preceda-space-24);
  border: 0;
}

.preceda-document__pages-status {
  margin: 0;
  padding: var(--preceda-space-8) var(--preceda-space-4);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  text-align: center;
}

/* A citation the receipt struck (misattributed, inapplicable): struck, never hidden. */
.preceda-document__body--html .preceda-document__cite--struck {
  color: var(--preceda-tone-struck-ink);
  text-decoration-line: line-through;
  text-decoration-color: var(--preceda-tone-struck-rule);
  text-decoration-thickness: 1px;
}

/* ── Margin layer for a live editor body ─────────────────────────────────────
 * An editor cannot hold margin notes inside its content, so the notes sit in a
 * layer over the body's margin column, each slot at the offset of the block it
 * annotates (`--preceda-margin-offset`, set by the product from layout).
 */

.preceda-document__frame {
  position: relative;
  min-inline-size: 0;
}

.preceda-document__margin-layer {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: var(--preceda-document-margin);
  pointer-events: none;
}

.preceda-document__margin-slot {
  position: absolute;
  inset-inline: 0;
  inset-block-start: var(--preceda-margin-offset, 0);
  padding-block: var(--preceda-space-1);
  padding-inline-start: var(--preceda-space-3);
  border-inline-start: 1px solid var(--preceda-color-hairline);
  pointer-events: auto;
}

.preceda-document__margin-slot > * + * {
  margin-block-start: var(--preceda-space-2);
}

.preceda-document__margin-slot--scope {
  border-inline-start-color: transparent;
}

/* TipTap's empty-editor placeholder. */
.preceda-document__body p.is-editor-empty:first-child::before {
  float: inline-start;
  block-size: 0;
  color: var(--preceda-color-ink-tertiary);
  content: attr(data-placeholder);
  pointer-events: none;
}

/* ── Empty sheet: "Nothing on the desk yet." ──────────────────────────────── */

.preceda-document__empty {
  max-inline-size: var(--preceda-measure-reading);
  margin: var(--preceda-space-10) auto var(--preceda-space-6);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  text-align: center;
}

.preceda-document__empty > :first-child {
  margin: 0 0 var(--preceda-space-2);
  color: var(--preceda-color-ink);
  font-size: var(--preceda-type-subheading-size);
}

.preceda-document__empty > * {
  margin: 0;
}

/* ── Compact: below the desk breakpoint, or forced ────────────────────────── */

[data-layout='compact'] .preceda-document,
.preceda-document[data-layout='compact'] {
  --preceda-document-gutter: var(--preceda-space-6);
  --preceda-document-margin: 0;
  --preceda-document-gap: var(--preceda-space-3);
  --preceda-document-text-size: var(--preceda-type-reading-size);
  --preceda-document-text-leading: var(--preceda-type-reading-leading);
}

[data-layout='compact'] .preceda-document__sheet,
.preceda-document[data-layout='compact'] .preceda-document__sheet {
  padding: var(--preceda-space-6) var(--preceda-space-4) var(--preceda-space-8);
  box-shadow: none;
}

/* Compact: a case number takes its own line under the state; an actions menu
   alone stays on the state's line, and with no forum the state starts the line. */
[data-layout='compact'] .preceda-document__end:has(.preceda-document__number),
.preceda-document[data-layout='compact'] .preceda-document__end:has(.preceda-document__number) {
  order: 3;
  flex-basis: 100%;
  --preceda-document-number-ink: var(--preceda-color-ink-tertiary);
}

[data-layout='compact'] .preceda-document__head > span:empty:first-child,
.preceda-document[data-layout='compact'] .preceda-document__head > span:empty:first-child {
  display: none;
}

[data-layout='compact'] .preceda-paragraph,
.preceda-paragraph[data-layout='compact'] {
  grid-template-columns: var(--preceda-space-6) minmax(0, 1fr);
  column-gap: var(--preceda-space-3);
  margin-block-end: var(--preceda-space-5);
  font-size: var(--preceda-type-reading-size);
  line-height: var(--preceda-type-reading-leading);
}

[data-layout='compact'] .preceda-paragraph__margin,
.preceda-paragraph[data-layout='compact'] .preceda-paragraph__margin {
  display: none;
}

[data-layout='compact'] .preceda-paragraph__marker,
.preceda-paragraph[data-layout='compact'] .preceda-paragraph__marker {
  display: inline;
}

[data-layout='compact'] .preceda-paragraph__footnote:not([hidden]),
.preceda-paragraph[data-layout='compact'] .preceda-paragraph__footnote:not([hidden]) {
  display: block;
}

[data-layout='compact'] .preceda-document__body--html,
.preceda-document[data-layout='compact'] .preceda-document__body--html {
  padding-inline-end: 0;
}

[data-layout='compact'] .preceda-document__margin-layer,
.preceda-document[data-layout='compact'] .preceda-document__margin-layer {
  display: none;
}

[data-layout='compact'] .preceda-document__body--html > .preceda-margin-note,
.preceda-document[data-layout='compact'] .preceda-document__body--html > .preceda-margin-note {
  float: none;
  inline-size: auto;
  margin: 0 0 var(--preceda-space-2);
}

@media (width < 1024px) {
  .preceda-document:not([data-layout='desk'], [data-layout='desk'] *) {
    --preceda-document-gutter: var(--preceda-space-6);
    --preceda-document-margin: 0;
    --preceda-document-gap: var(--preceda-space-3);
    --preceda-document-text-size: var(--preceda-type-reading-size);
    --preceda-document-text-leading: var(--preceda-type-reading-leading);
  }

  .preceda-document:not([data-layout='desk'], [data-layout='desk'] *) .preceda-document__sheet {
    padding: var(--preceda-space-6) var(--preceda-space-4) var(--preceda-space-8);
    box-shadow: none;
  }

  .preceda-document:not([data-layout='desk'], [data-layout='desk'] *) .preceda-document__end:has(.preceda-document__number) {
    order: 3;
    flex-basis: 100%;
    --preceda-document-number-ink: var(--preceda-color-ink-tertiary);
  }

  .preceda-document:not([data-layout='desk'], [data-layout='desk'] *) .preceda-document__head > span:empty:first-child {
    display: none;
  }

  .preceda-paragraph:not([data-layout='desk'], [data-layout='desk'] *) {
    grid-template-columns: var(--preceda-space-6) minmax(0, 1fr);
    column-gap: var(--preceda-space-3);
    margin-block-end: var(--preceda-space-5);
    font-size: var(--preceda-type-reading-size);
    line-height: var(--preceda-type-reading-leading);
  }

  .preceda-paragraph:not([data-layout='desk'], [data-layout='desk'] *) .preceda-paragraph__margin {
    display: none;
  }

  .preceda-paragraph:not([data-layout='desk'], [data-layout='desk'] *) .preceda-paragraph__marker {
    display: inline;
  }

  .preceda-paragraph:not([data-layout='desk'], [data-layout='desk'] *) .preceda-paragraph__footnote:not([hidden]) {
    display: block;
  }

  .preceda-document:not([data-layout='desk'], [data-layout='desk'] *) .preceda-document__body--html {
    padding-inline-end: 0;
  }

  .preceda-document:not([data-layout='desk'], [data-layout='desk'] *) .preceda-document__margin-layer {
    display: none;
  }

  .preceda-document:not([data-layout='desk'], [data-layout='desk'] *) .preceda-document__body--html > .preceda-margin-note {
    float: none;
    inline-size: auto;
    margin: 0 0 var(--preceda-space-2);
  }
}

/* ── Document switch: which document, or which view of it, lies on the desk ─ */

.preceda-document-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--preceda-space-2);
  min-inline-size: 0;
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-variant-numeric: var(--preceda-numerals-lining);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-document-switch__option {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  min-block-size: var(--preceda-space-8);
  padding: 0;
  border: 0;
  color: var(--preceda-color-ink-tertiary);
  background: none;
  font: inherit;
  font-variant-caps: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-decoration-line: none;
}

.preceda-document-switch__option:hover {
  color: var(--preceda-color-ink-secondary);
}

.preceda-document-switch__option[aria-pressed='true'] {
  color: var(--preceda-color-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-binding);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-document-switch__option:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-document-switch__count {
  font-variant-numeric: var(--preceda-numerals-tabular);
}

.preceda-document-switch__dot {
  color: var(--preceda-color-ink-tertiary);
}

.preceda-document-switch__after {
  display: inline-flex;
  align-items: baseline;
  gap: var(--preceda-space-2);
}

/* A quiet menu trigger in the running head ("Actions ▾") or the switch
   ("Bail application · Drafts 2 ▾") takes the folio small caps of the line it sits on. */
.preceda-document__end .preceda-menu-trigger--quiet,
.preceda-document-switch .preceda-menu-trigger--quiet {
  min-block-size: var(--preceda-space-8);
  padding: 0;
  border: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-weight: inherit;
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-document-switch .preceda-menu-trigger--quiet {
  color: var(--preceda-color-ink-tertiary);
}

.preceda-document__end .preceda-menu-trigger--quiet:hover,
.preceda-document-switch .preceda-menu-trigger--quiet:hover,
.preceda-document__end .preceda-menu-trigger--quiet[aria-expanded='true'],
.preceda-document-switch .preceda-menu-trigger--quiet[aria-expanded='true'] {
  color: var(--preceda-color-ink);
  background: none;
}

.preceda-document__open-point-highlight {
  background-color: var(--preceda-color-gilt-tint);
  outline: 1px solid var(--preceda-color-gilt-ink);
}

/* ── toolbar ── */
/*
 * Toolbar: the editor's controls as one hairline row of small-caps words.
 * No icon strip, no pills. Pressed marks take ink and a binding rule beneath;
 * groups are divided by a hairline. `--bubble` is the selection menu, raised
 * above the sheet ("Quote selection to chat").
 */

.preceda-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--preceda-space-1);
  min-inline-size: 0;
  padding-block: var(--preceda-space-0);
  border-block-end: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-secondary);
}

.preceda-toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: 0 var(--preceda-space-1);
}

.preceda-toolbar__separator {
  align-self: stretch;
  inline-size: 1px;
  margin: var(--preceda-space-2) var(--preceda-space-2);
  background: var(--preceda-color-hairline);
}

.preceda-toolbar__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--preceda-space-10);
  min-inline-size: var(--preceda-space-10);
  justify-content: center;
  padding: 0 var(--preceda-space-2);
  border: 0;
  color: var(--preceda-color-ink-secondary);
  background: transparent;
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--preceda-duration-fast) var(--preceda-ease-standard),
    background-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-toolbar__button:hover:not(:disabled) {
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-hover);
}

.preceda-toolbar__button:active:not(:disabled) {
  background: var(--preceda-color-paper-sunken);
}

.preceda-toolbar__button:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: calc(var(--preceda-space-1) / -2);
}

.preceda-toolbar__button[aria-pressed='true'] {
  color: var(--preceda-color-ink);
}

.preceda-toolbar__button[aria-pressed='true']::after {
  position: absolute;
  inset-inline: var(--preceda-space-2);
  inset-block-end: var(--preceda-space-2);
  block-size: 1px;
  background: var(--preceda-color-binding);
  content: '';
}

.preceda-toolbar__button:disabled {
  color: var(--preceda-color-ink-disabled);
  cursor: not-allowed;
}

/* A mark shown in its own style: Bold in bold, Italic in italic. */
.preceda-toolbar__button--bold { font-weight: 600; }
.preceda-toolbar__button--italic { font-style: italic; }
.preceda-toolbar__button--underline { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: var(--preceda-space-1); }
.preceda-toolbar__button--strike { text-decoration-line: line-through; text-decoration-thickness: 1px; }

/* The action a selection invites, in binding. */
.preceda-toolbar__button--action {
  color: var(--preceda-color-binding-ink);
}

.preceda-toolbar__select {
  min-block-size: var(--preceda-space-10);
  padding: 0 var(--preceda-space-6) 0 var(--preceda-space-2);
  border: 0;
  color: var(--preceda-color-ink);
  background: transparent;
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  cursor: pointer;
}

.preceda-toolbar__select:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: calc(var(--preceda-space-1) / -2);
}

/* Saving state at the end of the row. */
.preceda-toolbar__status {
  margin-inline-start: auto;
  padding-inline: var(--preceda-space-2);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-variant-numeric: var(--preceda-numerals-tabular);
}

.preceda-toolbar__status[data-state='error'] {
  color: var(--preceda-color-error);
}

.preceda-toolbar--bubble {
  display: inline-flex;
  flex-wrap: nowrap;
  padding: 0 var(--preceda-space-1);
  border: 1px solid var(--preceda-color-rule-strong);
  border-radius: var(--preceda-radius-small);
  background: var(--preceda-color-paper-raised);
  box-shadow: var(--preceda-shadow-sheet);
}

@media (width < 1024px) {
  .preceda-toolbar:not(.preceda-toolbar--bubble) {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* A scrolling row must not widen its container. */
    contain: inline-size;
  }

  .preceda-toolbar__button,
  .preceda-toolbar__select {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-toolbar__button {
    transition-duration: 0s;
  }
}

/* ── checklist ── */
/*
 * Checklist: "Before this is filed." A hairline-ruled list of sentences under
 * the document, each with its state as a word, then the sign-off: a serif ink
 * button "Approve for filing". Replaces readiness pills, review panes and
 * export-blocked banners.
 */

.preceda-checklist {
  min-inline-size: 0;
  color: var(--preceda-color-ink);
}

.preceda-checklist__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-1) var(--preceda-space-4);
  padding-block-end: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-ink);
}

.preceda-checklist__title {
  margin: 0;
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-weight: var(--preceda-type-label-weight);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-checklist__summary {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-variant-numeric: var(--preceda-numerals-tabular);
}

.preceda-checklist__summary--binding {
  color: var(--preceda-tone-binding-ink);
}

.preceda-checklist__items {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: preceda-checklist;
}

.preceda-checklist__item {
  display: grid;
  grid-template-columns: var(--preceda-space-8) minmax(0, 1fr) auto;
  column-gap: var(--preceda-space-3);
  align-items: baseline;
  padding-block: var(--preceda-space-3);
  border-block-end: 1px solid var(--preceda-color-hairline);
  counter-increment: preceda-checklist;
}

.preceda-checklist__item::before {
  color: var(--preceda-color-ink-tertiary);
  content: counter(preceda-checklist);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-size-14);
  font-variant-numeric: var(--preceda-numerals-tabular);
  text-align: end;
}

.preceda-checklist__text {
  min-inline-size: 0;
}

.preceda-checklist__label {
  margin: 0;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-checklist__note {
  margin: var(--preceda-space-1) 0 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-checklist__state {
  justify-self: end;
}

.preceda-checklist__item--satisfied .preceda-checklist__label,
.preceda-checklist__item--not_applicable .preceda-checklist__label {
  color: var(--preceda-color-ink-secondary);
}

.preceda-checklist__item--not_applicable .preceda-checklist__label {
  text-decoration-line: line-through;
  text-decoration-color: var(--preceda-tone-struck-rule);
  text-decoration-thickness: 1px;
}

.preceda-checklist__item--blocked::before {
  color: var(--preceda-tone-binding-ink);
}

.preceda-checklist__notes {
  padding-block: var(--preceda-space-3);
  border-block-end: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
}

.preceda-checklist__notes > p {
  margin: 0;
}

.preceda-checklist__notes > p + p {
  margin-block-start: var(--preceda-space-2);
}

.preceda-checklist__empty {
  margin: 0;
  padding-block: var(--preceda-space-4);
  border-block-end: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

/* ── Sign-off ─────────────────────────────────────────────────────────────── */

.preceda-checklist__approval {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--preceda-space-3) var(--preceda-space-6);
  padding-block: var(--preceda-space-5) 0;
}

.preceda-checklist__approval-text {
  flex: 1 1 calc(var(--preceda-space-24) * 3);
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-size-14);
  line-height: var(--preceda-type-body-leading);
}

.preceda-checklist__approval--approved .preceda-checklist__approval-text {
  color: var(--preceda-tone-binding-ink);
}

.preceda-checklist__approval--stale .preceda-checklist__approval-text {
  color: var(--preceda-tone-verify-ink);
}

/* The sign-off is T3's ink Button (`preceda-button--ink`); this class only lays it out. */
@media (width < 1024px) {
  .preceda-checklist__approve {
    flex-basis: 100%;
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}


/* ── authority ── */
/*
 * Authority entry: one authority as the table of authorities would set it,
 * for lists, sidebars and the compact desk. Name in the reading face with an
 * italic "v.", the citation in mono, the proposition, then a line carrying
 * treatment, role and verification as words. Struck entries stay visible.
 */

.preceda-authorities {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--preceda-color-ink);
}

.preceda-authority {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--preceda-space-4);
  row-gap: var(--preceda-space-1);
  padding-block: var(--preceda-space-4);
  border-block-end: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink);
}

.preceda-authority > * {
  grid-column: 1;
  min-inline-size: 0;
}

.preceda-authority__name {
  margin: 0;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-size-17);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 400;
  line-height: var(--preceda-leading-heading);
}

.preceda-authority__name a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-authority__name a:hover {
  text-decoration-color: var(--preceda-color-binding);
}

.preceda-authority__name a:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-authority__citation {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-citation-family);
  font-size: var(--preceda-type-citation-size);
  font-variant-numeric: var(--preceda-type-citation-numerals);
  line-height: var(--preceda-type-citation-leading);
}

.preceda-authority__citation > * + *::before {
  content: '\00B7';
  margin-inline: var(--preceda-space-2);
}

.preceda-authority__court {
  margin: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-authority__proposition {
  margin: var(--preceda-space-1) 0 0;
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-authority__lines {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--preceda-space-1) var(--preceda-space-4);
  margin: var(--preceda-space-1) 0 0;
}

.preceda-authority__no-verdict {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

/* The verifier's reason completes the verdict: small, secondary ink, never struck. */
.preceda-authority__reason {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

/* The draft's words when the authority could not be named: flagged in the verify ink. */
.preceda-authority__as-cited {
  margin: 0;
  color: var(--preceda-tone-verify-ink);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-authority__remedy {
  margin-block-start: var(--preceda-space-2);
}

.preceda-authority__snippet {
  margin: var(--preceda-space-2) 0 0;
  padding-inline-start: var(--preceda-space-3);
  border-inline-start: 1px solid var(--preceda-color-rule-strong);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-size-14);
  font-style: italic;
  line-height: var(--preceda-type-body-leading);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.preceda-authority__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: inline-flex;
  gap: var(--preceda-space-2);
}

.preceda-authority--struck :is(.preceda-authority__name, .preceda-authority__citation) {
  color: var(--preceda-tone-struck-ink);
  text-decoration-line: line-through;
  text-decoration-color: var(--preceda-tone-struck-rule);
  text-decoration-thickness: 1px;
}

.preceda-authority--struck .preceda-authority__name a {
  text-decoration-line: inherit;
}

.preceda-authority--current {
  border-inline-start: 1px solid var(--preceda-color-binding);
  padding-inline-start: var(--preceda-space-3);
}

/* Compact density for sidebars and the case page's authorities cited. */
.preceda-authority--compact {
  padding-block: var(--preceda-space-3);
}

.preceda-authority--compact .preceda-authority__name {
  font-size: var(--preceda-type-body-size);
}

/* ── case-head ── */
/*
 * Case head: the reporter page header. A running head (court · date ·
 * proceeding) over an ink rule, the case name in the title role with an
 * italic "v.", one mono line of citations, bench and number, and the
 * headnote set between rules. In a matter, an annotation line says where the
 * current draft cites the judgment.
 */

.preceda-case-head {
  min-inline-size: 0;
  color: var(--preceda-color-ink);
}

.preceda-case-head__running {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--preceda-space-4);
  margin-block-end: var(--preceda-space-8);
  padding-block-end: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-ink);
}

.preceda-case-head__court,
.preceda-case-head__proceeding {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-case-head__proceeding {
  text-align: end;
}

.preceda-case-head__date {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-size-14);
  font-variant-numeric: var(--preceda-numerals-lining);
  text-align: center;
}

.preceda-case-head__title {
  margin: 0 0 var(--preceda-space-2);
  font-family: var(--preceda-type-title-family);
  font-size: var(--preceda-type-title-size);
  font-optical-sizing: auto;
  font-weight: var(--preceda-type-title-weight);
  letter-spacing: var(--preceda-type-title-tracking);
  line-height: var(--preceda-type-title-leading);
  text-wrap: balance;
}

.preceda-case-head__v {
  padding-inline: var(--preceda-space-2);
  color: var(--preceda-color-ink-secondary);
  font-size: var(--preceda-type-size-24);
  font-style: italic;
}

.preceda-case-head__citations {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-citation-family);
  font-size: var(--preceda-type-citation-size);
  font-variant-numeric: var(--preceda-type-citation-numerals);
  line-height: var(--preceda-type-citation-leading);
}

.preceda-case-head__citations > * + *::before {
  content: '\00B7';
  margin-inline: var(--preceda-space-2);
}

.preceda-case-head__lines {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--preceda-space-1) var(--preceda-space-4);
  margin: var(--preceda-space-3) 0 0;
}

.preceda-case-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--preceda-space-3);
  margin-block-start: var(--preceda-space-4);
}

.preceda-case-head__headnote {
  margin-block-start: var(--preceda-space-6);
  padding-block: var(--preceda-space-4);
  border-block: 1px solid var(--preceda-color-rule);
}

.preceda-case-head__headnote-label {
  display: block;
  margin: 0 0 var(--preceda-space-2);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: var(--preceda-type-label-caps);
  font-weight: var(--preceda-type-label-weight);
  letter-spacing: var(--preceda-type-label-tracking);
}

.preceda-case-head__headnote-text {
  margin: 0;
  max-inline-size: var(--preceda-measure-reading);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

/* Matter-relative: only where a current draft and its receipt are in scope. */
.preceda-case-head__context {
  margin: var(--preceda-space-3) 0 0;
  color: var(--preceda-color-binding-ink);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-case-head--loading .preceda-case-head__title,
.preceda-case-head--loading .preceda-case-head__citations {
  color: var(--preceda-color-ink-tertiary);
}

[data-layout='compact'] .preceda-case-head__running {
  grid-template-columns: minmax(0, 1fr) auto;
}

[data-layout='compact'] .preceda-case-head__proceeding {
  grid-column: 1 / -1;
  text-align: start;
}

[data-layout='compact'] .preceda-case-head__title {
  font-size: var(--preceda-type-heading-size);
}

[data-layout='compact'] .preceda-case-head__v {
  font-size: var(--preceda-type-subheading-size);
}

@media (width < 640px) {
  .preceda-case-head:not([data-layout='desk'], [data-layout='desk'] *) .preceda-case-head__running {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .preceda-case-head:not([data-layout='desk'], [data-layout='desk'] *) .preceda-case-head__proceeding {
    grid-column: 1 / -1;
    text-align: start;
  }

  .preceda-case-head:not([data-layout='desk'], [data-layout='desk'] *) .preceda-case-head__title {
    font-size: var(--preceda-type-heading-size);
  }

  .preceda-case-head:not([data-layout='desk'], [data-layout='desk'] *) .preceda-case-head__v {
    font-size: var(--preceda-type-subheading-size);
  }
}

/* ── statute ── */
/*
 * Statute: an act or a provision as a printed act sets it.
 *
 * `.preceda-statute-head` is the page header for an act or a provision: a
 * running head (act · year · standing) over an ink rule, the short title or
 * marginal heading in the title role, the long title as a serif standfirst,
 * one mono citation line and a line of counts.
 *
 * `.preceda-provision` sets the text in the reading serif at a reading
 * measure. Each block (`parseProvisionText`) carries `data-indent` (0–5): the
 * column its text starts at, in steps of `--preceda-provision-step`. A clause
 * number hangs in the step before its text, set end-aligned so "(1)", "(a)"
 * and "(iii)" share one right edge; a longer amendment marker ("1 [(1A)")
 * pushes its first line rather than overprinting. Provisos and explanations
 * carry an italic run-in lead and no number. The step narrows below tablet.
 *
 * `.preceda-provision-nav` is the previous/next pair at the foot of a
 * provision's page.
 */

/* ── Head ─────────────────────────────────────────────────────────────────── */

.preceda-statute-head {
  min-inline-size: 0;
  color: var(--preceda-color-ink);
}

.preceda-statute-head__running {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--preceda-space-4);
  margin-block-end: var(--preceda-space-8);
  padding-block-end: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-ink);
}

.preceda-statute-head__act,
.preceda-statute-head__standing {
  min-inline-size: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-statute-head__act a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-statute-head__act a:hover {
  color: var(--preceda-color-binding-ink);
  text-decoration-color: currentColor;
}

.preceda-statute-head__act a:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-statute-head__standing {
  text-align: end;
}

.preceda-statute-head__year {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-size-14);
  font-variant-numeric: var(--preceda-numerals-lining);
  text-align: center;
}

.preceda-statute-head__title {
  margin: 0 0 var(--preceda-space-2);
  font-family: var(--preceda-type-title-family);
  font-size: var(--preceda-type-title-size);
  font-optical-sizing: auto;
  font-weight: var(--preceda-type-title-weight);
  letter-spacing: var(--preceda-type-title-tracking);
  line-height: var(--preceda-type-title-leading);
  text-wrap: balance;
}

.preceda-statute-head__subtitle {
  max-inline-size: var(--preceda-measure-reading);
  margin: 0 0 var(--preceda-space-3);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  font-style: italic;
  line-height: var(--preceda-type-body-leading);
  text-wrap: pretty;
}

.preceda-statute-head__citations {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-citation-family);
  font-size: var(--preceda-type-citation-size);
  font-variant-numeric: var(--preceda-type-citation-numerals);
  line-height: var(--preceda-type-citation-leading);
}

.preceda-statute-head__citations > * + *::before {
  content: '\00B7';
  margin-inline: var(--preceda-space-2);
}

.preceda-statute-head__lines {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--preceda-space-1) var(--preceda-space-4);
  margin: var(--preceda-space-3) 0 0;
}

.preceda-statute-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--preceda-space-3);
  margin-block-start: var(--preceda-space-4);
}

@media (width < 640px) {
  .preceda-statute-head__running {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .preceda-statute-head__standing {
    grid-column: 1 / -1;
    text-align: start;
  }

  .preceda-statute-head__title {
    font-size: var(--preceda-type-heading-size);
    line-height: var(--preceda-type-heading-leading);
  }
}

/* ── Provision ────────────────────────────────────────────────────────────── */

.preceda-provision {
  --preceda-provision-step: var(--preceda-space-10);
  --preceda-provision-marker-gap: var(--preceda-space-2);

  min-inline-size: 0;
  max-inline-size: calc(var(--preceda-measure-reading) + var(--preceda-provision-step) * 2);
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-reading-family);
  font-size: var(--preceda-type-reading-size);
  font-optical-sizing: auto;
  font-variant-numeric: var(--preceda-numerals-lining);
  line-height: var(--preceda-type-reading-leading);
  overflow-wrap: break-word;
  hyphens: auto;
}

.preceda-provision--compact {
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-provision__heading {
  margin: 0 0 var(--preceda-space-3);
}

.preceda-provision__number {
  font-variant-numeric: var(--preceda-numerals-tabular);
}

.preceda-provision__title {
  font-style: italic;
}

.preceda-provision__body {
  min-inline-size: 0;
}

.preceda-provision__block {
  margin: 0 0 var(--preceda-space-3);
  padding-inline-start: 0;
  text-wrap: pretty;
}

.preceda-provision__block:last-child {
  margin-block-end: 0;
}

.preceda-provision__block[data-indent='1'] { padding-inline-start: var(--preceda-provision-step); }
.preceda-provision__block[data-indent='2'] { padding-inline-start: calc(var(--preceda-provision-step) * 2); }
.preceda-provision__block[data-indent='3'] { padding-inline-start: calc(var(--preceda-provision-step) * 3); }
.preceda-provision__block[data-indent='4'] { padding-inline-start: calc(var(--preceda-provision-step) * 4); }
.preceda-provision__block[data-indent='5'] { padding-inline-start: calc(var(--preceda-provision-step) * 5); }

/* The clause number hangs in the step before the text. */
.preceda-provision__marker {
  display: inline-block;
  box-sizing: border-box;
  min-inline-size: var(--preceda-provision-step);
  margin-inline-start: calc(var(--preceda-provision-step) * -1);
  padding-inline-end: var(--preceda-provision-marker-gap);
  color: var(--preceda-color-ink-secondary);
  font-variant-numeric: var(--preceda-numerals-tabular);
  text-align: end;
  white-space: nowrap;
}

/* A marker at the outer edge has no step to hang in: it runs in. */
.preceda-provision__block[data-indent='0'] > .preceda-provision__marker {
  min-inline-size: 0;
  margin-inline-start: 0;
}

.preceda-provision__lead {
  font-style: italic;
}

.preceda-provision__block--explanation,
.preceda-provision__block--exception,
.preceda-provision__block--limb {
  margin-block-start: var(--preceda-space-4);
}

.preceda-provision__block--illustrations .preceda-provision__lead {
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-style: normal;
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
}

.preceda-provision__block--illustrations {
  margin-block-start: var(--preceda-space-5);
}

.preceda-provision__block--heading {
  margin-block: var(--preceda-space-8) var(--preceda-space-4);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
  text-align: center;
}

.preceda-provision__block--heading:first-child {
  margin-block-start: 0;
}

.preceda-provision__footnote {
  margin-block-start: var(--preceda-space-6);
  padding-block-start: var(--preceda-space-3);
  border-block-start: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-folio-family);
  font-size: var(--preceda-type-folio-size);
  line-height: var(--preceda-type-folio-leading);
  white-space: pre-line;
}

@media (width < 640px) {
  .preceda-provision {
    --preceda-provision-step: var(--preceda-space-8);
    --preceda-provision-marker-gap: var(--preceda-space-1);
  }
}

/* ── Previous / next ──────────────────────────────────────────────────────── */

.preceda-provision-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--preceda-space-6);
  padding-block-start: var(--preceda-space-4);
  border-block-start: 1px solid var(--preceda-color-rule);
}

.preceda-provision-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--preceda-space-1);
  min-inline-size: 0;
  color: var(--preceda-color-ink);
  text-decoration: none;
}

.preceda-provision-nav__link--next {
  align-items: flex-end;
  text-align: end;
}

.preceda-provision-nav__kicker {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-provision-nav__label {
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-provision-nav__title {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  font-style: italic;
  line-height: var(--preceda-type-body-leading);
}

.preceda-provision-nav__link:hover .preceda-provision-nav__label {
  color: var(--preceda-color-binding-ink);
  text-decoration-color: currentColor;
}

.preceda-provision-nav__link:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

@media (width < 640px) {
  .preceda-provision-nav {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--preceda-space-4);
  }

  .preceda-provision-nav__link--next {
    align-items: flex-start;
    text-align: start;
  }

  .preceda-provision-nav > span:empty {
    display: none;
  }
}

@media (forced-colors: active) {
  .preceda-provision-nav__link:focus-visible,
  .preceda-statute-head__act a:focus-visible {
    outline-color: Highlight;
  }
}

/* ── profile-head ── */
/*
 * Profile head: the page header for a judge's bench record. The case and
 * statute heads' furniture — a running head (court · years · standing) over
 * an ink rule, the name in the title role — then the office as an italic
 * standfirst, one middot-separated line of other courts in the ui face and a
 * line of counts. No portrait, no initial tile, no coloured badge.
 */

.preceda-profile-head {
  min-inline-size: 0;
  color: var(--preceda-color-ink);
}

.preceda-profile-head__running {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--preceda-space-4);
  margin-block-end: var(--preceda-space-8);
  padding-block-end: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-ink);
}

.preceda-profile-head__court,
.preceda-profile-head__standing {
  min-inline-size: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-profile-head__standing {
  text-align: end;
}

.preceda-profile-head__period {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-size-14);
  font-variant-numeric: var(--preceda-numerals-lining);
  text-align: center;
}

.preceda-profile-head__name {
  margin: 0 0 var(--preceda-space-2);
  font-family: var(--preceda-type-title-family);
  font-size: var(--preceda-type-title-size);
  font-optical-sizing: auto;
  font-weight: var(--preceda-type-title-weight);
  letter-spacing: var(--preceda-type-title-tracking);
  line-height: var(--preceda-type-title-leading);
  text-wrap: balance;
}

.preceda-profile-head__office {
  max-inline-size: var(--preceda-measure-reading);
  margin: 0 0 var(--preceda-space-3);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  font-style: italic;
  line-height: var(--preceda-type-body-leading);
  text-wrap: pretty;
}

.preceda-profile-head__meta {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
}

.preceda-profile-head__meta > * + *::before {
  content: '\00B7';
  margin-inline: var(--preceda-space-2);
}

.preceda-profile-head__lines {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--preceda-space-1) var(--preceda-space-4);
  margin: var(--preceda-space-3) 0 0;
}

.preceda-profile-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--preceda-space-3);
  margin-block-start: var(--preceda-space-4);
}

@media (width < 640px) {
  .preceda-profile-head__running {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .preceda-profile-head__standing {
    grid-column: 1 / -1;
    text-align: start;
  }

  .preceda-profile-head__name {
    font-size: var(--preceda-type-heading-size);
    line-height: var(--preceda-type-heading-leading);
  }
}

/* ── letter ── */
/*
 * Letter: one entry in the correspondence. A hairline above, the sender in
 * small caps with the time at right in chrome sans, then the body in the
 * serif. No bubbles, no avatars, no alignment by side: counsel and the
 * associate share one measure. The clerk's note (`--note`) carries system
 * messages, bounded partials and errors in ink-2, never as a red banner.
 *
 * `.preceda-correspondence` is the column that holds letters: a scrolling
 * list above the working line and the composer.
 */

.preceda-letter {
  display: block;
  margin: 0;
  padding-block: var(--preceda-space-4);
  border-block-start: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink);
}

.preceda-letter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-3);
  margin: 0 0 var(--preceda-space-2);
}

.preceda-letter__sender {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-weight: var(--preceda-type-label-weight);
  line-height: var(--preceda-type-label-leading);
  letter-spacing: var(--preceda-type-label-tracking);
  font-variant-caps: var(--preceda-type-label-caps);
}

.preceda-letter__time {
  flex: none;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  letter-spacing: var(--preceda-type-small-tracking);
  font-variant-numeric: var(--preceda-type-small-numerals);
  white-space: nowrap;
}

.preceda-letter__body {
  max-inline-size: var(--preceda-measure-reading);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  font-weight: var(--preceda-type-body-weight);
  line-height: var(--preceda-type-body-leading);
  font-optical-sizing: auto;
  overflow-wrap: break-word;
}

.preceda-letter__body > * {
  margin: 0;
}

.preceda-letter__body > * + * {
  margin-block-start: var(--preceda-space-3);
}

.preceda-letter__body ul,
.preceda-letter__body ol {
  padding-inline-start: var(--preceda-space-4);
}

.preceda-letter__body ul {
  list-style-type: disc;
}

.preceda-letter__body ol {
  list-style-type: decimal;
}

.preceda-letter__body li + li {
  margin-block-start: var(--preceda-space-1);
}

.preceda-letter__body li::marker {
  color: var(--preceda-color-ink-tertiary);
}

/* A quoted excerpt ("Quote selection"): indented italic on a left rule. */
.preceda-letter__quote {
  margin-inline: 0;
  padding-inline-start: var(--preceda-space-4);
  border-inline-start: 1px solid var(--preceda-color-rule-strong);
  color: var(--preceda-color-ink-secondary);
  font-style: italic;
}

.preceda-letter__quote > * {
  margin: 0;
}

.preceda-letter__quote > * + * {
  margin-block-start: var(--preceda-space-2);
}

/* Emphasis inside the italic excerpt (a case name) reads roman, as in print. */
.preceda-letter__quote em {
  font-style: normal;
}

.preceda-letter__quote cite {
  display: block;
  margin-block-start: var(--preceda-space-1);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-style: normal;
}

/* "Attached: FIR.pdf · 2 pages" — a line, not pills. */
.preceda-letter__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--preceda-space-1);
  margin: var(--preceda-space-3) 0 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  font-variant-numeric: var(--preceda-type-small-numerals);
}

.preceda-letter__attachments-label {
  color: var(--preceda-color-ink-secondary);
}

.preceda-letter__attachment-name {
  color: var(--preceda-color-ink-secondary);
}

/* An openable attachment: the name is a quiet link-styled button. */
.preceda-letter__attachment-open {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: var(--preceda-space-1);
  cursor: pointer;
}

.preceda-letter__attachment-open:hover {
  color: var(--preceda-color-ink);
}

/* Anything that follows the body (a fact request, next steps, a memo pointer). */
.preceda-letter__after > * {
  margin-block-start: var(--preceda-space-4);
}

/* Streaming: the text simply grows. No caret, no shimmer, no animation. */
.preceda-letter--streaming .preceda-letter__body {
  min-block-size: var(--preceda-type-body-size);
}

/* The clerk's note. */
.preceda-letter--note .preceda-letter__body {
  color: var(--preceda-color-ink-secondary);
}

.preceda-letter--note[data-tone='error'] .preceda-letter__sender {
  color: var(--preceda-color-error);
}

@media (width < 1024px) {
  .preceda-letter__body {
    font-size: var(--preceda-type-reading-size);
    line-height: var(--preceda-type-reading-leading);
  }
}

/* ── The correspondence column ── */

.preceda-correspondence {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper);
}

.preceda-correspondence__letters {
  flex: 1 1 auto;
  min-block-size: 0;
  margin: 0;
  padding: var(--preceda-space-5) var(--preceda-space-6) var(--preceda-space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.preceda-correspondence__letters > :first-child,
.preceda-correspondence__letters > :first-child > .preceda-letter {
  padding-block-start: 0;
  border-block-start: 0;
}

.preceda-correspondence__status {
  padding: 0 var(--preceda-space-6);
}

.preceda-correspondence__status > * {
  border-block-start: 1px solid var(--preceda-color-hairline);
}

.preceda-correspondence__composer {
  padding: var(--preceda-space-4) var(--preceda-space-6) var(--preceda-space-4);
  border-block-start: 1px solid var(--preceda-color-rule);
}

.preceda-correspondence__save-warning {
  margin: 0 0 var(--preceda-space-3);
  color: var(--preceda-color-error);
  font-size: var(--preceda-type-small-size);
  line-height: 1.5;
}

@media (width < 1024px) {
  .preceda-correspondence__letters,
  .preceda-correspondence__status,
  .preceda-correspondence__composer {
    padding-inline: var(--preceda-space-4);
  }

  .preceda-correspondence__composer {
    padding-block-end: calc(var(--preceda-space-4) + env(safe-area-inset-bottom, 0));
  }
}

/* ── working-notes ── */
/* The associate's event-backed desk notes: a disclosure, never a transcript. */
.preceda-working-notes {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  font-variant-numeric: var(--preceda-type-small-numerals);
}

.preceda-working-notes__summary {
  display: flex;
  align-items: center;
  gap: var(--preceda-space-2);
  min-block-size: var(--preceda-space-10);
  cursor: pointer;
  list-style: none;
  border-radius: var(--preceda-radius-small);
}

.preceda-working-notes__summary::-webkit-details-marker { display: none; }
.preceda-working-notes__summary:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}
.preceda-working-notes__summary:hover .preceda-working-notes__label { text-decoration: underline; }
.preceda-working-notes__label {
  flex: none;
  color: var(--preceda-color-ink-secondary);
  font-variant-caps: var(--preceda-small-caps);
  letter-spacing: var(--preceda-tracking-small-caps);
}
.preceda-working-notes__latest {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preceda-working-notes__latest::before {
  content: '·';
  margin-inline-end: var(--preceda-space-2);
}
.preceda-working-notes__chevron {
  flex: none;
  margin-inline-start: auto;
  transition: transform var(--preceda-duration-fast) var(--preceda-ease-standard);
}
.preceda-working-notes[open] .preceda-working-notes__chevron { transform: rotate(180deg); }

.preceda-letter__body .preceda-working-notes__entries,
.preceda-working-notes__entries {
  margin: 0 0 var(--preceda-space-3);
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--preceda-color-hairline);
}
.preceda-working-notes__entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--preceda-space-2);
  row-gap: var(--preceda-space-1);
  padding-block: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-hairline);
}
.preceda-letter__body .preceda-working-notes__entry + .preceda-working-notes__entry { margin-block-start: 0; }
.preceda-working-notes__mark { color: var(--preceda-color-binding); }
.preceda-working-notes__entry-label { color: var(--preceda-color-ink-secondary); }
.preceda-working-notes__time { grid-column: 3; grid-row: 1; white-space: nowrap; }
.preceda-working-notes__link {
  grid-column: 2;
  justify-self: start;
  min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  padding: var(--preceda-space-2) var(--preceda-space-2);
  border: 0;
  background: none;
  color: var(--preceda-color-binding);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: var(--preceda-space-1);
}
.preceda-working-notes__link:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}
.preceda-working-notes__empty { margin: 0 0 var(--preceda-space-3); }
@media (prefers-reduced-motion: reduce) {
  .preceda-working-notes__chevron { transition-duration: 0s; }
}

/* ── fact-request ── */
/*
 * Fact request: the associate's questions as a numbered list under a
 * small-caps title, each with its answer inline on a printed underline. It is
 * the single interactive home for a request. Results are typed:
 * `accepted` reads back the record, `partial` keeps failed questions open, and
 * `rejected` keeps every answer and gives the reason beside each question.
 */

.preceda-fact-request {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--preceda-color-ink);
}

.preceda-fact-request__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-1) var(--preceda-space-4);
  padding-block-end: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-hairline);
}

.preceda-fact-request__title {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-weight: var(--preceda-type-label-weight);
  line-height: var(--preceda-type-label-leading);
  letter-spacing: var(--preceda-type-label-tracking);
  font-variant-caps: var(--preceda-type-label-caps);
}

.preceda-fact-request__progress {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  font-variant-numeric: var(--preceda-type-small-numerals);
}

.preceda-fact-request__summary {
  flex-basis: 100%;
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-fact-request__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.preceda-fact-request__group-head {
  grid-column: 1 / -1;
  margin: 0;
  padding-block: 0 var(--preceda-space-2);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  letter-spacing: var(--preceda-type-label-tracking);
  font-variant-caps: var(--preceda-type-label-caps);
}

.preceda-fact-request__item {
  display: grid;
  grid-template-columns: var(--preceda-space-6) minmax(0, 1fr);
  column-gap: var(--preceda-space-3);
  padding-block: var(--preceda-space-4) var(--preceda-space-3);
  border-block-end: 1px solid var(--preceda-color-hairline);
  scroll-margin-block: var(--preceda-space-6);
}

.preceda-fact-request__number {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-folio-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  font-variant-numeric: var(--preceda-type-folio-numerals);
}

.preceda-fact-request__body {
  min-inline-size: 0;
}

.preceda-fact-request__question {
  display: block;
  margin: 0;
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-fact-request__qualifier {
  display: inline-block;
  margin-inline-start: var(--preceda-space-2);
  color: var(--preceda-tone-verify-ink);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-variant-caps: var(--preceda-small-caps);
  letter-spacing: var(--preceda-tracking-small-caps);
}

.preceda-fact-request__hint,
.preceda-fact-request__basis {
  margin: var(--preceda-space-1) 0 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-fact-request__basis {
  font-style: italic;
}

.preceda-fact-request__control {
  position: relative;
  margin-block-start: var(--preceda-space-1);
}

/* The answer: a printed underline, not a box. */
.preceda-fact-request__input {
  display: block;
  inline-size: 100%;
  min-block-size: var(--preceda-space-10);
  margin: 0;
  padding: var(--preceda-space-2) 0;
  border: 0;
  border-block-end: 1px solid var(--preceda-color-rule-strong);
  border-radius: 0;
  color: var(--preceda-color-ink);
  background: transparent;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  appearance: none;
  transition: border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-fact-request__input::placeholder {
  color: var(--preceda-color-ink-tertiary);
  opacity: 1;
}

.preceda-fact-request__input:hover:not(:disabled) {
  border-block-end-color: var(--preceda-color-ink-tertiary);
}

.preceda-fact-request__input:focus-visible {
  border-block-end-color: var(--preceda-color-focus);
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-space-1);
}

.preceda-fact-request__input[aria-invalid='true'] {
  border-block-end-color: var(--preceda-color-error);
}

.preceda-fact-request__input:disabled {
  color: var(--preceda-color-ink-secondary);
  border-block-end-style: dotted;
  cursor: not-allowed;
}

textarea.preceda-fact-request__input {
  field-sizing: content;
  min-block-size: calc(var(--preceda-space-12) + var(--preceda-space-4));
  resize: vertical;
}

select.preceda-fact-request__input {
  padding-inline-end: var(--preceda-space-8);
  cursor: pointer;
}

.preceda-fact-request__select-chevron {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  color: var(--preceda-color-ink-tertiary);
  pointer-events: none;
  transform: translateY(-50%);
}

input[type='date'].preceda-fact-request__input {
  font-variant-numeric: var(--preceda-numerals-tabular);
}

input[type='date'].preceda-fact-request__input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

[data-theme='lamp'] input[type='date'].preceda-fact-request__input::-webkit-calendar-picker-indicator,
[data-theme='defendant'] input[type='date'].preceda-fact-request__input::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Inline text actions: confirm a suggestion, attach, provide now, remove. */
.preceda-fact-request__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--preceda-space-4);
}

.preceda-fact-request__action {
  display: inline-flex;
  align-items: center;
  gap: var(--preceda-space-1);
  min-block-size: var(--preceda-space-10);
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--preceda-color-binding-ink);
  background: transparent;
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
  cursor: pointer;
}

.preceda-fact-request__action:hover:not(:disabled):not([aria-disabled='true']) {
  text-decoration-color: currentColor;
}

.preceda-fact-request__action:focus-visible,
.preceda-fact-request__action:has(input:focus-visible),
button.preceda-fact-request__attached-name:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
  border-radius: var(--preceda-radius-small);
}

.preceda-fact-request__action:disabled,
.preceda-fact-request__action[aria-disabled='true'] {
  color: var(--preceda-color-ink-tertiary);
  text-decoration-line: none;
  cursor: not-allowed;
}

.preceda-fact-request__action[aria-pressed='true'] {
  color: var(--preceda-color-ink-secondary);
  text-decoration-line: none;
}

.preceda-fact-request__file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Attached: passport-stamps.pdf · 4 pages" */
.preceda-fact-request__attached {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--preceda-space-3);
  margin: var(--preceda-space-1) 0 0;
  padding: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  list-style: none;
}

.preceda-fact-request__attached-name {
  color: var(--preceda-color-ink-secondary);
}

/* A finished file the product can open: its name is a quiet text button. */
button.preceda-fact-request__attached-name {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

button.preceda-fact-request__attached-name:hover {
  text-decoration-color: currentColor;
}

.preceda-fact-request__attached [data-status='error'] .preceda-fact-request__attached-name {
  color: var(--preceda-color-error);
}

/* Grouped fields (a party roster): a fieldset of labelled sub-answers. */
.preceda-fact-request__group {
  margin: var(--preceda-space-2) 0 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.preceda-fact-request__entry {
  padding-block: var(--preceda-space-2) var(--preceda-space-3);
  border-block-start: 1px solid var(--preceda-color-hairline);
}

.preceda-fact-request__entry:first-of-type {
  border-block-start: 0;
}

.preceda-fact-request__entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  letter-spacing: var(--preceda-type-label-tracking);
  font-variant-caps: var(--preceda-type-label-caps);
}

.preceda-fact-request__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--preceda-space-24) + var(--preceda-space-16))), 1fr));
  gap: var(--preceda-space-1) var(--preceda-space-5);
}

.preceda-fact-request__field-label {
  display: block;
  margin-block-start: var(--preceda-space-2);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

/* Per-question outcome, inline. */
.preceda-fact-request__outcome {
  display: flex;
  align-items: baseline;
  gap: var(--preceda-space-2);
  margin: var(--preceda-space-2) 0 0;
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-fact-request__outcome-label {
  flex: none;
  font-variant-caps: var(--preceda-small-caps);
  letter-spacing: var(--preceda-tracking-small-caps);
}

.preceda-fact-request__outcome[data-outcome='saved'] {
  color: var(--preceda-color-ink-secondary);
}

.preceda-fact-request__outcome[data-outcome='failed'] {
  color: var(--preceda-color-error);
}

.preceda-fact-request__outcome[data-outcome='failed'] .preceda-fact-request__outcome-reason {
  color: var(--preceda-color-ink-secondary);
}

/* The record read back after an accepted submission. */
.preceda-fact-request__answer {
  margin: var(--preceda-space-1) 0 0;
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  font-style: italic;
}

/* Recorded as not available at present: a deliberate blank, not a question. */
.preceda-fact-request__recorded {
  padding-block: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-fact-request__recorded > summary,
.preceda-fact-request--history > summary {
  display: flex;
  align-items: center;
  gap: var(--preceda-space-2);
  min-block-size: var(--preceda-space-10);
  cursor: pointer;
  list-style: none;
  border-radius: var(--preceda-radius-small);
}

.preceda-fact-request__recorded > summary::-webkit-details-marker,
.preceda-fact-request--history > summary::-webkit-details-marker {
  display: none;
}

.preceda-fact-request__recorded > summary:focus-visible,
.preceda-fact-request--history > summary:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-fact-request__disclosure-chevron {
  flex: none;
  color: var(--preceda-color-ink-tertiary);
  transition: transform var(--preceda-duration-fast) var(--preceda-ease-standard);
}

details[open] > summary > .preceda-fact-request__disclosure-chevron {
  transform: rotate(180deg);
}

.preceda-fact-request__recorded p {
  margin: 0 0 var(--preceda-space-2);
  color: var(--preceda-color-ink-tertiary);
}

.preceda-fact-request__recorded ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.preceda-fact-request__recorded li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--preceda-space-3);
  border-block-start: 1px solid var(--preceda-color-hairline);
}

/* Footer: what remains, then the one act. */
.preceda-fact-request__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--preceda-space-2) var(--preceda-space-4);
  padding-block-start: var(--preceda-space-3);
}

.preceda-fact-request__remaining {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  font-variant-numeric: var(--preceda-type-small-numerals);
}

.preceda-fact-request__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--preceda-space-2);
  min-block-size: var(--preceda-space-10);
  margin: 0;
  padding: var(--preceda-space-2) var(--preceda-space-4);
  border: 1px solid var(--preceda-color-binding);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-action-ink);
  background: var(--preceda-color-binding);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  font-weight: 600;
  line-height: var(--preceda-type-ui-leading);
  cursor: pointer;
  transition:
    background-color var(--preceda-duration-fast) var(--preceda-ease-standard),
    border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-fact-request__submit:hover:not(:disabled):not([aria-disabled='true']) {
  border-color: var(--preceda-color-binding-hover);
  background: var(--preceda-color-binding-hover);
}

.preceda-fact-request__submit:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-fact-request__submit:disabled,
.preceda-fact-request__submit[aria-disabled='true'] {
  border-color: var(--preceda-color-rule);
  color: var(--preceda-color-ink-tertiary);
  background: transparent;
  cursor: not-allowed;
}

.preceda-fact-request__submit[aria-busy='true'] {
  cursor: progress;
}

/* A clerk's note under the request: partial and rejected outcomes. */
.preceda-fact-request__note {
  margin: var(--preceda-space-3) 0 0;
  padding-block-start: var(--preceda-space-2);
  border-block-start: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-fact-request__note-label {
  margin-inline-end: var(--preceda-space-2);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  letter-spacing: var(--preceda-type-label-tracking);
  font-variant-caps: var(--preceda-type-label-caps);
}

.preceda-fact-request[data-state='rejected'] .preceda-fact-request__note-label,
.preceda-fact-request[data-state='partial'] .preceda-fact-request__note-label {
  color: var(--preceda-color-error);
}

.preceda-fact-request__live {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* History and superseded requests: a quiet disclosure, read-only. */
.preceda-fact-request--history {
  border-block: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-fact-request--history > p {
  margin: 0 0 var(--preceda-space-2);
  color: var(--preceda-color-ink-tertiary);
}

.preceda-fact-request--history ol {
  margin: 0 0 var(--preceda-space-2);
  padding: 0;
  list-style: none;
}

.preceda-fact-request--history li {
  display: grid;
  grid-template-columns: var(--preceda-space-6) minmax(0, 1fr);
  column-gap: var(--preceda-space-3);
  padding-block: var(--preceda-space-1);
  border-block-start: 1px solid var(--preceda-color-hairline);
}

.preceda-fact-request__history-state {
  display: block;
  color: var(--preceda-color-ink-tertiary);
}

.preceda-fact-request--history[data-superseded='true'] .preceda-fact-request__history-question {
  color: var(--preceda-tone-struck-ink);
  text-decoration-line: line-through;
  text-decoration-color: var(--preceda-tone-struck-rule);
  text-decoration-thickness: 1px;
}

@media (width < 1024px) {
  .preceda-fact-request__question,
  .preceda-fact-request__input,
  .preceda-fact-request__answer,
  .preceda-fact-request__number {
    font-size: var(--preceda-type-reading-size);
    line-height: var(--preceda-type-reading-leading);
  }

  .preceda-fact-request__input,
  .preceda-fact-request__action,
  .preceda-fact-request__submit,
  .preceda-fact-request__recorded > summary,
  .preceda-fact-request--history > summary {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-fact-request__input,
  .preceda-fact-request__submit,
  .preceda-fact-request__disclosure-chevron {
    transition-duration: 0s;
  }
}

/* A question counsel left blank in a save that recorded the others: open, flagged, not failed. */
.preceda-fact-request__outcome[data-outcome='open'] {
  color: var(--preceda-color-ink-secondary);
}

/* ── next-steps ── */
/*
 * Next steps: what counsel might ask for next, as one line of text links
 * separated by middots in binding ink. No pills, no icons.
 */

.preceda-next-steps {
  margin: 0;
}

.preceda-next-steps__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preceda-next-steps__item {
  display: inline-flex;
  align-items: center;
}

/* The middot trails each step but the last, so a wrapped line ends on the
   separator and never opens with one. */
.preceda-next-steps__item:not(:last-child)::after {
  content: '·' / '';
  padding-inline: var(--preceda-space-2);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-body-family);
}

.preceda-next-steps__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--preceda-space-10);
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--preceda-color-binding-ink);
  background: transparent;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  text-align: start;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
  cursor: pointer;
  transition: text-decoration-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-next-steps__link:hover:not(:disabled):not([aria-disabled='true']) {
  text-decoration-color: currentColor;
}

.preceda-next-steps__link:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
  border-radius: var(--preceda-radius-small);
}

.preceda-next-steps__link:disabled,
.preceda-next-steps__link[aria-disabled='true'] {
  color: var(--preceda-color-ink-tertiary);
  text-decoration-line: none;
  cursor: not-allowed;
}

@media (width < 1024px) {
  .preceda-next-steps__link {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
    font-size: var(--preceda-type-reading-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-next-steps__link {
    transition-duration: 0s;
  }
}

/* ── memo-pointer ── */
/*
 * Memo pointer: one ruled line in the correspondence that opens a memorandum
 * on the desk. The memorandum is a document; it is never copied into the
 * letter. When it is already on the desk the line says so and offers the way
 * back to the current draft.
 */

.preceda-memo-pointer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--preceda-space-3);
  margin: 0;
  padding-block: var(--preceda-space-1);
  border-block: 1px solid var(--preceda-color-hairline);
}

.preceda-memo-pointer__open {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--preceda-space-3);
  min-inline-size: 0;
  min-block-size: var(--preceda-space-10);
  margin: 0;
  padding: var(--preceda-space-2) 0;
  border: 0;
  color: var(--preceda-color-ink);
  background: transparent;
  text-align: start;
  cursor: pointer;
  border-radius: var(--preceda-radius-small);
}

.preceda-memo-pointer__open:focus-visible,
.preceda-memo-pointer__back:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-memo-pointer__kind {
  flex: none;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  line-height: var(--preceda-type-label-leading);
  letter-spacing: var(--preceda-type-label-tracking);
  font-variant-caps: var(--preceda-type-label-caps);
}

.preceda-memo-pointer__title {
  min-inline-size: 0;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-memo-pointer__meta {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-variant-numeric: var(--preceda-type-small-numerals);
}

.preceda-memo-pointer__action {
  display: inline-flex;
  align-items: center;
  gap: var(--preceda-space-1);
  margin-inline-start: auto;
  color: var(--preceda-color-binding-ink);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  white-space: nowrap;
}

.preceda-memo-pointer__open:hover .preceda-memo-pointer__title {
  text-decoration-color: currentColor;
}

.preceda-memo-pointer__open[aria-pressed='true'] {
  cursor: default;
}

.preceda-memo-pointer__open[aria-pressed='true'] .preceda-memo-pointer__title {
  text-decoration-line: none;
}

.preceda-memo-pointer__open[aria-pressed='true'] .preceda-memo-pointer__action {
  color: var(--preceda-color-ink-secondary);
}

.preceda-memo-pointer__open:disabled {
  color: var(--preceda-color-ink-secondary);
  cursor: not-allowed;
}

.preceda-memo-pointer__open:disabled .preceda-memo-pointer__title {
  text-decoration-line: none;
}

.preceda-memo-pointer__open:disabled .preceda-memo-pointer__action {
  color: var(--preceda-color-ink-tertiary);
}

.preceda-memo-pointer__back {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--preceda-space-10);
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  color: var(--preceda-color-binding-ink);
  background: transparent;
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
  cursor: pointer;
  border-radius: var(--preceda-radius-small);
}

.preceda-memo-pointer__back:hover {
  text-decoration-color: currentColor;
}

@media (width < 1024px) {
  .preceda-memo-pointer__open,
  .preceda-memo-pointer__back {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

/* ── composer ── */
/*
 * Composer: a sheet with a hairline border on paper-raised. Placeholder
 * "Ask a question or instruct the associate…", a text attach affordance, and a small ink Send.
 * Attached files become one line ("Attached: FIR.pdf · Order 12 Aug.pdf"),
 * never pills. The whole composer is the drop target. `--dock` is the mobile
 * form: one line with Send inside the box.
 */

.preceda-composer {
  position: relative;
  color: var(--preceda-color-ink);
}

.preceda-composer__sheet {
  position: relative;
  border: 1px solid var(--preceda-color-rule);
  border-radius: var(--preceda-radius-small);
  background: var(--preceda-color-paper-raised);
  transition: border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-composer__sheet:hover {
  border-color: var(--preceda-color-rule-strong);
}

.preceda-composer__sheet:has(.preceda-composer__input:focus-visible) {
  border-color: var(--preceda-color-focus);
  outline: 1px solid var(--preceda-color-focus);
  outline-offset: 0;
}

.preceda-composer__input {
  display: block;
  inline-size: 100%;
  min-block-size: calc(var(--preceda-space-16) + var(--preceda-space-3));
  max-block-size: calc(var(--preceda-space-24) * 2);
  margin: 0;
  padding: var(--preceda-space-3) var(--preceda-space-4);
  border: 0;
  color: var(--preceda-color-ink);
  background: transparent;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  field-sizing: content;
  resize: none;
  outline: none;
}

.preceda-composer__input::placeholder {
  color: var(--preceda-color-ink-tertiary);
  opacity: 1;
}

.preceda-composer__input:disabled {
  color: var(--preceda-color-ink-secondary);
  cursor: not-allowed;
}

/* "Attached: FIR.pdf · Order 12 Aug.pdf" */
.preceda-composer__attached {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--preceda-space-2);
  margin: 0;
  padding: var(--preceda-space-2) var(--preceda-space-4) 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  font-variant-numeric: var(--preceda-type-small-numerals);
  list-style: none;
}

.preceda-composer__attached-label {
  color: var(--preceda-color-ink-secondary);
}

.preceda-composer__file {
  display: inline-flex;
  align-items: baseline;
  gap: var(--preceda-space-1);
}

.preceda-composer__file + .preceda-composer__file::before {
  content: '·' / '';
  margin-inline-end: var(--preceda-space-2);
  color: var(--preceda-color-ink-tertiary);
}

.preceda-composer__file-name {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--preceda-color-ink-secondary);
  background: transparent;
  font: inherit;
  text-align: start;
}

button.preceda-composer__file-name {
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-composer__file-state {
  color: var(--preceda-color-ink-tertiary);
}

.preceda-composer__file-state[data-tone='caution'] {
  color: var(--preceda-color-ink-secondary);
  font-style: italic;
}

.preceda-composer__notices {
  margin: 0;
  padding: var(--preceda-space-1) var(--preceda-space-4) 0;
  list-style: none;
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  color: var(--preceda-color-ink-secondary);
}

.preceda-composer__notice + .preceda-composer__notice {
  margin-block-start: var(--preceda-space-1);
}

.preceda-composer__notice-name {
  color: var(--preceda-color-ink);
}

.preceda-composer__file[data-status='error'] .preceda-composer__file-name,
.preceda-composer__file[data-status='error'] .preceda-composer__file-state {
  color: var(--preceda-color-error);
}

.preceda-composer__remove {
  position: relative;
  display: inline-grid;
  place-items: center;
  align-self: center;
  inline-size: var(--preceda-space-5);
  block-size: var(--preceda-space-5);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink-tertiary);
  background: transparent;
  cursor: pointer;
}

/* A 40px hit area around a quiet 20px mark. */
.preceda-composer__remove::after {
  content: '';
  position: absolute;
  inset: calc(var(--preceda-space-2) * -1);
}

.preceda-composer__remove:hover:not(:disabled) {
  color: var(--preceda-color-ink);
}

.preceda-composer__remove:disabled {
  color: var(--preceda-color-ink-disabled);
  cursor: not-allowed;
}

.preceda-composer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--preceda-space-4);
  margin-block-start: var(--preceda-space-2);
}

/* The attach affordance is text, set like a hint. */
.preceda-composer__attach {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--preceda-space-10);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  cursor: pointer;
  border-radius: var(--preceda-radius-small);
}

.preceda-composer__attach-verb {
  color: inherit;
}

.preceda-composer__attach:hover .preceda-composer__attach-verb {
  color: var(--preceda-color-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-composer__attach:has(input:focus-visible) {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-composer__attach[aria-disabled='true'] {
  cursor: not-allowed;
}

.preceda-composer__attach[aria-disabled='true'] .preceda-composer__attach-verb {
  color: var(--preceda-color-ink-tertiary);
  text-decoration-line: none;
}

.preceda-composer__file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Send: a small ink button; the only filled control in the column. */
.preceda-composer__send {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-inline-size: calc(var(--preceda-space-16) - var(--preceda-space-1));
  min-block-size: var(--preceda-space-10);
  margin: 0;
  margin-inline-start: auto;
  padding: var(--preceda-space-1) var(--preceda-space-4);
  border: 1px solid var(--preceda-color-ink);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-paper);
  background: var(--preceda-color-ink);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
  cursor: pointer;
  transition:
    color var(--preceda-duration-fast) var(--preceda-ease-standard),
    background-color var(--preceda-duration-fast) var(--preceda-ease-standard),
    border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-composer__send:hover:not(:disabled) {
  border-color: var(--preceda-color-ink-secondary);
  background: var(--preceda-color-ink-secondary);
}

.preceda-composer__send:active:not(:disabled) {
  border-color: var(--preceda-color-ink);
  background: var(--preceda-color-ink);
}

.preceda-composer__send:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

/*
 * Guarded (nothing to send yet): the button keeps its ink so the column reads
 * as the plate does; it simply does nothing. A composer that is disabled
 * outright (a closed matter) rules the button out instead.
 */
.preceda-composer__send:disabled {
  cursor: not-allowed;
}

.preceda-composer[data-state='disabled'] .preceda-composer__send:disabled,
.preceda-composer__send[aria-busy='true']:disabled {
  border-color: var(--preceda-color-rule);
  color: var(--preceda-color-ink-tertiary);
  background: transparent;
}

.preceda-composer__send[aria-busy='true'] {
  cursor: progress;
}

.preceda-composer__error {
  margin: var(--preceda-space-2) 0 0;
  color: var(--preceda-color-error);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

/* Drop target: the whole composer; a ruled overlay while a file is held over it. */
.preceda-composer__drop {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  border: 1px dashed var(--preceda-color-binding);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-binding-ink);
  background: var(--preceda-color-paper-raised);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  pointer-events: none;
}

.preceda-composer[data-dragging='true'] .preceda-composer__drop {
  display: grid;
}

/* ── Dock: the mobile composer line ── */

.preceda-composer--dock .preceda-composer__sheet {
  display: flex;
  align-items: flex-end;
  gap: var(--preceda-space-2);
  padding: var(--preceda-space-1);
}

.preceda-composer--dock .preceda-composer__field {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.preceda-composer--dock .preceda-composer__input {
  min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  max-block-size: calc(var(--preceda-space-24) + var(--preceda-space-8));
  padding: var(--preceda-space-2) var(--preceda-space-3);
  font-size: var(--preceda-type-reading-size);
  line-height: var(--preceda-type-reading-leading);
}

.preceda-composer--dock .preceda-composer__attached {
  padding-inline: var(--preceda-space-3);
}

.preceda-composer--dock .preceda-composer__send {
  min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  font-size: var(--preceda-type-body-size);
}

.preceda-composer--dock .preceda-composer__row {
  margin-block-start: 0;
}

@media (width < 1024px) {
  .preceda-composer__send,
  .preceda-composer__attach {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }

  .preceda-composer__remove::after {
    inset: calc(var(--preceda-space-3) * -1);
  }

  .preceda-composer__input {
    font-size: var(--preceda-type-reading-size);
    line-height: var(--preceda-type-reading-leading);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-composer__sheet,
  .preceda-composer__send {
    transition-duration: 0s;
  }
}

/* ── site-masthead ── */
/*
 * Site masthead: the front page of the reporter. T2's masthead lockup with
 * the place of publication at right, then a dateline between an ink rule and
 * a hairline: date · one small-caps line · volume and number. No navigation
 * bar, no theme switch; marketing is Paper (Lamp still resolves by tokens).
 */

.preceda-site-masthead {
  color: var(--preceda-color-ink);
}

.preceda-site-masthead__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--preceda-space-2) var(--preceda-space-6);
  padding-block: var(--preceda-space-2) var(--preceda-space-3);
}

/* The link is T2's masthead lockup (.preceda-lockup--masthead): it owns the
   type size, the seal size and the gap. */
.preceda-site-masthead__word {
  margin: 0;
  color: var(--preceda-color-ink);
  text-decoration: none;
}

.preceda-site-masthead__word:focus-visible,
.preceda-site-masthead__link:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-space-1);
  border-radius: var(--preceda-radius-small);
}

.preceda-site-masthead__place {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-folio-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-folio-leading);
  font-variant-numeric: var(--preceda-type-folio-numerals);
}

.preceda-site-masthead__link {
  color: var(--preceda-color-binding-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-site-masthead__link:hover {
  text-decoration-color: currentColor;
}

.preceda-site-masthead__dateline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: var(--preceda-space-4);
  margin: 0;
  padding-block: var(--preceda-space-2);
  border-block-start: 1px solid var(--preceda-color-ink);
  border-block-end: 1px solid var(--preceda-color-rule);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-folio-family);
  font-size: var(--preceda-type-folio-size);
  line-height: var(--preceda-type-folio-leading);
  font-variant-numeric: var(--preceda-type-folio-numerals);
}

.preceda-site-masthead__dateline > :last-child {
  text-align: end;
}

.preceda-site-masthead__line {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  letter-spacing: var(--preceda-type-label-tracking);
  font-variant-caps: var(--preceda-type-label-caps);
  text-align: center;
}

@media (width < 640px) {
  .preceda-site-masthead__word {
    --preceda-lockup-size: var(--preceda-type-size-30);
  }

  .preceda-site-masthead__place {
    font-size: var(--preceda-type-folio-size);
  }

  .preceda-site-masthead__dateline {
    grid-template-columns: 1fr auto;
    row-gap: var(--preceda-space-1);
  }

  .preceda-site-masthead__line {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: start;
  }
}

/*
 * The same thresholds as container queries, so the block also adapts inside a
 * narrower container (a catalogue frame, a column) that declares
 * container-type: inline-size. Without such an ancestor these never match.
 */
@container (width < 640px) {
  .preceda-site-masthead__word {
    --preceda-lockup-size: var(--preceda-type-size-30);
  }

  .preceda-site-masthead__place {
    font-size: var(--preceda-type-folio-size);
  }

  .preceda-site-masthead__dateline {
    grid-template-columns: 1fr auto;
    row-gap: var(--preceda-space-1);
  }

  .preceda-site-masthead__line {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: start;
  }
}

/* ── section-head ── */
/*
 * Section head: the folio line that opens a section of the front page or the
 * catalogue — "01 · Foundations" in small caps on an ink rule — with an
 * optional serif title and standfirst. `.preceda-acts` (three numbered acts)
 * and `.preceda-columns` (two ruled columns) are the bodies that follow it.
 */

.preceda-section-head {
  margin: 0;
  padding-block-start: var(--preceda-space-6);
  border-block-start: 1px solid var(--preceda-color-ink);
  color: var(--preceda-color-ink);
}

.preceda-section-head__kicker {
  display: flex;
  align-items: baseline;
  gap: var(--preceda-space-2);
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-label-leading);
  letter-spacing: var(--preceda-type-label-tracking);
  font-variant-caps: var(--preceda-type-label-caps);
}

.preceda-section-head__folio {
  color: var(--preceda-color-binding-ink);
  font-variant-numeric: var(--preceda-numerals-tabular);
}

.preceda-section-head__title {
  max-inline-size: 24ch;
  margin: var(--preceda-space-4) 0 0;
  font-family: var(--preceda-type-title-family);
  font-size: var(--preceda-type-title-size);
  font-weight: var(--preceda-type-title-weight);
  line-height: var(--preceda-type-title-leading);
  letter-spacing: var(--preceda-type-title-tracking);
}

.preceda-section-head__standfirst {
  max-inline-size: var(--preceda-measure-reading);
  margin: var(--preceda-space-3) 0 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-reading-family);
  font-size: var(--preceda-type-reading-size);
  line-height: var(--preceda-type-reading-leading);
}

.preceda-section-head--quiet {
  border-block-start-color: var(--preceda-color-rule);
}

/* Three acts: "How a matter is worked". */
.preceda-acts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--preceda-space-6) var(--preceda-space-10);
  margin: var(--preceda-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.preceda-acts__act {
  padding-block-start: var(--preceda-space-4);
  border-block-start: 1px solid var(--preceda-color-rule);
}

.preceda-acts__number {
  display: block;
  margin-block-end: var(--preceda-space-2);
  color: var(--preceda-color-binding-ink);
  font-family: var(--preceda-font-serif);
  font-size: var(--preceda-type-ui-size);
  letter-spacing: var(--preceda-type-label-tracking);
  font-variant-numeric: var(--preceda-numerals-lining);
}

.preceda-acts__title {
  margin: 0 0 var(--preceda-space-2);
  font-family: var(--preceda-type-subheading-family);
  font-size: var(--preceda-type-subheading-size);
  font-weight: var(--preceda-type-subheading-weight);
  line-height: var(--preceda-type-subheading-leading);
}

.preceda-acts__body {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

/* Two ruled columns: "Terms of admission" · "What a member receives". */
.preceda-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 0 var(--preceda-space-10);
  margin: var(--preceda-space-10) 0 0;
  padding-block-start: var(--preceda-space-6);
  border-block-start: 1px solid var(--preceda-color-ink);
}

.preceda-columns__rule {
  background: var(--preceda-color-rule);
}

.preceda-columns__title {
  margin: 0 0 var(--preceda-space-3);
  font-family: var(--preceda-type-subheading-family);
  font-size: var(--preceda-type-subheading-size);
  font-weight: var(--preceda-type-subheading-weight);
  line-height: var(--preceda-type-subheading-leading);
}

.preceda-columns ul,
.preceda-columns p {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-columns ul {
  padding-inline-start: var(--preceda-space-5);
}

.preceda-columns li + li {
  margin-block-start: var(--preceda-space-1);
}

@media (width < 1024px) {
  .preceda-acts {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .preceda-columns__rule {
    display: none;
  }

  .preceda-columns > * + * {
    padding-block-start: var(--preceda-space-6);
    border-block-start: 1px solid var(--preceda-color-rule);
  }

  .preceda-columns > .preceda-columns__rule + * {
    padding-block-start: 0;
    border-block-start: 0;
  }
}

@media (width < 640px) {
  .preceda-section-head__title {
    font-size: var(--preceda-type-heading-size);
  }
}

/*
 * The same thresholds as container queries, so the block also adapts inside a
 * narrower container (a catalogue frame, a column) that declares
 * container-type: inline-size. Without such an ancestor these never match.
 */
@container (width < 1024px) {
  .preceda-acts {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .preceda-columns__rule {
    display: none;
  }

  .preceda-columns > * + * {
    padding-block-start: var(--preceda-space-6);
    border-block-start: 1px solid var(--preceda-color-rule);
  }

  .preceda-columns > .preceda-columns__rule + * {
    padding-block-start: 0;
    border-block-start: 0;
  }
}

@container (width < 640px) {
  .preceda-section-head__title {
    font-size: var(--preceda-type-heading-size);
  }
}

/* ── hero ── */
/*
 * Hero: the lead column of the front page. One display headline (the
 * promise), a standfirst in the serif, and the admission acts. With
 * `--with-aside` it becomes the two-column front: lead, a vertical rule, and
 * an aside (the edition card). Zero motion; the headline never types itself.
 */

.preceda-hero {
  color: var(--preceda-color-ink);
}

.preceda-hero--with-aside {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 1px minmax(0, 1fr);
  gap: 0 var(--preceda-space-10);
}

.preceda-hero__rule {
  background: var(--preceda-color-rule);
}

.preceda-hero__lead {
  min-inline-size: 0;
}

.preceda-hero__kicker {
  margin: 0 0 var(--preceda-space-4);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  letter-spacing: var(--preceda-type-label-tracking);
  font-variant-caps: var(--preceda-type-label-caps);
}

.preceda-hero__headline {
  max-inline-size: 16ch;
  margin: 0 0 var(--preceda-space-6);
  font-family: var(--preceda-type-display-family);
  font-size: var(--preceda-type-display-size);
  font-weight: var(--preceda-type-display-weight);
  line-height: var(--preceda-type-display-leading);
  letter-spacing: var(--preceda-type-display-tracking);
  font-optical-sizing: auto;
  text-wrap: balance;
}

.preceda-hero__headline em {
  color: var(--preceda-color-binding-ink);
  font-style: italic;
}

.preceda-hero__standfirst {
  max-inline-size: 40ch;
  margin: 0 0 var(--preceda-space-8);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-subheading-family);
  font-size: var(--preceda-type-subheading-size);
  line-height: var(--preceda-type-subheading-leading);
  text-wrap: pretty;
}

.preceda-hero__aside {
  min-inline-size: 0;
}

@media (width < 1024px) {
  .preceda-hero--with-aside {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--preceda-space-10);
  }

  .preceda-hero__rule {
    display: none;
  }
}

@media (width < 640px) {
  .preceda-hero__headline {
    font-size: var(--preceda-type-size-40);
  }

  .preceda-hero__standfirst {
    font-size: var(--preceda-type-reading-size);
    line-height: var(--preceda-type-reading-leading);
  }
}

/*
 * The same thresholds as container queries, so the block also adapts inside a
 * narrower container (a catalogue frame, a column) that declares
 * container-type: inline-size. Without such an ancestor these never match.
 */
@container (width < 1024px) {
  .preceda-hero--with-aside {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--preceda-space-10);
  }

  .preceda-hero__rule {
    display: none;
  }
}

@container (width < 640px) {
  .preceda-hero__headline {
    font-size: var(--preceda-type-size-40);
  }

  .preceda-hero__standfirst {
    font-size: var(--preceda-type-reading-size);
    line-height: var(--preceda-type-reading-leading);
  }
}

/* ── edition ── */
/*
 * Edition card: "In this edition" — a short ruled list of what the edition
 * holds. An ink rule under the small-caps head, hairlines between items, a
 * serif title and one or two lines in ink-2. `__number` carries an edition or
 * invitation number, set in gilt-ink (gilt admits; it never operates).
 */

.preceda-edition {
  margin: 0;
  color: var(--preceda-color-ink);
}

.preceda-edition__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-3);
  margin: 0;
  padding-block-end: var(--preceda-space-3);
  border-block-end: 1px solid var(--preceda-color-ink);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-label-leading);
  letter-spacing: var(--preceda-type-label-tracking);
  font-variant-caps: var(--preceda-type-label-caps);
}

.preceda-edition__number {
  color: var(--preceda-color-gilt-ink);
  font-family: var(--preceda-type-folio-family);
  font-size: var(--preceda-type-folio-size);
  letter-spacing: 0;
  font-variant-caps: normal;
  font-variant-numeric: var(--preceda-numerals-tabular);
}

.preceda-edition__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.preceda-edition__item {
  padding-block: var(--preceda-space-4) var(--preceda-space-5);
  border-block-end: 1px solid var(--preceda-color-hairline);
}

.preceda-edition__item:last-child {
  border-block-end: 0;
}

.preceda-edition__title {
  margin: 0 0 var(--preceda-space-2);
  font-family: var(--preceda-type-reading-family);
  font-size: var(--preceda-type-reading-size);
  font-weight: 400;
  line-height: var(--preceda-type-heading-leading);
}

.preceda-edition__title a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-edition__title a:hover {
  text-decoration-color: currentColor;
}

.preceda-edition__title a:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
  border-radius: var(--preceda-radius-small);
}

.preceda-edition__body {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

/* A standalone card (for example on a sunken band) gets the raised sheet. */
.preceda-edition--card {
  padding: var(--preceda-space-6);
  border: 1px solid var(--preceda-color-rule);
  border-radius: var(--preceda-radius-small);
  background: var(--preceda-color-paper-raised);
}

/* ── admission ── */
/*
 * Admission: one binding act (`__primary`) and one quiet link (`__link`),
 * and the request form. Which act binds is the page's choice: while the
 * edition is forthcoming the front page binds "Request an introduction" and
 * keeps "Members sign in" quiet (D-021). The form claims nothing the flow
 * does not do: it enters a request, it does not admit.
 * States: default, invalid, submitting (`aria-busy`), received, failed.
 * A received request that carries its number is set as an entry
 * (`__received--entry`), the number in gilt ink (`__number`).
 */

.preceda-admission {
  color: var(--preceda-color-ink);
}

.preceda-admission__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--preceda-space-3) var(--preceda-space-8);
}

.preceda-admission__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--preceda-space-10);
  margin: 0;
  padding: var(--preceda-space-2) var(--preceda-space-5);
  border: 1px solid var(--preceda-color-binding);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-action-ink);
  background: var(--preceda-color-binding);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-ui-leading);
  letter-spacing: var(--preceda-type-small-tracking);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--preceda-duration-fast) var(--preceda-ease-standard),
    border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-admission__primary:hover:not(:disabled) {
  border-color: var(--preceda-color-binding-hover);
  background: var(--preceda-color-binding-hover);
}

.preceda-admission__primary:disabled {
  border-color: var(--preceda-color-rule);
  color: var(--preceda-color-ink-tertiary);
  background: transparent;
  cursor: not-allowed;
}

.preceda-admission__primary[aria-busy='true'] {
  cursor: progress;
}

.preceda-admission__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--preceda-space-10);
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--preceda-color-binding-ink);
  background: transparent;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
  cursor: pointer;
}

.preceda-admission__link:hover {
  text-decoration-color: currentColor;
}

.preceda-admission__primary:focus-visible,
.preceda-admission__link:focus-visible,
.preceda-admission__input:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-admission__form {
  max-inline-size: calc(var(--preceda-space-24) * 5);
  margin: var(--preceda-space-8) 0 0;
  padding-block-start: var(--preceda-space-5);
  border-block-start: 1px solid var(--preceda-color-rule);
}

.preceda-admission__form-title {
  margin: 0 0 var(--preceda-space-1);
  font-family: var(--preceda-type-subheading-family);
  font-size: var(--preceda-type-subheading-size);
  font-weight: var(--preceda-type-subheading-weight);
  line-height: var(--preceda-type-subheading-leading);
}

.preceda-admission__lede {
  margin: 0 0 var(--preceda-space-4);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-admission__label {
  display: block;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-admission__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--preceda-space-3) var(--preceda-space-5);
}

.preceda-admission__field {
  flex: 1 1 calc(var(--preceda-space-24) * 2);
  min-inline-size: 0;
}

.preceda-admission__input {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--preceda-space-10);
  margin: 0;
  padding: var(--preceda-space-2) 0;
  border: 0;
  border-block-end: 1px solid var(--preceda-color-rule-strong);
  border-radius: 0;
  color: var(--preceda-color-ink);
  background: transparent;
  font-family: var(--preceda-type-reading-family);
  font-size: var(--preceda-type-reading-size);
  line-height: var(--preceda-type-reading-leading);
  appearance: none;
}

.preceda-admission__input::placeholder {
  color: var(--preceda-color-ink-tertiary);
  opacity: 1;
}

.preceda-admission__input[aria-invalid='true'] {
  border-block-end-color: var(--preceda-color-error);
}

.preceda-admission__input:disabled {
  color: var(--preceda-color-ink-secondary);
  border-block-end-style: dotted;
}

.preceda-admission__help,
.preceda-admission__error,
.preceda-admission__received {
  margin: var(--preceda-space-2) 0 0;
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-admission__help {
  color: var(--preceda-color-ink-tertiary);
}

.preceda-admission__error {
  color: var(--preceda-color-error);
}

.preceda-admission__received {
  padding-block-start: var(--preceda-space-3);
  border-block-start: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

/* "(optional)" after a field label. */
.preceda-admission__optional {
  color: var(--preceda-color-ink-tertiary);
}

/* One line under the acts: the terms of the edition, small. */
.preceda-admission__note {
  margin: var(--preceda-space-4) 0 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

/* Fields stack under the lede; the last row holds the binding act. */
.preceda-admission__row + .preceda-admission__row {
  margin-block-start: var(--preceda-space-4);
}

/* The entry: "Request No. 0017 is entered." in the serif, as a register line. */
.preceda-admission__received--entry {
  padding-block-start: var(--preceda-space-4);
  border-block-start-color: var(--preceda-color-ink);
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-subheading-family);
  font-size: var(--preceda-type-subheading-size);
  line-height: var(--preceda-type-subheading-leading);
}

.preceda-admission__received--entry:empty {
  display: none;
}

/* What follows the entry ("A letter from Chambers is on its way."), on its own line. */
.preceda-admission__entry-note {
  display: block;
  margin-block-start: var(--preceda-space-1);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-admission__number {
  color: var(--preceda-color-gilt-ink);
  font-variant-numeric: var(--preceda-numerals-tabular);
  white-space: nowrap;
}

.preceda-admission[data-state='received'] .preceda-admission__row {
  display: none;
}

@media (width < 1024px) {
  .preceda-admission__primary,
  .preceda-admission__link,
  .preceda-admission__input {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-admission__primary {
    transition-duration: 0s;
  }
}

/*
 * The same thresholds as container queries, so the block also adapts inside a
 * narrower container (a catalogue frame, a column) that declares
 * container-type: inline-size. Without such an ancestor these never match.
 */
@container (width < 1024px) {
  .preceda-admission__primary,
  .preceda-admission__link,
  .preceda-admission__input {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

/* ── site-footer ── */
/*
 * Site footer: one ruled line of three parts — place of publication, the
 * colophon / terms / privacy links, and the legal line. The legal entity
 * appears here at most once (D-011).
 */

.preceda-site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: var(--preceda-space-3) var(--preceda-space-6);
  margin: 0;
  padding-block: var(--preceda-space-4) var(--preceda-space-6);
  border-block-start: 1px solid var(--preceda-color-rule);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-folio-family);
  font-size: var(--preceda-type-folio-size);
  line-height: var(--preceda-type-folio-leading);
}

.preceda-site-footer > * {
  margin: 0;
}

.preceda-site-footer__legal {
  text-align: end;
}

.preceda-site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preceda-site-footer__links li + li::before {
  content: '·' / '';
  padding-inline: var(--preceda-space-2);
}

.preceda-site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--preceda-space-10);
  color: var(--preceda-color-ink-secondary);
  text-decoration-line: none;
}

.preceda-site-footer__links a:hover {
  color: var(--preceda-color-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-site-footer__links a:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
  border-radius: var(--preceda-radius-small);
}

.preceda-site-footer__links a[aria-current='page'] {
  color: var(--preceda-color-ink);
}

@media (width < 1024px) {
  .preceda-site-footer {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .preceda-site-footer__legal {
    text-align: center;
  }

  .preceda-site-footer__links a {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

/*
 * The same thresholds as container queries, so the block also adapts inside a
 * narrower container (a catalogue frame, a column) that declares
 * container-type: inline-size. Without such an ancestor these never match.
 */
@container (width < 1024px) {
  .preceda-site-footer {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .preceda-site-footer__legal {
    text-align: center;
  }

  .preceda-site-footer__links a {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

/* ── colophon ── */
/*
 * Colophon: how the edition is made, set at the end of a page or on
 * /colophon. A hairline, the small-caps word "Colophon", then short paragraphs
 * in the serif: type, corpus, verification, publisher. The legal entity is
 * named once, in `__entity`.
 */

.preceda-colophon {
  max-inline-size: var(--preceda-measure-reading);
  margin: 0;
  padding-block-start: var(--preceda-space-5);
  border-block-start: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-secondary);
}

.preceda-colophon__head {
  display: flex;
  align-items: center;
  gap: var(--preceda-space-3);
  margin: 0 0 var(--preceda-space-3);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  line-height: var(--preceda-type-label-leading);
  letter-spacing: var(--preceda-type-label-tracking);
  font-variant-caps: var(--preceda-type-label-caps);
}

.preceda-colophon__seal {
  flex: none;
  color: var(--preceda-color-gilt);
}

.preceda-colophon__body > * {
  margin: 0;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-colophon__body > * + * {
  margin-block-start: var(--preceda-space-3);
}

.preceda-colophon__body em {
  color: var(--preceda-color-ink);
}

.preceda-colophon__body code,
.preceda-colophon__mono {
  font-family: var(--preceda-type-citation-family);
  font-size: var(--preceda-type-citation-size);
  font-variant-numeric: var(--preceda-type-citation-numerals);
}

.preceda-colophon__entity {
  margin: var(--preceda-space-4) 0 0;
  padding-block-start: var(--preceda-space-3);
  border-block-start: 1px solid var(--preceda-color-hairline);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-folio-family);
  font-size: var(--preceda-type-folio-size);
  line-height: var(--preceda-type-folio-leading);
}

.preceda-colophon--centered {
  margin-inline: auto;
  text-align: center;
}

.preceda-colophon--centered .preceda-colophon__head {
  justify-content: center;
}

/* ── select ── */
/*
 * Select: the native control, drawn as a ruled field with one chevron. The
 * platform keeps the list (and its accessibility); the package owns the face.
 */

.preceda-select {
  position: relative;
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.preceda-select__control {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--preceda-space-10);
  padding-block: var(--preceda-space-2);
  padding-inline: var(--preceda-space-3) var(--preceda-space-10);
  border: 1px solid var(--preceda-color-rule-strong);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-raised);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-select__control:hover:not(:disabled) {
  border-color: var(--preceda-color-ink-tertiary);
}

.preceda-select__control:focus-visible {
  border-color: var(--preceda-color-ink);
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-select__control[aria-invalid='true'] {
  border-color: var(--preceda-color-error);
}

.preceda-select__control:disabled {
  border-color: var(--preceda-color-rule);
  color: var(--preceda-color-ink-tertiary);
  background: var(--preceda-color-paper-sunken);
  cursor: not-allowed;
}

.preceda-select__control option {
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-raised);
}

.preceda-select__chevron {
  position: absolute;
  inset-inline-end: var(--preceda-space-3);
  color: var(--preceda-color-ink-secondary);
  pointer-events: none;
}

.preceda-select__control:disabled + .preceda-select__chevron {
  color: var(--preceda-color-ink-tertiary);
}

/* Quiet: a bare word and chevron in running chrome ("Sort: Relevance ▾", "Desk ▾"). */
.preceda-select--quiet .preceda-select__control {
  min-block-size: var(--preceda-space-10);
  padding-inline-start: 0;
  border-color: transparent;
  background: transparent;
}

.preceda-select--quiet .preceda-select__control:hover:not(:disabled) {
  border-color: transparent;
  color: var(--preceda-color-binding-ink);
}

.preceda-select--quiet .preceda-select__chevron {
  inset-inline-end: var(--preceda-space-2);
}

@media (pointer: coarse) {
  .preceda-select__control {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
    /* iOS zooms any control set below 16px; the ui size is raised on touch. */
    font-size: var(--preceda-type-size-17);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-select__control {
    transition-duration: 0s;
  }
}

/* ── choice ── */
/*
 * Choice: checkbox and radio. The native input, redrawn as a printed box or
 * ring; the label is the hit area (at least 40px). Checked is a filled mark,
 * never colour alone: the box carries a tick, the ring a dot.
 */

.preceda-choice {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--preceda-space-3);
  align-items: start;
  min-block-size: var(--preceda-space-10);
  padding-block: var(--preceda-space-2);
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
  cursor: pointer;
}

.preceda-choice__label {
  grid-column: 2;
}

.preceda-choice__hint {
  grid-column: 2;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-choice__input {
  position: relative;
  display: grid;
  place-content: center;
  box-sizing: border-box;
  inline-size: var(--preceda-space-4);
  block-size: var(--preceda-space-4);
  /* Optically centre the box on the first line of the label. */
  margin: calc((var(--preceda-type-ui-size) * var(--preceda-type-ui-leading) - var(--preceda-space-4)) / 2) 0 0;
  border: 1px solid var(--preceda-color-ink-secondary);
  border-radius: var(--preceda-radius-small);
  background: var(--preceda-color-paper-raised);
  appearance: none;
  cursor: inherit;
  transition:
    background-color var(--preceda-duration-fast) var(--preceda-ease-standard),
    border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-choice__input[type='radio'] {
  border-radius: var(--preceda-radius-round);
}

/* The tick: two borders of a rotated box. */
.preceda-choice__input[type='checkbox']::after {
  box-sizing: border-box;
  inline-size: calc(var(--preceda-space-1) * 1.5);
  block-size: calc(var(--preceda-space-2) + var(--preceda-space-1) * 0.5);
  margin-block-start: calc(var(--preceda-space-1) * -0.5);
  border: solid var(--preceda-color-action-ink);
  border-width: 0 1px 1px 0;
  rotate: 45deg;
  content: '';
  opacity: 0;
}

.preceda-choice__input[type='radio']::after {
  inline-size: var(--preceda-space-2);
  block-size: var(--preceda-space-2);
  border-radius: var(--preceda-radius-round);
  background: var(--preceda-color-action-ink);
  content: '';
  opacity: 0;
}

.preceda-choice__input:checked,
.preceda-choice__input:indeterminate {
  border-color: var(--preceda-color-binding);
  background: var(--preceda-color-binding);
}

.preceda-choice__input:checked::after {
  opacity: 1;
}

/* Indeterminate: a dash, for "some of these". */
.preceda-choice__input[type='checkbox']:indeterminate::after {
  inline-size: var(--preceda-space-2);
  block-size: 0;
  margin: 0;
  border-width: 0 0 1px;
  rotate: none;
  opacity: 1;
}

.preceda-choice:hover .preceda-choice__input:not(:disabled):not(:checked):not(:indeterminate) {
  border-color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-hover);
}

.preceda-choice__input:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-choice__input[aria-invalid='true']:not(:checked) {
  border-color: var(--preceda-color-error);
}

.preceda-choice:has(.preceda-choice__input:disabled) {
  color: var(--preceda-color-ink-tertiary);
  cursor: not-allowed;
}

.preceda-choice__input:disabled {
  border-color: var(--preceda-color-rule-strong);
  background: var(--preceda-color-paper-sunken);
}

.preceda-choice__input:disabled:checked,
.preceda-choice__input:disabled:indeterminate {
  border-color: var(--preceda-color-ink-tertiary);
  background: var(--preceda-color-ink-tertiary);
}

/* A set of choices under one legend. */
.preceda-choice-group {
  display: grid;
  gap: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.preceda-choice-group__legend {
  margin-block-end: var(--preceda-space-1);
  padding: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-choice-group--inline {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--preceda-space-6);
}

.preceda-choice-group--inline > .preceda-choice-group__legend {
  flex-basis: 100%;
}

.preceda-choice-group .preceda-field-error {
  margin: var(--preceda-space-1) 0 0;
  font-size: var(--preceda-type-small-size);
}

@media (pointer: coarse) {
  .preceda-choice {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
    padding-block: var(--preceda-space-3);
  }

  .preceda-choice__input {
    inline-size: var(--preceda-space-5);
    block-size: var(--preceda-space-5);
    margin-block-start: calc((var(--preceda-type-ui-size) * var(--preceda-type-ui-leading) - var(--preceda-space-5)) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-choice__input {
    transition-duration: 0s;
  }
}

/* ── switch ── */
/*
 * Switch: an immediate on/off setting (not a form choice to be submitted).
 * A ruled track with a square thumb; on fills the track in binding and moves
 * the thumb, and the state word ("On" / "Off") says it in text as well.
 */

.preceda-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--preceda-space-3);
  min-block-size: var(--preceda-space-10);
  padding: 0;
  border: 0;
  color: var(--preceda-color-ink);
  background: transparent;
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
  text-align: start;
  cursor: pointer;
}

.preceda-switch__track {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  inline-size: var(--preceda-space-8);
  block-size: var(--preceda-space-4);
  border: 1px solid var(--preceda-color-ink-secondary);
  border-radius: var(--preceda-radius-small);
  background: var(--preceda-color-paper-sunken);
  transition:
    background-color var(--preceda-duration-fast) var(--preceda-ease-standard),
    border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-switch__thumb {
  position: absolute;
  inset-block: 1px;
  inset-inline-start: 1px;
  inline-size: var(--preceda-space-3);
  border-radius: var(--preceda-radius-small);
  background: var(--preceda-color-ink-secondary);
  transition:
    translate var(--preceda-duration-normal) var(--preceda-ease-standard),
    background-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-switch[aria-checked='true'] .preceda-switch__track {
  border-color: var(--preceda-color-binding);
  background: var(--preceda-color-binding);
}

.preceda-switch[aria-checked='true'] .preceda-switch__thumb {
  background: var(--preceda-color-action-ink);
  translate: var(--preceda-space-4) 0;
}

.preceda-switch__text {
  display: grid;
}

/* Row: a settings line; the label takes the measure, the track sits at the end. */
.preceda-switch--row {
  display: flex;
  inline-size: 100%;
  padding-block: var(--preceda-space-2);
  border-block-end: 1px solid var(--preceda-color-hairline);
}

.preceda-switch--row .preceda-switch__text {
  flex: 1;
}

.preceda-switch__hint {
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-switch__state {
  min-inline-size: var(--preceda-space-6);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-variant-numeric: var(--preceda-numerals-tabular);
}

.preceda-switch:hover:not(:disabled) .preceda-switch__track {
  border-color: var(--preceda-color-ink);
}

.preceda-switch[aria-checked='true']:hover:not(:disabled) .preceda-switch__track {
  border-color: var(--preceda-color-binding-hover);
  background: var(--preceda-color-binding-hover);
}

.preceda-switch:focus-visible {
  outline: none;
}

.preceda-switch:focus-visible .preceda-switch__track {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-switch:disabled {
  color: var(--preceda-color-ink-tertiary);
  cursor: not-allowed;
}

.preceda-switch:disabled .preceda-switch__track {
  border-color: var(--preceda-color-rule-strong);
  background: var(--preceda-color-paper-sunken);
}

.preceda-switch:disabled .preceda-switch__thumb {
  background: var(--preceda-color-rule-strong);
}

@media (pointer: coarse) {
  .preceda-switch {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-switch__track,
  .preceda-switch__thumb {
    transition-duration: 0s;
  }
}

/* ── combobox ── */
/*
 * Combobox: a text field with a list of suggestions (WAI-ARIA 1.2, list
 * autocomplete). The list hangs from the field on a raised sheet; the active
 * option carries a binding rule at its start edge as well as the hover wash.
 * Loading replaces the chevron with the working point.
 */

.preceda-combobox {
  position: relative;
  min-inline-size: 0;
}

.preceda-combobox__anchor {
  position: relative;
  display: flex;
  align-items: center;
}

.preceda-combobox .preceda-field {
  padding-inline-end: var(--preceda-space-10);
}

.preceda-combobox__indicator {
  position: absolute;
  inset-inline-end: var(--preceda-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--preceda-icon-size-16);
  color: var(--preceda-color-ink-tertiary);
  pointer-events: none;
}

.preceda-combobox[data-open='true'] .preceda-combobox__indicator .preceda-icon {
  rotate: 180deg;
}

.preceda-combobox__working {
  inline-size: var(--preceda-space-1);
  block-size: var(--preceda-space-1);
  background: var(--preceda-color-binding);
  animation: preceda-combobox-working calc(var(--preceda-duration-slow) * 4) var(--preceda-ease-standard) infinite alternate;
}

@keyframes preceda-combobox-working {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.25;
  }
}

.preceda-combobox__listbox {
  position: absolute;
  inset-block-start: calc(100% + var(--preceda-space-1));
  inset-inline: 0;
  z-index: var(--preceda-layer-popover);
  box-sizing: border-box;
  max-block-size: calc(var(--preceda-space-24) * 2.5);
  margin: 0;
  padding: var(--preceda-space-1) 0;
  overflow-y: auto;
  border: 1px solid var(--preceda-color-rule-strong);
  border-radius: var(--preceda-radius-small);
  background: var(--preceda-color-paper-raised);
  box-shadow: var(--preceda-shadow-sheet);
  list-style: none;
  overscroll-behavior: contain;
}

/* The documentation form: the list in flow, so a static page can show it. */
.preceda-combobox--static .preceda-combobox__listbox {
  position: static;
  margin-block-start: var(--preceda-space-1);
}

.preceda-combobox__option {
  position: relative;
  display: grid;
  gap: var(--preceda-space-0);
  min-block-size: var(--preceda-space-10);
  padding: var(--preceda-space-2) var(--preceda-space-8) var(--preceda-space-2) var(--preceda-space-4);
  align-content: center;
  color: var(--preceda-color-ink);
  cursor: pointer;
}

.preceda-combobox__option + .preceda-combobox__option {
  border-block-start: 1px solid var(--preceda-color-hairline);
}

.preceda-combobox__option::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: calc(var(--preceda-space-1) / 2);
  background: transparent;
  content: '';
}

.preceda-combobox__option:hover {
  background: var(--preceda-color-paper-hover);
}

.preceda-combobox__option[aria-selected='true'] {
  background: var(--preceda-color-paper-hover);
}

.preceda-combobox__option[aria-selected='true']::before {
  background: var(--preceda-color-binding);
}

.preceda-combobox__option[aria-disabled='true'] {
  color: var(--preceda-color-ink-tertiary);
  cursor: not-allowed;
}

.preceda-combobox__option-label {
  overflow: hidden;
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preceda-combobox__option-label mark {
  color: inherit;
  background: transparent;
  font-weight: 600;
}

.preceda-combobox__option-meta {
  overflow: hidden;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preceda-combobox__check {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--preceda-space-3);
  color: var(--preceda-color-binding-ink);
  translate: 0 -50%;
}

.preceda-combobox__message {
  display: flex;
  align-items: center;
  gap: var(--preceda-space-2);
  min-block-size: var(--preceda-space-10);
  padding: var(--preceda-space-2) var(--preceda-space-4);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-combobox__live {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (pointer: coarse) {
  .preceda-combobox__option {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

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

/* ── file-attach ── */
/*
 * File attach: the text act "Attach" with its hint, the attached line
 * ("Attached: FIR.pdf · Order 12 Aug.pdf") and the dropzone. No pills: each
 * file is a name on a line, its state said in words (uploading, the reason it
 * failed), removable with a labelled cross.
 */

/* ── The act ── */
.preceda-file-attach {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--preceda-space-2);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
}

.preceda-file-attach__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--preceda-space-1);
  min-block-size: var(--preceda-space-10);
  padding: 0;
  border: 0;
  color: var(--preceda-color-ink-secondary);
  background: transparent;
  font: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
  cursor: pointer;
  transition: color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-file-attach__trigger:hover:not(:disabled) {
  color: var(--preceda-color-binding-ink);
  text-decoration-color: currentColor;
}

.preceda-file-attach__trigger:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-file-attach__trigger:disabled {
  color: var(--preceda-color-ink-tertiary);
  text-decoration-color: var(--preceda-color-rule);
  cursor: not-allowed;
}

.preceda-file-attach__hint::before {
  margin-inline-end: var(--preceda-space-2);
  content: '·';
}

/* ── The attached line ── */
.preceda-attached {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--preceda-space-2);
  margin: 0;
  padding: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  list-style: none;
}

.preceda-attached__label {
  color: var(--preceda-color-ink-tertiary);
}

.preceda-attached__label::after {
  content: ':';
}

.preceda-attached {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.preceda-attached__item {
  display: inline-flex;
  align-items: center;
  gap: var(--preceda-space-1);
  min-inline-size: 0;
  max-inline-size: 100%;
}

.preceda-attached__item > * {
  flex-shrink: 0;
}

.preceda-attached__item > .preceda-attached__name {
  flex-shrink: 1;
  min-inline-size: 0;
}

/* The middot trails its item, so a wrapped line ends on it rather than starting with it. */
.preceda-attached__item:not(:last-child)::after {
  color: var(--preceda-color-ink-tertiary);
  content: '·';
}

.preceda-attached__name {
  overflow: hidden;
  max-inline-size: calc(var(--preceda-space-24) * 2);
  color: var(--preceda-color-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.preceda-attached__name {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
  cursor: pointer;
}

button.preceda-attached__name:hover {
  color: var(--preceda-color-binding-ink);
  text-decoration-color: currentColor;
}

button.preceda-attached__name:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-attached__detail {
  color: var(--preceda-color-ink-tertiary);
  font-variant-numeric: var(--preceda-numerals-tabular);
  white-space: nowrap;
}

.preceda-attached__item[data-status='uploading'] .preceda-attached__name,
.preceda-attached__item[data-status='queued'] .preceda-attached__name {
  color: var(--preceda-color-ink-secondary);
}

.preceda-attached__working {
  flex-shrink: 0;
  inline-size: var(--preceda-space-1);
  block-size: var(--preceda-space-1);
  background: var(--preceda-color-binding);
  animation: preceda-attached-working calc(var(--preceda-duration-slow) * 4) var(--preceda-ease-standard) infinite alternate;
}

@keyframes preceda-attached-working {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.25;
  }
}

.preceda-attached__item[data-status='error'] .preceda-attached__name {
  color: var(--preceda-color-error);
}

.preceda-attached__error {
  color: var(--preceda-color-error);
}

.preceda-attached__error::before {
  content: '— ';
}

.preceda-attached__remove.preceda-button {
  color: var(--preceda-color-ink-tertiary);
}

.preceda-attached__remove.preceda-button:hover:not(:disabled):not([aria-disabled='true']) {
  color: var(--preceda-color-binding-ink);
}

/* ── Dropzone ── */
.preceda-dropzone {
  position: relative;
}

.preceda-dropzone__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--preceda-layer-sticky);
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--preceda-color-binding);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-binding-ink);
  background: color-mix(in srgb, var(--preceda-color-paper-raised) 94%, transparent);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  pointer-events: none;
}

.preceda-dropzone[data-dragging='true'] > .preceda-dropzone__overlay {
  display: flex;
}

/* Panel: a standing place to drop the file (matter creation, empty desk). */
.preceda-dropzone--panel {
  display: grid;
  justify-items: center;
  gap: var(--preceda-space-1);
  padding: var(--preceda-space-8) var(--preceda-space-6);
  border: 1px dashed var(--preceda-color-rule-strong);
  border-radius: var(--preceda-radius-small);
  text-align: center;
  transition:
    background-color var(--preceda-duration-fast) var(--preceda-ease-standard),
    border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-dropzone--panel[data-dragging='true'] {
  border-color: var(--preceda-color-binding);
  background: var(--preceda-color-binding-wash);
}

.preceda-dropzone--panel[data-dragging='true'] > .preceda-dropzone__overlay {
  display: none;
}

.preceda-dropzone__title {
  margin: 0;
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-dropzone--panel[data-dragging='true'] .preceda-dropzone__title {
  color: var(--preceda-color-binding-ink);
}

.preceda-dropzone--panel[aria-disabled='true'] {
  border-color: var(--preceda-color-rule);
  background: var(--preceda-color-paper-sunken);
}

@media (pointer: coarse) {
  .preceda-file-attach__trigger {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-file-attach__trigger,
  .preceda-dropzone--panel {
    transition-duration: 0s;
  }

  .preceda-attached__working {
    animation: none;
  }
}

/* ── inline-edit ── */
/*
 * Inline edit: a recorded value that counsel can correct in place. At rest it
 * reads as the record (label in small caps, value in the serif); under the
 * hand a rule and the edit glyph say it can change. Enter saves, Escape
 * restores, leaving the field saves. Saving and failure are said in words.
 */

.preceda-inline-edit {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--preceda-space-24) + var(--preceda-space-6))) minmax(0, 1fr);
  column-gap: var(--preceda-space-4);
  align-items: baseline;
  min-inline-size: 0;
}

.preceda-inline-edit__label {
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-label-family);
  font-size: var(--preceda-type-label-size);
  font-variant-caps: var(--preceda-type-label-caps);
  letter-spacing: var(--preceda-type-label-tracking);
  line-height: var(--preceda-type-label-leading);
}

.preceda-inline-edit__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--preceda-space-1);
  min-inline-size: 0;
}

.preceda-inline-edit__value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--preceda-space-2);
  inline-size: 100%;
  min-block-size: var(--preceda-space-10);
  margin: 0;
  padding: var(--preceda-space-2) 0;
  border: 0;
  border-block-end: 1px solid transparent;
  color: var(--preceda-color-ink);
  background: transparent;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  text-align: start;
  cursor: text;
  transition: border-color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-inline-edit__text {
  overflow: hidden;
  min-inline-size: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preceda-inline-edit__value[data-empty='true'] .preceda-inline-edit__text {
  color: var(--preceda-color-ink-tertiary);
  font-style: italic;
}

.preceda-inline-edit__glyph {
  flex-shrink: 0;
  color: var(--preceda-color-ink-tertiary);
  opacity: 0;
  transition: opacity var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-inline-edit__value:hover:not(:disabled) {
  border-block-end-color: var(--preceda-color-rule-strong);
}

.preceda-inline-edit__value:hover:not(:disabled) .preceda-inline-edit__glyph,
.preceda-inline-edit__value:focus-visible .preceda-inline-edit__glyph {
  opacity: 1;
}

.preceda-inline-edit__value:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-inline-edit__value:disabled {
  cursor: default;
}

.preceda-inline-edit__input.preceda-field {
  min-block-size: var(--preceda-space-10);
  padding-inline: 0;
  border-width: 0 0 1px;
  border-color: var(--preceda-color-ink);
  border-radius: 0;
  background: transparent;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-inline-edit__meta,
.preceda-inline-edit__status {
  margin: 0;
  overflow: hidden;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preceda-inline-edit__status {
  display: flex;
  align-items: center;
  gap: var(--preceda-space-2);
}

.preceda-inline-edit__status[data-tone='error'] {
  color: var(--preceda-color-error);
  white-space: normal;
}

.preceda-inline-edit__working {
  flex-shrink: 0;
  inline-size: var(--preceda-space-1);
  block-size: var(--preceda-space-1);
  background: var(--preceda-color-binding);
  animation: preceda-inline-edit-working calc(var(--preceda-duration-slow) * 4) var(--preceda-ease-standard) infinite alternate;
}

@keyframes preceda-inline-edit-working {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.25;
  }
}

.preceda-inline-edit__hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Title: a heading renamed in place (matter title, draft tab). No label column. */
.preceda-inline-edit--title {
  grid-template-columns: minmax(0, 1fr);
}

.preceda-inline-edit--title .preceda-inline-edit__value,
.preceda-inline-edit--title .preceda-inline-edit__input.preceda-field {
  font-family: var(--preceda-type-heading-family);
  font-size: var(--preceda-type-heading-size);
  line-height: var(--preceda-type-heading-leading);
  letter-spacing: var(--preceda-type-heading-tracking);
}

/* Stacked: label above value, for narrow columns and the phone. */
.preceda-inline-edit--stacked {
  grid-template-columns: minmax(0, 1fr);
}

@media (pointer: coarse) {
  .preceda-inline-edit__glyph {
    opacity: 1;
  }

  .preceda-inline-edit__value,
  .preceda-inline-edit__input.preceda-field {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }

  /* iOS zooms into a control set below 16px. */
  .preceda-inline-edit:not(.preceda-inline-edit--title) .preceda-inline-edit__input.preceda-field {
    font-size: var(--preceda-type-reading-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-inline-edit__value,
  .preceda-inline-edit__glyph {
    transition-duration: 0s;
  }

  .preceda-inline-edit__working {
    animation: none;
  }
}

/* ── segmented ── */
/*
 * Segmented: one of two to four settings, chosen at once ("Paper · Lamp").
 * The default is typographic: words between middots, the chosen word in ink
 * with a binding rule under it. When a longer set wraps, the component marks
 * each line's first option and its middot is dropped. `--ruled` is the denser boxed form for tool
 * rows, where the chosen segment is set in ink with paper text.
 */

.preceda-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  max-inline-size: 100%;
  gap: var(--preceda-space-2);
  margin: 0;
  padding: 0;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
}

.preceda-segmented__label {
  margin-inline-end: var(--preceda-space-1);
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
}

.preceda-segmented__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--preceda-space-1);
  min-block-size: var(--preceda-space-10);
  padding: 0 var(--preceda-space-1);
  border: 0;
  color: var(--preceda-color-ink-secondary);
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-segmented__option + .preceda-segmented__option::before {
  position: absolute;
  inset-inline-start: calc(var(--preceda-space-2) / -2);
  color: var(--preceda-color-ink-tertiary);
  content: '·';
  translate: -50% 0;
  pointer-events: none;
}

/* A wrapped line starts with a word, not a middot (the component marks it). */
.preceda-segmented__option[data-line-start]::before {
  content: none;
}

.preceda-segmented__text {
  padding-block: var(--preceda-space-0);
  border-block-end: 1px solid transparent;
}

.preceda-segmented__option:hover:not(:disabled) {
  color: var(--preceda-color-ink);
}

.preceda-segmented__option[aria-checked='true'] {
  color: var(--preceda-color-ink);
}

.preceda-segmented__option[aria-checked='true'] .preceda-segmented__text {
  border-block-end-color: var(--preceda-color-binding-ink);
}

.preceda-segmented__option:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-segmented__option:disabled {
  color: var(--preceda-color-ink-tertiary);
  cursor: not-allowed;
}

/* ── Chrome size: Inter, for toolbars and the masthead account line. ── */
.preceda-segmented--ui {
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-small-size);
}

/* ── Ruled: boxed segments, the chosen one set in ink. ── */
.preceda-segmented--ruled {
  gap: 0;
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
}

.preceda-segmented--ruled .preceda-segmented__option {
  min-block-size: var(--preceda-space-8);
  padding: 0 var(--preceda-space-3);
  border: 1px solid var(--preceda-color-rule-strong);
  color: var(--preceda-color-ink);
}

.preceda-segmented--ruled .preceda-segmented__option + .preceda-segmented__option {
  margin-inline-start: calc(-1 * 1px);
}

.preceda-segmented--ruled .preceda-segmented__option + .preceda-segmented__option::before {
  content: none;
}

.preceda-segmented--ruled .preceda-segmented__option:first-of-type {
  border-start-start-radius: var(--preceda-radius-small);
  border-end-start-radius: var(--preceda-radius-small);
}

.preceda-segmented--ruled .preceda-segmented__option:last-of-type {
  border-start-end-radius: var(--preceda-radius-small);
  border-end-end-radius: var(--preceda-radius-small);
}

.preceda-segmented--ruled .preceda-segmented__option:hover:not(:disabled):not([aria-checked='true']) {
  background: var(--preceda-color-paper-hover);
}

.preceda-segmented--ruled .preceda-segmented__option[aria-checked='true'] {
  border-color: var(--preceda-color-ink);
  color: var(--preceda-color-paper);
  background: var(--preceda-color-ink);
}

.preceda-segmented--ruled .preceda-segmented__text {
  border: 0;
}

.preceda-segmented--ruled .preceda-segmented__option::after {
  position: absolute;
  inset: calc(var(--preceda-space-1) * -1) 0;
  content: '';
}

@media (pointer: coarse) {
  .preceda-segmented__option {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
    padding-inline: var(--preceda-space-2);
  }

  .preceda-segmented {
    gap: var(--preceda-space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-segmented__option {
    transition-duration: 0s;
  }
}

/* ── masthead ── */
/*
 * Masthead: the app header. The brand (T2 wordmark) at the start, the sections centred
 * in the serif (the current one in ink over a binding rule), and the account
 * line at the end in small Inter ("Adv. R. Mehra · Introductions remaining: 2").
 * One hairline beneath; no fill, no shadow. When the masthead itself is
 * narrower than the tablet width the sections move to their own scrolling row. Below desk, the workspace uses
 * CompactHead instead.
 */

.preceda-masthead {
  position: relative;
  container-type: inline-size;
  border-block-end: 1px solid var(--preceda-color-rule);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper);
}

.preceda-masthead__bar {
  display: grid;
  grid-template-areas: 'brand nav account';
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--preceda-space-6);
  min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  padding-inline: var(--preceda-space-5);
}

.preceda-masthead--sticky {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--preceda-layer-sticky);
}

.preceda-masthead__skip {
  position: absolute;
  inset-block-start: var(--preceda-space-1);
  inset-inline-start: var(--preceda-space-2);
  z-index: var(--preceda-layer-popover);
  padding: var(--preceda-space-2) var(--preceda-space-3);
  border: 1px solid var(--preceda-color-ink);
  border-radius: var(--preceda-radius-small);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper-raised);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  text-decoration: none;
  translate: 0 -200%;
}

.preceda-masthead__skip:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
  translate: none;
}

/* ── Brand: T2's outlined Wordmark (or the header lockup), as the home link. ── */
.preceda-masthead__brand {
  grid-area: brand;
  justify-self: start;
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

/* PRECEDA at 17px type, the header lockup's size; the SVG sizes from font-size. */
.preceda-masthead__brand-link {
  display: inline-flex;
  align-items: center;
  min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  color: var(--preceda-color-ink);
  font-size: var(--preceda-type-size-17);
  line-height: 1;
  text-decoration: none;
}

a.preceda-masthead__brand-link {
  border-radius: var(--preceda-radius-small);
}

a.preceda-masthead__brand-link:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-width);
}

/* ── Sections ── */
.preceda-masthead__nav {
  grid-area: nav;
  justify-self: center;
  min-inline-size: 0;
}

.preceda-masthead__list {
  display: flex;
  align-items: center;
  gap: var(--preceda-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.preceda-masthead__item {
  display: inline-flex;
  align-items: center;
  min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  line-height: var(--preceda-type-body-leading);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-masthead__item-text {
  padding-block: var(--preceda-space-0) var(--preceda-space-1);
  border-block-end: 1px solid transparent;
}

.preceda-masthead__item:hover {
  color: var(--preceda-color-ink);
}

.preceda-masthead__item:hover .preceda-masthead__item-text {
  border-block-end-color: var(--preceda-color-rule-strong);
}

.preceda-masthead__item[aria-current='page'],
.preceda-masthead__item[aria-current='true'] {
  color: var(--preceda-color-ink);
}

.preceda-masthead__item[aria-current='page'] .preceda-masthead__item-text,
.preceda-masthead__item[aria-current='true'] .preceda-masthead__item-text {
  /* binding-ink: the rule must still read at 3:1 under the lamp. */
  border-block-end-color: var(--preceda-color-binding-ink);
}

.preceda-masthead__item:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: calc(var(--preceda-space-1) * -1);
}

/* ── Account line ── */
.preceda-masthead__account {
  grid-area: account;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  column-gap: var(--preceda-space-2);
  min-inline-size: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  text-align: end;
}

.preceda-masthead__account-part {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.preceda-masthead__account-part + .preceda-masthead__account-part::before {
  margin-inline-end: var(--preceda-space-2);
  content: '·';
}

/* Plain links in the line; a `.preceda-link` (Members sign in) keeps its own face. */
.preceda-masthead__account a:not(.preceda-link) {
  color: var(--preceda-color-ink-secondary);
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
}

.preceda-masthead__account a:not(.preceda-link):hover {
  color: var(--preceda-color-binding-ink);
  text-decoration-color: currentColor;
}

.preceda-masthead__account a:not(.preceda-link):focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

/*
 * An account menu in the line: the member's name as a quiet menu trigger
 * (Report an issue, Keyboard shortcuts), set at the line's own size so the
 * name reads as the plate sets it, not as a control.
 */
.preceda-masthead__account .preceda-menu-trigger--quiet {
  gap: var(--preceda-space-1);
  min-block-size: var(--preceda-space-10);
  padding-inline: var(--preceda-space-1);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-weight: 400;
  line-height: var(--preceda-type-small-leading);
}

.preceda-masthead__account .preceda-menu-trigger--quiet:hover,
.preceda-masthead__account .preceda-menu-trigger--quiet[aria-expanded='true'] {
  border-color: transparent;
  color: var(--preceda-color-ink);
  background: transparent;
}

/* ── Narrow: brand and account on one line, the sections on a scrolling row beneath. ── */
@container (width < 640px) {
  .preceda-masthead__bar {
    grid-template-areas:
      'brand account'
      'nav nav';
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    padding-inline: var(--preceda-space-4);
  }

  .preceda-masthead__nav {
    justify-self: stretch;
    margin-inline: calc(var(--preceda-space-4) * -1);
    padding-inline: var(--preceda-space-4);
    overflow-x: auto;
    border-block-start: 1px solid var(--preceda-color-hairline);
    scrollbar-width: none;
  }

  .preceda-masthead__account-part:not(:first-child) {
    display: none;
  }

  .preceda-masthead__account-part:first-child {
    display: block;
    max-inline-size: 100%;
    padding: calc(var(--preceda-space-1) / 2);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-masthead__item {
    transition-duration: 0s;
  }
}

/* ── compact-head ── */
/*
 * Compact head: the 44px running head on the phone ("‹ Matters · PRECEDA · ⋯").
 * Back at the start, the wordmark (or, once the title block has scrolled
 * away, the matter's title) centred, one act at the end. It respects the
 * top safe-area inset and sticks when asked.
 */

.preceda-compact-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--preceda-space-2);
  box-sizing: border-box;
  min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1) + env(safe-area-inset-top, 0));
  padding-block-start: env(safe-area-inset-top, 0);
  padding-inline: max(var(--preceda-space-2), env(safe-area-inset-left, 0)) max(var(--preceda-space-1), env(safe-area-inset-right, 0));
  border-block-end: 1px solid var(--preceda-color-rule);
  color: var(--preceda-color-ink);
  background: var(--preceda-color-paper);
}

.preceda-compact-head--sticky {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--preceda-layer-sticky);
}

.preceda-compact-head__start {
  justify-self: start;
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.preceda-compact-head__start .preceda-link--back {
  min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  padding-inline: var(--preceda-space-2);
}

.preceda-compact-head__center {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.preceda-compact-head__title {
  overflow: hidden;
  margin: 0;
  color: var(--preceda-color-ink);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-body-size);
  font-weight: 400;
  line-height: var(--preceda-type-ui-leading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preceda-compact-head__end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--preceda-space-1);
}

.preceda-compact-head__end .preceda-button--icon {
  inline-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  color: var(--preceda-color-ink-secondary);
}

.preceda-compact-head__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-reading-size);
  text-decoration: none;
}

a.preceda-compact-head__initials:hover {
  color: var(--preceda-color-binding-ink);
}

a.preceda-compact-head__initials:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: calc(var(--preceda-space-1) * -1);
}

/* The initials as the account menu's trigger: the same letters, no box. */
.preceda-compact-head__initials.preceda-menu-trigger {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: var(--preceda-radius-small);
  background: transparent;
  font-family: var(--preceda-type-body-family);
  font-size: var(--preceda-type-reading-size);
  font-weight: var(--preceda-type-reading-weight);
}

.preceda-compact-head__initials.preceda-menu-trigger:hover,
.preceda-compact-head__initials.preceda-menu-trigger[aria-expanded="true"] {
  color: var(--preceda-color-binding-ink);
  background: transparent;
}

.preceda-compact-head__initials.preceda-menu-trigger:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: calc(var(--preceda-space-1) * -1);
}

/* Collapsed: the title replaces the wordmark after the title block scrolls out. */
.preceda-compact-head__center > * {
  transition: opacity var(--preceda-duration-normal) var(--preceda-ease-standard);
}

.preceda-compact-head[data-collapsed='true'] .preceda-compact-head__center {
  justify-self: stretch;
}

@media (prefers-reduced-motion: reduce) {
  .preceda-compact-head__center > * {
    transition-duration: 0s;
  }
}

/* ── bottom-nav ── */
/*
 * Bottom nav: the phone's sections, at the thumb. Each item is a glyph over
 * its word (never a glyph alone); the current one is set in ink under a
 * binding rule along the top edge. It clears the home indicator with the
 * bottom safe-area inset. Hidden from desk width up by the product layout.
 */

.preceda-bottom-nav {
  box-sizing: border-box;
  padding-block-end: env(safe-area-inset-bottom, 0);
  padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0);
  border-block-start: 1px solid var(--preceda-color-rule);
  background: var(--preceda-color-paper);
}

.preceda-bottom-nav--fixed {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--preceda-layer-dock);
}

.preceda-bottom-nav__list {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preceda-bottom-nav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--preceda-space-1);
  min-block-size: var(--preceda-space-12);
  padding: var(--preceda-space-1) var(--preceda-space-1) var(--preceda-space-2);
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.preceda-bottom-nav__item::before {
  position: absolute;
  inset-block-start: calc(-1 * 1px);
  inset-inline: var(--preceda-space-4);
  block-size: 1px;
  background: transparent;
  content: '';
}

.preceda-bottom-nav__item:hover {
  color: var(--preceda-color-ink);
}

.preceda-bottom-nav__item[aria-current='page'] {
  color: var(--preceda-color-ink);
}

.preceda-bottom-nav__item[aria-current='page']::before {
  background: var(--preceda-color-binding-ink);
}

.preceda-bottom-nav__item:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: calc(var(--preceda-space-1) * -1);
}

.preceda-bottom-nav__count {
  position: absolute;
  inset-block-start: var(--preceda-space-1);
  inset-inline-start: calc(50% + var(--preceda-space-2));
  color: var(--preceda-color-binding-ink);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-variant-numeric: var(--preceda-numerals-tabular);
  line-height: 1;
}

.preceda-bottom-nav__hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Padding for a scrolling page that sits above a fixed bottom nav. */
.preceda-bottom-nav-clearance {
  padding-block-end: calc(var(--preceda-space-12) + env(safe-area-inset-bottom, 0));
}

/* ── breadcrumb ── */
/*
 * Breadcrumb: where this page sits in the record ("Legislation › BNSS ›
 * s. 482"). Small Inter in tertiary ink between chevron glyphs; the current
 * page in secondary ink, not a link. A long trail folds its middle into an
 * ellipsis that expands in place.
 */

.preceda-breadcrumb {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.preceda-breadcrumb__item:last-child {
  max-inline-size: 100%;
}

.preceda-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--preceda-space-2);
  margin: 0;
  padding: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  line-height: var(--preceda-type-small-leading);
  list-style: none;
}

.preceda-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--preceda-space-2);
  min-inline-size: 0;
}

.preceda-breadcrumb__item + .preceda-breadcrumb__item::before {
  color: var(--preceda-color-ink-tertiary);
  content: '›';
}

.preceda-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--preceda-space-8);
  color: var(--preceda-color-ink-tertiary);
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
  transition: color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-breadcrumb__link:hover {
  color: var(--preceda-color-binding-ink);
  text-decoration-color: currentColor;
}

.preceda-breadcrumb__link:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

.preceda-breadcrumb__current {
  overflow: hidden;
  color: var(--preceda-color-ink-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preceda-breadcrumb__current .preceda-citation,
.preceda-breadcrumb__mono {
  font-family: var(--preceda-type-citation-family);
}

.preceda-breadcrumb__fold {
  min-block-size: var(--preceda-space-8);
  padding: 0 var(--preceda-space-1);
  border: 0;
  color: var(--preceda-color-ink-tertiary);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.preceda-breadcrumb__fold:hover {
  color: var(--preceda-color-binding-ink);
}

.preceda-breadcrumb__fold:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

@media (pointer: coarse) {
  .preceda-breadcrumb__link,
  .preceda-breadcrumb__fold {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-breadcrumb__link {
    transition-duration: 0s;
  }
}

/* ── load-more ── */
/*
 * Load more: the foot of a long register. A count of what is shown, one
 * secondary act to fetch the next page, and (when the product scrolls
 * automatically) an invisible sentinel ahead of it. While fetching, the
 * working point and a present-tense line; at the end, a closing rule and
 * the total. Every outcome is announced.
 */

.preceda-load-more {
  display: grid;
  justify-items: center;
  gap: var(--preceda-space-2);
  padding-block: var(--preceda-space-6);
  border-block-start: 1px solid var(--preceda-color-hairline);
  text-align: center;
}

.preceda-load-more__count,
.preceda-load-more__status {
  display: flex;
  align-items: center;
  gap: var(--preceda-space-2);
  margin: 0;
  color: var(--preceda-color-ink-tertiary);
  font-family: var(--preceda-type-small-family);
  font-size: var(--preceda-type-small-size);
  font-variant-numeric: var(--preceda-numerals-tabular);
  line-height: var(--preceda-type-small-leading);
}

.preceda-load-more__status[data-tone='error'] {
  color: var(--preceda-color-error);
}

.preceda-load-more__hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* End of the register: a short closing rule and the total, like the foot of a report. */
.preceda-load-more--end {
  border-block-start-color: transparent;
}

.preceda-load-more--end .preceda-load-more__count::before,
.preceda-load-more--end .preceda-load-more__count::after {
  display: block;
  inline-size: var(--preceda-space-8);
  block-size: 1px;
  background: var(--preceda-color-rule-strong);
  content: '';
}

.preceda-load-more__sentinel {
  inline-size: 100%;
  block-size: 1px;
}


/* ── pager ── */
/*
 * Pager: previous and next page of a paged register or a long text, with the
 * position between them in folio figures. The acts are secondary-weight
 * links on a hairline, never a row of numbered boxes; each page keeps its own
 * URL. Below tablet the position line takes its own row.
 */

.preceda-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--preceda-space-2) var(--preceda-space-4);
  padding-block: var(--preceda-space-4);
  border-block-start: 1px solid var(--preceda-color-rule);
}

.preceda-pager__status {
  margin: 0;
  color: var(--preceda-color-ink-secondary);
  font-family: var(--preceda-type-folio-family);
  font-size: var(--preceda-type-folio-size);
  font-variant-numeric: var(--preceda-numerals-tabular);
  line-height: var(--preceda-type-folio-leading);
  text-align: center;
}

.preceda-pager__link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-block-size: var(--preceda-space-10);
  color: var(--preceda-color-binding-ink);
  font-family: var(--preceda-type-ui-family);
  font-size: var(--preceda-type-ui-size);
  line-height: var(--preceda-type-ui-leading);
  text-decoration-line: underline;
  text-decoration-color: var(--preceda-color-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--preceda-space-1);
  transition: color var(--preceda-duration-fast) var(--preceda-ease-standard);
}

.preceda-pager__link--previous::before {
  margin-inline-end: var(--preceda-space-2);
  content: '\2190';
}

.preceda-pager__link--next {
  justify-self: end;
}

.preceda-pager__link--next::after {
  margin-inline-start: var(--preceda-space-2);
  content: '\2192';
}

.preceda-pager__link:hover {
  text-decoration-color: currentColor;
}

.preceda-pager__link:focus-visible {
  outline: var(--preceda-focus-width) solid var(--preceda-color-focus);
  outline-offset: var(--preceda-focus-offset);
}

@media (width < 640px) {
  .preceda-pager {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .preceda-pager__status {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

@media (pointer: coarse) {
  .preceda-pager__link {
    min-block-size: calc(var(--preceda-space-10) + var(--preceda-space-1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .preceda-pager__link {
    transition-duration: 0s;
  }
}