/* Neon Law Navigator — the Dioxus Components theme (issue #641, Phase 2).
 *
 * The framework-neutral successor to `brand.css`'s Bootstrap token overrides.
 * Where `brand.css` remaps Bootstrap's `--bs-*` variables, this file defines
 * semantic tokens the Dioxus components consume directly, so the design system
 * no longer depends on Bootstrap's cascade. The brand cyan ramp is unchanged —
 * Tailwind cyan-500 `#06b6d4` is the firm's primary — and the light/dark link
 * colors keep the same WCAG-AA contrast the `brand.css` comments document.
 *
 * Dark mode is pure CSS: `@media (prefers-color-scheme: dark)` swaps the token
 * values, so there is no pre-paint script and no flash. This replaces the
 * `color-scheme.js` + `data-bs-theme` mechanism, which dies with Bootstrap.
 *
 * Served same-origin (never a CDN) and loaded only by the Dioxus app shell
 * during Phase 2; the not-yet-migrated maud pages keep Bootstrap until their
 * cluster moves in Phase 3. */

:root {
  color-scheme: light dark;

  /* GORP Serif — the firm web typeface, the same family `gorp-serif.css`
     hands Bootstrap on the maud pages. The `@font-face` declarations that
     bind the name to the licensed WOFF2 files come from the deployment asset
     origin, so `web::dioxus_app` emits them into the document head; this token
     is the family every Dioxus surface reads. Georgia is the fallback during
     `font-display: swap` and on a deploy that serves no licensed faces. */
  --nav-font-family: "GORP Serif", Georgia, serif;

  /* The brand cyan ramp — Tailwind cyan, verbatim from `brand.css`. */
  --nav-cyan-400: #22d3ee;
  --nav-cyan-500: #06b6d4;
  --nav-cyan-600: #0891b2;
  --nav-cyan-700: #0e7490;
  --nav-cyan-800: #155e75;
  --nav-cyan-950: #083344;
  --nav-cyan-subtle: #cffafe;

  /* Semantic tokens — the surface every Dioxus component reads. Light mode. */
  --nav-color-primary: var(--nav-cyan-500);
  --nav-color-primary-hover: var(--nav-cyan-600);
  --nav-color-primary-active: var(--nav-cyan-700);
  --nav-color-on-primary: #ffffff;

  /* Links sit at cyan-700 (5.36:1 on white, above the 4.5:1 AA floor) and
     darken to cyan-800 (7.29:1) on hover — matching `brand.css`. */
  --nav-color-link: var(--nav-cyan-700);
  --nav-color-link-hover: var(--nav-cyan-800);

  --nav-color-bg: #ffffff;
  --nav-color-surface: #ffffff;
  --nav-color-surface-raised: #f8fafc;
  --nav-color-surface-subtle: var(--nav-cyan-subtle);
  --nav-color-border: #dee2e6;
  --nav-color-text: #212529;
  --nav-color-text-muted: #6c757d;

  /* Toast / status tones. */
  --nav-color-success: #198754;
  --nav-color-danger: #dc3545;
  --nav-color-warning: #ffc107;

  /* Shared shape + rhythm. */
  --nav-radius: 0.5rem;
  --nav-radius-sm: 0.375rem;
  --nav-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* On dark, links lift to cyan-400 and brighten to cyan-300 on hover —
       the same values `brand.css` sets under `[data-bs-theme="dark"]`. */
    --nav-color-link: var(--nav-cyan-400);
    --nav-color-link-hover: #67e8f9;

    --nav-color-bg: #0d1117;
    --nav-color-surface: #161b22;
    --nav-color-surface-raised: #1c2128;
    --nav-color-surface-subtle: #032f38;
    --nav-color-border: #30363d;
    --nav-color-text: #e6edf3;
    --nav-color-text-muted: #9198a1;
    --nav-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.24);
  }
}

/* Brand typography for the whole document. The page chrome a migrated page
 * renders — the `.staff-nav` bar, flash banners, the `<h1>` — is a sibling of
 * `<main class="nav-theme">`, not a descendant, so the family is declared on
 * the root and inherited. Anything left undeclared here takes the browser's
 * own default serif, which is not the firm's. */
html {
  font-family: var(--nav-font-family);
}

/* Form controls take the UA font, not the inherited one, so a `<button>` or
 * `<select>` renders in the platform sans unless told otherwise. Inheriting
 * `font` wholesale keeps size and family together; the component rules below
 * re-declare only the weight they need. */
button,
input,
select,
textarea {
  font: inherit;
}

/* Base element styling for the Dioxus app shell. */
.nav-theme {
  background: var(--nav-color-bg);
  color: var(--nav-color-text);
  font-family: var(--nav-font-family);
  line-height: 1.5;
}

.nav-theme a {
  color: var(--nav-color-link);
  text-decoration: none;
}

.nav-theme a:hover {
  color: var(--nav-color-link-hover);
  text-decoration: underline;
}

/* Authenticated Navigator chrome. The route adapter supplies the visible
 * destinations plus host-specific footer content; these classes only provide
 * the global application frame and stay independent of roles and routes. */
.navigator-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.navigator-chrome__header {
  background: var(--nav-color-surface);
  border-bottom: 1px solid var(--nav-color-border);
}

.navigator-navbar {
  width: min(100%, 72rem);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navigator-navbar__brand {
  color: var(--nav-color-text) !important;
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
}

.navigator-navbar__destinations {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigator-navbar__link,
.navigator-navbar__sign-out {
  display: inline-block;
  padding: 0.375rem 0.625rem;
  border-radius: var(--nav-radius-sm);
  font-weight: 600;
}

.navigator-navbar__link--active {
  background: var(--nav-color-surface-subtle);
  color: var(--nav-color-text) !important;
}

.navigator-navbar__sign-out {
  margin-left: auto;
  border: 1px solid var(--nav-color-border);
}

.navigator-shell__main {
  width: min(100%, 72rem);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.navigator-footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  width: min(100%, 72rem);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 1rem;
  color: var(--nav-color-text-muted);
  border-top: 1px solid var(--nav-color-border);
  font-size: 0.875rem;
}

.navigator-footer__legal,
.navigator-footer__release {
  margin: 0;
}

.navigator-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.navigator-chrome-showcase {
  overflow: hidden;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius);
  box-shadow: var(--nav-shadow);
}

.navigator-chrome-showcase .navigator-shell {
  min-height: 0;
}

.navigator-chrome-showcase .navigator-shell__main {
  padding-block: 1rem;
}

.navigator-chrome-showcase__content h3 {
  margin-top: 0;
}

@media (max-width: 48rem) {
  .navigator-navbar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .navigator-navbar__destinations {
    order: 3;
    flex-basis: 100%;
  }

  .navigator-navbar__sign-out {
    margin-left: auto;
  }

  .navigator-footer {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .navigator-footer__links {
    justify-content: flex-start;
  }
}

/* Card — the design system's shared surface. */
.nav-card {
  background: var(--nav-color-surface);
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius);
  box-shadow: var(--nav-shadow);
  overflow: hidden;
}

.nav-card__header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--nav-color-border);
  background: var(--nav-color-surface-raised);
  font-weight: 600;
}

.nav-card__body {
  padding: 1rem;
}

.nav-card__body--center {
  text-align: center;
}

.nav-card__footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--nav-color-border);
  background: var(--nav-color-surface-raised);
}

/* The cyan anchor treatment — a "this one" card. The header band, when
   present, is painted with the brand cyan and the AA-safe dark-cyan ink
   (white on cyan-500 is only 2.43:1 and fails AA, so the header text stays
   dark: cyan-950 #083344 at 5.52:1), matching `brand.css`'s
   `.card-header.bg-primary` rule. */
.nav-card--highlighted {
  border-color: var(--nav-color-primary);
}

.nav-card--highlighted .nav-card__header {
  background: var(--nav-color-primary);
  color: var(--nav-cyan-950);
}

/* Toast — the same four tones the maud `Toast` carries. */
.nav-toast {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--nav-radius-sm);
  border-left: 4px solid var(--nav-toast-accent, var(--nav-color-primary));
  background: var(--nav-color-surface-raised);
  color: var(--nav-color-text);
}

.nav-toast--primary { --nav-toast-accent: var(--nav-color-primary); }
.nav-toast--success { --nav-toast-accent: var(--nav-color-success); }
.nav-toast--danger  { --nav-toast-accent: var(--nav-color-danger); }
.nav-toast--warning { --nav-toast-accent: var(--nav-color-warning); }

.nav-toast__body {
  flex: 1 1 auto;
}

/* Inline-SVG icon — sized at 1em, inheriting text color like the old font. */
.nav-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* Data table — the URL-contract reference surface. `.nav-table-wrap` scrolls
   horizontally on narrow viewports so the page body never does. */
.nav-table-wrap {
  overflow-x: auto;
}

.nav-table {
  width: 100%;
  border-collapse: collapse;
}

.nav-table th,
.nav-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--nav-color-border);
  vertical-align: middle;
}

.nav-table thead th {
  border-bottom: 2px solid var(--nav-color-border);
  font-weight: 600;
  white-space: nowrap;
}

/* Zebra striping for scan-ability. */
.nav-table tbody tr:nth-child(even) {
  background: var(--nav-color-surface-raised);
}

.nav-table th a {
  color: inherit;
  text-decoration: none;
}

.nav-table th a:hover {
  color: var(--nav-color-link);
  text-decoration: underline;
}

.nav-sort-arrow {
  color: var(--nav-color-primary);
}

/* Prev / next pagination strip. */
.nav-pagination__list {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.nav-pagination__link {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius-sm);
  color: var(--nav-color-link);
  text-decoration: none;
}

a.nav-pagination__link:hover {
  background: var(--nav-color-surface-raised);
}

.nav-pagination__item--disabled .nav-pagination__link {
  color: var(--nav-color-text-muted);
  background: transparent;
}

/* Muted secondary text — the theme's counterpart to Bootstrap's
   `.text-body-secondary`. */
.nav-text-muted {
  color: var(--nav-color-text-muted);
}

/* Button — the solid brand-cyan call to action. AA-safe dark ink on the
   bright cyan fill (white on cyan-500 is only 2.43:1). */
.nav-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--nav-radius-sm);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.nav-btn--primary {
  background: var(--nav-color-primary);
  border-color: var(--nav-color-primary);
  color: var(--nav-cyan-950);
}

.nav-btn--primary:hover {
  background: var(--nav-color-primary-hover);
  border-color: var(--nav-color-primary-hover);
  color: var(--nav-cyan-950);
  text-decoration: none;
}

/* Alert — the disclaimer's warning surface. */
.nav-alert {
  border: 1px solid var(--nav-color-border);
  border-left: 4px solid var(--nav-color-warning);
  border-radius: var(--nav-radius-sm);
  background: var(--nav-color-surface-raised);
  padding: 1rem 1.25rem;
}

.nav-alert__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.nav-alert__body {
  margin: 0;
}

/* Service page — the prose article below the product hero: a readable measure,
   with the pricing row and the booking CTA. (The animated hero itself is styled
   by the hoisted `product-hero.css`.) */
.service-page__pricing {
  margin-bottom: 2rem;
}

.service-open-letter {
  max-width: 65ch;
  margin: 0 auto;
}

.service-page__cta {
  text-align: center;
  margin-top: 2rem;
}

.service-page__cta-link {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  border-radius: var(--nav-radius-sm);
  background: var(--nav-color-primary);
  color: var(--nav-color-on-primary) !important;
  font-weight: 600;
}

/* Blog index — the `/blog` listing: newest post first, each a title link over
   a muted date and one-line description. */
.blog-index__posts {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.blog-index__post {
  border-bottom: 1px solid var(--nav-color-border);
  padding-bottom: 1.5rem;
}

.blog-index__title {
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
}

.blog-index__date {
  color: var(--nav-color-text-muted);
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}

.blog-index__description {
  margin: 0;
}

/* Team index — the `/team` listing: a heading/intro over a grid of profile
   cards, each a photo beside the name/role/summary linking to the full bio. */
.team-index__lead {
  font-size: 1.15rem;
  color: var(--nav-color-text-muted);
  max-width: 48rem;
}

.team-index__cards {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
}

.team-index__card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius);
  padding: 1.25rem;
}

.team-index__photo {
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.team-index__name {
  font-size: 1.15rem;
  margin: 0 0 0.25rem;
}

.team-index__role {
  color: var(--nav-color-primary);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.team-index__summary {
  color: var(--nav-color-text-muted);
  margin: 0;
}

/* Team profile — the `/team/nick` attorney bio: a photo/links card beside the
   summary and bio prose, with a breadcrumb back to the team index. */
.team-profile__back {
  margin-bottom: 1.5rem;
}

.team-profile__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 62rem) {
  .team-profile__grid {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }
}

.team-profile__card {
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius);
  background: var(--nav-color-surface-raised);
  padding: 1.5rem;
}

.team-profile__photo {
  display: block;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1.5rem;
}

.team-profile__name {
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

.team-profile__role {
  color: var(--nav-color-primary);
  font-weight: 600;
  margin: 0 0 1.25rem;
}

.team-profile__links {
  display: grid;
  gap: 0.5rem;
}

.team-profile__summary {
  font-size: 1.15rem;
  color: var(--nav-color-text-muted);
}

/* Public page shell — the skeleton every migrated public page wraps its
   content in: header, a centered main content column, and the footer strip. */
.public-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.public-shell__main {
  width: min(100%, 72rem);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* The `/design` preview frames the shell so its full-bleed chrome reads as a
   contained sample rather than taking over the gallery page. */
.public-shell-showcase {
  overflow: hidden;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius);
  box-shadow: var(--nav-shadow);
}

.public-shell-showcase .public-shell {
  min-height: 0;
}

.public-shell-showcase .public-shell__main {
  padding-block: 1.5rem;
}

/* Site header — the public marketing chrome: the brand mark and the primary
   nav. The link row wraps on narrow viewports (no JS hamburger to hydrate). */
.site-header {
  border-bottom: 1px solid var(--nav-color-border);
  background: var(--nav-color-surface);
}

.site-header__nav {
  width: min(100%, 72rem);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--nav-color-text) !important;
  font-size: 1.125rem;
  white-space: nowrap;
}

.site-header__logo {
  display: block;
}

.site-header__links,
.site-header__utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__links {
  margin-left: auto;
}

.site-header__link {
  display: inline-block;
  padding: 0.375rem 0.625rem;
  border-radius: var(--nav-radius-sm);
  font-weight: 600;
}

.site-header__link--active {
  background: var(--nav-color-surface-subtle);
  color: var(--nav-color-text) !important;
}

/* Site footer — the brand-driven legal strip (regulated entity, bar
   admissions, disclaimer, joint copyright) every public page carries. Muted,
   small, and rule-topped so it reads as terminal fine print. */
.site-footer__legal {
  border-top: 1px solid var(--nav-color-border);
  margin-top: 2rem;
  padding-top: 1rem;
  color: var(--nav-color-text-muted);
  font-size: 0.85rem;
}

.site-footer__legal p {
  margin: 0 0 0.5rem;
}

.site-footer__legal p:last-child {
  margin-bottom: 0;
}

.site-footer__legal a {
  color: inherit;
}

/* Litbox's footer. Same terminal fine-print treatment as the legal strip, but
   a separate rule for a separate component: Litbox is a technology company and
   renders no regulated attribution, so the two must never be styled as one
   thing that could later be merged into one thing. */
.site-footer__platform {
  border-top: 1px solid var(--nav-color-border);
  margin-top: 2rem;
  padding-top: 1rem;
  color: var(--nav-color-text-muted);
  font-size: 0.85rem;
}

.site-footer__platform p {
  margin: 0 0 0.5rem;
}

.site-footer__platform p:last-child {
  margin-bottom: 0;
}

/* litbox.tech — the platform company's two marketing pages. A centred measure,
   a panel grid that collapses to one column, and text-link actions. */
.litbox-page {
  max-width: 70ch;
  margin-inline: auto;
}

.litbox-page__lede {
  font-size: 1.15rem;
  color: var(--nav-color-text-muted);
}

.litbox-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.litbox-panels h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

.litbox-closing {
  margin-top: 2rem;
}

.litbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.litbox-action {
  color: var(--nav-color-link);
}

.litbox-action:hover {
  color: var(--nav-color-link-hover);
}

/* litbox.tech's privacy notice — the same centred measure as the marketing
   pages, but prose sections rather than a panel grid. */
.litbox-policy__updated {
  font-size: 0.9rem;
  color: var(--nav-color-text-muted);
}

.litbox-policy__section {
  margin-top: 2rem;
}

.litbox-policy__section h2 {
  font-size: 1.15rem;
}

/* Pricing cards — an equal-height responsive grid; every card wears the cyan
   band and a solid CTA. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

@media (min-width: 62rem) {
  .pricing-grid {
    grid-template-columns: repeat(var(--pricing-cols, 3), 1fr);
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  border-color: var(--nav-color-primary);
}

.pricing-card__band {
  background: var(--nav-color-primary);
  color: var(--nav-cyan-950);
  text-align: center;
}

.pricing-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.5rem;
}

.pricing-card__amount {
  font-size: 2rem;
  font-weight: 700;
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
}

.pricing-card__features li {
  margin-bottom: 0.25rem;
}

.pricing-card__check {
  color: var(--nav-color-primary);
  margin-right: 0.5rem;
}

.pricing-card__cta {
  margin-top: auto;
  width: 100%;
}

/* Testimonials — a two-column grid of quote cards. */
.testimonial-section__head {
  margin-bottom: 1.5rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.testimonial-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.testimonial-card__label {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--nav-color-primary);
  margin: 0;
}

.testimonial-card__quote {
  font-size: 1.15rem;
  margin: 0;
}

.testimonial-card__by {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}

.testimonial-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.testimonial-card__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nav-color-surface-subtle);
  color: var(--nav-color-primary-active);
  font-weight: 700;
}

.testimonial-card__name {
  font-weight: 600;
  margin: 0;
}

/* Breadcrumb — the muted "back to parent" link at the top of detail pages. */
.nav-breadcrumb {
  margin-bottom: 1rem;
}

.nav-breadcrumb__link {
  color: var(--nav-color-text-muted);
  text-decoration: none;
}

.nav-breadcrumb__link:hover {
  color: var(--nav-color-link);
  text-decoration: underline;
}

/* Content-freshness footer. */
.nav-freshness {
  color: var(--nav-color-text-muted);
  margin-top: 1.5rem;
}

/* Form — a constrained create/edit card with labeled fields. */
.nav-form-card {
  max-width: 32rem;
}

.nav-form-card__title {
  margin-top: 0;
}

/* Framing prose between a form card's title and its first field. */
.nav-form-card__intro {
  margin-bottom: 1.5rem;
}

.nav-field {
  margin-bottom: 1rem;
}

.nav-label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.nav-required {
  color: var(--nav-color-danger);
}

.nav-input,
.nav-select {
  display: block;
  width: 100%;
  /* `width: 100%` plus horizontal padding overflows the container under the
     default `content-box`. Bootstrap's `*,::after,::before{box-sizing:border-box}`
     is currently supplying this for free, so the theme looks correct only
     because a framework it is replacing is still loaded. Stated here so the
     controls survive Bootstrap's removal (#877). */
  box-sizing: border-box;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius-sm);
  background: var(--nav-color-surface);
  color: var(--nav-color-text);
}

.nav-input:focus,
.nav-select:focus {
  outline: 2px solid var(--nav-color-primary);
  outline-offset: 1px;
  border-color: var(--nav-color-primary);
}

/* Input with a leading add-on (e.g. a "$" prefix). */
.nav-input-group {
  display: flex;
}

.nav-input-group__addon {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border: 1px solid var(--nav-color-border);
  border-right: 0;
  border-radius: var(--nav-radius-sm) 0 0 var(--nav-radius-sm);
  background: var(--nav-color-surface-raised);
  color: var(--nav-color-text-muted);
}

.nav-input-group .nav-input {
  border-radius: 0 var(--nav-radius-sm) var(--nav-radius-sm) 0;
}

/* Checkbox row: the box precedes an inline label. */
.nav-field--check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-field--check .nav-label {
  margin-bottom: 0;
  font-weight: 400;
}

.nav-field__help {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--nav-color-text-muted);
}

/* Per-field validation message — Rails' `field_with_errors`. The reason sits
   with the control that caused it, not only in the banner at the top of the
   form. Same size as the hint but in the danger tone, so the two read as one
   description stack. */
.nav-field__error {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--nav-color-danger);
}

/* The invalid state is carried on the control's border as well as the message,
   because colour alone is not a sufficient cue — the message text and the
   `aria-invalid` state are what actually convey it. */
/* `.nav-input` covers the textarea too — it renders with that class. */
.nav-field--invalid .nav-input,
.nav-field--invalid .nav-select {
  border-color: var(--nav-color-danger);
}

/* People-list — bounded person-row groups inside a form. */
.nav-fieldset {
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius-sm);
  padding: 1rem;
  margin-bottom: 1rem;
}

.nav-fieldset__legend {
  padding: 0 0.5rem;
  font-weight: 600;
  width: auto;
}

/* Server-highlighted code block — syntect emits an inline-styled <pre>. */
.nav-code {
  overflow-x: auto;
}

.nav-code pre {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--nav-radius-sm);
  border: 1px solid var(--nav-color-border);
}

/* Secondary button — the outlined variant (e.g. the GitHub star CTA). */
.nav-btn--secondary {
  background: transparent;
  border-color: var(--nav-color-border);
  color: var(--nav-color-text);
}

.nav-btn--secondary:hover {
  background: var(--nav-color-surface-raised);
  color: var(--nav-color-text);
}

.nav-github-star {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Small count pill (GitHub stars). */
.nav-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--nav-color-surface-subtle);
  color: var(--nav-color-primary-active);
  font-size: 0.85em;
  font-weight: 600;
}

/* ============================================================================
 * #641 Phase 3 — migrated admin/portal page chrome
 *
 * The Dioxus page successors to the maud admin/portal pages carry their own
 * nav bar, list tables, row actions, flash banners, and dashboard cards. The
 * component classes (.nav-btn, .nav-card, .nav-table, …) are styled above;
 * these are the page-level chrome those pages add. Same `--nav-*` tokens.
 * ==========================================================================*/

/* Page container: the staff/admin/portal pages render a single <main>. Give it
 * the same comfortable measure and padding the maud PageLayout provided. */
main.nav-theme,
main#staff-people,
main#admin-listing,
main#person-show,
main#people-new,
main#portal-projects,
main#entities,
main#entity-edit,
main#entity-new,
main#staff-entity-types,
main#cap-table,
main#expunge-queue,
main#letter-detail {
  display: block;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  color: var(--nav-color-text);
}

/* Impersonation banner. Sits above the nav on every page an impersonating
 * admin sees, so "you are acting as someone else" is never off-screen. Amber
 * rather than the danger red: this is a persistent state, not an error, and it
 * must stay legible for the whole session without reading as a failure. */
.impersonation-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid #d97706;
  background: #fef3c7;
  color: #78350f;
}

.impersonation-banner__email {
  color: #92400e;
}

/* Pushes the stop control to the trailing edge, so the way out is always in
 * the same place regardless of how long the name and email are. */
.impersonation-banner__stop {
  margin-left: auto;
  margin-bottom: 0;
}

/* Top navigation bar (every migrated page). Horizontal, spaced, with a divider
 * — the run-together default links are the most visible regression. */
.staff-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--nav-color-border);
  background: var(--nav-color-surface-raised);
  font-size: 0.95rem;
}

.staff-nav .nav-link,
a.nav-link {
  color: var(--nav-color-link);
  text-decoration: none;
  font-weight: 600;
}

.staff-nav .nav-link:hover,
a.nav-link:hover {
  color: var(--nav-color-link-hover);
  text-decoration: underline;
}

/* Sortable column-header links inside a list table. */
.nav-table thead a,
.sort-name,
.sort-email {
  color: var(--nav-color-link);
  text-decoration: none;
  font-weight: 600;
}

.nav-table thead a:hover,
.sort-name:hover,
.sort-email:hover {
  text-decoration: underline;
}

/* Per-row action clusters (people/entity/expunge lists + the person show page).
 * Lay the Edit link and the Delete/Impersonate forms out in a row. */
.row-actions,
.person-actions .action-row,
.action-row,
.entity-actions,
.expunge-actions,
.cap-table-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.row-action,
.action-row form {
  display: inline;
  margin: 0;
}

/* The per-record actions panel on the person show page. */
.person-actions {
  margin: 1.5rem 0;
}

.person-actions h2 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

/* The welcome-email confirmation disclosure. */
.welcome-confirm summary {
  cursor: pointer;
  list-style: none;
}

.welcome-confirm[open] summary {
  margin-bottom: 0.5rem;
}

/* Flash banners: the ?notice= / ?error= toned messages above a page. */
.nav-flash {
  padding: 0.75rem 1rem;
  border-radius: var(--nav-radius-sm);
  border: 1px solid var(--nav-color-border);
  margin: 0 0 1rem;
}

.nav-flash--success {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

.nav-flash--danger {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

/* Inline form error + immutable-record notice. */
.nav-form-error {
  color: #991b1b;
  font-weight: 600;
  margin: 0 0 1rem;
}

.nav-form-notice {
  padding: 0.75rem 1rem;
  border-radius: var(--nav-radius-sm);
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
  margin: 0 0 1rem;
}

/* Muted secondary text + empty-state rows. */
.nav-muted,
.muted,
.nav-text-muted {
  color: var(--nav-color-text-muted);
}

.people-empty,
.entities-empty,
.playbooks-empty,
.entity-types-empty,
.expunge-empty,
.cap-table-empty,
.portal-empty,
.admin-listing-empty {
  color: var(--nav-color-text-muted);
  padding: 1rem 0;
}

/* Client portal projects dashboard: KPI tiles + engagement cards. */
.portal-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}

.portal-kpi {
  padding: 1rem;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius);
  background: var(--nav-color-surface);
  box-shadow: var(--nav-shadow);
}

.portal-kpi__value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.portal-kpi__label {
  font-weight: 600;
  margin-top: 0.25rem;
}

.portal-kpi__hint {
  color: var(--nav-color-text-muted);
  font-size: 0.85rem;
}

.portal-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.portal-project-card {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius);
  background: var(--nav-color-surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--nav-shadow);
}

.portal-project-card:hover {
  border-color: var(--nav-color-primary);
}

.portal-project-card__name {
  font-weight: 700;
  font-size: 1.1rem;
}

.portal-project-card__status {
  color: var(--nav-color-text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.portal-project-card__service {
  margin-top: 0.5rem;
}

.portal-project-card__price {
  color: var(--nav-color-text-muted);
}

/* Danger button variant used by the per-row Delete forms. */
.nav-btn--danger {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

.nav-btn--danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* Page header: an <h1> with an action button to its right (entities/projects
 * lists). Wraps on narrow viewports. */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.page-header h1 {
  margin: 0;
}

.page-header p {
  margin: 0;
}

/* Matter-lifecycle warning badge on the staff projects list (no retainer / no
 * closing letter). A small amber pill. */
.matter-flag {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: var(--nav-radius-sm);
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.projects-empty {
  color: var(--nav-color-text-muted);
  padding: 1rem 0;
}

/* Client matter-detail page (/portal/projects/{id}). Section rhythm, cards for
 * the service/invoice summaries, status pills, and the agreement lists. Built on the same --nav-* tokens as the rest of the page chrome. */
.portal-detail__back {
  margin-bottom: 0.75rem;
}

.portal-detail__section {
  margin-top: 1.5rem;
}

.portal-detail__section h2 {
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
}

.portal-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.portal-detail__approve {
  margin-top: 1rem;
}

/* A summary card (service, invoice). --split lays the label block and the
 * trailing price/badge on opposite ends. */
.portal-card {
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius);
  background: var(--nav-color-surface-raised);
  padding: 1rem;
}

.portal-card--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.portal-card__title {
  font-size: 1.1rem;
  font-weight: 600;
}

.portal-card__meta {
  color: var(--nav-color-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.portal-card__price {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* Status pill (matter status, notation status, review kind/status). --paid and
 * --due colour the invoice badge. */
.status-chip {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: var(--nav-radius-sm);
  background: var(--nav-color-surface-subtle);
  border: 1px solid var(--nav-color-border);
  color: var(--nav-color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-chip--paid {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

.status-chip--due {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}

/* Agreement lists: a stack of bordered rows, each with a label on the left and
 * its download links (or published date) on the right. */
.portal-agreements {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius);
  overflow: hidden;
}

.portal-agreement {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--nav-color-border);
}

.portal-agreement:first-child {
  border-top: none;
}

.portal-agreement--link {
  text-decoration: none;
  color: inherit;
}

.portal-agreement--link:hover {
  background: var(--nav-color-surface-subtle);
}

.portal-agreement__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nav-table__end {
  text-align: right;
}

/* Staff matter-detail workbench (/staff/projects/{id}). Section rhythm and the
 * per-section head row (heading + an action button, e.g. "Add person"). Built on
 * the same --nav-* tokens as the rest of the page chrome; the tables, cards,
 * status chips, alerts, and buttons reuse the shared classes. */
.staff-detail__section {
  margin-top: 1.75rem;
}

.staff-detail__section > h2 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.staff-detail__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.staff-detail__section-head h2 {
  font-size: 1.05rem;
  margin: 0;
}

/* An inline single-button form (the per-row "Remove" in the participation
 * ledger) that must sit next to the Edit link without stacking. */
.staff-detail__inline-form {
  display: inline;
}

/* The estate workflow-state token, shown next to "Workflow state:". */
.estate-state {
  font-variant: small-caps;
  letter-spacing: 0.02em;
}

/* Matter conversation page (/portal|staff/projects/{id}/conversation). The
 * lens-scoped message thread and the plain-textarea composer. Built on the
 * same --nav-* tokens as the rest of the page chrome. */
.conversation-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.conversation-msg {
  border: 1px solid var(--nav-color-border);
  border-left: 4px solid var(--nav-color-border);
  border-radius: var(--nav-radius);
  background: var(--nav-color-surface-raised);
  padding: 0.75rem 1rem;
}

/* A client message flows inbound; a firm reply outbound; an internal note stands
 * apart so staff never mistake one for a client-visible message. */
.conversation-msg--inbound {
  border-left-color: var(--nav-color-primary);
}

.conversation-msg--outbound {
  border-left-color: var(--nav-color-success);
}

.conversation-msg--internal {
  border-left-color: var(--nav-color-warning);
  background: var(--nav-color-surface-subtle);
}

.conversation-msg__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.conversation-msg__subject {
  font-weight: 600;
  font-size: 0.9rem;
}

.conversation-msg__body--plain {
  white-space: pre-wrap;
}

/* The composer: the message textarea and the internal note toggle stacked above
 * the Send button. */
.conversation-composer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.conversation-composer textarea {
  width: 100%;
}

.conversation-internal {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--nav-color-text-muted);
  font-size: 0.9rem;
}

/* Client document-review page (/portal/projects/{id}/review/{doc_id}). The
 * document/sidebar two-column layout and the comment-range highlight — the
 * `northstar-review` custom element upgrades the markup in the browser. */
.northstar-review-page northstar-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.5rem;
  align-items: start;
}

.northstar-review-page .nr-document {
  line-height: 1.7;
}

.northstar-review-page .nr-sidebar {
  position: sticky;
  top: 1rem;
}

.northstar-review-page .nr-document ::selection {
  background: #fde68a;
}

::highlight(nr-comment) {
  background-color: #fde68a;
}

@media (max-width: 48rem) {
  .northstar-review-page northstar-review {
    grid-template-columns: 1fr;
  }
}

/* Destructive-action confirmation card (confirm_delete). A constrained card
 * with the prompt and a Confirm/Cancel action row; the destructive Confirm
 * wears the danger button so it is unmistakable. */
.confirm-delete {
  max-width: 32rem;
}

.confirm-delete__title {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.confirm-delete__message {
  margin: 0 0 1rem;
}

.confirm-delete__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.confirm-delete__form {
  display: inline;
}

/* The `/design` gallery's own page chrome. Layout only: every colour here
 * resolves through a `--nav-*` token, and the swatch chip paints whatever its
 * own token resolves to, so the gallery shows the running deploy's brand rather
 * than a ramp pinned into the page. */
.design-gallery {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.design-gallery > section {
  margin-block: 2.5rem;
}

.design-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.design-swatch {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.design-swatch__chip {
  display: inline-block;
  width: 6rem;
  height: 3rem;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius-sm);
  background: var(--design-swatch-value);
}

.design-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.design-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 1rem;
}

.design-icon__glyph {
  font-size: 1.75rem;
}

.design-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.design-toasts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 24rem;
}

/* ============================================================================
 * #956 Phase 4 — the migrated admin expunge + contract-review surfaces
 *
 * `/staff/documents/{doc_id}/expunge` (the governed-expunge confirmation and
 * its audit-row result) and `/staff/contract-reviews/{id}` (the attorney
 * review screen). Both are Dioxus pages built on the same `--nav-*` tokens.
 * ==========================================================================*/

/* Verbatim machine values — a repo path, a storage key, an audit-row id. Read
 * as data, not prose, so they get the monospace face. */
.font-monospace {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.95em;
  word-break: break-all;
}

/* The irreversibility warning above the expunge form: the alert surface, toned
 * red rather than the default amber — this act cannot be undone. */
.expunge-warning {
  border-left-color: #dc2626;
  margin-bottom: 1.25rem;
}

/* Label/value description lists: the document + storage-key pairs on both
 * expunge states, and a filed document's provenance and storage blocks. */
.expunge-detail,
.detail-dl {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.35rem 1rem;
  margin: 0 0 1.5rem;
}

.expunge-detail dt,
.detail-dl dt {
  font-weight: 600;
  color: var(--nav-color-text-muted);
}

.expunge-detail dd,
.detail-dl dd {
  margin: 0;
}

.expunge-cancel,
.participation-cancel,
.project-form-cancel {
  margin-top: 1rem;
}

/* ===========================================================================
 * Matter document + project forms (#956 Phase 4)
 * ==========================================================================*/

/* The Download row above a filed document's provenance. */
.document-actions {
  margin: 1.25rem 0;
}

.document-provenance h2,
.document-storage h2 {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

/* The sentence naming which matter a participation edit applies to. */
.participation-intro {
  color: var(--nav-color-text-muted);
  margin: 0 0 1rem;
}

/* Inline record creation on the matter-open form. The two HTMX-swapped
 * Bootstrap modals became native <details> disclosures with their own POST
 * forms, so the page needs no JavaScript at all. */
.inline-create-group {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nav-color-border);
}

.inline-create {
  margin: 0.75rem 0;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius-sm);
  background: var(--nav-color-surface);
}

.inline-create__summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.75rem 1rem;
}

.inline-create__summary:focus-visible {
  outline: 2px solid var(--nav-color-primary);
  outline-offset: 2px;
}

.inline-create[open] .inline-create__summary {
  border-bottom: 1px solid var(--nav-color-border);
}

/* The disclosure already frames its contents, so the nested form card drops
 * its own border and sits flush inside. */
.inline-create .nav-form-card {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.inline-create > .nav-form-error {
  margin: 0.75rem 1rem 0;
}

/* Status pill tones, shared by the review status and the per-finding decision
 * badges. Built on .nav-badge. */
.nav-status--success {
  background: #ecfdf5;
  color: #065f46;
}

.nav-status--warning {
  background: #fffbeb;
  color: #92400e;
}

.nav-status--muted {
  background: var(--nav-color-surface-subtle);
  color: var(--nav-color-text-muted);
}

.nav-status--neutral {
  background: var(--nav-color-surface-subtle);
  color: var(--nav-color-text);
}

.contract-review-status,
.contract-review-decision {
  text-transform: capitalize;
}

/* The read-only risk-summary card (an editable review renders a FormCard). */
.contract-review-summary {
  margin-bottom: 1rem;
}

.contract-review-summary__title {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.contract-review-summary__text {
  margin: 0;
  white-space: pre-wrap;
}

.contract-review-findings__title {
  margin-top: 2rem;
}

/* One finding: the clause heading and its decision pill on one row, the
 * deviation below, then the per-finding edit form. */
.contract-review-finding {
  margin-bottom: 1rem;
}

.contract-review-finding__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.contract-review-finding__clause {
  font-size: 1rem;
  margin: 0;
}

.contract-review-finding__deviation,
.contract-review-finding__redline,
.contract-review-finding__note {
  margin: 0.5rem 0 0;
}

.contract-review-finding__form {
  margin-top: 0.75rem;
}

.contract-review-finding__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.contract-review-empty {
  color: var(--nav-color-text-muted);
  padding: 1rem 0;
}

/* The approve / reject decision bar and the gate note under it. */
.contract-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1.5rem;
}

.contract-review-actions form {
  display: inline;
  margin: 0;
}

.contract-review-gate {
  margin-top: 0.5rem;
}

.contract-review-locked {
  margin-bottom: 1rem;
}

/* ============================================================================
 * #956 Phase 4 — the supervised Clerk surface (/clerk, /clerk/projects/{id})
 *
 * A read-only coordination lens: matter cards that name the supervising lawyer,
 * the firm brand-asset download, and a two-column fact list on the detail page.
 * The cards reuse .portal-projects / .portal-project-card; these are the pieces
 * the Clerk lens adds, on the same --nav-* tokens.
 * ==========================================================================*/

/* The supervisor disclosure on a matter card. Every visible matter names a
 * licensed lawyer, so this line is never absent. */
.clerk-supervisor {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

/* Firm brand assets — shared across every firm worker rather than scoped to a
 * matter, so the block sits below the projects list and shows even when a Clerk
 * has no assignments yet. */
.clerk-brand-assets {
  margin-top: 2.5rem;
}

.clerk-brand-assets h2 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.clerk-brand-assets__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The detail page's matter facts: label/value pairs in two columns, collapsing
 * to stacked rows on a narrow viewport. */
.clerk-facts {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.5rem 1rem;
  margin: 0 0 1.5rem;
}

.clerk-facts dt {
  font-weight: 600;
  margin: 0;
}

.clerk-facts dd {
  margin: 0;
}

@media (max-width: 40rem) {
  .clerk-facts {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .clerk-facts dd {
    margin-bottom: 0.5rem;
  }
}

/* The `/admin` console hub (#956 Phase 4): a responsive tile grid of the
 * admin-only surfaces. The maud hub laid these out with Bootstrap's
 * `row`/`col-md-6`, which the Dioxus pages do not load, so the two-up-then-
 * stacked behaviour is expressed directly here. `auto-fit` means adding a
 * third surface needs no column-class churn. */
.admin-hub {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

/* The cards stretch to a common height so a shorter blurb does not leave its
 * call to action floating mid-tile — the `full_height()` the maud card set. */
.admin-hub > .nav-card {
  height: 100%;
}

/* The Foundation's public-disclosure surface (#956 Phase 4): the transparency
 * hub and one document. The maud pages set their measure with an inline
 * `max-width` and leaned on Bootstrap's `.text-body-secondary` for the section
 * blurbs; Dioxus pages load neither, so both live here. `ch` tracks the body
 * font, so the measure holds as the type scales. */
.transparency,
.transparency-doc {
  margin-inline: auto;
}

.transparency {
  max-width: 70ch;
}

/* A single document reads as a letter, so it sets a tighter measure than the
 * hub's scannable list. */
.transparency-doc {
  max-width: 65ch;
}

.transparency-required,
.transparency-voluntary,
.transparency-minutes {
  margin: 0 0 2rem;
}

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

.transparency-list li {
  border-bottom: 1px solid var(--nav-color-border);
  line-height: 1.6;
  padding: 0.5rem 0;
}

/* The template gallery (#956 Phase 4). The maud pages used Bootstrap's
 * `row row-cols-md-2 g-4` grid and `badge bg-*` colours; Dioxus pages load
 * neither, so the grid and the jurisdiction weights live here. `auto-fit` means
 * the gallery reflows without column-class churn as templates are curated in. */
.template-gallery {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  margin-top: 1.5rem;
}

.template-gallery > .nav-card {
  height: 100%;
}

.template-card__title {
  font-size: 1.1rem;
  margin: 0.5rem 0;
}

/* A state-specific filing must not read as nationwide, so its badge carries a
 * caution weight against the neutral federal default. */
.nav-badge--caution {
  background: var(--nav-color-warning);
  color: #212529;
}

.template-notation,
.template-start-matter {
  margin-top: 2rem;
}

.template-notation pre {
  background: var(--nav-color-surface-raised);
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius-sm);
  overflow-x: auto;
  padding: 1rem;
}

/* Staff workbench (`/staff`) — the project KPI overview, the calendar
   placeholder, and the administrative directory. Ported from `brand.css` with
   the Bootstrap custom properties remapped onto the design-system tokens, so
   the Dioxus page carries its own styling instead of inheriting a stylesheet
   the maud layout happened to link. */
.project-kpi-overview {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 62rem) {
  .project-kpi-overview {
    grid-template-columns: 5fr 7fr;
  }
}

.project-kpi-chart {
  /* The firm logo anchors this triad at rgb(0, 181, 216) / #00b5d8. Keeping its
     HSL saturation and lightness, the companions sit 120 degrees apart on the
     color wheel: green #23d800 (+120deg) and red #d80023 (-120deg). Archived
     projects are intentionally outside this chart, so the green remains
     available for a future third represented status. */
  --project-status-cyan: rgb(0, 181, 216);
  --project-status-green: rgb(35, 216, 0);
  --project-status-red: rgb(216, 0, 35);
}

.project-kpi-chart__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 36rem) {
  .project-kpi-chart__body {
    flex-direction: row;
    text-align: left;
  }
}

.project-status-pie {
  width: min(12rem, 58vw);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: 1px solid var(--nav-color-border);
  border-radius: 50%;
  background: conic-gradient(
    var(--project-status-cyan) 0 var(--project-open-share),
    var(--project-status-red) var(--project-open-share) 100%
  );
}

.project-status-pie-empty {
  background: var(--nav-color-surface-subtle);
}

.project-kpi-total {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.1;
}

.project-status-legend {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.project-status-legend li + li {
  margin-top: 0.5rem;
}

.project-status-key {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.5rem;
  border: 1px solid var(--nav-color-border);
  border-radius: 50%;
}

.project-status-key-open {
  background: var(--project-status-cyan);
}

.project-status-key-closed {
  background: var(--project-status-red);
}

.project-kpi-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-kpi-rows li + li {
  border-top: 1px solid var(--nav-color-border);
}

.project-kpi-rows li a {
  display: block;
  padding: 0.5rem 0;
}

.project-kpi-empty {
  margin: 0;
}

.nav-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.nav-tab {
  padding: 0.35rem 0.85rem;
  border-radius: 0.35rem;
  color: var(--nav-color-link);
  text-decoration: none;
}

.nav-tab.is-active {
  background: var(--nav-color-primary);
  color: var(--nav-color-on-primary);
}

.nav-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.nav-pagination__status {
  color: var(--nav-color-text-muted);
}

.nav-pagination__link.is-disabled {
  color: var(--nav-color-text-muted);
  pointer-events: none;
}

.staff-project-calendar {
  margin-bottom: 2rem;
}

.admin-details__columns {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .admin-details__columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

.admin-details__heading {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nav-color-text-muted);
  margin-top: 1.5rem;
}

.admin-details__columns > div > .admin-details__heading:first-child {
  margin-top: 0;
}

.admin-details ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}