/* components — buttons, rules, fields, accordion, quotes, ledgers, stepper, tick, plinth, switch, ambient.
   docs/DESIGN.md §3(6), §6, §11. No borders except hairlines, no shadows on paper, no radius, no icons. */

/* ---- Hairlines --------------------------------------------------------------------------------- */
.rule { border:0; height:1px; background:var(--line); width:100%; margin:0; }
.rule--fg { background:var(--fg); }
.rule--v { width:1px; height:100%; min-height:1em; }
.rule-top { border-top:1px solid var(--line); }
.rule-bottom { border-bottom:1px solid var(--line); }
.rule-list > * { padding-block:1.25rem; border-bottom:1px solid var(--line); }
.rule-list > :first-child { border-top:1px solid var(--line); }

/* ---- Text buttons --------------------------------------------------------------------------------
   .btn        uppercase text button with a 1px underline that exits right and re-enters left on hover
   .btn--lead  sentence-case action at --t-lead (gate, member forms)
   .btn--fill  the filled button (56px, square, bone on accent) — the two primary member actions only
   .btn--quiet in --fg-3 until hovered */
/* Every text control is at least 44px tall (DESIGN.md §11, WCAG 2.5.8); the box grows around the
   text and the underline stays tight to it via --ul-y (measured from the centre of the box). */
.btn {
  --ul-y:calc(50% + .75em);
  display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:var(--t-button); font-weight:600; line-height:1.2;
  letter-spacing:.12em; text-transform:uppercase; color:var(--fg); text-decoration:none; cursor:pointer;
  padding:0; white-space:nowrap; border:0; background:none;
  background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat;
  background-size:100% 1px; background-position:left var(--ul-y);
}
.btn:hover, .btn:focus-visible { animation:underline-swap 700ms var(--ease-out); }
@keyframes underline-swap {
  0%   { background-size:100% 1px; background-position:right var(--ul-y); }
  45%  { background-size:0 1px;    background-position:right var(--ul-y); }
  50%  { background-size:0 1px;    background-position:left var(--ul-y); }
  100% { background-size:100% 1px; background-position:left var(--ul-y); }
}
.btn--accent { color:var(--mark); }
.btn--quiet { color:var(--fg-3); transition:color var(--d-hover) var(--ease-out); }
.btn--quiet:hover { color:var(--fg); }
.btn--lead { --ul-y:calc(50% + .72em); font-size:var(--t-lead); letter-spacing:0; text-transform:none; font-weight:600; line-height:1.3; white-space:normal; text-align:left; background-image:linear-gradient(var(--mark), var(--mark)); }
.btn--fill {
  display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 2rem;
  background:var(--accent); color:var(--bone); background-image:none; letter-spacing:.12em;
  transition:background-color var(--d-hover) var(--ease-out), transform var(--d-hover) var(--ease-out);
}
.btn--fill:hover { animation:none; background-color:color-mix(in oklab, var(--accent), var(--dark) 18%); }
.btn--fill:active { transform:translateY(1px); }
.btn--fill:disabled, .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.btn--block { display:flex; width:100%; }
/* Inside a caption or a running line, keep the 44px box from stretching the line: pull the extra height back with negative margins. */
.btn--inline { margin-block:calc((1.2em - 44px) / 2); }
.btn-row { display:flex; flex-wrap:wrap; gap:1rem 2.5rem; align-items:baseline; }
.btn-row--between { justify-content:space-between; }

/* ---- Section head (eyebrow + title + dek) --------------------------------------------------------- */
.section-head { display:flex; flex-direction:column; gap:1.25rem; }
.section-head__title { max-width:16ch; }
.section-head__dek { max-width:var(--measure-lead); }
.section-head--row { flex-direction:row; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:var(--gap); }

/* ---- Tags (eyebrow-only labels; no boxes, no badges) --------------------------------------------- */
.tag { font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); }
.tag-list { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.tag-list .tag + .tag::before { content:"·"; margin-inline-end:1.5rem; color:var(--fg-4); }

/* ---- Tick (a 1px coloured line beneath a word; --fl carries the colour) --------------------------- */
.tick { --tick:var(--fl, var(--fg-3)); position:relative; display:inline-block; padding-block-end:.35em; }
.tick::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--tick); transform-origin:left center; transition:--fl 600ms var(--ease-out), transform var(--d-hover) var(--ease-out); }
.tick--short::after { right:auto; width:1.5em; }
.tick--grow::after { transform:scaleX(0); }
.tick--grow.is-active::after, .is-active > .tick--grow::after { transform:scaleX(1); }

/* ---- Fields ---------------------------------------------------------------------------------------
   Label above (eyebrow), 1px --line underline, 2px --fg on focus, errors in --err with an em dash.
   Markup: .field > .field__label + .field__input (+ .field__hint) (+ .field__error) */
.form { display:flex; flex-direction:column; gap:calc(var(--block) * .5); }
.form__row { display:grid; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); gap:var(--gap); }
.field { display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.field__label, .field > label {
  font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3);
}
.field__label .req { color:var(--fg-3); font-weight:400; letter-spacing:0; text-transform:none; margin-inline-start:.5em; }
.field__input, .field > input:not([type="checkbox"]):not([type="radio"]), .field > textarea, .field > select {
  width:100%; min-height:44px; padding:.6rem 0; background:transparent; color:var(--fg);
  border:0; border-bottom:1px solid var(--line); border-radius:0; font-size:var(--t-lead); line-height:1.3;
  transition:border-color var(--d-hover) var(--ease-out), box-shadow var(--d-hover) var(--ease-out);
  appearance:none; -webkit-appearance:none;
}
.field__input::placeholder, .field textarea::placeholder { color:var(--fg-3); opacity:1; }   /* 5.2:1 — hint text still clears AA */
.field__input:focus, .field > input:focus, .field > textarea:focus, .field > select:focus { outline:none; border-color:var(--fg); box-shadow:0 1px 0 0 var(--fg); }
.field__input:focus-visible, .field > input:focus-visible, .field > textarea:focus-visible, .field > select:focus-visible { outline:none; }
.field textarea, .field__input--area { min-height:8rem; resize:vertical; line-height:1.4; }
.field--select { position:relative; }
.field--select::after { content:""; position:absolute; right:.25rem; bottom:1.15rem; width:.5rem; height:.5rem; border-right:1px solid var(--fg-3); border-bottom:1px solid var(--fg-3); transform:rotate(45deg); pointer-events:none; }
.field select { padding-inline-end:1.5rem; cursor:pointer; }
.field select option { color:var(--ink); background:var(--white); }
.field__hint { font-size:var(--t-small); color:var(--fg-3); }
.field__error { font-size:var(--t-small); color:var(--err); }
.field__error::before { content:"— "; }
.field__error:empty { display:none; }
.field.is-invalid .field__input, .field .field__input[aria-invalid="true"], .field > [aria-invalid="true"],
.field_with_errors input, .field_with_errors textarea, .field_with_errors select { border-color:var(--fg); box-shadow:0 1px 0 0 var(--fg); }
.field_with_errors { display:contents; }
.field__input:disabled { color:var(--fg-3); border-style:dashed; }
input[type="date"].field__input { font-variant-numeric:tabular-nums; }
input[type="date"].field__input::-webkit-calendar-picker-indicator { opacity:.5; filter:none; }
.field--inline { flex-direction:row; align-items:flex-end; gap:var(--gap); }
.field--inline .field__input { flex:1; }
.field--inline > .field { flex:1; }
@media (max-width: 39.98em) { .field--inline { flex-direction:column; align-items:flex-start; gap:1rem; } .field--inline > .field { width:100%; } }
/* show/hide password: <div class="field field--peek" data-controller="peek"> … <button class="field__peek" data-peek-target="button"> */
.field--peek { position:relative; }
.field--peek .field__input { padding-inline-end:4rem; }
.field__peek { position:absolute; right:0; bottom:0; display:inline-flex; align-items:center; min-height:44px; font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); padding:0 0 .35rem; }
.field__peek:hover { color:var(--fg); }

/* Checkbox / radio rows: a 1px square that fills; 44px targets. */
.check { display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; min-height:44px; padding-block:.5rem; cursor:pointer; color:var(--fg-2); font-size:var(--t-body); line-height:1.5; }
.check input { appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:.25em 0 0; border:1px solid var(--fg-3); background:transparent; display:grid; place-content:center; cursor:pointer; flex:none; }
.check input::before { content:""; width:10px; height:10px; background:var(--fg); transform:scale(0); transition:transform 200ms var(--ease-out); }
.check input:checked::before { transform:scale(1); }
.check input:checked { border-color:var(--fg); }
.check input[type="radio"], .check input[type="radio"]::before { border-radius:50%; }
.check input[aria-invalid="true"] { border-color:var(--fg); box-shadow:0 0 0 1px var(--fg); }
.check__label { color:var(--fg); }
.check--small { font-size:var(--t-small); }
.check .field__error { grid-column:2; }
.choice-list { display:flex; flex-direction:column; }
.choice-list .check { border-bottom:1px solid var(--line); padding-block:1rem; }
.choice-list .check:first-child { border-top:1px solid var(--line); }
.choice-list .check:has(input:checked) .check__label { color:var(--fg); }
.choice-list .check .check__label { color:var(--fg-3); transition:color var(--d-hover) var(--ease-out); }

/* Form-level alert (server-side failure) */
.form-alert { padding-block:1rem; border-top:1px solid var(--err); border-bottom:1px solid var(--line); color:var(--err); font-size:var(--t-body); }
.form-alert::before { content:"— "; }
.form-alert ul { list-style:none; padding:0; }
.form-alert li + li { margin-block-start:.35em; }
.form-ok { font-family:var(--font-italic); font-style:italic; font-size:var(--t-lead); color:var(--mark); }

/* ---- Accordion (questions) ------------------------------------------------------------------------ */
.acc { border-top:1px solid var(--line); }
.acc__item { border-bottom:1px solid var(--line); }
.acc__q { margin:0; font-size:inherit; }
.acc__btn { display:grid; grid-template-columns:3rem 1fr auto; gap:var(--gap); align-items:baseline; width:100%; text-align:left; padding:1.5rem 0; color:var(--fg); }
.acc__n { font-size:var(--t-small); font-variant-numeric:tabular-nums; color:var(--fg-3); }
.acc__t { font-size:var(--t-h3); font-weight:700; line-height:1.15; }
.acc__sign { position:relative; width:1rem; height:1rem; align-self:center; }
.acc__sign::before, .acc__sign::after { content:""; position:absolute; inset:50% auto auto 0; width:100%; height:1px; background:currentColor; transform-origin:center; transition:transform 500ms var(--ease-out); }
.acc__sign::after { transform:rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform:rotate(0deg); }
.acc__panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows 500ms var(--ease-out); }
.acc__btn[aria-expanded="true"] + .acc__panel, .acc__item.is-open .acc__panel { grid-template-rows:1fr; }
.acc__body { overflow:hidden; min-height:0; }
.acc__body > .prose, .acc__body > p { padding:0 0 1.75rem 3rem; max-width:var(--measure); }
@media (max-width: 39.98em) {
  .acc__btn { grid-template-columns:2rem 1fr auto; }
  .acc__body > .prose, .acc__body > p { padding-left:0; }
}

/* ---- Quotes & letters ---------------------------------------------------------------------------- */
.quote { position:relative; font-size:var(--t-h2); font-weight:600; line-height:1.05; letter-spacing:-.01em; color:var(--fg); max-width:22ch; text-wrap:balance; }
.quote--mark { font-family:var(--font-italic); font-style:italic; font-weight:400; font-variation-settings:"opsz" 48; letter-spacing:0; line-height:1.15; }
.quote__cite, .letter__cite { display:block; margin-block-start:1.25rem; font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); font-style:normal; font-family:var(--font-sans); }
.quote__note, .letter__note { display:block; margin-block-start:.5rem; font-size:var(--t-small); color:var(--fg-3); font-style:normal; font-family:var(--font-sans); }
.letter { position:relative; font-family:var(--font-italic); font-style:italic; font-weight:400; font-size:var(--t-h2); line-height:1.15; color:var(--fg); font-variation-settings:"opsz" 48; text-wrap:pretty; }
.letter__text::before { content:"\201C"; position:absolute; left:-.55em; top:0; color:var(--fg-4); }
.letter__text::after { content:"\201D"; }

/* ---- Ledger (hairline table / definition rows) --------------------------------------------------- */
.ledger { border-top:1px solid var(--line); }
.ledger__row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--gap); align-items:baseline; padding:.9rem 0; border-bottom:1px solid var(--line); }
.ledger__row--3 { grid-template-columns:auto minmax(0, 1fr) auto; }
.ledger__key { color:var(--fg-3); font-size:var(--t-small); }
.ledger__val { color:var(--fg); font-variant-numeric:tabular-nums; text-align:right; }
.ledger__row--total .ledger__key, .ledger__row--total .ledger__val { color:var(--fg); font-size:var(--t-lead); }
dl.ledger { margin:0; }
dl.ledger dd { margin:0; }

/* ---- Numbered rows (field-note list, dossier lists) ---------------------------------------------- */
.row-list { border-top:1px solid var(--line); }
.row { display:grid; grid-template-columns:3rem minmax(0, 1fr); gap:var(--gap); padding:1.75rem 0; border-bottom:1px solid var(--line); color:var(--fg-2); }
.row__n { font-size:var(--t-small); font-variant-numeric:tabular-nums; color:var(--fg-3); padding-top:.5rem; }
.row__title { font-size:var(--t-h3); font-weight:700; line-height:1.15; color:var(--fg); }
.row__dek { margin-block-start:.5rem; max-width:var(--measure-lead); }
.row.is-active .row__title, .row:hover .row__title { color:var(--fg); }
@container (max-width: 28rem) { .row { grid-template-columns:2rem 1fr; padding-block:1.25rem; } }

/* ---- Stepper (text: − n +) ---------------------------------------------------------------------- */
.stepper { display:inline-grid; grid-template-columns:44px 2.5rem 44px; align-items:center; text-align:center; font-variant-numeric:tabular-nums; }
.stepper__btn { min-height:44px; font-size:var(--t-lead); color:var(--fg-3); transition:color var(--d-hover) var(--ease-out); }
.stepper__btn:hover { color:var(--fg); }
.stepper__n { color:var(--fg); }
.stepper input { width:100%; text-align:center; border:0; background:transparent; color:var(--fg); }

/* ---- Plinth (defined once; member surfaces reuse it) ------------------------------------------- */

/* ---- "Still" motion switch ------------------------------------------------------------------------ */

/* ---- Ambient fallback (pure CSS mesh; shared/_ambient.html.erb) ---------------------------------- */
.ambient {
  position:absolute; inset:0; overflow:clip; contain:paint; pointer-events:none; background:var(--dark);
  background-image:
    radial-gradient(60% 55% at 22% 30%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 70%),
    radial-gradient(50% 45% at 78% 72%, color-mix(in oklab, var(--lamp) 12%, transparent), transparent 70%),
    radial-gradient(70% 60% at 60% 20%, var(--dark-2), transparent 75%),
    radial-gradient(90% 90% at 50% 100%, var(--dark), var(--dark-2));
}
.ambient::before {
  content:""; position:absolute; inset:-30%; opacity:.9;
  background-image:
    radial-gradient(45% 40% at 40% 45%, color-mix(in oklab, var(--lamp) 10%, transparent), transparent 70%),
    radial-gradient(35% 35% at 70% 30%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
  animation:ambient-drift 24s ease-in-out infinite alternate;
}
.ambient::after {
  content:""; position:absolute; inset:0; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 .33 .33 .33 0 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.ambient--white { background:var(--mist); background-image:radial-gradient(60% 55% at 22% 30%, color-mix(in oklab, var(--lamp) 14%, transparent), transparent 70%), radial-gradient(50% 45% at 78% 72%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 70%); }
.ambient--white::before { background-image:radial-gradient(45% 40% at 40% 45%, color-mix(in oklab, var(--lamp) 12%, transparent), transparent 70%); }
@keyframes ambient-drift { to { transform:translate(6%, -5%); } }
/* The drift only runs where it can be seen: a plate whose poster covers the mesh, or one playing a film, keeps the mesh still. */
.plate:has(.plate__poster) .ambient::before, .plate:has(.plate__media) .ambient::before { animation:none; }
.plate.is-fallback .ambient::before { animation:ambient-drift 24s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .ambient::before, .plate.is-fallback .ambient::before { animation:none; } }
html[data-still] .ambient::before, html[data-still] .plate.is-fallback .ambient::before { animation:none; }

/* ---- Clock (Small Hours) --------------------------------------------------------------------------- */
.clock { font-size:var(--t-numeral); font-weight:400; line-height:.9; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--fg); }
.clock--small { font-size:var(--t-h2); }

/* ---- Cover/media pause control lives in the caption line ---------------------------------------- */
.pause { display:inline-flex; align-items:center; min-height:44px; margin-block:calc((1.4em - 44px) / 2); font-size:inherit; line-height:1.4; letter-spacing:inherit; text-transform:inherit; font-weight:inherit; color:inherit; }
.pause::before { content:"Pause"; }
.pause[aria-pressed="true"]::before { content:"Play"; }