/* ============================================
   EA INTAKE DESIGN SYSTEM
   Single-file, token-governed stylesheet
   ============================================ */

/* 1.  Custom Properties — Token Registry
       All spacing, color, type, timing, and
       structural tokens defined at :root.
       THE source of truth for all values.        */
:root {
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
  --type-xs: 0.75rem; --type-sm: 0.8125rem; --type-base: 0.9375rem;
  --type-md: 1.0625rem;
  --type-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --type-xl: clamp(1.375rem, 1.125rem + 0.75vw, 1.75rem);
  --type-2xl: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  --leading-xs: 1.4; --leading-sm: 1.5; --leading-base: 1.6; --leading-md: 1.5;
  --leading-lg: 1.3; --leading-xl: 1.2; --leading-2xl: 1.1;
  --color-bg: #FAF8F4; --color-bg-raised: #FFFFFF;
  --color-bg-inset: #F0EDE6; --color-bg-nav: #1C2433;
  --color-text-primary: #1A1A1A; --color-text-secondary: #4A4A4A;
  --color-text-tertiary: #6E6E6E; --color-text-inverse: #FAF8F4;
  --color-accent: #7A2B38; --color-accent-hover: #5E1F2A; --color-accent-subtle: #F5EDEE;
  --color-rule: #D4CFC6; --color-rule-light: #E8E4DD;
  --color-border-input: #C4BFB6; --color-border-focus: #1C2433;
  --color-error: #A63D2F; --color-error-bg: #FDF3F1;
  --color-success: #2E6040; --color-success-bg: #F0F6F2;
  --color-warning: #7A5C11; --color-warning-bg: #FDF8EC;
  --duration-fast: 100ms; --duration-normal: 150ms;
  --duration-slow: 300ms; --ease-default: ease;
  --radius-sm: 2px; --radius-md: 3px;
  --content-max-width: 52rem; --nav-height: 3.5rem;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-login: 0 8px 32px rgba(0,0,0,0.3);
}

/* 2.  Font Declarations — @font-face
       Self-hosted web fonts with size-adjust
       overrides for fallback metric matching.     */
@font-face {
  font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal;
  src: url("fonts/cormorant-garamond-500.woff2") format("woff2");
  font-display: swap; size-adjust: 105%; ascent-override: 90%; descent-override: 22%;
}
@font-face {
  font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal;
  src: url("fonts/cormorant-garamond-600.woff2") format("woff2");
  font-display: swap; size-adjust: 105%; ascent-override: 90%; descent-override: 22%;
}
@font-face {
  font-family: "Cormorant Garamond"; font-weight: 700; font-style: normal;
  src: url("fonts/cormorant-garamond-700.woff2") format("woff2");
  font-display: swap; size-adjust: 105%; ascent-override: 90%; descent-override: 22%;
}
@font-face {
  font-family: "Libre Franklin"; font-weight: 400; font-style: normal;
  src: url("fonts/libre-franklin-400.woff2") format("woff2");
  font-display: swap; size-adjust: 100%; ascent-override: 95%; descent-override: 25%;
}
@font-face {
  font-family: "Libre Franklin"; font-weight: 500; font-style: normal;
  src: url("fonts/libre-franklin-500.woff2") format("woff2");
  font-display: swap; size-adjust: 100%; ascent-override: 95%; descent-override: 25%;
}
@font-face {
  font-family: "Libre Franklin"; font-weight: 600; font-style: normal;
  src: url("fonts/libre-franklin-600.woff2") format("woff2");
  font-display: swap; size-adjust: 100%; ascent-override: 95%; descent-override: 25%;
}
@font-face {
  font-family: "DM Mono"; font-weight: 400; font-style: normal;
  src: url("fonts/dm-mono-400.woff2") format("woff2");
  font-display: swap; size-adjust: 108%; ascent-override: 88%; descent-override: 22%;
}

/* 3.  Reset — Minimal custom reset
       box-sizing, margin, line-height,
       font-smoothing. No external dependency.     */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
body {
  min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased;
  background-color: var(--color-bg, #FF00FF); color: var(--color-text-primary, #FF00FF);
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--type-base, 999px); line-height: var(--leading-base, 999px);
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }

/* 4.  Typography — Voice Registry
       Voice classes: .voice-display through
       .voice-caption. One voice per role.         */
.voice-display {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 700; font-size: var(--type-2xl, 999px); line-height: var(--leading-2xl, 999px);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.voice-title {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 600; font-size: var(--type-xl, 999px); line-height: var(--leading-xl, 999px);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.voice-section {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 500; font-size: var(--type-lg, 999px); line-height: var(--leading-lg, 999px);
  letter-spacing: normal; text-transform: none;
}
.voice-nav {
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500; font-size: var(--type-sm, 999px); line-height: var(--leading-sm, 999px);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.voice-label {
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500; font-size: var(--type-sm, 999px); line-height: var(--leading-sm, 999px);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.voice-body {
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400; font-size: var(--type-base, 999px); line-height: var(--leading-base, 999px);
  letter-spacing: normal; text-transform: none;
}
.voice-button {
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600; font-size: var(--type-sm, 999px); line-height: var(--leading-sm, 999px);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.voice-data {
  font-family: "DM Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-weight: 400; font-size: var(--type-base, 999px); line-height: var(--leading-base, 999px);
  letter-spacing: 0.05em; text-transform: none;
}
.voice-caption {
  font-family: "DM Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-weight: 400; font-size: var(--type-xs, 999px); line-height: var(--leading-xs, 999px);
  letter-spacing: normal; text-transform: none;
}
.voice-subtitle {
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400; font-size: var(--type-xs, 999px); line-height: var(--leading-xs, 999px);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* 5.  Surfaces + Layout Engine
       Surface classes, page max-width, centering,
       padding, main content area, single-track.   */
.surface-raised {
  background-color: var(--color-bg-raised, #FF00FF);
  border: 1px solid var(--color-rule-light, #FF00FF);
  border-radius: var(--radius-md, 999px);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.04));
}
.surface-inset { background-color: var(--color-bg-inset, #FF00FF); }
main {
  max-width: var(--content-max-width, 999px);
  margin-inline: auto;
  padding: var(--space-7, 999px) var(--space-5, 999px) var(--space-5, 999px);
}
main > h1 { margin-bottom: var(--space-5, 999px); }
main > p { margin-bottom: var(--space-4, 999px); }
main > form + form { margin-top: var(--space-3, 999px); }

/* 6.  Navigation — Component (dark chrome)
       Sticky nav bar, logo, nav links,
       mobile <details> collapse.                  */
nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-height, 999px); background-color: var(--color-bg-nav, #FF00FF);
  display: flex; align-items: center;
  padding: 0 var(--space-5, 999px); gap: var(--space-5, 999px);
}
.nav-wordmark {
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500; font-size: var(--type-sm, 999px); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-inverse, #FF00FF);
  text-decoration: none; white-space: nowrap;
}
.nav-links {
  display: flex; align-items: center; gap: var(--space-4, 999px);
  list-style: none; margin: 0; padding: 0; margin-left: auto;
}
.nav-links a {
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500; font-size: var(--type-sm, 999px); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-inverse, #FF00FF);
  opacity: 0.7; text-decoration: none;
  transition: opacity var(--duration-normal, 150ms) var(--ease-default, ease);
}
.nav-links a:hover { opacity: 1; }
.nav-links a.is-active {
  opacity: 1; border-bottom: 2px solid var(--color-accent, #FF00FF); padding-bottom: 2px;
}
.nav-user {
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400; font-size: var(--type-xs, 999px);
  color: var(--color-text-inverse, #FF00FF); opacity: 0.7; white-space: nowrap;
  background: none; border: none; cursor: pointer; padding: 0;
}
.nav-toggle { display: none; }

/* 7.  Buttons — Component
       Primary, secondary, danger.
       All states: hover, focus, active, disabled. */
.btn-primary {
  display: inline-block; background-color: var(--color-accent, #FF00FF);
  color: var(--color-text-inverse, #FF00FF);
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600; font-size: var(--type-sm, 999px); letter-spacing: 0.06em;
  text-transform: uppercase; padding: var(--space-3, 999px) var(--space-6, 999px);
  border: none; border-radius: var(--radius-sm, 999px); cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-normal, 150ms) var(--ease-default, ease);
  &:hover { background-color: var(--color-accent-hover, #FF00FF); }
  &:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(28,36,51,0.3); }
  &:active { background-color: #4D1720; }
  &:disabled { opacity: 0.5; cursor: not-allowed; }
}
.btn-secondary {
  display: inline-block; background: transparent;
  color: var(--color-text-secondary, #FF00FF);
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600; font-size: var(--type-sm, 999px); letter-spacing: 0.06em;
  text-transform: uppercase; padding: var(--space-3, 999px) var(--space-6, 999px);
  border: 1px solid var(--color-rule, #FF00FF); border-radius: var(--radius-sm, 999px);
  cursor: pointer; text-decoration: none;
  transition: border-color var(--duration-normal, 150ms) var(--ease-default, ease),
              color var(--duration-normal, 150ms) var(--ease-default, ease);
  &:hover { border-color: var(--color-text-secondary, #FF00FF); color: var(--color-text-primary, #FF00FF); }
  &:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(28,36,51,0.3); }
  &:disabled { opacity: 0.5; cursor: not-allowed; }
}
.btn-danger {
  display: inline-block; background: transparent; color: var(--color-error, #FF00FF);
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600; font-size: var(--type-sm, 999px); letter-spacing: 0.06em;
  text-transform: uppercase; padding: var(--space-3, 999px) var(--space-6, 999px);
  border: 1px solid var(--color-error, #FF00FF); border-radius: var(--radius-sm, 999px);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--duration-normal, 150ms) var(--ease-default, ease),
              color var(--duration-normal, 150ms) var(--ease-default, ease);
  &:hover { background-color: var(--color-error, #FF00FF); color: var(--color-text-inverse, #FF00FF); }
  &:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(166,61,47,0.3); }
  &:disabled { opacity: 0.5; cursor: not-allowed; }
}
.btn-small {
  padding: var(--space-2, 999px) var(--space-4, 999px);
  font-size: var(--type-xs, 999px);
}
/* 8.  Forms & Inputs — Component
       Text inputs, selects, date inputs.
       States: rest, focus, error, disabled.       */
input[type="text"],
input[type="password"],
input[type="date"],
textarea {
  display: block; width: 100%;
  background-color: var(--color-bg-inset, #FF00FF);
  border: 1px solid var(--color-border-input, #FF00FF);
  border-radius: var(--radius-sm, 999px);
  padding: var(--space-3, 999px) var(--space-4, 999px);
  color: var(--color-text-primary, #FF00FF);
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400; font-size: var(--type-base, 999px); line-height: var(--leading-base, 999px);
  transition: border-color var(--duration-normal, 150ms) var(--ease-default, ease),
              box-shadow var(--duration-normal, 150ms) var(--ease-default, ease);
  &:focus-visible { outline: none; border-color: var(--color-border-focus, #FF00FF); box-shadow: 0 0 0 2px rgba(28,36,51,0.12); }
  &.is-error { border-color: var(--color-error, #FF00FF); }
  &:disabled { opacity: 0.5; cursor: not-allowed; }
  &::placeholder { color: var(--color-text-tertiary, #FF00FF); font-style: italic; }
}
select {
  display: block; width: 100%;
  background-color: var(--color-bg-inset, #FF00FF);
  border: 1px solid var(--color-border-input, #FF00FF);
  border-radius: var(--radius-sm, 999px);
  padding: var(--space-3, 999px) var(--space-4, 999px);
  color: var(--color-text-primary, #FF00FF);
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400; font-size: var(--type-base, 999px); line-height: var(--leading-base, 999px);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231C2433' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4, 999px) center;
  padding-right: var(--space-7, 999px); cursor: pointer;
  transition: border-color var(--duration-normal, 150ms) var(--ease-default, ease),
              box-shadow var(--duration-normal, 150ms) var(--ease-default, ease);
  &:focus-visible { outline: none; border-color: var(--color-border-focus, #FF00FF); box-shadow: 0 0 0 2px rgba(28,36,51,0.12); }
}
label {
  display: block; font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500; font-size: var(--type-sm, 999px); line-height: var(--leading-sm, 999px);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-secondary, #FF00FF); margin-bottom: var(--space-2, 999px);
}
small.field-error {
  display: block; color: var(--color-error, #FF00FF);
  font-family: "DM Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size: var(--type-xs, 999px); line-height: var(--leading-xs, 999px);
  margin-top: var(--space-1, 999px); margin-bottom: var(--space-1, 999px);
}
.field-group { margin-bottom: var(--space-3, 999px); }

/* 9.  Fieldsets — Surface + Component
       Raised card surface, legend styling,
       section rhythm.                             */
fieldset {
  background-color: var(--color-bg-raised, #FF00FF);
  border: 1px solid var(--color-rule-light, #FF00FF);
  border-radius: var(--radius-md, 999px);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.04));
  padding: var(--space-5, 999px) var(--space-4, 999px) var(--space-4, 999px);
  margin-bottom: var(--space-4, 999px);
}
legend {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 500; font-size: var(--type-lg, 999px); line-height: var(--leading-lg, 999px);
  letter-spacing: normal; text-transform: none;
  color: var(--color-text-primary, #FF00FF); padding: 0 var(--space-2, 999px);
}
.address-group {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-4, 999px);
}

/* 10. Tables — Component
       Header row (dark chrome), body rows,
       hover, matter number links, status badges.  */
.table-wrap { margin-bottom: var(--space-5, 999px); }
table { width: 100%; border-collapse: collapse; }
thead tr {
  background-color: var(--color-bg-nav, #FF00FF); color: var(--color-text-inverse, #FF00FF);
}
thead th {
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500; font-size: var(--type-sm, 999px); letter-spacing: 0.04em;
  text-transform: uppercase; padding: var(--space-3, 999px) var(--space-4, 999px);
  text-align: left;
}
tbody tr {
  border-bottom: 1px solid var(--color-rule-light, #FF00FF);
  transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
}
tbody tr:hover { background-color: var(--color-bg-inset, #FF00FF); }
tbody td {
  padding: var(--space-3, 999px) var(--space-4, 999px);
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400; font-size: var(--type-base, 999px); line-height: var(--leading-base, 999px);
}
.cell-matter {
  font-family: "DM Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-weight: 400; font-size: var(--type-base, 999px); letter-spacing: 0.05em;
}
.cell-matter a {
  color: var(--color-accent, #FF00FF); text-decoration: none;
  &:hover { text-decoration: underline; }
}
.cell-actions { white-space: nowrap; }
.cell-actions form { display: inline-block; }
.cell-actions form + form { margin-left: var(--space-2, 999px); }
.records-toolbar {
  display: flex; align-items: center; gap: var(--space-3, 999px);
  margin-bottom: var(--space-5, 999px);
}
.records-toolbar .btn-secondary { margin-left: auto; }
.cell-check { width: 2.5rem; text-align: center; }
.cell-check input[type="checkbox"] { cursor: pointer; width: 1rem; height: 1rem; }
.bulk-bar {
  display: flex; align-items: center; gap: var(--space-3, 999px);
  background-color: var(--color-bg-inset, #FF00FF);
  border: 1px solid var(--color-rule, #FF00FF); border-radius: var(--radius-sm, 999px);
  padding: var(--space-2, 999px) var(--space-4, 999px);
  margin-bottom: var(--space-4, 999px);
}
.bulk-bar[hidden] { display: none; }
.bulk-bar-count {
  font-family: "DM Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size: var(--type-sm, 999px); color: var(--color-text-secondary, #FF00FF);
  margin-right: auto;
}
.bulk-bar form { display: inline-block; }
.bulk-bar form + form { margin-left: var(--space-2, 999px); }
.badge-active {
  display: inline-block; background-color: var(--color-success-bg, #FF00FF);
  color: var(--color-success, #FF00FF); border: 1px solid currentColor;
  font-family: "DM Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size: var(--type-xs, 999px); text-transform: uppercase;
  padding: var(--space-1, 999px) var(--space-3, 999px); border-radius: var(--radius-sm, 999px);
}
.badge-inactive {
  display: inline-block; background-color: var(--color-bg-inset, #FF00FF);
  color: var(--color-text-tertiary, #FF00FF); border: 1px solid var(--color-rule, #FF00FF);
  font-family: "DM Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size: var(--type-xs, 999px); text-transform: uppercase;
  padding: var(--space-1, 999px) var(--space-3, 999px); border-radius: var(--radius-sm, 999px);
}

/* 12. Alerts & Flash — Component
       Success, error, warning flash messages.
       Field-level error styling.                  */
.alert-success {
  background-color: var(--color-success-bg, #FF00FF);
  border-left: 3px solid var(--color-success, #FF00FF); color: var(--color-success, #FF00FF);
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500; font-size: var(--type-sm, 999px);
  padding: var(--space-3, 999px) var(--space-4, 999px);
  border-radius: 0 var(--radius-sm, 999px) var(--radius-sm, 999px) 0;
  margin-bottom: var(--space-5, 999px);
}
.alert-error {
  background-color: var(--color-error-bg, #FF00FF);
  border-left: 3px solid var(--color-error, #FF00FF); color: var(--color-error, #FF00FF);
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500; font-size: var(--type-sm, 999px);
  padding: var(--space-3, 999px) var(--space-4, 999px);
  border-radius: 0 var(--radius-sm, 999px) var(--radius-sm, 999px) 0;
  margin-bottom: var(--space-5, 999px);
}
.alert-warning {
  background-color: var(--color-warning-bg, #FF00FF);
  border-left: 3px solid var(--color-warning, #FF00FF); color: var(--color-warning, #FF00FF);
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500; font-size: var(--type-sm, 999px);
  padding: var(--space-3, 999px) var(--space-4, 999px);
  border-radius: 0 var(--radius-sm, 999px) var(--radius-sm, 999px) 0;
  margin-bottom: var(--space-5, 999px);
}

/* 13. Login Page — Component (special surface)
       Full-page dark background, centered card,
       display title, custom token overrides.      */
.page-login {
  background-color: var(--color-bg-nav, #FF00FF); min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5, 999px);
}
.login-card {
  background-color: var(--color-bg-raised, #FF00FF); max-width: 24rem; width: 100%;
  padding: var(--space-7, 999px) var(--space-6, 999px);
  border-radius: var(--radius-md, 999px);
  box-shadow: var(--shadow-login, 0 8px 32px rgba(0,0,0,0.3));
}
.login-title {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 700; font-size: var(--type-2xl, 999px); line-height: var(--leading-2xl, 999px);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--color-text-primary, #FF00FF); text-align: center;
  margin-bottom: var(--space-1, 999px);
}
.login-subtitle {
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400; font-size: var(--type-xs, 999px); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-tertiary, #FF00FF);
  text-align: center; margin-bottom: var(--space-4, 999px);
}
.login-rule {
  border: none; border-top: 1px solid var(--color-rule, #FF00FF);
  margin-bottom: var(--space-5, 999px);
}
.login-card input + label { margin-top: var(--space-4, 999px); }
.login-card .btn-primary {
  display: block; width: 100%; margin-top: var(--space-5, 999px);
}

/* 14. Status Toggle — Component
       Active/Hidden segmented toggle for
       record list filtering.                      */
.status-toggle {
  display: inline-flex; background-color: var(--color-bg-inset, #FF00FF);
  border: 1px solid var(--color-rule, #FF00FF); border-radius: var(--radius-sm, 999px);
  overflow: hidden; margin-bottom: var(--space-5, 999px);
}
.status-toggle a {
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500; font-size: var(--type-sm, 999px); letter-spacing: 0.04em;
  text-transform: uppercase; padding: var(--space-2, 999px) var(--space-5, 999px);
  color: var(--color-text-secondary, #FF00FF); text-decoration: none;
  transition: background-color var(--duration-normal, 150ms) var(--ease-default, ease),
              color var(--duration-normal, 150ms) var(--ease-default, ease);
}
.status-toggle a.is-active {
  background-color: var(--color-bg-nav, #FF00FF); color: var(--color-text-inverse, #FF00FF);
}

/* 15. Animations — Motion System
       fadeUp, slideIn keyframes. Transition
       defaults. prefers-reduced-motion override.  */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
main > * { animation: fadeUp var(--duration-slow, 300ms) var(--ease-default, ease) both; }
main > *:nth-child(1) { animation-delay: 0ms; }
main > *:nth-child(2) { animation-delay: 60ms; }
main > *:nth-child(3) { animation-delay: 120ms; }
main > *:nth-child(4) { animation-delay: 180ms; }
main > *:nth-child(5) { animation-delay: 240ms; }
[role="alert"] { animation: slideIn 250ms var(--ease-default, ease) both; }
.htmx-settling input {
  transition: background-color 600ms var(--ease-default, ease);
  background-color: var(--color-warning-bg, #FF00FF);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 16. Responsive — Layout adaptations
       Two breakpoints: 36rem (sm), 52rem (md).
       Nav collapse, padding reduction, stack.     */
@media (max-width: 52rem) {
  main { padding-left: var(--space-4, 999px); padding-right: var(--space-4, 999px); }
  .address-group { grid-template-columns: 1fr; }
}
@media (max-width: 36rem) {
  .nav-links {
    display: none; flex-direction: column; gap: var(--space-2, 999px); margin-left: 0;
    position: absolute; top: var(--nav-height, 999px); left: 0; right: 0;
    background-color: var(--color-bg-nav, #FF00FF);
    padding: var(--space-3, 999px) var(--space-5, 999px); z-index: 99;
  }
  .nav-links.is-open { display: flex; }
  .nav-toggle {
    display: block; cursor: pointer; color: var(--color-text-inverse, #FF00FF);
    margin-left: auto; padding: var(--space-2, 999px); background: none; border: none;
  }
  .nav-toggle .hamburger {
    display: block; width: 18px; height: 2px;
    background-color: var(--color-text-inverse, #FF00FF); position: relative;
  }
  .nav-toggle .hamburger::before,
  .nav-toggle .hamburger::after {
    content: ""; display: block; width: 18px; height: 2px;
    background-color: var(--color-text-inverse, #FF00FF); position: absolute;
  }
  .nav-toggle .hamburger::before { top: -6px; }
  .nav-toggle .hamburger::after { top: 6px; }
  nav { position: relative; }
  fieldset { padding: var(--space-4, 999px) var(--space-3, 999px); }
  .login-card { max-width: 100%; padding: var(--space-5, 999px) var(--space-4, 999px); }
  input[type="text"], input[type="password"], input[type="date"],
  textarea, select,
  .btn-primary, .btn-secondary, .btn-danger { min-height: 2.75rem; }
  .table-wrap { overflow-x: visible; }
  .table-wrap table thead { display: none; }
  .table-wrap table, .table-wrap table tbody,
  .table-wrap table tr, .table-wrap table td { display: block; width: 100%; }
  .table-wrap table tbody tr {
    padding: var(--space-3, 999px) var(--space-4, 999px);
    margin-bottom: var(--space-3, 999px);
    border: 1px solid var(--color-rule-light, #FF00FF);
    border-radius: var(--radius-md, 999px);
    background-color: var(--color-bg-raised, #FF00FF);
  }
  .table-wrap table tbody tr:hover { background-color: var(--color-bg-raised, #FF00FF); }
  .table-wrap table td {
    padding: var(--space-1, 999px) 0;
    border-bottom: none;
  }
  .table-wrap table td::before {
    content: attr(data-label);
    font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 500; font-size: var(--type-xs, 999px);
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-tertiary, #FF00FF);
    display: block;
  }
  .table-wrap table td:empty::before { display: none; }
  .cell-check { display: inline-block; width: auto; padding: var(--space-1, 999px) 0; }
  .cell-check::before { display: none; }
  .bulk-bar { flex-wrap: wrap; }
}

/* 17. Form Navigation — Sidebar + Save Bar
       Two-column grid layout for record form.
       Sticky sidebar with scrollspy and search.
       Fixed save bar for persistent actions.         */
main:has(.form-layout) {
  max-width: calc(var(--content-max-width, 999px) + 14rem + var(--space-5, 999px));
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}
.form-layout {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--space-5, 999px);
}
.form-content { min-width: 0; }
.form-content > h1 { margin-bottom: var(--space-5, 999px); }
.form-content fieldset[id^="section-"] {
  scroll-margin-top: calc(var(--nav-height, 999px) + var(--space-5, 999px));
}

.form-nav {
  position: sticky;
  top: calc(var(--nav-height, 999px) + var(--space-4, 999px));
  max-height: calc(100vh - var(--nav-height, 999px) - var(--space-8, 999px));
  overflow-y: auto;
  padding-right: var(--space-3, 999px);
}
.form-nav-search {
  display: block; width: 100%;
  font-family: "DM Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size: var(--type-xs, 999px); line-height: var(--leading-xs, 999px);
  background-color: var(--color-bg-inset, #FF00FF);
  border: 1px solid var(--color-border-input, #FF00FF);
  border-radius: var(--radius-sm, 999px);
  padding: var(--space-2, 999px) var(--space-3, 999px);
  color: var(--color-text-primary, #FF00FF);
  margin-bottom: var(--space-3, 999px);
  transition: border-color var(--duration-normal, 150ms) var(--ease-default, ease);
}
.form-nav-search:focus-visible {
  outline: none;
  border-color: var(--color-border-focus, #FF00FF);
  box-shadow: 0 0 0 2px rgba(28,36,51,0.12);
}
.form-nav-search::placeholder {
  color: var(--color-text-tertiary, #FF00FF);
  font-style: italic;
}
.form-nav-toggle { display: none; }
.form-nav-sections { list-style: none; margin: 0; padding: 0; }
.form-nav-link {
  display: block;
  font-family: "DM Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size: var(--type-xs, 999px); line-height: var(--leading-xs, 999px);
  color: var(--color-text-tertiary, #FF00FF);
  text-decoration: none;
  padding: var(--space-1, 999px) var(--space-2, 999px);
  border-left: 2px solid transparent;
  transition: color var(--duration-normal, 150ms) var(--ease-default, ease),
              border-color var(--duration-normal, 150ms) var(--ease-default, ease);
}
.form-nav-link:hover { color: var(--color-text-secondary, #FF00FF); }
.form-nav-link.is-active {
  color: var(--color-text-primary, #FF00FF);
  border-left-color: var(--color-accent, #FF00FF);
  font-weight: 500;
}
.form-nav-link.has-errors {
  color: var(--color-error, #FF00FF);
  border-left-color: var(--color-error, #FF00FF);
}

.form-nav-results[hidden] { display: none; }
.form-nav-results {
  background: var(--color-bg-raised, #FF00FF);
  border: 1px solid var(--color-rule-light, #FF00FF);
  border-radius: var(--radius-sm, 999px);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.04));
  max-height: 16rem;
  overflow-y: auto;
  margin-bottom: var(--space-3, 999px);
}
.form-nav-result {
  display: block; width: 100%;
  background: none; border: none; cursor: pointer;
  text-align: left;
  padding: var(--space-2, 999px) var(--space-3, 999px);
  border-bottom: 1px solid var(--color-rule-light, #FF00FF);
  transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
}
.form-nav-result:last-child { border-bottom: none; }
.form-nav-result:hover { background-color: var(--color-bg-inset, #FF00FF); }
.form-nav-result-label {
  display: block;
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--type-xs, 999px); font-weight: 500;
  color: var(--color-text-primary, #FF00FF);
}
.form-nav-result-section {
  display: block;
  font-family: "DM Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size: var(--type-xs, 999px);
  color: var(--color-text-tertiary, #FF00FF);
}
.form-nav-no-results {
  padding: var(--space-2, 999px) var(--space-3, 999px);
  font-family: "DM Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size: var(--type-xs, 999px);
  color: var(--color-text-tertiary, #FF00FF);
}

.field-highlight {
  background-color: var(--color-warning-bg, #FF00FF);
  transition: background-color 1.5s var(--ease-default, ease);
}

.form-save-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 3.5rem;
  background: var(--color-bg-raised, #FF00FF);
  border-top: 1px solid var(--color-rule, #FF00FF);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--space-5, 999px) env(safe-area-inset-bottom, 0px);
  gap: var(--space-3, 999px);
  z-index: 90;
}
.save-bar-context {
  margin-right: auto;
  color: var(--color-text-tertiary, #FF00FF);
}

/* 18. Form Navigation — Responsive (64rem)
       Sidebar collapses to collapsible dropdown.      */
@media (max-width: 64rem) {
  main:has(.form-layout) { max-width: var(--content-max-width, 999px); }
  .form-layout { grid-template-columns: 1fr; }
  .form-nav {
    position: sticky;
    top: var(--nav-height, 999px);
    z-index: 50;
    background: var(--color-bg, #FF00FF);
    border-bottom: 1px solid var(--color-rule-light, #FF00FF);
    max-height: none;
    overflow-y: visible;
    padding: var(--space-2, 999px) var(--space-4, 999px);
  }
  .form-nav-search { margin-bottom: var(--space-2, 999px); }
  .form-nav-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: var(--color-bg-inset, #FF00FF);
    border: 1px solid var(--color-border-input, #FF00FF);
    border-radius: var(--radius-sm, 999px); cursor: pointer;
    padding: var(--space-2, 999px) var(--space-3, 999px);
    font-family: "DM Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
    font-size: var(--type-xs, 999px); color: var(--color-text-secondary, #FF00FF);
    margin-bottom: var(--space-2, 999px);
  }
  .form-nav-toggle::after {
    content: "\25BC"; font-size: 0.6em; margin-left: var(--space-2, 999px);
    transition: transform var(--duration-normal, 150ms) var(--ease-default, ease);
  }
  .form-nav-toggle.is-open::after { transform: rotate(180deg); }
  .form-nav-sections {
    display: none; flex-direction: column;
    gap: 0; padding: var(--space-2, 999px) 0;
  }
  .form-nav-sections.is-open { display: flex; }
  .form-nav-link {
    white-space: nowrap;
    border-left: 2px solid transparent;
    border-bottom: none;
    padding: var(--space-2, 999px) var(--space-3, 999px);
  }
  .form-nav-link.is-active {
    border-left-color: var(--color-accent, #FF00FF);
  }
  .form-nav-link.has-errors {
    border-left-color: var(--color-error, #FF00FF);
  }
}
@media (max-width: 36rem) {
  .form-nav { top: 0; }
}

/* 19. Print — @media print
       Hide chrome, compact layout for paper.
       Minimize page count — tight spacing throughout. */
@media print {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  body { background: white; color: black; font-size: 9pt; line-height: 1.3; }
  nav, .nav-toggle, .form-save-bar, .status-toggle, .records-toolbar,
  .bulk-bar, .form-nav, .form-nav-search,
  .form-nav-toggle, .form-nav-sections, .form-nav-results { display: none !important; }
  main { max-width: 100%; padding: 0.25in; margin: 0; }
  main > * { animation: none; }
  main:has(.form-layout) { max-width: 100%; padding-bottom: 0; }
  .form-layout { display: block; }
  .voice-title { font-size: 14pt; margin-bottom: 0.25em; }
  fieldset {
    box-shadow: none; border: 1px solid #bbb;
    margin-bottom: 0.3em; padding: 0.25em 0.4em;
  }
  legend { font-size: 10pt; padding: 0 0.15em; }
  .field-group { margin-bottom: 0.15em; }
  .field-group label {
    display: inline; font-size: 8pt; margin-bottom: 0;
    margin-right: 0.3em;
  }
  .field-group label::after { content: ":"; }
  input[type="text"], input[type="password"], input[type="date"],
  textarea, select {
    display: inline; width: auto; border: none; background: none;
    padding: 0; font-size: 9pt; color: black;
  }
  table { font-size: 8pt; }
  thead tr { background: #eee; color: black; }
  tbody tr { border-bottom: 1px solid #ccc; }
  tbody td, thead th { padding: 0.15em 0.3em; }
  a { color: black; text-decoration: none; }
  .alert-success, .alert-error, .alert-warning { border-left-width: 2px; padding: 0.2em 0.4em; font-size: 8pt; }
}