/* The app's own stylesheet — born comment-only at the flip (Story 16.1.2;
 * hub spec 2026-08-28-tailwind-free-apps-design §2: app-owned CSS lives
 * here, Rails-conventional name, token-consuming var(--…) only, NO hex
 * literals). The 16.1.4 rewrites grow it: the app's :root tokens (the
 * @theme palette and type pairs relocate as custom properties), the
 * hand-expanded semantic vocabulary, and the per-surface rules the map
 * (docs/tailwind-removal-map.md) prescribes. Served directly by Propshaft
 * and linked third in the layout's cascade — framework, skin, then this
 * sheet (spec/css_delivery_spec.rb pins the order). */

/* ===== App tokens (Story 16.1.4's brand register, SEMANTICIZED at Story
 * 17.1.1 — hub dark-mode spec sec. 6 / D7): every color consumer now reads
 * a semantic `--lc-app-*` token (or, for the two white meanings, the
 * framework's `--surface-elevated` / `--ink-inverse`, both #FFFFFF — the
 * `--color-white` meaning split the spec named as the marker case). The
 * raw Tailwind-era scale (--color-blue-N, --color-gray-N, …) RETIRED whole
 * at this leg: after the re-point no rule consumed any of its 17 tokens
 * (green-200 and yellow-warning were already consumer-less). Each semantic
 * token's value below IS the raw value it replaced — this leg changes zero
 * rendered pixels. The `.blk--bg-*` utility class NAMES keep their frozen
 * raw-scale spelling (workflow-JSON HtmlNugget vocabulary — markup data,
 * not tokens); their declarations read the semantic layer like everything
 * else. `--w-field`/`--w-field-small` carry the dead Tailwind entry's
 * @utility widths as tokens (the @utility register), unchanged. ===== */
:root {
  /* Inks. Two heading inks is the app's authored design: headers 1-2 ride
   * the standard ink, headers 3-6 the strong (true-black) ink. */
  --lc-app-ink: #2E2D35;
  --lc-app-ink-strong: #000000;
  --lc-app-ink-muted: #808080;

  /* Surfaces. warm = the Legal-Pad golds; inverse = the dark ink used AS a
   * surface (mobile nav active row, white ink on it). */
  --lc-app-surface-muted: #F1F1F1;
  --lc-app-surface-warm: #FFEFD4;
  --lc-app-surface-warm-strong: #FFD99C;
  --lc-app-surface-inverse: #2E2D35;

  /* Borders. strong = the table/tab dividers drawn at ink weight. */
  --lc-app-border-subtle: #C5C5C5;
  --lc-app-border-strong: #2E2D35;

  /* The action family (the app's brand blue) — ramp idiom mirrors vituno's
   * brand-primary/-hover/-active. NOTE: -hover also serves as the REST ink
   * on warm surfaces (admin-nav signout, pagination .current) — the darker
   * shade is what clears AA on gold; spec/contrast_pairs_spec.rb pins both
   * pairs. */
  --lc-app-action: #106DE6;
  --lc-app-action-hover: #094799;
  --lc-app-action-active: #052043;

  /* The fill/ink split (Story 17.1.2): in dark, the ramp's FILL role
   * (white labels ≥4.5 need a mid blue) and its INK role (link text ≥4.5
   * on near-black grounds needs a light blue) have DISJOINT AA windows —
   * the ghaffaritabrizi link-split class. The -ink tier carries the text/
   * icon/link consumers; light halves are byte-equal to the fill ramp, so
   * the split changes zero light pixels (contrast_pairs_spec pins that
   * identity and the dark floors of both tiers). */
  --lc-app-action-ink: #106DE6;
  --lc-app-action-ink-hover: #094799;
  --lc-app-action-ink-active: #052043;

  /* The quiet button's ink (hub Initiative 130; Omid, 2026-09-30): vituno
   * v0.22.0's --brand-primary-ink, the framework token the quiet button's
   * label reads (the theme toggle is this app's only one), set APP-LOCALLY
   * to the lawcuments navy pair — the skin (vendor/vituno/skin/brand.css)
   * sets no framework brand token, so without this line the label is stock
   * indigo. The dark half is in the @supports block below; both are pinned
   * against every ground the toggle sits on in spec/contrast_pairs_spec.rb.
   * The app's main action stays blue (--lc-app-action) — navy quiet beside
   * blue primary is Omid's call, made knowing it. */
  --brand-primary-ink: #1E2A3A;

  /* Warm accents (hover inks/borders on white-on-blue links; the icon and
   * stripe gold). */
  --lc-app-accent-warm: #FFD99C;
  --lc-app-accent-warm-strong: #EDAA38;

  /* Status. */
  --lc-app-danger: #BD2A2E;
  --lc-app-danger-soft: #FFEEEF;
  --lc-app-success-soft: #E4FBED;

  --font-roboto: Roboto, sans-serif;
  --font-lora: Lora, serif;

  /* Story 16.1.5 (drop leg): vituno base.css paints `body { font-family:
   * var(--font) }`, and the framework default (Atkinson Hyperlegible Next —
   * its @font-face is deliberately excised from the app bundle) is not this
   * app's face. Re-point the framework token at the app's own stack — this
   * sheet links after fgl-app.min.css, so the pin wins by cascade order
   * (the deccentral-app 12.1.5 precedent, its D-A re-point). */
  --font: Roboto, sans-serif;

  --w-field: 20.625rem;
  --w-field-small: 10rem;

  --text-header-1: 2.75rem;
  --text-header-1--line-height: 3.5rem;
  --text-header-1-mobile: 5.5rem;
  --text-header-1-mobile--line-height: 7rem;
  --text-header-2: 2rem;
  --text-header-2--line-height: 2.5rem;
  --text-header-2-mobile: 4rem;
  --text-header-2-mobile--line-height: 5rem;
  --text-header-3: 1.75rem;
  --text-header-3--line-height: 2.25rem;
  --text-header-3-mobile: 3.5rem;
  --text-header-3-mobile--line-height: 4.5rem;
  --text-header-4: 1.5rem;
  --text-header-4--line-height: 2rem;
  --text-header-4-mobile: 3rem;
  --text-header-4-mobile--line-height: 4rem;
  --text-header-5: 1.25rem;
  --text-header-5--line-height: 1.75rem;
  --text-header-5-mobile: 2.5rem;
  --text-header-5-mobile--line-height: 3.5rem;
  --text-header-6: 1rem;
  --text-header-6--line-height: 1.5rem;
  --text-header-6-mobile: 2rem;
  --text-header-6-mobile--line-height: 3rem;
  --text-intro: 1.625rem;
  --text-intro--line-height: 2.5rem;
  --text-intro-mobile: 3.25rem;
  --text-intro-mobile--line-height: 5rem;
  --text-body-large: 1.25rem;
  --text-body-large--line-height: 1.875rem;
  --text-body-large-mobile: 2.5rem;
  --text-body-large-mobile--line-height: 3.75rem;
  --text-body: 1rem;
  --text-body--line-height: 1.5rem;
  --text-body-mobile: 2rem;
  --text-body-mobile--line-height: 3rem;
  --text-button: 1rem;
  --text-button--line-height: 1.25rem;
  --text-button-mobile: 2.5rem;
  --text-button-mobile--line-height: 3rem;
  --text-action-link: 1.5rem;
  --text-action-link--line-height: 2rem;
  --text-action-link-mobile: 3rem;
  --text-action-link-mobile--line-height: 4rem;
  --text-standalone-link: 1.25rem;
  --text-standalone-link--line-height: 1.875rem;
  --text-standalone-link-mobile: 2.5rem;
  --text-standalone-link-mobile--line-height: 3.75rem;
}

/* Dark halves (Story 17.1.2; hub dark-mode spec sec. 7's app-owned arm —
 * lawcuments.com stays paper-light by D6, so the SITE hands this app no
 * dark values; the app authors its own against the stock dark grounds
 * the v0.20.0 payload resolves under it, #131318/#1E1E26). Voice: the
 * Legal Pad's warmth survives as warm near-blacks (the ghaffaritabrizi
 * warm-dark precedent) with luminous golds as accents; inks are warm
 * off-whites; the action family splits into fill vs ink tiers (see the
 * :root comment above). Two pairs are IDENTICAL on purpose:
 * surface-inverse (already a dark surface — white ink on it clears 13:1
 * in both schemes) and accent-warm-strong (a luminous gold that reads on
 * both grounds). Every dark floor is machine-pinned in
 * contrast_pairs_spec's dark-halves block. The @supports wrapper is the
 * fleet's custom-property fallback shape (the plain :root above is what
 * pre-Baseline browsers keep; hub spec sec. 1's amended note). */
@supports (color: light-dark(#000, #fff)) {
  :root {
    --lc-app-ink: light-dark(#2E2D35, #E8E7EF);
    --lc-app-ink-strong: light-dark(#000000, #FFFFFF);
    --lc-app-ink-muted: light-dark(#808080, #A5A4B2);
    --lc-app-surface-muted: light-dark(#F1F1F1, #23232B);
    --lc-app-surface-warm: light-dark(#FFEFD4, #2A2418);
    --lc-app-surface-warm-strong: light-dark(#FFD99C, #3A2F17);
    --lc-app-surface-inverse: light-dark(#2E2D35, #2E2D35);
    --lc-app-border-subtle: light-dark(#C5C5C5, #3A3A44);
    --lc-app-border-strong: light-dark(#2E2D35, #8A8896);
    --lc-app-action: light-dark(#106DE6, #3363B2);
    --lc-app-action-hover: light-dark(#094799, #2B528F);
    --lc-app-action-active: light-dark(#052043, #1F3B66);
    --lc-app-action-ink: light-dark(#106DE6, #7FA9E8);
    --lc-app-action-ink-hover: light-dark(#094799, #A9C6F4);
    --lc-app-action-ink-active: light-dark(#052043, #C7DAF8);
    --brand-primary-ink: light-dark(#1E2A3A, #9CB6D8);
    --lc-app-accent-warm: light-dark(#FFD99C, #F2CE7E);
    --lc-app-accent-warm-strong: light-dark(#EDAA38, #EDAA38);
    --lc-app-danger: light-dark(#BD2A2E, #F27B76);
    --lc-app-danger-soft: light-dark(#FFEEEF, #3B1A1C);
    --lc-app-success-soft: light-dark(#E4FBED, #16301F);
  }
}

/* ===== Brand lockup scheme swap (Story 17.1.2) — logo.png and
 * logo-admin.svg bake the charcoal wordmark (#2E2D35), illegible on the
 * dark navs (the hub spec §0.8 baked-literal class; the ghaffaritabrizi
 * PDF-icon precedent). Each nav renders BOTH lockups; these rules show
 * exactly one per scheme, covering BOTH dark paths — the media-guarded
 * system default and the explicit data-theme override — mirroring the
 * framework's own scheme model. ===== */
.main-nav__logo--dark,
.admin-nav__logo--dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .main-nav__logo--light,
  :root:not([data-theme="light"]) .admin-nav__logo--light {
    display: none;
  }
  :root:not([data-theme="light"]) .main-nav__logo--dark,
  :root:not([data-theme="light"]) .admin-nav__logo--dark {
    display: inline;
  }
}
:root[data-theme="dark"] .main-nav__logo--light,
:root[data-theme="dark"] .admin-nav__logo--light {
  display: none;
}
:root[data-theme="dark"] .main-nav__logo--dark,
:root[data-theme="dark"] .admin-nav__logo--dark {
  display: inline;
}

/* ===== Theme toggle row (Story 17.1.2) — site-owned placement chrome for
 * the fleet control (layouts/_theme_toggle); the button's own paint is the
 * framework's (.btn family + theme-toggle classes, in the app bundle).
 * Geometry only — no color declarations, nothing to pair. ===== */
.theme-toggle-row {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

/* This app's target-size floor is 44px on every surface
 * (admin_mobile_scale_spec enforces it): the framework's .btn--small
 * renders 36px, so the row grows its control to the floor — geometry
 * only, the paint stays the framework's. */
.theme-toggle-row .btn {
  min-block-size: 44px;
}

/* ===== Page frames (Story 16.1.4, the map's page-frames surface) ===== */
.page-frame {
  display: flex;
  flex-direction: column;
}

.side-rail {
  background-color: var(--lc-app-surface-warm);
  min-height: 100vh;
  width: 20rem;
}

.canvas-gold {
  background-color: var(--lc-app-surface-warm);
}

.page-shell {
  width: 100%;
}

.admin-frame {
  display: flex;
  flex-direction: column;
}

@media (width >= 64rem) {
  .page-frame {
    flex-direction: row;
  }
}

/* ===== Navs & menus (Story 16.1.4, the map's navs surface) ===== */
.main-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--lc-app-surface-warm-strong);
  width: 100%;
}

.main-nav__brand {
  display: flex;
  align-items: center;
}

.main-nav__logo {
  height: 2.5rem;
  margin-left: 1rem;
}

.admin-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--lc-app-surface-warm-strong);
  width: 100%;
}

.admin-nav__brand {
  align-self: center;
  padding-block: 1rem;
}

.admin-nav__logo {
  margin-left: 1rem;
  height: 2.5rem;
}

.admin-nav__session {
  display: flex;
  justify-content: flex-end;
  width: 20%;
  margin-right: 4rem;
  align-items: center;
}

.admin-nav__signout {
  display: flex;
  align-items: center;
  font-family: var(--font-roboto);
  font-size: var(--text-body-mobile);
  line-height: var(--text-body-mobile--line-height);
  color: var(--lc-app-action-ink-hover);
  font-weight: 700;
}

.admin-nav__signout:hover {
  color: var(--lc-app-action-ink-active);
}

.admin-nav__signout .svg-icon {
  margin-right: 0.25rem;
}

.admin-nav__menu {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.site-header__home {
  align-self: center;
}

.site-header__logo {
  height: auto;
}

.site-header__nav {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.site-header__nav .standalone-link {
  display: block;
}

@media (width >= 64rem) {
  .main-nav {
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
    width: 20rem;
  }

  .main-nav__logo {
    height: auto;
    margin-left: 0;
    padding: 1.5rem;
    margin-block: 1.5rem;
  }

  .admin-nav__signout {
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
  }

  .site-header__logo {
    height: 2.5rem;
  }
}

/* ===== The disclosure menu, hand-expanded (Story 16.1.4; was markup
 * utilities + partials/layout.css). The CLOSED state moves OFF the markup
 * into the rules (the F85-immune form — hub KB
 * tailwind-v4-layer-precedence-breaks-state-css: the open-state override
 * wins by ordinary specificity, no layer in sight). The #icon-container /
 * #bars / #times ids are the JS + open-state hooks (one menu renders per
 * layout, so the duplicate ids across variants never co-occur). ===== */
.menu {
  position: relative;
}

.menu__toggle {
  display: flex;
  cursor: pointer;
}

.menu__icon-box {
  display: flex;
  justify-content: center;
  background-color: var(--lc-app-surface-warm-strong);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.menu__icon-box--admin {
  margin-left: 0.5rem;
  width: 5rem;
}

.menu__icon-box--header {
  margin-left: 1.5rem;
  width: 10rem;
}

.menu-icon {
  font-size: 1.875rem;
  line-height: 2.25rem;
  padding: 1.5rem;
}

.menu-icon--large {
  font-size: 3.75rem;
  line-height: 1;
  padding: 3rem;
}

.menu-icon--bars {
  color: var(--lc-app-action-ink);
}

.menu-icon--times {
  color: var(--ink-inverse);
}

.menu #times {
  display: none;
}

.menu-dropdown {
  position: absolute;
  right: 0;
  opacity: 0;
  visibility: hidden;
  background-color: var(--lc-app-action);
  pointer-events: auto;
  width: 100vw;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-dropdown--admin {
  padding-top: 1rem;
  padding-inline: 2rem;
}

.menu-dropdown--header {
  padding-top: 2rem;
  padding-inline: 4rem;
}

@media (width >= 64rem) {
  .menu__icon-box--header {
    margin-left: 0.75rem;
    width: 5rem;
  }

  .menu-icon--large {
    font-size: 1.875rem;
    line-height: 2.25rem;
    padding: 1.5rem;
  }

  .menu-dropdown--header {
    width: 24rem;
    padding-top: 1rem;
    padding-inline: 2rem;
  }
}

/* Open state — relocated VERBATIM from partials/layout.css's un-layered
 * tail (Story 4.3.1's mechanism; the partial's copy retires with this
 * move). Un-layered on purpose, as before. */
.menu.menu-open .menu-dropdown {
  opacity: 1;
  visibility: visible;
}

.menu.menu-open #icon-container {
  background-color: var(--lc-app-action);
}

.menu.menu-open #bars {
  display: none;
}

.menu.menu-open #times {
  display: block;
}

/* ===== Admin dashboard (Story 16.1.4, the map's admin/index surface).
 * Fit tests RECORDED: vituno tables.css DECLINED (its space-2/3 cell
 * rhythm, neutral borders, and type would repaint the app's two-mode
 * design — gold header band, blue row borders, py-6 cells; the map's
 * adoption posture is paint-preserved hand-expansion). vituno badges.css
 * DECLINED (the status families' palettes are not the app's gold pill).
 * The rename also RESOLVES a live collision: the old markup's `table`
 * display-utility class had been catching vituno's `.table` component
 * rules (0,1,1 cell padding beat the py-6 utilities) since the bump —
 * unguarded; these rules restore the map's recorded rhythm. ===== */
.admin-page {
  background-color: var(--surface-elevated);
}

.admin-page__inner {
  display: flex;
  flex-direction: column;
}

.admin-page__title {
  font-weight: 700;
  margin-bottom: 2rem;
}

.admin-search-toggle {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.5rem;
}

.admin-search-toggle__select {
  font-weight: 700;
}

.admin-search {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.admin-search__input {
  width: 100%;
  margin-bottom: 1rem;
}

.admin-search__submit {
  margin-bottom: 1rem;
}

.case-table {
  color: var(--lc-app-ink);
  margin-top: 0.75rem;
  width: 100%;
  border-collapse: collapse;
}

.case-table--cards tbody {
  background-color: var(--surface-elevated);
  border-top: 1px solid var(--lc-app-border-strong);
}

.case-table--cards tr {
  border-bottom: 1px solid var(--lc-app-border-strong);
}

.case-table__data {
  font-weight: 700;
  padding-left: 1rem;
  padding-block: 1.5rem;
  width: 100%;
  overflow-wrap: anywhere;
}

.case-table__actions {
  padding-left: 0.5rem;
  padding-right: 1rem;
  padding-block: 1.5rem;
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
}

.case-table__detail {
  display: inline-block;
  padding-block: 0.5rem;
}

.case-table--desktop thead tr {
  text-align: left;
  background-color: var(--lc-app-surface-warm);
}

.case-table--desktop th {
  font-weight: 400;
}

.case-table--desktop th.case-table__th-lead {
  font-weight: 700;
  padding-block: 1rem;
  padding-left: 1rem;
}

.case-table--desktop th.case-table__th-end {
  padding-right: 1rem;
}

.case-table--desktop tbody {
  background-color: var(--surface-elevated);
}

.case-table--desktop tbody tr {
  border-bottom: 1px solid var(--lc-app-action);
}

.case-table__lead {
  font-weight: 700;
  padding-left: 1rem;
  padding-block: 1.5rem;
}

.case-table__end {
  padding-right: 1rem;
  text-align: right;
}

.case-badge {
  background-color: var(--lc-app-surface-warm);
  border-radius: 0.25rem;
  padding-inline: 0.5rem;
}

.case-badge--stack {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.case-badge--inline {
  display: inline-block;
  margin-left: 0.5rem;
}

.pagination-row {
  display: flex;
  margin-top: 2rem;
  justify-content: center;
}

/* ===== Case detail + confirm-delete scaffolds (Story 16.1.4, the map's
 * admin/show + confirm_delete surfaces) ===== */
.detail-page {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-elevated);
  padding-block: 2.5rem;
}

.detail-col {
  display: flex;
  flex-direction: column;
  margin-inline: 1rem;
}

.detail-row {
  display: flex;
  margin-inline: 1rem;
}

.detail-stack {
  display: flex;
  flex-direction: column;
}

.detail-stack--tight {
  margin-top: 1rem;
}

.detail-stack--away {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.detail-strip {
  display: flex;
  align-items: center;
  background-color: var(--surface-elevated);
  padding-top: 1rem;
  margin-inline: 1rem;
}

.detail-back {
  display: inline-flex;
  padding-block: 0.5rem;
  margin-bottom: 1.25rem;
}

.detail-title {
  font-family: var(--font-roboto);
  font-weight: 700;
}

.detail-meta {
  display: flex;
  padding-top: 1rem;
  justify-content: space-between;
}

.link-danger {
  display: inline-block;
  font-weight: 700;
  color: var(--lc-app-danger);
  padding-block: 0.75rem;
}

.link-danger:hover {
  color: var(--lc-app-danger-soft);
}

.tab-bar {
  display: flex;
  justify-content: space-evenly;
  border: 2px solid var(--lc-app-border-strong);
  overflow: auto;
  border-radius: 0.5rem;
  margin-inline: 1rem;
}

.tab-bar__cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.tab-bar__cell--mid {
  border-left: 1px solid var(--lc-app-border-strong);
  border-right: 1px solid var(--lc-app-border-strong);
}

.tab-bar__cell--active {
  background-color: var(--lc-app-action);
}

.tab-bar__link {
  width: 100%;
  height: 100%;
  text-align: center;
}

.confirm-delete__title {
  margin-bottom: 1rem;
}

.confirm-delete__meta {
  margin-bottom: 0.5rem;
}

.confirm-delete__warning {
  margin-bottom: 1.5rem;
}

.confirm-delete__subtitle {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.confirm-delete__list {
  margin-bottom: 1.5rem;
}

.confirm-delete__runbook {
  margin-bottom: 2rem;
}

.confirm-delete__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.confirm-delete__cancel {
  font-weight: 700;
  margin-left: 2rem;
}

/* (0,2,0) so the danger colors beat the .button base chain's blue border
 * from the last-linked bundle (same play as the alert-body inherit). */
.button.button-danger {
  background-color: var(--lc-app-danger);
  border-color: var(--lc-app-danger);
}

.button.button-danger:hover {
  background-color: var(--lc-app-danger-soft);
}

/* ===== Editor partials (Story 16.1.4, the map's editor-partials surface;
 * the vituno accordion.css fit test is RECORDED DECLINED — this is a
 * JS-driven admin editor with icon swaps and aria-expanded) ===== */
.editor-docs {
  display: flex;
  flex-direction: column;
}

.editor-docs__title {
  margin-bottom: 1rem;
}

.editor-docs__link {
  display: inline-block;
  padding-block: 0.5rem;
  margin-bottom: 0.5rem;
  width: fit-content;
}

.editor-field {
  display: flex;
  flex-direction: column;
  margin-block: 1rem;
}

.editor-field__html {
  margin-block: 0.5rem;
}

.editor-field__label {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.editor-field__options {
  display: flex;
  flex-direction: column;
}

.editor-field__choice {
  display: flex;
  align-items: center;
}

.editor-field__choice-label {
  margin-left: 0.5rem;
}

/* Story 26.1.4: a repeatable group's item in the admin editor ("Co-seller 2"),
 * one bordered block per person in the editor's own spacing — vituno's
 * fieldset reset reaches only .fieldset and the wizard's .pantheon .nugget. */
.editor-group__item {
  margin-block: 1rem;
  padding: 0.5rem 1rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}

.editor-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.editor-accordion__open-all {
  color: var(--lc-app-action-ink);
  align-self: flex-end;
  padding-block: 0.75rem;
  font-weight: 700;
}

.editor-accordion__open-all:hover {
  color: var(--lc-app-action-ink-hover);
}

.editor-accordion__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--lc-app-border-subtle);
  width: 100%;
}

.editor-accordion__section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid var(--lc-app-border-subtle);
}

.editor-accordion__toggle {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.editor-accordion__toggle:hover {
  background-color: var(--lc-app-surface-muted);
}

.editor-accordion__title {
  padding-block: 1rem;
  font-weight: 700;
  color: var(--lc-app-action-ink);
}

.editor-accordion__icon {
  color: var(--lc-app-action-ink);
  font-size: 1.5rem;
  line-height: 2rem;
}

.editor-accordion__panel {
  display: flex;
  flex-direction: column;
}

.editor-accordion__submit {
  margin-block: 1rem;
}

@media (width >= 64rem) {
  .detail-page {
    align-items: center;
  }

  .detail-col {
    width: 50%;
    margin-inline: 3rem;
  }

  .detail-row {
    width: 50%;
    margin-inline: 3rem;
  }

  .detail-stack {
    align-items: center;
  }

  .detail-strip {
    width: 50%;
    justify-content: flex-start;
    padding-top: 1.75rem;
    margin-inline: 3rem;
  }

  .tab-bar {
    align-items: center;
    margin-inline: 3rem;
    width: 50%;
    align-self: center;
  }
}

@media (width >= 64rem) {
  .admin-search {
    flex-direction: row;
  }

  .admin-search__input {
    width: var(--w-field);
    margin-right: 1rem;
    margin-bottom: 0;
  }

  .admin-search__submit {
    margin-right: 0.5rem;
    margin-bottom: 0;
  }
}

/* ===== Public home (Story 16.1.4, the map's home/show surface). Fit test
 * RECORDED: vituno .card DECLINED (its border/radius/space-* rhythm is not
 * the home card's shadow-md/gold-canvas geometry — paint-preserved
 * hand-expansion per the adoption posture). The 13.1.1 phone-reflow values
 * carry over verbatim (marketing_reflow_spec pins both registers). ===== */
.home-card {
  background-color: var(--surface-elevated);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  padding-inline: 2rem;
  padding-top: 4rem;
  padding-bottom: 1rem;
  margin-top: 8rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  height: 100%;
  justify-content: space-between;
}

.home-card__logo {
  height: 5rem;
}

.home-card__center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-card__label {
  font-weight: 700;
  margin-bottom: 1rem;
}

.home-card__lede {
  margin-bottom: 2rem;
}

.workflow-search {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lc-app-surface-muted);
  border-radius: 0.5rem;
  margin-bottom: 4rem;
  width: 100%;
}

.workflow-search__input {
  min-width: 0;
  width: 100%;
  height: 6rem;
}

.workflow-search__options {
  max-height: 18rem;
  scroll-padding-block: 0.5rem;
  overflow-y: auto;
  padding-block: 0.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.workflow-search__option {
  padding-inline: 1rem;
  padding-block: 0.5rem;
  cursor: pointer;
}

.workflow-search__option:hover {
  color: var(--lc-app-action-ink-hover);
  font-weight: 600;
}

.home-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.home-links__sep {
  margin-inline: 1rem;
}

@media (width >= 64rem) {
  .home-card {
    padding-inline: 4rem;
  }

  .home-card__logo {
    height: 2.5rem;
  }

  .workflow-search__input {
    width: 24rem;
    height: 3rem;
  }
}

/* ===== Lawfirm alert scaffolding (Story 16.1.4, the map's alert-partial
 * surface): the box itself is vituno `.alert` + status variants; only the
 * row/icon/label scaffolding is app-owned. ===== */
.lawfirm-alert {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.lawfirm-alert__icon {
  font-size: 2em;
}

/* (0,2,0) on purpose: body-large's text-gray-300 utility (last-linked
 * bundle) would win a (0,1,0) tie — the alert body must INHERIT the
 * vituno status family's gate-verified ink instead. */
.lawfirm-alert .lawfirm-alert__body {
  margin-left: 1rem;
  color: inherit;
}

.lawfirm-alert__label {
  font-weight: 700;
}

/* ===== Lawfirm funnel (Story 16.1.4, the map's funnel surfaces:
 * hero/CTA rows + the shared confirmation/contact column + field
 * stacks; the honeypot rides the hidden ATTRIBUTE, D10's static
 * form). ===== */
.lawfirm-hero {
  display: flex;
  flex-direction: column;
}

.lawfirm-hero__clients {
  display: block;
  align-self: flex-end;
  margin-bottom: 0.75rem;
}

.lawfirm-hero__title {
  overflow-wrap: anywhere;
}

.lawfirm-hero__art {
  display: block;
  margin-right: 6rem;
  margin-left: 4rem;
}

.lawfirm-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.lawfirm-cta__lede {
  color: var(--ink-inverse);
}

.lawfirm-cta__link {
  width: 20rem;
}

.funnel-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}

.funnel-col__title {
  margin-bottom: 1.5rem;
}

.funnel-col__lede {
  margin-bottom: 5rem;
}

.funnel-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
}

.funnel-field__label {
  margin-bottom: 1rem;
}

.funnel-field__input {
  width: 100%;
  height: 6rem;
  border-color: var(--lc-app-action);
}

.funnel-field__area {
  width: 100%;
  border-color: var(--lc-app-action);
}

.funnel-submit {
  width: 100%;
}

@media (width >= 64rem) {
  .lawfirm-hero {
    align-items: center;
    flex-direction: row;
  }

  .lawfirm-cta {
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
  }

  .lawfirm-cta__action {
    margin-left: 0.75rem;
  }

  .lawfirm-cta__link {
    width: auto;
  }

  .funnel-col {
    max-width: 28rem;
  }

  .funnel-col__title {
    margin-bottom: 0.75rem;
  }

  .funnel-col__lede {
    margin-bottom: 2.5rem;
  }

  .funnel-field {
    margin-bottom: 1.5rem;
  }

  .funnel-field__label {
    margin-bottom: 0.5rem;
  }

  .funnel-field__input {
    width: 18rem;
    height: 3rem;
  }

  .funnel-submit {
    width: 8rem;
  }
}

/* ===== Legal statics (Story 16.1.4, the map's statics surface + the
 * 16.1.1 reflow FINDING's REPAIR). Root cause, measured at the rewrite:
 * the statics column is a flex ITEM of the blocks/block inner flex — flex
 * items refuse to shrink below min-content, and the nested chain
 * propagated the prose's min-content (~502px) into a 390px viewport
 * (144px/163px overflow). `min-width: 0` on the column's flex-item seat
 * is the whole repair — the shared block partial is untouched, so the
 * marketing pages' pinned geometry cannot move. ===== */
.tos-page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Inherited by every heading/paragraph/link: long single tokens at the
   * mobile type scale (bare h4 words like "Indemnification" at 3rem,
   * mailto/URL tokens) overflowed their boxes INLINE — rects stayed put
   * while scrollWidth grew and the emulated viewport latched wide.
   * break-word breaks them only at the overflow point. */
  overflow-wrap: break-word;
}

/* overflow-wrap on the title (the 13.1.1 hero-class fix): at header-1-mobile
 * scale the FALLBACK serif's min-content exceeds 390px during font load —
 * the transient overflow latches the emulated layout viewport even after
 * Lora swaps in and the text fits. Inert once the face loads. */
.tos-title {
  margin-bottom: 1rem;
  overflow-wrap: anywhere;
}

.tos-dateline {
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: 700;
}

.tos-toc {
  margin-bottom: 2rem;
}

.tos-contact {
  margin-bottom: 1rem;
}


/* ===== Wizard review (Story 16.1.4, the map's wizard-shell/review
 * surface): the 4.3.2 list semantics + the phone row stacking carry
 * over verbatim; the chip's gray-300-on-green-100 pair re-joins
 * contrast_pairs (the app still paints it). ===== */
.review-title {
  margin-bottom: 4rem;
}

.review-form {
  display: flex;
  flex-direction: column;
}

.review-list__row {
  display: flex;
  flex-direction: column;
  padding-block: 1rem;
  border-bottom: 1px solid var(--lc-app-border-subtle);
}

.review-list__title {
  display: flex;
  flex: 1;
}

.review-list__status {
  display: flex;
  flex: 1;
  margin-top: 0.5rem;
}

.review-chip {
  text-align: center;
  background-color: var(--lc-app-success-soft);
  padding: 0.5rem;
}

.review-list__jump {
  display: flex;
  margin-top: 0.5rem;
}

.review-submit {
  margin-top: 3rem;
}

@media (width >= 64rem) {
  .review-title {
    margin-bottom: 2rem;
  }

  .review-list__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .review-list__title {
    white-space: nowrap;
  }

  .review-list__status {
    margin-top: 0;
  }

  .review-list__jump {
    margin-top: 0;
  }

  .review-list__jump-link {
    white-space: nowrap;
  }

  .review-submit {
    margin-top: 1rem;
    width: var(--w-field-small);
  }
}

/* ===== The block system (Story 16.1.4, the map's blocks surface):
 * blocks/_block.html.erb's Ruby-side utility strings become the variant
 * classes below — the values are the old presets verbatim. ===== */
.blk {
  display: flex;
  width: 100%;
}

.blk--pad-default {
  padding-block: 6rem;
  padding-inline: 2rem;
}

.blk--pad-hero {
  padding-block: 2rem;
  padding-inline: 2rem;
}

.blk--pad-header {
  padding-block: 0;
  padding-left: 3rem;
  padding-right: 0;
}

.blk--pad-cta {
  padding-block: 3rem;
  padding-inline: 2rem;
}

.blk--pad-group-left {
  padding-block: 6rem;
  padding-left: 2rem;
  padding-right: 0;
}

.blk--pad-group-right {
  padding-block: 6rem;
  padding-left: 2rem;
  padding-right: 0;
}

.blk--bg-white { background-color: var(--surface-elevated); }
.blk--bg-gold-100 { background-color: var(--lc-app-surface-warm); }
.blk--bg-gold-200 { background-color: var(--lc-app-surface-warm-strong); }
.blk--bg-blue-100 { background-color: var(--lc-app-action); }
.blk--bg-gray-100 { background-color: var(--lc-app-surface-muted); }
.blk--bg-gray-300 { background-color: var(--lc-app-ink); }

.blk--j-center-end,
.blk--j-center-start {
  justify-content: center;
}

.blk__body {
  display: flex;
  width: 100%;
}

.blk__body--between {
  justify-content: space-between;
}

.blk__body--center {
  justify-content: center;
}

.blk-group {
  display: flex;
  flex-direction: column;
}

@media (width >= 64rem) {
  .blk--pad-default,
  .blk--pad-cta {
    padding-block: 3rem;
    padding-inline: 16rem;
  }

  .blk--pad-cta {
    padding-block: 1.5rem;
  }

  .blk--pad-hero {
    padding-block: 1.5rem;
    padding-inline: 1rem;
  }

  .blk--pad-header {
    padding-inline: 1rem;
  }

  .blk--pad-group-left {
    padding-left: 0;
    padding-right: 5rem;
  }

  .blk--pad-group-right {
    padding-right: 0;
    padding-left: 5rem;
  }

  .blk--j-center-lg,
  .blk--j-center-end,
  .blk--j-center-start {
    justify-content: center;
  }

  .blk--j-end-lg,
  .blk--j-center-end {
    justify-content: flex-end;
  }

  .blk--j-start-lg,
  .blk--j-center-start {
    justify-content: flex-start;
  }

  .blk__body--page {
    width: 70rem;
  }

  .blk__body--half {
    width: 50%;
  }

  .blk-group {
    flex-direction: row;
  }
}

/* ===== Marketing content families (Story 16.1.4, the map's blocks
 * surface rows — values are the old utilities verbatim; the dead
 * `mb-5:lg` typo class is RECORDED AND DROPPED: it never emitted, so the
 * icons' 2.5rem bottom margin holds at every width, today's actual
 * paint). ===== */
.marketing-block {
  display: flex;
  flex-direction: column;
}

.marketing-block__heading {
  margin-bottom: 6rem;
}

.marketing-block__cols {
  display: flex;
  flex-direction: column;
}

.marketing-block__item {
  display: flex;
  flex-direction: column;
}

.marketing-block__item--gap {
  margin-bottom: 5rem;
}

.marketing-block__figure {
  width: 14rem;
  height: 11rem;
  margin-bottom: 2.5rem;
}

.marketing-block__subhead {
  margin-bottom: 1rem;
}

.features__item {
  display: flex;
  flex-direction: column;
}

.features__item--gap {
  margin-bottom: 5rem;
}

.features__icon {
  font-size: 8rem;
  line-height: 1;
  color: var(--lc-app-action-ink);
  margin-bottom: 2.5rem;
}

.features__subhead {
  margin-bottom: 0.5rem;
}

.email-setup {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
}

.email-setup__form {
  display: flex;
  flex-direction: column;
}

.email-setup__heading {
  margin-bottom: 3rem;
}

.email-setup__label {
  margin-bottom: 1rem;
}

.email-setup__row {
  display: flex;
  flex-direction: column;
}

.email-setup__input {
  min-width: 0;
  width: 100%;
  height: 6rem;
}

.email-setup__submit {
  margin-top: 1.5rem;
  white-space: nowrap;
}

.email-setup__benefits {
  margin-top: 6rem;
  display: flex;
  flex-direction: column;
  align-self: center;
}

.email-setup__benefit {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.email-setup__benefit:not(:last-child) {
  margin-bottom: 2rem;
}

.email-setup__check {
  font-size: 3.75rem;
  line-height: 1;
  margin-right: 1rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
}

.footer-links__link {
  color: var(--ink-inverse);
}

.footer-links__link:hover {
  color: var(--lc-app-ink-muted);
}

.footer-links__link--brand {
  overflow-wrap: anywhere;
}

.footer-social {
  display: flex;
  flex-direction: column;
  width: auto;
}

.footer-social__heading {
  margin-bottom: 2rem;
  color: var(--ink-inverse);
}

.footer-social__heading--follow {
  margin-top: 3rem;
}

.footer-social__row {
  margin-bottom: 1rem;
}

.pricing-block {
  display: flex;
  flex-direction: column;
}

.pricing-block__figure {
  width: 14rem;
  margin-bottom: 2.5rem;
}

.pricing-block__cta {
  margin-top: 2.5rem;
}

.pricing-block__cta-link {
  width: 14rem;
}

.questions {
  display: flex;
  flex-direction: column;
}

.questions__badge {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--lc-app-action);
  height: 6rem;
  width: 6rem;
  border-radius: 9999px;
  margin-bottom: 2.5rem;
}

.questions__icon {
  font-size: 8rem;
  line-height: 1;
  color: var(--lc-app-accent-warm-strong);
}

.questions__heading {
  margin-bottom: 2.5rem;
}

.questions__contact {
  margin-bottom: 2.5rem;
  overflow-wrap: anywhere;
}

@media (width >= 64rem) {
  .marketing-block__heading {
    margin-bottom: 3rem;
  }

  .marketing-block__cols {
    flex-direction: row;
  }

  .marketing-block__item--gap {
    margin-bottom: 0;
  }

  .marketing-block__item--indent {
    margin-left: 2.75rem;
  }

  .marketing-block__figure {
    width: 7rem;
    height: 6rem;
    margin-bottom: 1.25rem;
  }

  .marketing-block__subhead {
    margin-bottom: 0.5rem;
  }

  .features__item {
    width: 13rem;
  }

  .features__item--gap {
    margin-bottom: 0;
  }

  .features__item--indent {
    margin-left: 2.75rem;
  }

  .features__icon {
    font-size: 4.5rem;
  }

  .email-setup {
    flex-direction: row;
  }

  .email-setup__heading {
    margin-bottom: 1.5rem;
  }

  .email-setup__label {
    margin-bottom: 0.5rem;
  }

  .email-setup__row {
    flex-direction: row;
  }

  .email-setup__input {
    width: 24rem;
    height: 3rem;
  }

  .email-setup__submit {
    margin-left: 1rem;
    margin-top: 0;
  }

  .email-setup__benefits {
    width: 18rem;
    margin-top: 0;
    margin-left: 2rem;
  }

  .email-setup__benefit:not(:last-child) {
    margin-bottom: 1rem;
  }

  .email-setup__check {
    font-size: 1.875rem;
    line-height: 2.25rem;
    margin-right: 0.5rem;
  }

  .footer-social__heading {
    margin-bottom: 1rem;
  }

  .footer-social__heading--follow {
    margin-top: 1.5rem;
  }

  .footer-social__row {
    margin-bottom: 0.5rem;
  }

  .pricing-block__figure {
    width: 7rem;
    margin-bottom: 1.25rem;
  }

  .pricing-block__cta {
    margin-top: 1.25rem;
  }

  .pricing-block__cta-link {
    white-space: nowrap;
  }

  .questions {
    flex-direction: row;
  }

  .questions__badge {
    height: 3rem;
    width: 3rem;
    margin-bottom: 0;
  }

  .questions__icon {
    font-size: 3.75rem;
  }

  .questions__body {
    margin-left: 1.25rem;
  }

  .questions__heading {
    margin-bottom: 1.25rem;
  }

  .questions__contact {
    margin-bottom: 1.25rem;
  }
}

/* ===== Workflow-JSON nugget prose (Story 16.1.4, the map's JSON-nugget
 * slice): ONE app semantic class replaces the HtmlNugget markup's
 * `body mb-8 [list-disc list-inside]` utility strings across the five
 * workflow JSONs — body type + block rhythm, with the list styling on
 * the ul form. The admin-desktop-scale token re-point reaches it
 * automatically (the -mobile pair indirection). ===== */
.nugget-prose {
  font-family: var(--font-roboto);
  font-size: var(--text-body-mobile);
  line-height: var(--text-body-mobile--line-height);
  color: var(--lc-app-ink);
  margin-bottom: 2rem;
}

ul.nugget-prose {
  list-style-type: disc;
  list-style-position: inside;
}

@media (width >= 64rem) {
  .nugget-prose {
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
  }
}

/* ===== Styleguide swatch (Story 16.1.4 — the last census carrier;
 * design/show renders the vocabulary the other surfaces prove). ===== */
.styleguide-swatch {
  background-color: var(--lc-app-ink);
  padding: 1rem;
}

/* ===== Responsive visibility helpers (the map's visibility register):
 * breakpoint-CONDITIONAL display, deliberately NOT the [hidden] state
 * mechanism (D10 owns state). Kept LAST in this sheet so they win
 * same-specificity ties against the display rules above. ===== */
@media (width < 64rem) {
  .desktop-only {
    display: none;
  }
}

@media (width >= 64rem) {
  .mobile-only {
    display: none;
  }
}

/* ========================================================================
 * Hand-expanded semantic vocabulary (Story 16.1.5, the drop leg — the map's
 * recorded expansion sequencing). The Tailwind entry's compiled output,
 * expanded to vanilla declarations reading the app :root tokens above. Rule
 * ORDER mirrors the compiled bundle exactly (utility emissions first, then
 * the partials in the entry's import order: typography -> buttons -> nugget
 * -> layout -> admin, then the fonts + .svg-icon), and duplicate selectors
 * are the compiled cascade preserved verbatim — do NOT merge or re-order:
 * later rules deliberately override earlier ones the way the last-linked
 * bundle did. Tailwind-internal indirection (--tw-*, default --spacing /
 * --radius-* / --text-3xl/6xl) is inlined as literals; app tokens stay
 * var(--…). This sheet now links LAST, so these rules keep exactly the
 * cascade position the compiled bundle held.
 * ======================================================================== */

/* Scan-emission raw utilities, kept verbatim: emitted by the entry's @source
 * scans (word-matches in helpers/minified JS, plus vituno class names in
 * markup the scanner also owns as utilities). .container and .sr-only
 * OVERRIDE the framework's versions here exactly as the last-linked bundle
 * did — dropping them would change paint. Four proven-phantom emissions
 * (.capitalize, .blur, .filter, .lg:inline — zero usage anywhere in app/)
 * were dropped at the expansion, recorded in the drop PR. */

.invisible {
  visibility:hidden
}
.visible {
  visibility:visible
}
.sr-only {
  clip-path:inset(50%);
  white-space:nowrap;
  border-width:0;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  position:absolute;
  overflow:hidden
}
.fixed {
  position:fixed
}
.static {
  position:static
}
.container {
  width:100%
}
@media (min-width:40rem) {
  .container {
    max-width:40rem
  }
}
@media (min-width:48rem) {
  .container {
    max-width:48rem
  }
}
@media (min-width:64rem) {
  .container {
    max-width:64rem
  }
}
@media (min-width:80rem) {
  .container {
    max-width:80rem
  }
}
@media (min-width:96rem) {
  .container {
    max-width:96rem
  }
}
.ml-16 {
  margin-left:4rem
}
.block {
  display:block
}
.contents {
  display:contents
}
.flex {
  display:flex
}
.hidden {
  display:none
}
.inline {
  display:inline
}
.h-20 {
  height:5rem
}
.w-full {
  width:100%
}
.shrink {
  flex-shrink:1
}
.resize {
  resize:both
}
.p-12 {
  padding:3rem
}

/* Typography (typography.css @utility register, expanded — tree-shaken to
 * the classes markup actually carries). */
.body {
  font-family:var(--font-roboto);
  font-size:var(--text-body-mobile);
  line-height:var(--text-body-mobile--line-height);
  color:var(--lc-app-ink)
}
@media (min-width:64rem) {
  .body {
    font-size:var(--text-body);
    line-height:var(--text-body--line-height)
  }
}
.body-large {
  font-family:var(--font-roboto);
  font-size:var(--text-body-large-mobile);
  line-height:var(--text-body-large-mobile--line-height);
  color:var(--lc-app-ink)
}
@media (min-width:64rem) {
  .body-large {
    font-size:var(--text-body-large);
    line-height:var(--text-body-large--line-height)
  }
}
.header-1 {
  font-family:var(--font-lora);
  font-size:var(--text-header-1-mobile);
  line-height:var(--text-header-1-mobile--line-height);
  color:var(--lc-app-ink)
}
@media (min-width:64rem) {
  .header-1 {
    font-size:var(--text-header-1);
    line-height:var(--text-header-1--line-height)
  }
}
.header-2 {
  font-family:var(--font-lora);
  font-size:var(--text-header-2-mobile);
  line-height:var(--text-header-2-mobile--line-height);
  color:var(--lc-app-ink)
}
@media (min-width:64rem) {
  .header-2 {
    font-size:var(--text-header-2);
    line-height:var(--text-header-2--line-height)
  }
}
.header-3 {
  font-family:var(--font-lora);
  font-size:var(--text-header-3-mobile);
  line-height:var(--text-header-3-mobile--line-height);
  color:var(--lc-app-ink-strong)
}
@media (min-width:64rem) {
  .header-3 {
    font-size:var(--text-header-3);
    line-height:var(--text-header-3--line-height)
  }
}
.header-4 {
  font-family:var(--font-lora);
  font-size:var(--text-header-4-mobile);
  line-height:var(--text-header-4-mobile--line-height);
  color:var(--lc-app-ink-strong)
}
@media (min-width:64rem) {
  .header-4 {
    font-size:var(--text-header-4);
    line-height:var(--text-header-4--line-height)
  }
}
.header-5 {
  font-family:var(--font-lora);
  font-size:var(--text-header-5-mobile);
  line-height:var(--text-header-5-mobile--line-height);
  color:var(--lc-app-ink-strong)
}
@media (min-width:64rem) {
  .header-5 {
    font-size:var(--text-header-5);
    line-height:var(--text-header-5--line-height)
  }
}
.header-6 {
  font-family:var(--font-lora);
  font-size:var(--text-header-6-mobile);
  line-height:var(--text-header-6-mobile--line-height);
  color:var(--lc-app-ink-strong)
}
@media (min-width:64rem) {
  .header-6 {
    font-size:var(--text-header-6);
    line-height:var(--text-header-6--line-height)
  }
}
.intro {
  font-family:var(--font-roboto);
  font-size:var(--text-intro-mobile);
  line-height:var(--text-intro-mobile--line-height);
  color:var(--lc-app-ink)
}
@media (min-width:64rem) {
  .intro {
    font-size:var(--text-intro);
    line-height:var(--text-intro--line-height)
  }
}
.text-6xl {
  font-size:3.75rem;
  line-height:1
}

/* buttons.css, expanded. The action-link/standalone-link ::after arrows are
 * currentColor masks over data-URI SVGs — Font Awesome Free 5.15.4 solid
 * glyphs (arrow-circle-right, chevron-right), CC BY 4.0
 * (https://fontawesome.com/license/free); THIRD_PARTY_NOTICES.md carries the
 * attribution. The 1em mask box sizes off the font-size declarations. */
.button {
  cursor:pointer;
  border-radius:1rem;
  border-style:solid;
  border-width:4px;
  border-color:var(--lc-app-action);
  width:100%;
  padding-inline:3rem;
  padding-block:1.5rem;
  font-family:var(--font-roboto);
  font-size:var(--text-button-mobile);
  line-height:var(--text-button-mobile--line-height);
  font-weight:700;
  color:var(--ink-inverse)
}
@media (min-width:64rem) {
  .button {
    border-radius:.5rem;
    border-style:solid;
    width:fit-content;
    padding-inline:1.5rem;
    padding-block:0.5rem;
    font-size:var(--text-button);
    line-height:var(--text-button--line-height);
    border-width:2px
  }
}
.button-primary {
  background-color:var(--lc-app-action)
}
@media (hover:hover) {
  .button-primary:hover {
    background-color:var(--lc-app-action-hover)
  }
}
.button-primary:active {
  background-color:var(--lc-app-action-active)
}
.button-white {
  background-color:var(--surface-elevated);
  color:var(--lc-app-action-ink)
}
@media (hover:hover) {
  .button-white:hover {
    color:var(--lc-app-action-ink-hover)
  }
}
.button-white:active {
  color:var(--lc-app-action-ink-active)
}
.action-link {
  border-bottom-style:solid;
  font-family:var(--font-roboto);
  font-size:var(--text-action-link-mobile);
  line-height:var(--text-action-link-mobile--line-height);
  font-weight:700;
  border-bottom-width:8px;
  position:relative
}
@media (min-width:64rem) {
  .action-link {
    border-bottom-style:solid;
    font-size:var(--text-action-link);
    line-height:var(--text-action-link--line-height);
    border-bottom-width:4px
  }
}
.action-link-primary {
  border-color:var(--lc-app-action-ink);
  color:var(--lc-app-action-ink)
}
@media (hover:hover) {
  .action-link-primary:hover {
    border-color:var(--lc-app-action-ink-hover);
    background-color:var(--lc-app-surface-warm-strong);
    color:var(--lc-app-action-ink-hover)
  }
}
.action-link-white {
  border-color:var(--ink-inverse);
  color:var(--ink-inverse)
}
@media (hover:hover) {
  .action-link-white:hover {
    border-color:var(--lc-app-accent-warm);
    color:var(--lc-app-accent-warm)
  }
}
.action-link:after {
  margin-top:0.5rem;
  padding-left:1.5rem;
  font-size:3.75rem;
  line-height:1;
  position:absolute
}
@media (min-width:64rem) {
  .action-link:after {
    margin-top:.25rem;
    padding-left:0.75rem;
    font-size:1.875rem;
    line-height:calc(2.25 / 1.875)
  }
}
.action-link:after {
  content:"";
  background-color:currentColor;
  width:1em;
  height:1em;
  display:inline-block;
  -webkit-mask:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%208c137%200%20248%20111%20248%20248S393%20504%20256%20504%208%20393%208%20256%20119%208%20256%208zm-28.9%20143.6l75.5%2072.4H120c-13.3%200-24%2010.7-24%2024v16c0%2013.3%2010.7%2024%2024%2024h182.6l-75.5%2072.4c-9.7%209.3-9.9%2024.8-.4%2034.3l11%2010.9c9.4%209.4%2024.6%209.4%2033.9%200L404.3%20273c9.4-9.4%209.4-24.6%200-33.9L271.6%20106.3c-9.4-9.4-24.6-9.4-33.9%200l-11%2010.9c-9.5%209.6-9.3%2025.1.4%2034.4z%22/%3E%3C/svg%3E) 50%/contain no-repeat;
  mask:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%208c137%200%20248%20111%20248%20248S393%20504%20256%20504%208%20393%208%20256%20119%208%20256%208zm-28.9%20143.6l75.5%2072.4H120c-13.3%200-24%2010.7-24%2024v16c0%2013.3%2010.7%2024%2024%2024h182.6l-75.5%2072.4c-9.7%209.3-9.9%2024.8-.4%2034.3l11%2010.9c9.4%209.4%2024.6%209.4%2033.9%200L404.3%20273c9.4-9.4%209.4-24.6%200-33.9L271.6%20106.3c-9.4-9.4-24.6-9.4-33.9%200l-11%2010.9c-9.5%209.6-9.3%2025.1.4%2034.4z%22/%3E%3C/svg%3E) 50%/contain no-repeat
}
.standalone-link {
  cursor:pointer;
  border-bottom-style:solid;
  border-bottom-width:4px;
  border-color:var(--lc-app-action-ink);
  font-family:var(--font-roboto);
  font-size:var(--text-standalone-link-mobile);
  line-height:var(--text-standalone-link-mobile--line-height);
  font-weight:700;
  color:var(--lc-app-action-ink)
}
@media (hover:hover) {
  .standalone-link:hover {
    border-color:var(--lc-app-action-ink-hover);
    color:var(--lc-app-action-ink-hover)
  }
}
@media (min-width:64rem) {
  .standalone-link {
    border-bottom-style:solid;
    font-size:var(--text-standalone-link);
    line-height:var(--text-standalone-link--line-height);
    border-bottom-width:2px
  }
}
.standalone-link-no-icon {
  cursor:pointer;
  border-bottom-style:solid;
  border-bottom-width:4px;
  border-color:var(--lc-app-action-ink);
  font-family:var(--font-roboto);
  font-size:var(--text-standalone-link-mobile);
  line-height:var(--text-standalone-link-mobile--line-height);
  font-weight:700;
  color:var(--lc-app-action-ink)
}
@media (hover:hover) {
  .standalone-link-no-icon:hover {
    border-color:var(--lc-app-action-ink-hover);
    color:var(--lc-app-action-ink-hover)
  }
}
@media (min-width:64rem) {
  .standalone-link-no-icon {
    border-bottom-style:solid;
    font-size:var(--text-standalone-link);
    line-height:var(--text-standalone-link--line-height);
    border-bottom-width:2px
  }
}
.standalone-link-no-underline {
  cursor:pointer;
  border-bottom-width:0;
  border-bottom-style:solid;
  border-bottom-width:4px;
  border-color:var(--lc-app-action-ink);
  font-size:var(--text-body-mobile);
  line-height:var(--text-body-mobile--line-height);
  color:var(--lc-app-ink)
}
@media (min-width:64rem) {
  .standalone-link-no-underline {
    font-size:var(--text-body);
    line-height:var(--text-body--line-height)
  }
}
.standalone-link-no-underline {
  font-family:var(--font-roboto);
  font-size:var(--text-standalone-link-mobile);
  line-height:var(--text-standalone-link-mobile--line-height);
  font-weight:700;
  color:var(--lc-app-action-ink)
}
@media (hover:hover) {
  .standalone-link-no-underline:hover {
    border-color:var(--lc-app-action-ink-hover);
    color:var(--lc-app-action-ink-hover)
  }
}
@media (min-width:64rem) {
  .standalone-link-no-underline {
    border-bottom-style:solid;
    font-size:var(--text-standalone-link);
    line-height:var(--text-standalone-link--line-height);
    border-bottom-width:2px
  }
}
.standalone-link-no-icon-no-underline {
  cursor:pointer;
  border-bottom-width:0;
  border-bottom-style:solid;
  border-bottom-width:4px;
  border-color:var(--lc-app-action-ink);
  font-family:var(--font-roboto);
  font-size:var(--text-standalone-link-mobile);
  line-height:var(--text-standalone-link-mobile--line-height);
  font-weight:700;
  color:var(--lc-app-action-ink)
}
@media (hover:hover) {
  .standalone-link-no-icon-no-underline:hover {
    border-color:var(--lc-app-action-ink-hover);
    color:var(--lc-app-action-ink-hover)
  }
}
@media (min-width:64rem) {
  .standalone-link-no-icon-no-underline {
    border-bottom-style:solid;
    font-size:var(--text-standalone-link);
    line-height:var(--text-standalone-link--line-height);
    border-bottom-width:2px
  }
}
.standalone-link:after {
  padding-left:1.5rem
}
@media (min-width:64rem) {
  .standalone-link:after {
    padding-left:0.75rem
  }
}
.standalone-link:after {
  content:"";
  background-color:currentColor;
  width:1em;
  height:1em;
  display:inline-block;
  -webkit-mask:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20320%20512%22%3E%3Cpath%20d%3D%22M285.476%20272.971L91.132%20467.314c-9.373%209.373-24.569%209.373-33.941%200l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505%20256%2034.484%20101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373%2024.569-9.373%2033.941%200L285.475%20239.03c9.373%209.372%209.373%2024.568.001%2033.941z%22/%3E%3C/svg%3E) 50%/contain no-repeat;
  mask:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20320%20512%22%3E%3Cpath%20d%3D%22M285.476%20272.971L91.132%20467.314c-9.373%209.373-24.569%209.373-33.941%200l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505%20256%2034.484%20101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373%2024.569-9.373%2033.941%200L285.475%20239.03c9.373%209.372%209.373%2024.568.001%2033.941z%22/%3E%3C/svg%3E) 50%/contain no-repeat
}
.link {
  border-bottom-style:solid;
  border-bottom-width:2px;
  border-color:var(--lc-app-action-ink);
  font-family:var(--font-roboto);
  font-size:var(--text-body-mobile);
  line-height:var(--text-body-mobile--line-height);
  color:var(--lc-app-action-ink)
}
@media (hover:hover) {
  .link:hover {
    border-color:var(--lc-app-action-ink-hover);
    color:var(--lc-app-action-ink-hover)
  }
}
@media (min-width:64rem) {
  .link {
    border-bottom-style:solid;
    font-size:var(--text-body);
    line-height:var(--text-body--line-height);
    border-bottom-width:1px
  }
}
.link-white {
  border-bottom-style:solid;
  border-bottom-width:2px;
  border-color:var(--ink-inverse);
  font-family:var(--font-roboto);
  font-size:var(--text-body-mobile);
  line-height:var(--text-body-mobile--line-height);
  color:var(--ink-inverse)
}
@media (hover:hover) {
  .link-white:hover {
    border-color:var(--lc-app-accent-warm);
    color:var(--lc-app-accent-warm)
  }
}
@media (min-width:64rem) {
  .link-white {
    border-bottom-style:solid;
    font-size:var(--text-body);
    line-height:var(--text-body--line-height);
    border-bottom-width:1px
  }
}
.link-intro {
  font-size:var(--text-intro-mobile);
  line-height:var(--text-intro-mobile--line-height)
}
@media (min-width:64rem) {
  .link-intro {
    font-size:var(--text-intro);
    line-height:var(--text-intro--line-height)
  }
}
.link-large {
  font-size:var(--text-body-large-mobile);
  line-height:var(--text-body-large-mobile--line-height)
}
@media (min-width:64rem) {
  .link-large {
    font-size:var(--text-body-large);
    line-height:var(--text-body-large--line-height)
  }
}
.link:hover {
  border-bottom-style:solid;
  border-bottom-width:4px
}
@media (min-width:64rem) {
  .link:hover {
    border-bottom-style:solid;
    border-bottom-width:2px
  }
}

/* Story 4.3.7: admin-only, 48px target at every width. Story 4.3.3: active
 * tab state is not color alone — underline + aria-current="page" in
 * admin/show.html.erb. */
.tab-link {
  padding-block:0.75rem;
  font-family:var(--font-roboto);
  font-size:var(--text-body-mobile);
  line-height:var(--text-body-mobile--line-height);
  color:var(--lc-app-ink)
}
@media (min-width:64rem) {
  .tab-link {
    font-size:var(--text-body);
    line-height:var(--text-body--line-height)
  }
}
.tab-link {
  font-weight:700;
  color:var(--lc-app-action-ink)
}
@media (hover:hover) {
  .tab-link:hover {
    color:var(--lc-app-action-ink-hover)
  }
}
.tab-link-active {
  background-color:var(--lc-app-action);
  font-family:var(--font-roboto);
  font-size:var(--text-body-mobile);
  line-height:var(--text-body-mobile--line-height);
  color:var(--lc-app-ink)
}
@media (min-width:64rem) {
  .tab-link-active {
    font-size:var(--text-body);
    line-height:var(--text-body--line-height)
  }
}
.tab-link-active {
  font-weight:700;
  color:var(--ink-inverse);
  text-underline-offset:4px;
  text-decoration-line:underline;
  text-decoration-thickness:2px
}

/* Story 4.4.1 (F107): Kaminari classes scoped under nav.pagination — the
 * Pantheon engine renders every wizard page as div.page, and a bare .page
 * selector would land pagination typography on it. */
.pagination .page {
  margin-inline:0.5rem;
  font-family:var(--font-roboto);
  font-size:var(--text-body-large-mobile);
  line-height:var(--text-body-large-mobile--line-height);
  color:var(--lc-app-ink)
}
@media (min-width:64rem) {
  .pagination .page {
    font-size:var(--text-body-large);
    line-height:var(--text-body-large--line-height)
  }
}
.pagination .page {
  color:var(--lc-app-action-ink)
}
@media (hover:hover) {
  .pagination .page:hover {
    font-weight:700
  }
}
.pagination .current {
  background-color:var(--lc-app-surface-warm);
  padding:0.5rem;
  font-weight:700;
  color:var(--lc-app-action-ink-hover)
}
.pagination .next,.pagination .prev,.pagination .first,.pagination .last {
  margin-inline:0.5rem;
  font-family:var(--font-roboto);
  font-size:var(--text-body-large-mobile);
  line-height:var(--text-body-large-mobile--line-height);
  color:var(--lc-app-ink)
}
@media (min-width:64rem) {
  .pagination .next,.pagination .prev,.pagination .first,.pagination .last {
    font-size:var(--text-body-large);
    line-height:var(--text-body-large--line-height)
  }
}
.pagination .next,.pagination .prev,.pagination .first,.pagination .last {
  color:var(--lc-app-action-ink)
}
@media (hover:hover) {
  :is(.pagination .next,.pagination .prev,.pagination .first,.pagination .last):hover {
    font-weight:700
  }
}
.pagination .page a {
  padding:1rem
}

/* nugget.css, expanded. */
.nugget-container {
  margin-bottom:2rem;
  width:100%
}
@media (min-width:64rem) {
  .nugget-container {
    margin-bottom:1rem
  }
}
.nugget-label {
  margin-bottom:1rem;
  font-family:var(--font-roboto);
  font-size:var(--text-body-mobile);
  line-height:var(--text-body-mobile--line-height);
  color:var(--lc-app-ink);
  align-items:center;
  display:flex
}
@media (min-width:64rem) {
  .nugget-label {
    font-size:var(--text-body);
    line-height:var(--text-body--line-height);
    margin-bottom:0.5rem
  }
}
.yes-or-no-radios-nugget>label {
  margin-bottom:1rem;
  font-family:var(--font-roboto);
  font-size:var(--text-body-mobile);
  line-height:var(--text-body-mobile--line-height);
  color:var(--lc-app-ink);
  align-items:center;
  display:flex
}
@media (min-width:64rem) {
  .yes-or-no-radios-nugget>label {
    font-size:var(--text-body);
    line-height:var(--text-body--line-height)
  }
}
.yes-or-no-radios-nugget>label {
  font-weight:700
}
@media (min-width:64rem) {
  .yes-or-no-radios-nugget>label {
    margin-bottom:0.5rem
  }
}
.nugget-input {
  border-style:solid;
  border-width:4px;
  border-color:var(--lc-app-action);
  width:100%;
  padding-inline:2rem;
  padding-block:1.5rem;
  font-family:var(--font-roboto);
  font-size:var(--text-body-mobile);
  line-height:var(--text-body-mobile--line-height);
  color:var(--lc-app-ink);
  border-radius:.25rem
}
@media (min-width:64rem) {
  .nugget-input {
    font-size:var(--text-body);
    line-height:var(--text-body--line-height);
    border-style:solid;
    padding-inline:1rem;
    padding-block:0.75rem;
    border-width:2px
  }
}

/* Story 26.1.1 (pantheon spec §6 / §10 A6): the repeatable group's markup —
 * the co-seller and buyer pages, switched off until Story 26.1.4. The vendored
 * vituno layer styles the wizard under .pantheon (its h3 already sets the
 * group's heading) but predates the group's item fieldset and its Add and
 * Remove buttons (type="button", these classes only). They take vituno's
 * tokens here: the fieldset the inputs' border, the buttons the Next button's
 * geometry in its outlined form. vituno's pantheon layer is their eventual
 * home; the global :where(button):focus-visible ring already covers them. */
.pantheon .repeatable-group {
  margin-block:var(--space-4)
}
.pantheon .repeatable-group-item {
  min-width:0;
  margin:0 0 var(--space-4);
  padding:var(--space-3);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md)
}
.pantheon .repeatable-group-item>legend {
  padding-inline:var(--space-2);
  font-weight:var(--fw-semibold)
}
.pantheon .repeatable-group-add,.pantheon .repeatable-group-remove {
  min-height:48px;
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--brand-primary);
  border-radius:var(--radius-md);
  background:var(--surface-elevated);
  color:var(--brand-primary);
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:var(--fw-bold);
  line-height:var(--lh-h4);
  cursor:pointer
}
@media (hover:hover) {
  :is(.pantheon .repeatable-group-add,.pantheon .repeatable-group-remove):hover {
    border-color:var(--brand-primary-hover);
    color:var(--brand-primary-hover)
  }
}

/* Radios: visually hidden but focusable and keyboard-operable (display:none
 * would drop them from the tab order and accessibility tree); the visible
 * control is the label's ::before indicator. */
input[type=radio] {
  opacity:0;
  position:absolute
}
input[type=radio]+label:before {
  margin-right:1.5rem;
  height:3rem;
  width:3rem;
  border-radius:1.5rem;
  border-style:solid;
  border-width:4px;
  border-color:var(--lc-app-action);
  flex-direction:row;
  display:flex
}
@media (min-width:64rem) {
  input[type=radio]+label:before {
    margin-right:0.75rem;
    height:1.5rem;
    width:1.5rem;
    border-radius:.75rem;
    border-style:solid;
    border-width:2px
  }
}
input[type=radio]+label:before {
  content:" "
}
input[type=radio]:focus-visible+label:before {
  outline:3px solid var(--lc-app-action);
  outline-offset:2px
}
input[type=radio]:checked+label:before {
  border-style:solid;
  border-width:16px
}
@media (min-width:64rem) {
  input[type=radio]:checked+label:before {
    border-style:solid;
    border-width:8px
  }
}

/* layout.css, expanded. The old @layer base block (html font, body
 * bg/flex/m-0) deliberately did NOT ride up: .page-frame owns the body flex,
 * vituno base/app-reset own canvas and margins, and the --font pin in the
 * token block owns the body face (the drop-leg re-baseline adjudication). */
.main-content-no-padding {
  flex-direction:column;
  flex-grow:1;
  width:100%;
  display:flex
}
.main-content {
  flex-direction:column;
  flex-grow:1;
  width:100%;
  padding:2rem 4rem;
  display:flex
}
.border-stripes {
  margin-block:6rem;
  height:0.5rem;
  border-top-style:solid;
  border-top-width:2px;
  border-bottom-style:solid;
  border-bottom-width:2px;
  border-color:var(--lc-app-accent-warm-strong);
  background-color:var(--surface-elevated);
  width:100%
}
@media (min-width:64rem) {
  .border-stripes {
    margin-block:3rem;
    height:.25rem;
    border-top-style:solid;
    border-top-width:1px;
    border-bottom-style:solid;
    border-bottom-width:1px
  }
}
.dropdown-link {
  border-bottom-style:solid;
  border-bottom-width:2px;
  border-color:var(--ink-inverse);
  width:100%;
  padding-block:2rem;
  font-family:var(--font-roboto);
  font-size:var(--text-body-large-mobile);
  line-height:var(--text-body-large-mobile--line-height);
  color:var(--lc-app-ink);
  display:block
}
@media (min-width:64rem) {
  .dropdown-link {
    font-size:var(--text-body-large);
    line-height:var(--text-body-large--line-height)
  }
}
.dropdown-link {
  color:var(--ink-inverse);
  text-decoration-line:none
}
.dropdown-link:last-child {
  border-bottom-style:solid;
  border-bottom-width:0
}
@media (hover:hover) {
  .dropdown-link:hover {
    color:var(--lc-app-accent-warm)
  }
}
@media (min-width:64rem) {
  .dropdown-link {
    border-bottom-style:solid;
    padding-block:1rem;
    border-bottom-width:1px
  }
}
.main-nav-items-mobile {
  width:100%;
  padding:0;
  list-style-position:inside
}
@media (min-width:64rem) {
  .main-nav-items-mobile {
    display:none
  }
}
.main-nav-items-mobile>li {
  border-bottom-style:solid;
  border-bottom-width:2px;
  border-color:var(--ink-inverse)
}
.main-nav-items-mobile>li:last-child {
  border-bottom-style:solid;
  border-bottom-width:0
}
@media (min-width:64rem) {
  .main-nav-items-mobile>li {
    border-bottom-style:solid;
    border-bottom-width:1px
  }
}
.main-nav-items-mobile .main-nav-item {
  width:100%;
  padding-inline:1rem;
  padding-block:1rem;
  font-family:var(--font-roboto);
  font-size:var(--text-body-large-mobile);
  line-height:var(--text-body-large-mobile--line-height);
  color:var(--lc-app-ink);
  display:block
}
@media (min-width:64rem) {
  .main-nav-items-mobile .main-nav-item {
    font-size:var(--text-body-large);
    line-height:var(--text-body-large--line-height)
  }
}
.main-nav-items-mobile .main-nav-item {
  white-space:nowrap;
  color:var(--ink-inverse);
  text-decoration-line:none
}
@media (hover:hover) {
  .main-nav-items-mobile .main-nav-item:hover {
    color:var(--lc-app-accent-warm)
  }
}
.main-nav-items-mobile .main-nav-item {
  text-align:left
}
.main-nav-items-mobile .main-nav-item .disabled {
  opacity:.6
}
@media (hover:hover) {
  :is(.main-nav-items-mobile .main-nav-item:link,.main-nav-items-mobile .main-nav-item:visited):hover {
    text-decoration-line:underline
  }
}
.main-nav-items-mobile .main-nav-item:link.active,.main-nav-items-mobile .main-nav-item:visited.active {
  background-color:var(--lc-app-surface-inverse);
  font-weight:700
}
.main-nav-items-mobile .main-nav-item:link:hover,.main-nav-items-mobile .main-nav-item:visited:hover {
  background-color:var(--lc-app-action-hover);
  text-decoration-line:none
}
.tos-section {
  margin-bottom:2rem;
  flex-direction:column;
  display:flex
}
.tos-section>p,.tos-section>em {
  margin-bottom:1rem;
  font-family:var(--font-roboto);
  font-size:var(--text-body-mobile);
  line-height:var(--text-body-mobile--line-height);
  color:var(--lc-app-ink)
}
@media (min-width:64rem) {
  .tos-section>p,.tos-section>em {
    font-size:var(--text-body);
    line-height:var(--text-body--line-height)
  }
}
.tos-section>h2 {
  margin-bottom:1.5rem;
  font-family:var(--font-lora);
  font-size:var(--text-header-2-mobile);
  line-height:var(--text-header-2-mobile--line-height);
  color:var(--lc-app-ink)
}
@media (min-width:64rem) {
  .tos-section>h2 {
    font-size:var(--text-header-2);
    line-height:var(--text-header-2--line-height)
  }
}
.tos-section>h2 {
  font-weight:700;
  text-decoration-line:underline
}
.tos-section>h4 {
  margin-bottom:1.5rem;
  font-family:var(--font-lora);
  font-size:var(--text-header-4-mobile);
  line-height:var(--text-header-4-mobile--line-height);
  color:var(--lc-app-ink-strong)
}
@media (min-width:64rem) {
  .tos-section>h4 {
    font-size:var(--text-header-4);
    line-height:var(--text-header-4--line-height)
  }
}
.tos-section>h4 {
  font-weight:700
}
.tos-section>ul {
  margin-bottom:1rem;
  font-family:var(--font-roboto);
  font-size:var(--text-body-mobile);
  line-height:var(--text-body-mobile--line-height);
  color:var(--lc-app-ink)
}
@media (min-width:64rem) {
  .tos-section>ul {
    font-size:var(--text-body);
    line-height:var(--text-body--line-height)
  }
}
.tos-section>ul>li {
  margin-left:2rem;
  list-style-type:disc
}
.tos-section>ul>li>ul>li {
  margin-left:3rem;
  list-style:circle
}

/* Admin surfaces at phone width use the DESKTOP type scale — Story 4.3.7
 * (Omid 2026-08-16; no 2x bump, tap targets >= 44px). Type mechanism: every
 * consumer reads the *-mobile token pairs through var(), so redefining them
 * on the admin body re-scales everything below lg with no per-component
 * overrides (custom-property inheritance, not selector precedence); above
 * lg the media-query values already match, so it is inert on desktop. This
 * survived the drop AS IS — pure custom-property indirection. */
.admin-desktop-scale {
  --text-header-1-mobile:var(--text-header-1);
  --text-header-1-mobile--line-height:var(--text-header-1--line-height);
  --text-header-2-mobile:var(--text-header-2);
  --text-header-2-mobile--line-height:var(--text-header-2--line-height);
  --text-header-3-mobile:var(--text-header-3);
  --text-header-3-mobile--line-height:var(--text-header-3--line-height);
  --text-header-4-mobile:var(--text-header-4);
  --text-header-4-mobile--line-height:var(--text-header-4--line-height);
  --text-header-5-mobile:var(--text-header-5);
  --text-header-5-mobile--line-height:var(--text-header-5--line-height);
  --text-header-6-mobile:var(--text-header-6);
  --text-header-6-mobile--line-height:var(--text-header-6--line-height);
  --text-intro-mobile:var(--text-intro);
  --text-intro-mobile--line-height:var(--text-intro--line-height);
  --text-body-large-mobile:var(--text-body-large);
  --text-body-large-mobile--line-height:var(--text-body-large--line-height);
  --text-body-mobile:var(--text-body);
  --text-body-mobile--line-height:var(--text-body--line-height);
  --text-button-mobile:var(--text-button);
  --text-button-mobile--line-height:var(--text-button--line-height);
  --text-action-link-mobile:var(--text-action-link);
  --text-action-link-mobile--line-height:var(--text-action-link--line-height);
  --text-standalone-link-mobile:var(--text-standalone-link);
  --text-standalone-link-mobile--line-height:var(--text-standalone-link--line-height)
}

/* Geometry, below lg only: desktop values (plus a little more where 44px
 * targets need it — .button py, radio label padding, pagination targets);
 * the desktop admin stays byte-for-byte untouched. .admin-input: the admin
 * edit forms' inputs (renamed from .input by Story 10.1.1 — vituno's
 * forms.css owns the global .input) take the nugget-input geometry below lg.
 * The nested lg media block inside is the compiled bundle's own dead branch
 * (@apply body inside a below-lg scope), kept for fidelity. */
@media not all and (min-width:64rem) {
  .admin-desktop-scale .main-content {
    padding:1.5rem 1rem
  }
  .admin-desktop-scale .nugget-container {
    margin-bottom:1rem
  }
  .admin-desktop-scale .nugget-label {
    margin-bottom:0.5rem
  }
  .admin-desktop-scale .nugget-input {
    border-style:solid;
    padding-inline:1rem;
    padding-block:0.75rem;
    border-width:2px
  }
  .admin-desktop-scale .admin-input {
    border-style:solid;
    border-width:2px;
    border-color:var(--lc-app-action);
    width:100%;
    padding-inline:1rem;
    padding-block:0.75rem;
    font-family:var(--font-roboto);
    font-size:var(--text-body-mobile);
    line-height:var(--text-body-mobile--line-height);
    color:var(--lc-app-ink);
    border-radius:.25rem
  }
  @media (min-width:64rem) {
    .admin-desktop-scale .admin-input {
      font-size:var(--text-body);
      line-height:var(--text-body--line-height)
    }
  }
  .admin-desktop-scale .button {
    border-radius:.5rem;
    border-style:solid;
    padding-inline:1.5rem;
    padding-block:0.75rem;
    border-width:2px
  }
  .admin-desktop-scale .link,.admin-desktop-scale .link-white {
    border-bottom-style:solid;
    border-bottom-width:1px
  }
  .admin-desktop-scale .standalone-link,.admin-desktop-scale .standalone-link-no-icon,.admin-desktop-scale .standalone-link-no-underline,.admin-desktop-scale .standalone-link-no-icon-no-underline {
    border-bottom-style:solid;
    border-bottom-width:2px
  }
  .admin-desktop-scale input[type=radio]+label {
    padding-block:0.625rem
  }
  .admin-desktop-scale input[type=radio]+label:before {
    margin-right:0.75rem;
    height:1.5rem;
    width:1.5rem;
    border-radius:.75rem;
    border-style:solid;
    border-width:2px
  }
  .admin-desktop-scale input[type=radio]:checked+label:before {
    border-style:solid;
    border-width:8px
  }
  .admin-desktop-scale nav.pagination a,.admin-desktop-scale nav.pagination span.current {
    padding-block:0.5rem;
    display:inline-block
  }
}

/* Self-hosted webfonts (Story 5.1.3) — latin subsets served from
 * public/fonts (absolute paths, deliberately outside the asset pipeline so
 * no digest churn on font binaries). Roboto is Google's variable build: one
 * file covers the 400 and 700 the UI uses. Roboto: Apache-2.0; Lora: OFL. */
@font-face {
  font-family:Roboto;
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/fonts/roboto-400-700-latin.woff2")format("woff2")
}
@font-face {
  font-family:Lora;
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/fonts/lora-700-latin.woff2")format("woff2")
}

/* Inline SVG icons (Story 5.1.3, IconHelper) — a 1em box riding the
 * surrounding font-size, filled with the text color. Deliberately NO display
 * property: icon visibility rides el.hidden + app-reset's [hidden] rule
 * (D10), and a display here would fight it. content-box is load-bearing
 * (Story 4.3.5): border-box makes width:1em INCLUDE padding, which collapsed
 * the drawn area to 0x0 and clipped every path — invisible icons. */
.svg-icon {
  box-sizing:content-box;
  vertical-align:-.125em;
  fill:currentColor;
  width:1em;
  height:1em
}