/* ==========================================================================
   ABI Partner Portal — components
   Implements spec §13.2 (system) and §13.4 (canonical screens).
   Hand-rolled; BEM-ish naming. Requires tokens.css.
   ========================================================================== */

/* ---- Reset / base ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
/* Anything a script hides with the `hidden` attribute stays hidden, whatever
   display its class sets. Author CSS beats the user agent's own [hidden] rule,
   so `.band { display: flex }` once showed an "unsaved line" warning on every
   load of the plan step. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--sans);
  font-synthesis-weight: none;

  /* So the footer sits at the bottom of a short page rather than halfway up
     it — the sign-in page is one field and would otherwise leave it floating. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

h1, h2, h3, h4, p, figure, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Links are coloured *and* underlined — never bare (§13.2). */
a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--teal-deep); }

/* One crisp focus treatment everywhere. Not a glow ring (§13.2). */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Accessible-but-invisible text (labels for icon-only meaning). */
.u-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.u-right { text-align: right; }
.u-num   { font-variant-numeric: tabular-nums; }

/* Skip link — visible only when focused. */
.skip {
  position: absolute; left: 8px; top: -40px; z-index: 20;
  background: var(--paper); color: var(--teal-deep);
  border: 1px solid var(--teal-deep); border-radius: 0;
  padding: 8px 12px; font-weight: 600;
}
.skip:focus { top: 8px; }

/* ---- Micro-label (11px uppercase, tracked, muted) ---------------------- */

.micro {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
.micro--danger { color: var(--danger); }

/* ---- Global chrome (§13.4) --------------------------------------------- */

.hdr {
  background: var(--teal-deep);
  color: #fff;
  min-height: var(--header-h);
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0 28px;
  padding: 0 var(--gutter);
}

.hdr__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  white-space: nowrap;
  text-decoration: none;
}
.hdr__brand:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* The dome mark alone, not the full horizontal lockup — set small against a
   dark bar, the wordmark version reads as a banner stripe rather than a logo,
   and its black type disappears into the teal. Rendered in paper with square
   corners (§13.2 B4), the dome showing the bar through it. */
.hdr__logo {
  display: block;
  height: 30px;
  width: 30px;
  flex: 0 0 auto;
}
.hdr__wordmark {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: #fff;
}
.hdr__product {
  font-size: var(--fs-meta);
  color: var(--teal-nav);
}

@media (max-width: 560px) {
  /* The wordmark inside the logo already says who this is. */
  .hdr__product { display: none; }
}

.hdr__nav {
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin-right: auto;
  overflow-x: auto;
  scrollbar-width: thin;

  /* A wrapping flex container groups items into lines using each item's
     *unshrunk* hypothetical size, so a long nav (11-12 staff items) forced
     .hdr__user onto its own second row well above the 900px breakpoint —
     the nav's own overflow-x:auto scrollbar never got a chance to help,
     because shrinking is only applied after the wrap decision. Giving the
     nav a zero flex-basis makes its hypothetical size negligible, so it
     stays on the header's one row and grows/shrinks (scrolling internally
     via overflow-x) to whatever room brand + user leave it. The <=900px
     media query below still wins there (its own flex-basis:100% is later
     in the cascade), so the intentional stacked-nav layout is unaffected. */
  flex: 1 1 0%;
  min-width: 0;
}
.hdr__link {
  display: flex;
  align-items: center;
  padding: 0 1px;
  border-bottom: 2px solid transparent;
  color: var(--teal-nav);
  font-size: var(--fs-meta);
  text-decoration: none;
  white-space: nowrap;
}
.hdr__link:hover { color: #fff; }
.hdr__link--active {
  color: #fff;
  border-bottom-color: var(--orange);
  font-weight: 600;
}
.hdr__link:focus-visible { outline-color: #fff; outline-offset: -2px; }

/* Nav entries whose phase is not built yet: shown, not clickable. */
.hdr__link--pending { color: #6f9b9c; cursor: default; }

/* Grouped staff nav (§13.2 A4): a group is a button that drops its pages down
   in a white menu under the label; the current group keeps the orange rule.
   The menu is absolutely positioned, so this variant of the nav may not clip
   (the flat nav scrolls horizontally instead) and wraps on narrow screens. */
.hdr__nav--groups { overflow: visible; flex-wrap: wrap; row-gap: 0; }
.hdr__group { display: flex; align-items: stretch; position: relative; }
.hdr__link--group {
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.hdr__link--group:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.hdr__group.is-open > .hdr__link--group { color: #fff; }
.hdr__caret { font-size: 0.75em; opacity: 0.8; }
.hdr__badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px;
  /* var(--orange) on white text is 3.37:1 here (11px/600) — below WCAG AA's 4.5:1 for
     normal text. var(--orange-cta) is the same darker orange the primary button already
     uses for this reason (see tokens.css) and clears 4.5:1 with white text. */
  background: var(--orange-cta); color: #fff; font-size: var(--fs-micro); font-weight: 600; line-height: 18px;
  text-align: center; border-radius: 2px;
}

.hdr__menu {
  list-style: none; margin: 0;
  position: absolute; top: 100%; left: -12px; z-index: 30;
  min-width: 220px; padding: 6px 0;
  background: #fff; border: 1px solid var(--rule-strong); border-top: 0;
  box-shadow: 0 6px 14px rgba(13, 59, 61, 0.18); /* design-exception: overlay — a dropdown menu, §13.1 */
}
/* Flipped by nav.js when the menu would run off the right of the viewport. */
.hdr__menu--right { left: auto; right: -12px; }
.hdr__menu-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; font-size: var(--fs-meta); font-weight: 600;
  color: var(--teal-deep); text-decoration: none; white-space: nowrap;
  border-left: 3px solid transparent;
}
/* --teal on --teal-tint is ~4.1:1 — under 4.5:1 for this 13px/600 text
   (1.4.3). --teal-deep on the same tint clears 10:1, so hover/focus keeps
   the tint background but darkens to the same teal already used for the
   link's resting state instead of lightening it. */
.hdr__menu-link:hover, .hdr__menu-link:focus-visible { background: var(--teal-tint); color: var(--teal-deep); }
.hdr__menu-link:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.hdr__menu-link.is-active { border-left-color: var(--orange); }
.hdr__menu-count {
  display: inline-block; min-width: 18px; padding: 0 5px;
  background: var(--warn-bg); color: var(--warn-text); font-size: var(--fs-micro); line-height: 18px;
  text-align: center; border-radius: 2px;
}
/* What a firm holds at a conference: every kind, one per line, no bullets —
   the table row is the unit, the list is just the lines within it. */
.holdings { list-style: none; margin: 0; padding: 0; }
.holdings li + li { margin-top: 2px; }

.hdr__user {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: var(--fs-small);
  color: var(--teal-nav);
  white-space: nowrap;
}
.hdr__user strong { color: #fff; font-weight: 600; }
/* The header's sign-in as a text link, on the page whose body has the orange button. */
.hdr__textlink { color: #fff; text-decoration: underline; text-decoration-color: #7fb5b6; text-underline-offset: 3px; font-weight: 600; }
.hdr__textlink:hover { text-decoration-color: #fff; }
.hdr__textlink:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hdr__logout { margin-left: 8px; }
.hdr__logout button {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--teal-nav);
  font: 400 var(--fs-small) var(--sans);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.hdr__logout button:hover { color: #fff; }
.hdr__logout button:focus-visible { outline-color: #fff; }

/* ---- Page shell -------------------------------------------------------- */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 26px var(--gutter) 72px;
}

/* Serif title over a 3px deep-teal rule; meta beneath; status right-aligned
   on the title's baseline. */
/* Text-led pages read at a measure (§13.2 A1); data screens stay full width. */
.page--reading { max-width: 760px; margin-left: auto; margin-right: auto; }
.page--landing { max-width: 1120px; margin-left: auto; margin-right: auto; }
.page--reading .prose, .page--landing .prose { max-width: 90ch; }

.page-head { border-bottom: 3px solid var(--teal-deep); padding-bottom: 9px; }
.page-head__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.page-head__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  color: var(--teal-deep);
}
.page-head__aside { text-align: right; }
.page-head__meta-right { font-size: var(--fs-meta); color: var(--muted); align-self: baseline; }
.page-head__meta-right .status--ok { color: var(--success); }
.page-head__meta-right .status--bad { color: var(--danger); }
.subhead { font-family: var(--serif); font-size: 15px; color: var(--teal-deep); margin: 0 0 6px; }
.page-head__meta {
  margin-top: 6px;
  font-size: var(--fs-meta);
  color: var(--muted);
}

.page--flashes { padding-bottom: 0; }
/* Flash bands placed after the title block, before the first section. */
.page-head + .flashes { margin-top: 16px; }
.flashes .band + .band { margin-top: 8px; }
.band--after-strip { margin-top: 18px; }

/* ---- Gate pages (sign in, invite, reset, second factor) ---------------- */

.gate {
  max-width: 620px;
  margin: 0 auto;
  padding: 56px var(--gutter) 72px;
}
.gate .band { margin-bottom: 18px; }

.gate__panel {
  border-top: 3px solid var(--teal-deep);
  padding-top: 18px;
}
.gate__panel--wide { max-width: none; }

.gate__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  color: var(--teal-deep);
}
.gate__meta {
  margin-top: 7px;
  font-size: var(--fs-meta);
  color: var(--muted);
}
.gate__form { margin-top: 22px; }
.gate__form .field + .field { margin-top: 16px; }
.gate__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.gate__footnote {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* Numbered enrolment steps. */
.steps { margin-top: 22px; counter-reset: step; }
.steps__item {
  counter-increment: step;
  border-top: 1px solid var(--rule);
  padding: 16px 0 16px 34px;
  position: relative;
}
.steps__item::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 15px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--teal-deep);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 600;
}
.steps__label { font-weight: 600; }
.steps__detail { margin-top: 3px; font-size: var(--fs-meta); color: var(--muted); }

/* The TOTP setup key, sized to be read off a screen and typed. */
.key {
  margin-top: 10px;
  border: 1px solid var(--rule-strong);
  background: #fff;
  padding: 10px 12px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 0.06em;
  word-break: break-all;
}

/* Six-digit code entry. */
.input--code {
  max-width: 160px;
  font-size: 20px;
  letter-spacing: 0.24em;
}

/* Section head: serif over a 1px rule. */
.section { margin-top: 30px; }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}
.section__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-section);
  color: var(--teal-deep);
}
.section__note { font-size: var(--fs-meta); color: var(--muted); }
.section__body { margin-top: 14px; }

.prose { font-size: var(--fs-body); max-width: 68ch; }
.prose + .prose { margin-top: 10px; }

code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: #f1efe8;
  padding: 1px 4px;
  border-radius: 2px;
}

/* ---- Figures ----------------------------------------------------------- */

.fig {
  font-family: var(--serif);
  font-size: var(--fs-fig);
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fig--lg     { font-size: var(--fs-fig-lg); }
.fig--orange { color: var(--orange); }
.fig--teal   { color: var(--teal-deep); }
.fig--danger { color: var(--danger); }

/* ---- Stat strip: divided cells, no cards (§13.2) ----------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 18px;
}
.stats--3 { --stat-cols: 3; }
.stats--4 { --stat-cols: 4; }
.stat--link { display: block; color: inherit; text-decoration: none; }
.stat--link:hover .micro { color: var(--teal); }
.stat--link:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.fig--success { color: var(--success); }
@media (max-width: 640px) { .stats--strip { --stat-cols: 2; } .stats--strip .stat:nth-child(3) { border-left: 0; padding-left: 0; } }

.stat { padding: 14px 20px; border-left: 1px solid var(--rule); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__value { margin-top: 5px; }
.stat__sub {
  margin-top: 3px;
  font-size: var(--fs-small);
  color: var(--muted);
}
.stat__sub--danger { color: var(--danger); }

/* ---- Data tables: hairline row rules, no zebra, no cell borders -------- */

/* contain: layout stops an auto-layout table's min-content width (wide,
   nowrap header cells) from leaking past this box's own overflow-x:auto
   and inflating the document's scrollable width at narrow viewports — the
   table still scrolls horizontally inside this wrapper same as before. */
.table-wrap { overflow-x: auto; contain: layout; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-meta);
}
.table th {
  text-align: left;
  padding: 0 var(--cell-x) 7px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.table td {
  padding: var(--cell-y) var(--cell-x);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child,  .table td:last-child  { padding-right: 0; }
.table tbody tr:last-child td { border-bottom: 0; }

.table__primary { font-weight: 600; }
.table__sub { display: block; font-size: var(--fs-small); color: var(--muted); }
.table th .sort { color: inherit; text-decoration: none; }
.table th .sort:hover { color: var(--teal); }
.table th .sort.is-active { color: var(--teal-deep); }
.sort__mark { font-size: 0.7em; margin-left: 4px; }
.table__actions { text-align: right; white-space: nowrap; }
.table__actions a + a { margin-left: 14px; }

.table tr.is-flagged td { background: var(--warn-bg); }
/* The default link teal (--teal) reads at ~4.3:1 on warn-bg — under 4.5:1 for
   13px text (1.4.3). Every link in a flagged row (the firm name, mostly)
   needs the darker --teal-deep instead; see the .band comment below for the
   same problem on alert bands. */
.table tr.is-flagged td a { color: var(--teal-deep); }
.table tr.is-selected td { background: var(--teal-tint); }

/* An administrator viewing as someone else: said across the top of every
   page, in the warning tint, with the way back beside it. */
.masq { background: var(--warn-bg); border-bottom: 3px solid var(--orange); font-size: var(--fs-meta); }
.masq__inner {
  max-width: var(--page-max); margin: 0 auto; padding: 8px 20px;
  display: flex; gap: 12px 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
/* .btn--secondary's teal-on-transparent reads at 4.64:1 on the paper
   background it is normally used against, but only ~4.1-4.3:1 on the masq
   banner's warn-bg tint and on every .band tint (warn/danger/info/success
   all sit in that same 4.1-4.3 range) — under the 4.5:1 floor for 13px text
   (1.4.3). Give it a solid paper backing wherever it sits on one of those
   tints, rather than changing the shared button or the tints themselves. */
.masq .btn--secondary,
.band .btn--secondary { background: var(--paper); }
/* A plain link (not a .btn) in that same body text has no backing to give
   it, so it gets the darker --teal-deep instead — already how .band--info
   treats its own text; this makes every band consistent and covers links
   inside .band--warn/.band--danger/.band--success too. */
.masq a:not(.btn),
.band a:not(.btn) { color: var(--teal-deep); }

/* ---- Term switch: which agreement year is being read -------------------
   A firm with next year already signed can read either. Same bottom-rule
   treatment as the header nav, so "which one am I looking at" is answered the
   same way in both places rather than inventing a second idiom for it. */
.term-switch {
  display: flex;
  flex-wrap: wrap;
  /* Row-gap is 8px, not 0: the -1px flush trick below overlaps an item's own
     border with whatever sits directly beneath it. With one line that's this
     container's border-bottom, so -1px makes it flush. With more years than
     fit on one line, the thing beneath the first line is the *next* line of
     items instead, and 0 row-gap plus -1px margin overlapped that line's text
     by a pixel. 8px of row-gap first, then the -1px trick eats into that
     instead of into the item's own line height, so it still lands flush
     against the container's border-bottom after the last line and wrapped
     lines keep normal breathing room. */
  gap: 8px 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.term-switch__item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 1px 7px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--teal);
  font-size: var(--fs-meta);
  text-decoration: none;
  white-space: nowrap;
}
.term-switch__item:hover { color: var(--teal-deep); }
.term-switch__item--active {
  color: var(--ink);
  border-bottom-color: var(--orange);
  font-weight: 600;
}
.term-switch__note { color: var(--muted); font-size: var(--fs-small); font-weight: 400; }
.term-switch__item--active .term-switch__note { color: var(--muted); }

/* ---- Alert bands: 4px left rule on a flat tinted band ------------------ */

.band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  border-left: 4px solid var(--muted);
  background: #f2f1ec;
  padding: 12px 16px;
  font-size: var(--fs-body);
}
.band + .band { margin-top: 8px; }
.band__text { flex: 1 1 320px; }
.band__title { font-weight: 600; }
.band__detail { font-size: var(--fs-meta); color: var(--muted); margin-top: 2px; }

.band--warn    { border-left-color: var(--orange); background: var(--warn-bg); }
.band--warn .band__detail { color: var(--warn-text); }
.band--danger  { border-left-color: var(--danger); background: #fcebeb; }
.band--danger .band__detail { color: var(--removed-text); }
.band--success { border-left-color: var(--success); background: var(--added-bg); }
.band--success .band__detail { color: var(--added-text); }
.band--info    { border-left-color: var(--teal); background: var(--teal-tint); }
.band--info .band__detail { color: var(--teal-deep); }

/* ---- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 8px 15px;
  font: 600 var(--fs-body)/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn--primary {
  background: var(--orange-cta);
  border-color: var(--orange-cta);
  color: #fff;
}
.btn--primary:hover {
  background: var(--orange-cta-h);
  border-color: var(--orange-cta-h);
  color: #fff;
}
.btn--secondary {
  background: transparent;
  border-color: var(--teal);
  color: var(--teal);
}
.btn--secondary:hover { background: var(--teal-tint); color: var(--teal-deep); }
/* On a warning band: the band's own tones, so it does not read as a second CTA. */
.btn--amber { background: transparent; border-color: #d3a55c; color: #6b3a00; }
.btn--amber:hover { background: #fff; }
.btn--quiet {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
  font-weight: 400;
}
.btn--quiet:hover { border-color: var(--muted); }
.btn--sm { padding: 5px 11px; font-size: var(--fs-meta); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: #eceae3;
  border-color: #d8d4c9;
  color: #8a8478;
  cursor: not-allowed;
}

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-row--end { justify-content: flex-end; }

/* ---- Badges and chips --------------------------------------------------
   Flat rectangles, not pastel pills. Rounded only inside table cells is a
   distinction the spec draws for *status* pills; we keep 2px throughout.  */

.badge {
  display: inline-block;
  border-radius: 2px;
  padding: 2px 7px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  background: #eeece6;
  color: var(--muted);
}
.badge--member   { background: var(--teal-tint);   color: var(--teal-deep); }
.badge--abseat   { background: var(--cat-memb-bg); color: var(--cat-memb-text); }
.badge--nonmember{ background: var(--warn-bg);     color: var(--warn-text); }
.badge--success  { background: var(--added-bg);    color: var(--added-text); }
.badge--danger   { background: var(--removed-bg);  color: var(--removed-text); }
.badge--warn     { background: var(--changed-bg);  color: var(--changed-text); }

/* Contract-line categories (§13.4 backfill table). */
.badge--spon { background: var(--cat-spon-bg); color: var(--cat-spon-text); }
.badge--ab   { background: var(--cat-ab-bg);   color: var(--cat-ab-text); }
.badge--memb { background: var(--cat-memb-bg); color: var(--cat-memb-text); }
.badge--res  { background: var(--cat-res-bg);  color: var(--cat-res-text); }

/* Event-code chip: hairline box, not a tint. */
.chip-code {
  display: inline-block;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 1px 6px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Status word + rule marker for tables (colour is never the only signal). */
.status { font-weight: 600; }
.status--ok   { color: var(--success); }
.status--warn { color: var(--warn-text); }
.status--bad  { color: var(--danger); }

/* ---- Panels ------------------------------------------------------------ */

.panel {
  border: 1px solid var(--rule-strong);
  background: #fff;
}
.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding: 10px 16px;
}
.panel__title { font-weight: 600; font-size: var(--fs-body); }
.panel__body { padding: 14px 16px; }
.panel__body > * + * { margin-top: 10px; }
.panel--teal { border-color: var(--teal); }

.addr { font-size: var(--fs-meta); line-height: 1.55; font-style: normal; }

/* Two-column layout used by event detail and wizard step 5. */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* ---- Form controls ----------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 20px;
}

.field { display: block; }
.textarea--code { font-size: var(--fs-meta); line-height: 1.5; white-space: pre-wrap; }

/* The formatting editor over the agreement text: a toolbar of the three
   things the agreement can print, and an editable area styled as a field. */
.rte__toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.rte__toolbar .btn[aria-pressed="true"] { background: var(--teal-tint); border-color: var(--teal); color: var(--teal-deep); }
.rte__source { margin-left: auto; }
.rte__link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.rte__link .input { flex: 1 1 260px; }
.textarea.rte__area ol { margin: 0 0 8px 18px; padding: 0; }
.textarea.rte__area a { color: var(--teal); text-decoration: underline; }
/* .textarea.rte__area outranks the base .textarea rule below, whatever the order. */
.textarea.rte__area { min-height: 16em; height: auto; overflow: auto; resize: none; }
/* h3, not the h4 the printed agreement uses for this same "## " line: this
   field's own label is an h2, and the agreement's intervening h3 section
   heading has no equivalent here, so h3 is what keeps the level sequence
   unbroken on this page (axe heading-order). */
.rte__area h3 { font-family: var(--sans); font-size: var(--fs-body); font-weight: 600; color: var(--teal-deep); margin: 12px 0 4px; }
.rte__area h3:first-child { margin-top: 0; }
.rte__area p { margin: 0 0 8px; }
.rte__area ul { margin: 0 0 8px 18px; padding: 0; }
.rte__area li { margin-bottom: 3px; }
/* Two fields that are one thing — a term's start and end — on one line. */
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .field-pair { grid-template-columns: 1fr; } }
/* The pair's .form-grid cell needs room for two date inputs, not one — at
   768–1024px auto-fit gives a single cell ~220-230px, narrower than two
   dates side by side need (~285px), which overflows the page at 1024px
   where the pair lands as the grid's last column with nothing to bleed
   into. Span two tracks instead — but only once .form-grid can actually
   have two: a spanning item forces auto-fit's repeat count up to meet the
   span even when the container is too narrow for a second 220px column,
   which squeezed every other field in the row at 320px. Below 481px the
   field pair already stacks its own two inputs (see .field-pair above),
   so nothing is gained by spanning there anyway. */
@media (min-width: 481px) {
  .form-grid .field--span-2 { grid-column: span 2; }
}
.field__label {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-meta);
  font-weight: 600;
}
.field__hint {
  margin-top: 5px;
  font-size: var(--fs-small);
  color: var(--muted);
}
.field__error {
  margin-top: 5px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--danger);
}

.input, .select, .textarea {
  display: block;
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  padding: 7px 10px;
  font: 400 var(--fs-body)/1.4 var(--sans);
  color: var(--ink);
}
.textarea { min-height: 84px; resize: vertical; }
.select {
  appearance: none;
  padding-right: 30px;
  /* Chevron as an inline SVG data URI — no icon font, no network request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%235a6360' stroke-width='1.4'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--teal); }
.input::placeholder, .textarea::placeholder { color: #8a8478; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input:disabled, .select:disabled, .textarea:disabled {
  background: #f4f2ec; color: var(--muted);
}

.input--search { padding-left: 10px; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-body);
}
.choice + .choice { margin-top: 8px; }
.choice input { margin: 3px 0 0; accent-color: var(--teal); width: 15px; height: 15px; }

/* Flat toggle chips — funding selector (§13.4 roster picker). */
.toggle-set { display: flex; gap: 8px; flex-wrap: wrap; }
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: #fff;
  padding: 7px 13px;
  font-size: var(--fs-meta);
  cursor: pointer;
}
.toggle input { accent-color: var(--teal); margin: 0; }
.toggle:hover { border-color: var(--muted); }
.toggle.is-selected {
  background: var(--teal-tint);
  border-color: var(--teal);
  color: var(--teal-deep);
  font-weight: 600;
}

/* ---- Roster rows (§13.4 roster picker) --------------------------------- */

.roster { border: 1px solid var(--rule-strong); }
.roster__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
}
.roster__row:last-child { border-bottom: 0; }
.roster__row.is-muted { color: var(--muted); background: #faf9f5; }
.roster__initials {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%; /* design-exception: §13.4 specifies an initials circle */
  display: grid; place-items: center;
  background: var(--teal-tint);
  color: var(--teal-deep);
  font-size: var(--fs-small);
  font-weight: 600;
}
.roster__row.is-muted .roster__initials { background: #eeece6; color: var(--muted); }
.roster__who { flex: 1 1 auto; min-width: 0; }
.roster__name { display: block; font-weight: 600; }
.roster__meta {
  display: block;
  font-size: var(--fs-small);
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.roster__aside { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Roster as a picker: each row is a label around its checkbox. */
.roster--pick { max-height: 520px; overflow-y: auto; }
.roster--pick .roster__row { cursor: pointer; }
.roster--pick .roster__row:hover { background: var(--teal-tint); }
.roster--pick .roster__row:has(:checked) { background: var(--teal-tint); }
.roster__check { flex: 0 0 auto; margin: 0; width: 16px; height: 16px; accent-color: var(--teal); }
.picker-tools { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; }
.picker-tools__search { flex: 1 1 240px; }

/* Who is covered: what the form will save, in full, each with their own
   kind and months. Small controls so a row stays one line. */
.covered td { vertical-align: middle; }
.select--sm, .input--sm { padding: 4px 8px; font-size: var(--fs-meta); }
.input--sm.u-num { width: 5.5em; }
/* The base .select reserves 30px on the right for its chevron; at this
   padding "Complimentary" runs under the arrow, so keep that clearance. */
.select--sm { width: auto; padding-right: 24px; }

/* ---- Wizard stepper: joined rectangles --------------------------------- */

.stepper { display: flex; flex-wrap: wrap; }
.stepper__step {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--rule-strong);
  border-right-width: 0;
  padding: 7px 14px;
  font-size: var(--fs-meta);
  color: var(--muted);
  background: #fff;
}
.stepper__step:last-child { border-right-width: 1px; }
.stepper__step.is-active {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: #fff;
  font-weight: 600;
}
.stepper__step.is-active + .stepper__step { border-left-color: var(--teal-deep); }
.stepper__num { font-size: var(--fs-micro); letter-spacing: var(--ls-micro); }
/* A step already reached is a link back to it; it reads like the others.
   The li keeps its own padding for the plain-text steps (Setup, the active
   step), which have no wrapping element to carry it instead. A linked step's
   only child is this anchor, so give it a matching negative margin to escape
   that padding and an identical padding of its own to restore the same
   visual inset — the look is unchanged, but the link's hit area now fills
   the whole joined rectangle instead of just the words inside it. */
.stepper__link {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -7px -14px;
  padding: 7px 14px;
  color: inherit;
  text-decoration: none;
}
.stepper__link:hover { color: var(--teal); }

/* ---- Utilization bars (§19.1) ------------------------------------------ */

.util + .util { margin-top: 14px; }
.util__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-meta);
  margin-bottom: 5px;
}
.util__track { height: 9px; background: #eeece6; }
.util__fill  { height: 100%; background: var(--teal); }
.util__fill--low { background: var(--orange); }

/* ---- Sticky totals bar (§13.4 wizard step 2) --------------------------- */

.totals {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px 26px;
  flex-wrap: wrap;
  background: var(--teal-deep);
  color: #fff;
  padding: 11px var(--gutter);
}
.totals__item { font-size: var(--fs-meta); color: var(--teal-nav); }
.totals__item strong {
  display: block;
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* #6f9b9c measured 4:1 on --teal-deep, short of the 4.5:1 text needs (1.4.3);
   #7fa9aa keeps the same de-emphasised, not-yet-entered feel at 4.77:1. */
.totals__item.is-pending strong { color: #7fa9aa; font-weight: 400; }
.totals__total { margin-left: auto; text-align: right; }
.totals__total .fig { color: #fff; }
.totals__total .micro { color: var(--teal-nav); }
.totals .btn--primary:focus-visible { outline-color: #fff; }

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 900px) {
  /* Nav drops to its own row so the firm/user block keeps the top right. */
  .hdr__nav { order: 3; flex-basis: 100%; gap: 18px; padding-bottom: 2px; }
  .hdr__user { margin-left: auto; }

  .cols { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .stats--3 .stat:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  :root { --gutter: 16px; --fs-title: 23px; --fs-fig: 23px; --fs-fig-lg: 27px; }
  .hdr { gap: 0 16px; }
  .hdr__nav { gap: 16px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { border-left: 0; padding-left: 0; }
  .stat + .stat { border-top: 1px solid var(--rule); }
  .totals__total { margin-left: 0; text-align: left; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- Print (the shipping page goes on paper) ---------------------------- */

@media print {
  .hdr, .skip, .btn, .page-head__aside { display: none; }
  .page { max-width: none; padding: 0; }
  .panel { break-inside: avoid; border-color: #000; }
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  a { text-decoration: none; color: inherit; }
  .band { border-left-width: 3px; }
}

/* ---- Document preview (wizard step 5) ---------------------------------- */

.doc-preview {
  border: 1px solid var(--rule-strong);
  background: #fff;
  height: 640px;
  overflow: hidden;
}
.doc-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* ---- Editable requirement templates (/admin/requirements) -------------- */
/*
 * A row that opens into its own form. <details> rather than script: the whole
 * list stays readable at a glance, and every field is reachable by keyboard
 * with no JavaScript to fail.
 */

.req {
  border-bottom: 1px solid var(--rule);
}
.req:last-child {
  border-bottom: 0;
}

.req__summary {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
}
.req__summary::-webkit-details-marker {
  display: none;
}
.req__summary:hover {
  background: rgba(0, 0, 0, 0.02);
}
.req__summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

.req__what {
  flex: 1 1 auto;
  min-width: 0;
}
.req__due,
.req__use {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-small);
}

/* The disclosure triangle, drawn rather than borrowed, so it matches the
   serif-and-rules language instead of the browser's own. */
.req__summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 1em;
  color: var(--muted);
  font-family: var(--serif);
}
.req[open] > .req__summary::before {
  content: "\2013";
}

.req__form {
  padding: 4px 20px 22px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 640px) {
  .req__summary {
    flex-wrap: wrap;
    gap: 6px 14px;
  }
  .req__what {
    flex: 1 0 100%;
  }
}


/* ---- Footer ------------------------------------------------------------ */

.ftr {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule-strong);
  background: var(--paper);
  margin-top: 48px;
}
.ftr__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
}
.ftr__line {
  font-size: var(--fs-small);
  color: var(--muted);
}
.ftr__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: var(--fs-small);
}
.ftr__links a { color: var(--teal); }

@media (max-width: 560px) {
  .ftr__inner { flex-direction: column; }
}


/* ---- The public front door --------------------------------------------- */

.hero {
  padding: 44px 0 34px;
  border-bottom: 1px solid var(--rule);
  max-width: 62ch;
}
/* Two columns: the words, and a real capture of a firm's overview (§13.2 B1). */
.hero--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px 48px;
  align-items: start;
}
.hero--split .hero__title { font-size: 32px; }
.hero--split .hero__lede { font-size: 15px; line-height: 1.6; }
.hero__figure { margin: 0; }
.hero__shot { display: block; width: 100%; height: auto; border: 1px solid #d8d4c9; background: #fff; }
.hero__caption { margin-top: 8px; font-size: var(--fs-micro); color: var(--muted); text-align: center; letter-spacing: 0; text-transform: none; }
@media (max-width: 760px) {
  .hero--split { grid-template-columns: 1fr; }
}

/* What you can do here: a ruled two-column list, not cards. */
.caps { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.caps__row { padding: 12px 0; border-bottom: 1px solid #e6e2d8; }
.caps__row:nth-last-child(-n+2) { border-bottom: 0; }
.caps__title { font-size: 14px; font-weight: 600; }
.caps__body { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
@media (max-width: 640px) {
  .caps { grid-template-columns: 1fr; }
  .caps__row:nth-last-child(2) { border-bottom: 1px solid #e6e2d8; }
}

/* The partner team as a ruled list (§13.2 B3). */
.people { list-style: none; margin: 0; padding: 0; }
.people__row { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.people__row:first-child { padding-top: 4px; }
.people__row:last-child { border-bottom: 0; }
.people__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.people__name { font-size: 15px; font-weight: 600; }
.people__role { color: var(--muted); }
.people__bio { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.people__contact { margin: 8px 0 0; font-size: var(--fs-meta); }
.people__dot { color: #b9b4a7; margin: 0 6px; }
.hero__eyebrow {
  color: var(--muted);
  margin-bottom: 10px;
}
.hero__title {
  font-family: var(--serif);
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  color: var(--teal-deep);
}
.hero__lede {
  margin-top: 14px;
  font-size: var(--fs-section);
  line-height: var(--lh-body);
}
.hero__actions { margin-top: 24px; }
.hero__note {
  margin-top: 20px;
  font-size: var(--fs-small);
  color: var(--muted);
}

@media (max-width: 560px) {
  .hero { padding-top: 28px; }
}

/* ---- Key/value pairs (contact details) --------------------------------- */

.kv__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 6px 0;
  border-top: 1px solid var(--rule);
}
.kv__row:first-child { border-top: 0; }
.kv__key {
  flex: 0 0 7.5rem;
  color: var(--muted);
  font-size: var(--fs-small);
}
.kv__val { font-size: var(--fs-small); }

/* ---- Record a shipment (/shipping, /events/{code}) --------------------- */
/*
 * The form opens from a <details> summary styled as the panel head, so the
 * page reads as a list of conferences until somebody has a tracking number to
 * type. Same approach as .req: no script, keyboard-reachable, and the closed
 * state costs one line.
 */

.ship-form > summary,
.spec-list > summary {
  cursor: pointer;
  list-style: none;
}
.ship-form > summary::-webkit-details-marker,
.spec-list > summary::-webkit-details-marker {
  display: none;
}
.ship-form > summary:hover,
.spec-list > summary:hover {
  background: rgba(0, 0, 0, 0.02);
}
.ship-form > summary:focus-visible,
.spec-list > summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

/* An affordance, since the disclosure marker is suppressed. */
.ship-form > summary .panel__title::after,
.spec-list > summary .panel__title::after {
  content: " +";
  color: var(--teal);
  font-weight: 700;
}
.ship-form[open] > summary .panel__title::after,
.spec-list[open] > summary .panel__title::after {
  content: " \2013";
}

@media print {
  /* Nobody fills in a tracking number with a pen. */
  .ship-form { display: none; }
}


/* ---- Company profile (§6 /profile, /admin/assets) ------------------------
 *
 * A firm's own logo, artwork and boilerplate. Three small components: the
 * file input, the two-background logo proof, and the format reference.
 */

/* Browsers style the button inside a file input themselves and ignore most of
 * what .input sets; the padding is reduced so the native button does not sit
 * taller than a text field beside it in the same grid. */
.input--file {
  padding: 5px 8px;
  line-height: 1.4;
}
.input--file::file-selector-button {
  margin-right: 10px;
  padding: 4px 11px;
  border: 1px solid var(--teal);
  border-radius: 2px;
  background: transparent;
  color: var(--teal-deep);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.input--file::file-selector-button:hover { background: var(--teal-tint); }

/* The same mark on paper and on the deep teal ABI puts headers on. A logo
 * that vanishes against one of them is one ABI cannot use, and the firm is
 * the only party who can fix it — so both are shown rather than described. */
.logo-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}
.logo-proof__cell {
  flex: 0 0 auto;
  width: 200px;
  padding: 14px;
  border: 1px solid var(--rule);
  text-align: center;
}
.logo-proof__cell img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90px;
  margin: 0 auto 8px;
}
.logo-proof__cell--dark {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}
.logo-proof__cell--dark .micro { color: var(--teal-nav); }
.logo-proof__meta { flex: 1 1 220px; }

/* The format reference. A definition list rather than a table: it is prose a
 * designer reads once, not data anyone sorts. */
.spec-list__body { margin: 0; }
.spec-list__body dt {
  font-weight: 600;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.spec-list__body dt:first-child { padding-top: 0; border-top: 0; }
.spec-list__body dd {
  margin: 2px 0 10px;
  font-size: var(--fs-meta);
  color: var(--muted);
}
.spec-list__formats {
  margin-left: 8px;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Several actions in one cell: a link and one form per button. */
.table__actions .u-inline { display: inline-block; margin-left: 14px; }
.table__actions .u-inline:first-child { margin-left: 0; }

/* ---- Pagination ----------------------------------------------------------
 *
 * A hairline-ruled strip, not a row of buttons: this is navigation between
 * views of one list, and giving it button weight would compete with the
 * actions on the page. §13's rules apply as everywhere — 0–3px radius, no
 * shadow, teal for the interactive parts.
 */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.pager__count {
  font-size: var(--fs-meta);
  color: var(--muted);
}

.pager__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pager__link {
  display: block;
  min-width: 32px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: var(--fs-meta);
  text-align: center;
  color: var(--teal);
  text-decoration: none;
}

.pager__link:hover {
  border-color: var(--rule-strong);
  background: var(--paper-shade, transparent);
}

.pager__link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

/* The page being read: stated, not a link to itself. */
.pager__link.is-current {
  border-color: var(--teal-deep);
  background: var(--teal-deep);
  color: #fff;
  font-weight: 600;
}

/* Kept in the flow rather than removed, so Previous/Next do not shift
   position as you move through the pages. */
.pager__link.is-disabled {
  color: #9a948a;
}

.pager__gap {
  padding: 0 2px;
  font-size: var(--fs-meta);
  color: var(--muted);
}

@media print {
  .pager { display: none; }
}

/* The members-only filter beside the roster search (wizard step 3). A plain
 * checkbox and label: it is a filter, not an action, and giving it button
 * weight would put it in competition with the Add buttons next to it. */
.picker-tools__toggle {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-size: var(--fs-meta);
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.picker-tools__toggle input {
  margin: 0;
  accent-color: var(--teal);
}

/* ---- Confirm-in-a-row ----------------------------------------------------
 *
 * A destructive action inside a table cell (deleting a draft agreement on
 * /admin/contracts). Same bargain as the void control on an agreement's own
 * page — nothing happens until the disclosure is opened — but compact enough
 * to live in an actions column. No script: it is a <details>, so it is
 * keyboard-reachable and works with none.
 */
.row-confirm {
  display: inline-block;
  margin-left: 14px;
  vertical-align: baseline;
}

.row-confirm__summary {
  cursor: pointer;
  list-style: none;
  color: var(--danger);
  text-decoration: underline;
}

.row-confirm__summary::-webkit-details-marker { display: none; }

.row-confirm__summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Opened, it drops a short panel under the row's actions rather than
   stretching the cell — the warning has to be read, not glanced past. */
.row-confirm__form {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--danger);
  border-radius: 2px;
  background: #fcebeb;
  text-align: left;
  white-space: normal;
  min-width: 220px;
}

.row-confirm__warning {
  margin-bottom: 8px;
  font-size: var(--fs-small);
  color: var(--removed-text, #7a2318);
}