/* bezel — the frame that holds whatever is set into it.
 *
 * The structural half of signet's design system (docs/design-system.md):
 * type scale, space, radii, elements, components, states, motion, and the
 * three layout shells. Identical on every instance, byte for byte — nothing
 * in this file mentions a color, a family, or a project. It only *reads*
 * custom properties, and the per-instance sheet that sets them is
 * tokens.css, generated from the manifest (src/pages/tokens.ts).
 *
 * Its draft is the inlined <style> block in mockups/*.html, and it is still
 * held to it: test/pages/bezel.test.ts parses those mockups and asserts every
 * declaration they make is made here too. The mockups are the design of
 * record; this file is their extraction, not a reinterpretation. Additions
 * beyond them are allowed (and marked); silent departures are not.
 *
 * No `!important` outside the reduced-motion block, no ids, no nesting
 * deeper than one descendant — a stylesheet a future owner has to modify
 * should be readable at 3am.
 */

/* ---- scale tokens ------------------------------------------------------
 * The color roles live in tokens.css because they are derived from the
 * manifest; everything below is a constant of the system.
 */
:root {
  /* Light-first by ratified decision (design-system.md resolved question 2:
   * dark is deferred until a real instance asks). Declared rather than left
   * implicit so form controls and scrollbars do not go dark on their own and
   * land outside the contrast bar the manifest validator enforces. */
  color-scheme: light;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --step-2: clamp(1.375rem, 1.26rem + 0.55vw, 1.625rem);
  --step-3: clamp(1.75rem, 1.56rem + 0.9vw, 2.125rem);
  --step-4: clamp(2.25rem, 1.93rem + 1.5vw, 2.875rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius: 8px;
  --radius-s: 5px;
}

/* ---- elements --------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* --font-display appears in exactly two places, here and .wordmark, so a
 * distinctive instance face lands hard without carrying body-text duty. */
h1 {
  font-family: var(--font-display);
  /* 600, not the 500 the mockups drew until 2026-08-02: both live display
     faces are old-style serifs (EB Garamond, Cormorant Garamond) whose
     500 reads faint at title sizes next to a geometric text face. The
     mockups carry the same value. */
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

/* The small-caps register: what gives account pages their structure without
 * shouting (design-system.md §Typography). */
h2 {
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 0 0 var(--space-3);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

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

/* Codes, prices and dates line up column-wise. */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* ---- focus ------------------------------------------------------------
 * Accessibility bar: a :focus-visible ring in accent on *every* interactive
 * element. The first rule is the mockups' verbatim; the second extends it to
 * the controls the mockups happened not to contain.
 */

.btn:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- motion -----------------------------------------------------------
 * A server-rendered multi-page app made continuous with zero JS
 * (design-system.md §Motion). Durations 150–250ms, ease-out. Unsupported
 * browsers get plain navigation; motion is never load-bearing.
 */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: ease-out;
}

/* Named so the auth flow (email → code → account) reads as one surface
 * moving rather than three pages replacing each other. Each name appears at
 * most once per document, which is what the algorithm requires. */
.wordmark {
  view-transition-name: bezel-wordmark;
}

.auth-card {
  view-transition-name: bezel-auth-card;
}

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

  /* The one place !important is right: a member who has asked their OS for
   * less motion is overruling every author style, including ones later
   * steps have not written yet. Nothing else in bezel uses it. */
  *,
  *::before,
  *::after {
    /* biome-ignore lint/complexity/noImportantStyles: overruling every author animation is the point */
    animation-duration: 1ms !important;
    /* biome-ignore lint/complexity/noImportantStyles: overruling every author animation is the point */
    animation-iteration-count: 1 !important;
    /* biome-ignore lint/complexity/noImportantStyles: overruling every author transition is the point */
    transition-duration: 1ms !important;
    /* biome-ignore lint/complexity/noImportantStyles: overruling author smooth-scroll is the point */
    scroll-behavior: auto !important;
  }
}

/* ---- buttons ---------------------------------------------------------- */

.btn {
  display: inline-block;
  font: 500 var(--step-0) / 1.2 var(--font-text);
  /* 0.75rem, not the 0.65rem the mockups drew until 2026-07-30: at 0.65rem
     the button computed to 42.0px tall and a standalone primary action is
     meant to clear 44px. 16px x 1.2 + 2 x 12px + 2 x 1px = 45.2px. The
     mockups carry the same value; see design-system.md §Accessibility bar. */
  padding: 0.75rem 1.2rem;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition:
    background-color 150ms ease-out,
    border-color 150ms ease-out,
    color 150ms ease-out;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}

.btn-quiet:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
}

.btn-danger {
  background: transparent;
  color: var(--error);
  border-color: var(--error);
}

.btn-danger:hover {
  background: var(--error-tint);
}

.btn-small {
  font-size: var(--step--1);
  padding: 0.35rem 0.75rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* Inline in the passkey button; sized to sit on the text baseline. */
.btn-icon {
  vertical-align: -0.15em;
  margin-right: 0.4em;
}

/* ---- fields ----------------------------------------------------------- */

/* Labels are always visible — no placeholder-as-label anywhere. */
label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.input {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  padding: 0.6rem 0.75rem;
}

.input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.input.invalid {
  border-color: var(--error);
}

.field-error {
  color: var(--error);
  font-size: var(--step--1);
  margin-top: var(--space-2);
}

.field-hint {
  color: var(--muted);
  font-size: var(--step--1);
  margin-top: var(--space-2);
}

/* The front door's one field. Never six boxes: a screen reader must meet a
 * single control, and a paste of "481 926" must survive (whitespace is
 * stripped server-side). */
.code-field {
  width: 100%;
  font-family: var(--font-text);
  font-size: var(--step-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  text-align: center;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  padding: 0.35em 0;
}

.code-field:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.code-field::placeholder {
  color: var(--faint);
}

.code-field.invalid {
  border-color: var(--error);
}

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

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--faint);
  font-size: var(--step--1);
  margin: var(--space-5) 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

.notice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  margin-bottom: var(--space-4);
}

.notice-ok {
  color: var(--ok);
  background: var(--ok-tint);
  border-color: color-mix(in oklab, var(--ok) 35%, var(--bg));
}

.notice-error {
  color: var(--error);
  background: var(--error-tint);
  border-color: color-mix(in oklab, var(--error) 35%, var(--bg));
}

.notice-warn {
  color: var(--warn);
  background: var(--warn-tint);
  border-color: color-mix(in oklab, var(--warn) 35%, var(--bg));
}

.badge {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.1em 0.65em;
  border-radius: 999px;
  border: 1px solid;
}

.badge-tier {
  color: var(--accent);
  background: var(--accent-tint);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--bg));
}

.badge-ok {
  color: var(--ok);
  background: var(--ok-tint);
  border-color: color-mix(in oklab, var(--ok) 30%, var(--bg));
}

.badge-warn {
  color: var(--warn);
  background: var(--warn-tint);
  border-color: color-mix(in oklab, var(--warn) 30%, var(--bg));
}

.badge-error {
  color: var(--error);
  background: var(--error-tint);
  border-color: color-mix(in oklab, var(--error) 30%, var(--bg));
}

/* A membership account is a document you read, not a cockpit: label left,
 * value and action right, hairline between. */
.rows {
  border-top: 1px solid var(--line);
}

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

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

.row-meta {
  color: var(--muted);
  font-size: var(--step--1);
}

.row-value {
  font-variant-numeric: tabular-nums;
}

/* Beyond the mockups (E5's Operations page found it): a value column that
 * shares its row with a wide block — a wrangler command, a long error —
 * gets crushed to a sliver by flex shrink, wrapping its own badge and
 * button into a column. The action column already refuses to shrink;
 * the value column refuses the same way. */
.row > .row-value {
  flex-shrink: 0;
}

.row-action {
  flex-shrink: 0;
  font-size: var(--step--1);
}

/* A tier's purchasable intervals, side by side (C2's choose-a-membership
 * row). Each is its own POST form — a price is a mutation, so it cannot be
 * a link — and forms are block elements, so without this they stack. Wraps
 * rather than shrinks: two prices that no longer fit belong under each
 * other, not squeezed. */
.tier-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* One sentence of orientation, one action — never a blank panel. */
.empty {
  text-align: center;
  padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  color: var(--muted);
}

.empty p {
  margin-bottom: var(--space-4);
}

.fineprint {
  color: var(--faint);
  font-size: var(--step--1);
  margin: var(--space-4) 0 0;
  text-align: center;
}

/* ---- the wordmark lockup ---------------------------------------------- */

.wordmark {
  font-family: var(--font-display);
  /* Same 2026-08-02 revision as h1: an unweighted old-style serif at chrome
     size disappears next to the nav. 500 here, 600 on titles — the chrome
     mark stays quieter than the page's own name. */
  font-weight: 500;
  font-size: var(--step-1);
  color: var(--ink);
  text-decoration: none;
}

.tagline {
  color: var(--muted);
  font-size: var(--step--1);
  margin: var(--space-2) 0 0;
}

/* ---- shell 1: auth ----------------------------------------------------
 * The front door. Centered column, wordmark above a single card, fineprint
 * footer pinned low. One decision per screen.
 */

.auth {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-6) var(--space-4);
}

.auth-brand {
  margin: var(--space-7) 0 var(--space-5);
  text-align: center;
}

/* The front door is the one place the wordmark is the host greeting a
 * visitor rather than chrome above a page, so it takes a step up
 * (2026-08-02, with the weight revisions above; the auth mockups carry
 * the same rule). */
.auth-brand .wordmark {
  font-size: var(--step-2);
}

.auth-card {
  width: 100%;
  max-width: 25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6);
}

.auth-card h1 {
  font-size: var(--step-3);
}

.auth-lead {
  color: var(--muted);
}

.auth-field {
  margin: var(--space-5) 0 var(--space-4);
}

.auth-links {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--step--1);
  margin-top: var(--space-5);
}

.auth-links a {
  color: var(--muted);
}

/* A quiet-link action row can hold a form (resend is a mutation, so it is
 * a POST with a button, never the anchor the mockup drew). The form must
 * not disturb the flex row. */
.auth-links form {
  display: inline;
  margin: 0;
}

/* A button that reads as a link — for mutations whose visual register is
 * a quiet link (the resend action). Inherits the row's muted color and
 * small size; underlined like every other link. */
.btn-link {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.btn-link:hover {
  color: var(--accent-hover);
}

/* The verification phrase (auth-spec.md resolved question 7; treatment
 * decided at B6, since the code-page mockup predates the phrase's
 * ratification). A chip between the lead and the code field: label in
 * muted at --step--1, the two words in ink at the body size, on the
 * accent-tint ground already used for quiet emphasis. The weighting is
 * the design decision — present enough that "check the words" has
 * something to check, quiet enough that the code field stays the loudest
 * thing on the screen. */
.auth-phrase {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--accent-tint);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  color: var(--muted);
}

.auth-phrase-words {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.auth-foot {
  margin-top: auto;
  padding-top: var(--space-7);
  color: var(--faint);
  font-size: var(--step--1);
  text-align: center;
}

.auth-foot a {
  color: var(--faint);
}

/* ---- shells 2 and 3: portal and admin ---------------------------------
 * design-admin.md §Shell: the admin surface "consumes these tokens unchanged
 * with one addition of its own: a wider measure and an `admin` label beside
 * the wordmark". So it is the portal chrome under its own class names, and
 * the deltas are two rules at the end of this block rather than a third
 * stylesheet to keep in step.
 */

.portal-header,
.admin-header {
  border-bottom: 1px solid var(--line);
}

.portal-header-inner,
.admin-header-inner {
  max-width: 46rem;
  margin: auto;
  padding: var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
}

.portal-nav,
.admin-nav {
  display: flex;
  gap: var(--space-4);
  flex: 1;
  flex-wrap: wrap;
}

.portal-nav a,
.admin-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
}

.portal-nav a:hover,
.admin-nav a:hover {
  color: var(--ink);
}

.portal-nav a[aria-current="page"],
.admin-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.signout {
  font-size: var(--step--1);
  color: var(--muted);
}

/* Signing out is a mutation, so it is a POST from a real form, not the link
 * the mockup drew (CLAUDE.md: GET never mutates). These two rules are what
 * let the button carry the link's appearance without carrying its verb. */
.signout-form {
  margin: 0;
  flex-shrink: 0;
}

button.signout {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

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

.portal-main,
.admin-main {
  max-width: 46rem;
  margin: auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
}

.page-head .eyebrow {
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0 0 var(--space-1);
}

.page-head .email {
  color: var(--muted);
  margin: 0;
}

/* The page head sets its own title/subtitle rhythm; the mockup's account
 * page tightens h1's margin because an address follows it immediately.
 * The wrap rule is beyond the mockups (E1): the account page heads itself
 * with the member's display name *or*, for a member who has not set one,
 * their email address — which is a single long unbreakable token at display
 * size, and must wrap rather than run off the measure. */
.page-head h1 {
  margin-bottom: var(--space-2);
  overflow-wrap: break-word;
}

.panel {
  margin-top: var(--space-7);
}

.panel-foot {
  margin-top: var(--space-3);
}

.danger {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--muted);
}

.danger a {
  color: var(--error);
}

/* The mockups end at the account page; the accessibility bar asks for a
 * footer landmark on every page, so the signed-in shells get the quiet one. */
.portal-foot,
.admin-foot {
  border-top: 1px solid var(--line);
  margin-top: var(--space-8);
}

.portal-foot-inner,
.admin-foot-inner {
  max-width: 46rem;
  margin: auto;
  padding: var(--space-5) var(--space-4);
  color: var(--faint);
  font-size: var(--step--1);
}

.portal-foot a,
.admin-foot a {
  color: var(--faint);
}

/* Delta 1 — lists need density where an account page needs calm. */
.admin-header-inner,
.admin-main,
.admin-foot-inner {
  max-width: 68rem;
}

/* Delta 2 — an admin must never wonder which surface they are on before
 * clicking something destructive. Not a different brand: the instance still
 * owns the page, so the label is the accent tint, not a color of its own. */
.admin-label {
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--bg));
  border-radius: 999px;
  padding: 0.1em 0.6em;
  margin-left: var(--space-2);
}

/* ---- the member portal (E1) --------------------------------------------
 * Beyond the mockups, and marked as such (see the file header): the account
 * page they drew has no forms on it, and E1's does — a mailing address, a
 * display name, and the rows that hold a device's user agent.
 */

/* One labelled control with room under it for an error or a hint. The auth
 * shell's `.auth-field` is the same idea at the front door's rhythm; this is
 * the portal's, which is tighter because a form here sits inside a panel
 * rather than being the whole screen. */
.field {
  margin-bottom: var(--space-4);
}

/* Progressive disclosure with no JavaScript: `<details>` is the only
 * primitive HTML has for it, and it arrives keyboard-operable and announced.
 * The summary reads as a quiet action rather than as a widget, because that
 * is what it is — "Edit address" is a verb a member is choosing. */
.disclosure {
  margin-top: var(--space-4);
}

.disclosure > summary {
  cursor: pointer;
  font-size: var(--step--1);
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.disclosure > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.disclosure[open] > summary {
  margin-bottom: var(--space-4);
}

/* A saved address, set as it would be written on an envelope. `address` is
 * italic by default in every browser, which is not how a label is printed. */
.address-block {
  font-style: normal;
}

/* A user agent is a long unbroken string that must not push a panel sideways
 * on a phone. It wraps, and it is dimmer than the line above it, because it
 * is corroboration rather than the point. */
.agent {
  color: var(--faint);
  overflow-wrap: anywhere;
}

/* ---- the admin surface (E2) ---------------------------------------------
 * Also beyond the mockups, and for the same reason: the design of record
 * drew four member-facing pages and no admin ones. design-admin.md §Shell
 * says the admin surface "consumes these tokens unchanged with one addition
 * of its own", so nothing below invents a color, a radius or a step — it
 * arranges what the portal already has at the density a list needs.
 */

/* The search row: one field and its button on one line, wrapping to two on a
 * phone. The field takes the space because the field is the feature. */
.admin-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
}

.admin-search .field {
  flex: 1 1 18rem;
  margin-bottom: 0;
}

/* Filters, grouped by what they filter, each group labelled. A group is a
 * row of chips rather than a select, because the whole point of a toggle is
 * that its state is visible without opening anything. */
.filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}

.filter-label {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  min-width: 4.5rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* A chip is a link that reads as a switch. Off: hairline on the page's own
 * background. On: the accent tint the `admin` label already uses, so "this
 * filter is doing something" is the same visual idea in both places. */
.chip {
  display: inline-block;
  font-size: var(--step--1);
  line-height: 1.2;
  padding: 0.3em 0.7em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  background: none;
  cursor: pointer;
}

.chip:hover {
  color: var(--ink);
  border-color: var(--accent);
  text-decoration: none;
}

.chip[aria-current="true"] {
  color: var(--accent);
  background: var(--accent-tint);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--bg));
}

/* A tag chip that removes itself is a submit button, because removing a tag
 * is a mutation and GET never mutates. It has to look like the chips beside
 * it, so the form is display:contents and the button wears .chip. */
.tag-form {
  display: contents;
}

.chip-remove {
  font-family: inherit;
}

.tag-add {
  margin-top: var(--space-4);
}

/* Panel 1. The one sentence the whole surface is built around, set at the
 * lead size so an owner reads it before anything else on the page. */
.derivation {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

/* A note is a block of somebody's prose, so it keeps its line breaks and
 * sits on the panel's hairline rhythm like a row does. */
.notes {
  margin-top: var(--space-5);
}

.note {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}

.note-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-bottom: var(--space-2);
}

.note-meta {
  margin-bottom: 0;
}

/* Ids and hashes: readable as strings, never as prose. */
.mono {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* A copy-pasteable shell command (the wrangler one-liners, E5's
 * Operations page): a real monospace stack — the only place this system
 * needs one, since `.mono` above is about digits, not code — kept to one
 * line and scrolling horizontally rather than wrapping, because a wrapped
 * shell command is one a person copies wrong. */
.command {
  display: block;
  overflow-x: auto;
  white-space: pre;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
  background: var(--field);
  border-radius: var(--radius-s);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--step--1);
}

/* A multi-line, already-formatted read — the effective-policy dump (E5's
 * Health panel), printed by the same function `check:manifest` uses. Wraps
 * rather than scrolling: unlike a command, a line break costs this reader
 * nothing. */
.policy-dump {
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
  background: var(--field);
  border-radius: var(--radius-s);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--step--1);
  line-height: 1.5;
}

/* One control, at the end of a list that continues. */
.pager {
  margin-top: var(--space-5);
  display: flex;
  justify-content: flex-end;
}

/* A textarea is an .input that grew: same border, same focus ring, but it
 * must be resizable vertically and never horizontally (a note wider than its
 * panel is a note nobody can read). */
textarea.input {
  resize: vertical;
  min-height: 5rem;
  font-family: inherit;
  line-height: 1.5;
}

/* ---- the clients registry (E6) -------------------------------------------
 * Two things the surface had no component for: a group of checkboxes where
 * each one needs a sentence under it, and the block that shows a credential
 * exactly once.
 */

/* A checkbox group. `fieldset` and `legend` because that is what a group of
 * related controls *is* to a screen reader, and the border browsers draw on
 * a fieldset is removed rather than styled — the panel already has the only
 * box this page needs. */
.checks {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.checks > legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* One box and its explanation. The whole label is the hit area, so the
 * sentence is clickable too — a checkbox whose only target is 13 pixels of
 * square is a checkbox people miss. */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.check > input[type="checkbox"] {
  flex: none;
  margin-top: 0.2em;
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}

.check-label {
  display: block;
  margin-bottom: var(--space-1);
}

.check .row-meta {
  display: block;
  margin-bottom: 0;
}

/* The secret, shown once. It reads as a thing to copy rather than as prose:
 * monospace, its own field background, and the accent border the admin label
 * already uses for "this is the thing on this page". It wraps rather than
 * scrolling, unlike `.command` — a secret half out of view is a secret
 * somebody copies wrong, and there is no second chance at this one. */
.secret {
  display: block;
  overflow-wrap: anywhere;
  user-select: all;
  padding: var(--space-4);
  margin: var(--space-4) 0;
  background: var(--field);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--bg));
  border-radius: var(--radius-s);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--step-0);
  line-height: 1.5;
}