/* ============================================================
   Brighterway — Design tokens (colors, type, spacing, base)
   Ported from ../claims-platform (brighterway-claims-design).
   Near-monochrome neutral canvas + one warm orange accent.
   ============================================================ */

:root {
  /* --- Brand orange (the sun) ----------------------------- */
  --brand-orange: 17 92% 48%;        /* #EC4A0A  inner sun / primary */
  --brand-orange-ring: 24 78% 55%;   /* #E8772E  outer ring / hover  */
  --brand-orange-50: 24 100% 97%;
  --brand-orange-100: 22 100% 93%;
  --brand-orange-200: 21 96% 85%;
  --brand-orange-300: 20 95% 75%;
  --brand-orange-400: 21 90% 62%;
  --brand-orange-500: 17 92% 48%;
  --brand-orange-600: 16 88% 42%;
  --brand-orange-700: 15 82% 35%;

  /* --- Neutrals (shadcn neutral scale, HSL) --------------- */
  --neutral-0:    0 0% 100%;
  --neutral-50:   0 0% 98%;
  --neutral-100:  0 0% 96.1%;
  --neutral-200:  0 0% 89.8%;
  --neutral-300:  0 0% 83.1%;
  --neutral-400:  0 0% 63.9%;
  --neutral-500:  0 0% 45.1%;
  --neutral-600:  0 0% 32.2%;
  --neutral-700:  0 0% 25.1%;
  --neutral-800:  0 0% 14.9%;
  --neutral-900:  0 0% 9%;
  --neutral-950:  0 0% 3.9%;
  --ink:          330 4% 12%;        /* #231F20  near-black brand text */

  /* --- Status palette ------------------------------------- */
  --status-amber:        38 92% 50%;
  --status-amber-bg:     45 100% 96%;
  --status-amber-fg:     30 80% 32%;
  --status-amber-border: 42 95% 82%;

  --status-blue:         217 91% 60%;
  --status-blue-bg:      214 100% 97%;
  --status-blue-fg:      221 70% 40%;
  --status-blue-border:  213 90% 87%;

  --status-green:        142 71% 38%;
  --status-green-bg:     140 70% 96%;
  --status-green-fg:     143 64% 24%;
  --status-green-border: 142 55% 80%;

  --status-red:          0 84% 60%;
  --status-red-bg:       0 100% 97%;
  --status-red-fg:       0 70% 42%;
  --status-red-border:   0 90% 88%;

  --status-gray:         220 9% 46%;
  --status-gray-bg:      220 14% 96%;
  --status-gray-fg:      220 12% 32%;
  --status-gray-border:  220 13% 85%;

  --status-teal:         173 75% 36%;
  --status-teal-bg:      174 60% 95%;
  --status-teal-fg:      175 70% 22%;
  --status-teal-border:  174 50% 78%;

  /* ========== Semantic aliases (light mode) ============== */
  --background:            var(--neutral-0);
  --foreground:            var(--neutral-950);
  --card:                  var(--neutral-0);
  --card-foreground:       var(--neutral-950);
  --primary:               var(--brand-orange);
  --primary-foreground:    var(--neutral-50);
  --secondary:             var(--neutral-100);
  --secondary-foreground:  var(--neutral-900);
  --muted:                 var(--neutral-100);
  --muted-foreground:      var(--neutral-500);
  --accent:                var(--neutral-100);
  --accent-foreground:     var(--neutral-900);
  --destructive:           var(--status-red);
  --destructive-foreground: var(--neutral-50);
  --border:                var(--neutral-200);
  --input:                 var(--neutral-200);
  --ring:                  var(--brand-orange);

  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunk:    var(--neutral-100);
  --text-heading:    var(--ink);
  --text-body:       var(--neutral-800);
  --text-muted:      var(--neutral-500);

  /* --- Typography ----------------------------------------- */
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, Menlo, Monaco,
               Consolas, "Liberation Mono", monospace;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-caps:   0.06em;

  --type-h1:        var(--weight-bold)     var(--text-3xl)/var(--leading-tight) var(--font-sans);
  --type-h2:        var(--weight-semibold) var(--text-2xl)/var(--leading-snug)  var(--font-sans);
  --type-h3:        var(--weight-semibold) var(--text-xl)/var(--leading-snug)   var(--font-sans);
  --type-card-title:var(--weight-semibold) var(--text-lg)/var(--leading-snug)   var(--font-sans);
  --type-body:      var(--weight-normal)   var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --type-small:     var(--weight-normal)   var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-meta:      var(--weight-medium)   var(--text-xs)/var(--leading-normal) var(--font-sans);
  --type-mono:      var(--weight-normal)   var(--text-sm)/var(--leading-normal) var(--font-mono);

  /* --- Spacing / radius / shadow / motion ----------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius:    0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-lg: var(--radius);
  --radius-xl: 0.75rem;
  --radius-pill: 9999px;

  --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.08), 0 1px 2px -1px hsl(0 0% 0% / 0.08);
  --shadow-md: 0 4px 8px -2px hsl(0 0% 0% / 0.08), 0 2px 4px -2px hsl(0 0% 0% / 0.06);
  --shadow-focus: 0 0 0 3px hsl(var(--brand-orange) / 0.35);

  --container-max: 1200px;
  --topbar-h: 60px;
  --env-stripe-h: 26px;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
}

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  min-width: 320px;
  min-height: 100%;
  background: hsl(var(--surface-page));
}

body {
  min-height: 100vh;
  margin: 0;
  background: hsl(var(--surface-page));
  color: hsl(var(--text-body));
  font: var(--weight-normal) var(--text-sm)/var(--leading-normal) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

a {
  color: hsl(var(--brand-orange-600));
  text-decoration: none;
}

a:hover { text-decoration: underline; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

::selection { background: hsl(var(--brand-orange) / 0.18); }

h1,
h2,
h3,
p { margin-top: 0; }

h1,
h2,
h3 {
  color: hsl(var(--text-heading));
  text-wrap: balance;
}

h1 {
  margin-bottom: var(--space-2);
  font-size: clamp(1.5rem, 3vw, var(--text-2xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

h2 {
  margin-bottom: var(--space-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

h3 {
  margin-bottom: var(--space-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: hsl(var(--neutral-900));
  color: hsl(var(--neutral-0));
}

.skip-link:focus-visible { top: var(--space-3); }

.page-shell {
  display: flex;
  width: min(100%, 1280px);
  min-height: 100vh;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 var(--space-10) var(--space-5);
}

.topbar {
  display: flex;
  min-height: var(--topbar-h);
  flex: 0 0 var(--topbar-h);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--surface-page));
}

.topbar p { margin: 0; }

.topbar-left,
.brand-identity {
  display: flex;
  min-width: 0;
  align-items: center;
}

.brand-identity { gap: var(--space-2); text-decoration: none; color: inherit; }
.brand-identity:hover { text-decoration: none; }
.brand-identity:hover .brand { color: hsl(var(--brand-orange-700)); }
.brand-identity:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

.brand-mark {
  display: block;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

.brand {
  color: hsl(var(--brand-orange-600));
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.brand-divider {
  width: 1px;
  height: var(--space-5);
  margin: 0 var(--space-1);
  background: hsl(var(--neutral-300));
}

.product-name {
  color: hsl(var(--text-muted));
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.signed-in {
  overflow: hidden;
  max-width: 44vw;
  color: hsl(var(--text-muted));
  font: var(--weight-normal) var(--text-xs)/var(--leading-normal) var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.back-link {
  align-self: flex-start;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.page-footer {
  margin-top: auto;
  padding: var(--space-8) 0 var(--space-2);
  color: hsl(var(--text-muted));
  font-size: var(--text-xs);
  text-align: center;
}

.home-content {
  width: min(100%, 920px);
  flex: 1 0 auto;
  margin: 0 auto;
  padding-top: var(--space-10);
}

.page-heading { margin-bottom: var(--space-6); }

.heading-line,
.claim-name-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

.heading-line h1 { margin-bottom: 0; }

.route-status,
.inline-loading {
  color: hsl(var(--text-muted));
  font-size: var(--text-xs);
}

.route-status { font-weight: var(--weight-medium); }
.route-status.refresh-error { color: hsl(var(--status-red-fg)); }

.inline-loading {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-4) 0;
}

.page-heading p,
.claim-heading p,
.section-heading p,
.form-copy p,
.review-empty-copy { color: hsl(var(--text-muted)); }

.page-heading > p,
.form-copy p,
.section-heading p { margin-bottom: 0; }

.panel,
.access-notice {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  background: hsl(var(--surface-card));
  box-shadow: var(--shadow-sm);
}

.new-claim {
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) minmax(340px, 1.28fr);
  gap: var(--space-6);
  padding: var(--space-5);
}

.new-claim-controls {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  background: hsl(var(--neutral-0));
  color: hsl(var(--text-body));
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

input::placeholder { color: hsl(var(--neutral-500)); }
input:focus,
select:focus { border-color: hsl(var(--brand-orange-ring)); }

.button {
  display: inline-flex;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

.button:not(:disabled):active { transform: translateY(1px); }

.button.primary {
  background: hsl(var(--brand-orange));
  color: hsl(var(--neutral-0));
}

.button.primary:hover:not(:disabled) {
  background: hsl(var(--brand-orange-600));
  text-decoration: none;
}

.button.secondary {
  border-color: hsl(var(--border));
  background: transparent;
  color: hsl(var(--text-body));
}

.button.secondary:hover:not(:disabled) {
  border-color: hsl(var(--brand-orange-ring));
  background: hsl(var(--neutral-100));
  text-decoration: none;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.form-error {
  grid-column: 2;
  min-height: var(--space-5);
  margin: calc(var(--space-4) * -1) 0 0;
  color: hsl(var(--status-red-fg));
  font-size: var(--text-xs);
}

.claims-section { margin-top: var(--space-8); }

.claims-section > h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

.claims-list {
  display: grid;
  gap: var(--space-2);
}

.claim-row {
  display: grid;
  grid-template-columns: 1fr auto 24px;
  min-height: 64px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  background: hsl(var(--surface-card));
  box-shadow: var(--shadow-xs);
  color: hsl(var(--text-body));
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.claim-row:hover {
  border-color: hsl(var(--brand-orange-ring));
  background: hsl(var(--neutral-100));
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.claim-row-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.claim-name-line strong {
  min-width: 0;
}

.claim-name-line .job-state { flex: 0 0 auto; }

/* Titles and names stay in Figtree; mono is for ids, file names and page refs only. */

.claim-row-copy strong {
  overflow: hidden;
  color: hsl(var(--text-heading));
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claim-date,
.claim-counts {
  color: hsl(var(--text-muted));
  font-size: var(--text-xs);
}

.row-arrow {
  color: hsl(var(--brand-orange-600));
  font-size: var(--text-lg);
}

.empty-state { padding: var(--space-6); }
.empty-state h3 { margin-bottom: var(--space-4); }

.step-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-weight: var(--weight-semibold);
}

.step-number {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: hsl(var(--brand-orange-50));
  color: hsl(var(--brand-orange-700));
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.empty-note {
  max-width: 580px;
  margin: var(--space-5) 0 0;
  color: hsl(var(--text-muted));
  font-size: var(--text-sm);
}

.claim-heading { padding: var(--space-3) 0 var(--space-5); }
.claim-heading .eyebrow { margin-bottom: var(--space-1); }
.claim-heading h1 { overflow-wrap: anywhere; }

.eyebrow {
  margin-bottom: var(--space-1);
  color: hsl(var(--text-muted));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.message {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid hsl(var(--status-red-border));
  border-radius: var(--radius);
  background: hsl(var(--status-red-bg));
  color: hsl(var(--status-red-fg));
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.message.success {
  border-color: hsl(var(--status-green-border));
  background: hsl(var(--status-green-bg));
  color: hsl(var(--status-green-fg));
}

.claim-columns {
  display: grid;
  grid-template-columns: minmax(400px, 0.84fr) minmax(0, 1.16fr);
  align-items: start;
  gap: var(--space-5);
}

.claim-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: var(--space-4);
}

.documents-panel,
.template-panel,
.past-panel,
.review-panel { padding: var(--space-5); }

.section-heading { margin-bottom: var(--space-4); }

.section-heading h2,
.past-panel > h2 { font-size: var(--text-lg); }

.dropzone {
  display: grid;
  min-height: 132px;
  place-content: center;
  gap: var(--space-1);
  padding: var(--space-5);
  border: 1px dashed hsl(var(--neutral-300));
  border-radius: var(--radius-xl);
  background: hsl(var(--neutral-50));
  color: hsl(var(--text-body));
  cursor: pointer;
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.dropzone:hover,
.dropzone.dragging {
  border-color: hsl(var(--brand-orange-ring));
  background: hsl(var(--brand-orange-50));
}

.dropzone.disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.dropzone strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.dropzone span {
  max-width: 400px;
  color: hsl(var(--text-muted));
  font-size: var(--text-xs);
}

.upload-status {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid hsl(var(--brand-orange-200));
  border-radius: var(--radius);
  background: hsl(var(--brand-orange-50));
}

.upload-copy {
  margin-bottom: var(--space-2);
  color: hsl(var(--brand-orange-700));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.progress-track {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: hsl(var(--neutral-200));
}

.progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: hsl(var(--brand-orange));
  transition: width var(--dur-base) var(--ease-standard);
}

.document-list { margin-top: var(--space-4); }

.no-documents,
.past-empty {
  margin-bottom: 0;
  color: hsl(var(--text-muted));
  font-size: var(--text-sm);
}

.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid hsl(var(--border));
}

.doc-row:first-child { border-top: 0; }
.doc-main { min-width: 0; }

.doc-name {
  overflow: hidden;
  margin-bottom: var(--space-1);
  color: hsl(var(--text-heading));
  font: var(--weight-medium) var(--text-xs)/var(--leading-normal) var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: hsl(var(--text-muted));
  font: var(--weight-normal) var(--text-2xs)/var(--leading-normal) var(--font-mono);
}

.kind-badge {
  padding: 3px var(--space-3);
  border: 1px solid hsl(var(--status-gray-border));
  border-radius: var(--radius-pill);
  background: hsl(var(--status-gray-bg));
  color: hsl(var(--status-gray-fg));
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

.remove-document {
  min-height: 28px;
  flex: 0 0 auto;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: hsl(var(--status-red-fg));
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.remove-document:hover {
  border-color: hsl(var(--status-red-border));
  background: hsl(var(--status-red-bg));
}

.remove-document:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.document-total {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--text-muted));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.template-list {
  display: grid;
  gap: var(--space-2);
}

.template-option {
  display: grid;
  position: relative;
  width: 100%;
  gap: 2px;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--neutral-0));
  color: hsl(var(--text-body));
  cursor: pointer;
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.template-option::before {
  position: absolute;
  top: 14px;
  left: var(--space-3);
  width: 16px;
  height: 16px;
  border: 1px solid hsl(var(--neutral-400));
  border-radius: var(--radius-pill);
  content: "";
}

.template-option:hover {
  border-color: hsl(var(--brand-orange-ring));
  background: hsl(var(--brand-orange-50));
}

.template-option.selected {
  border-color: hsl(var(--brand-orange-300));
  background: hsl(var(--brand-orange-50));
  box-shadow: 0 0 0 1px hsl(var(--brand-orange-300));
}

.template-option.selected::before {
  border: 5px solid hsl(var(--brand-orange));
  background: hsl(var(--neutral-0));
}

.template-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.template-due {
  color: hsl(var(--text-muted));
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.generate-button {
  width: 100%;
  margin-top: var(--space-4);
}

.past-panel > h2 { margin-bottom: var(--space-3); }

.past-list {
  display: grid;
  gap: var(--space-1);
}

.past-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--neutral-0));
  color: hsl(var(--text-body));
  cursor: pointer;
  text-align: left;
}

.past-review:hover,
.past-review.active {
  border-color: hsl(var(--brand-orange-ring));
  background: hsl(var(--brand-orange-50));
}

.past-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.past-copy strong {
  overflow: hidden;
  color: hsl(var(--text-heading));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.past-copy span,
.past-count {
  color: hsl(var(--text-muted));
  font-size: var(--text-2xs);
}

.past-status {
  display: grid;
  justify-items: end;
  gap: var(--space-1);
}

.past-count { text-align: right; }

.job-state {
  display: inline-flex;
  width: max-content;
  padding: 2px var(--space-2);
  border: 1px solid hsl(var(--status-green-border));
  border-radius: var(--radius-pill);
  background: hsl(var(--status-green-bg));
  color: hsl(var(--status-green-fg));
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

.job-state.generating {
  border-color: hsl(var(--status-amber-border));
  background: hsl(var(--status-amber-bg));
  color: hsl(var(--status-amber-fg));
}

.job-state.failed {
  border-color: hsl(var(--status-red-border));
  background: hsl(var(--status-red-bg));
  color: hsl(var(--status-red-fg));
}

.delete-area {
  padding: 0 var(--space-1);
  text-align: center;
}

.danger-link {
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: hsl(var(--status-red-fg));
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.danger-link:hover {
  border-color: hsl(var(--status-red-border));
  background: hsl(var(--status-red-bg));
}

.danger-link:disabled {
  cursor: wait;
  opacity: 0.55;
}

.review-panel {
  min-width: 0;
  overflow: hidden;
}

.review-actions {
  display: flex;
  min-height: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.review-actions:not(:empty) {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
}

.review-actions .button {
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}

.review-actions .compact { margin-left: 2px; }

.review-content > h2 {
  margin-top: 2px;
  font-size: var(--text-xl);
}

.review-content[aria-busy="true"] {
  cursor: progress;
  opacity: 0.6;
}

.review-empty-copy {
  max-width: 520px;
  margin-bottom: 0;
}

.model-notice {
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid hsl(var(--status-blue-border));
  border-radius: var(--radius);
  background: hsl(var(--status-blue-bg));
  color: hsl(var(--status-blue-fg));
  font-size: var(--text-xs);
}

.review-header {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid hsl(var(--neutral-300));
}

.review-header h2 {
  margin-bottom: var(--space-1);
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  overflow-wrap: anywhere;
}

.due-rule {
  margin-bottom: var(--space-3);
  color: hsl(var(--text-muted));
  font-size: var(--text-xs);
}

.review-meta {
  display: inline-flex;
  margin-bottom: 0;
  padding: 3px var(--space-3);
  border: 1px solid hsl(var(--status-green-border));
  border-radius: var(--radius-pill);
  background: hsl(var(--status-green-bg));
  color: hsl(var(--status-green-fg));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.review-fields { margin-top: var(--space-1); }

.field-line {
  padding: var(--space-3) 0;
  border-bottom: 1px solid hsl(var(--border));
  color: hsl(var(--text-body));
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.field-label {
  margin-right: 0.35em;
  color: hsl(var(--text-heading));
  font-weight: var(--weight-semibold);
}

.field-value { white-space: pre-wrap; }

.field-sources {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-left: var(--space-2);
  vertical-align: middle;
}

.source-chip {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 3px var(--space-3);
  border: 1px solid hsl(var(--brand-orange-200));
  border-radius: var(--radius-pill);
  background: hsl(var(--brand-orange-50));
  color: hsl(var(--brand-orange-700));
  cursor: pointer;
  font: var(--weight-semibold) var(--text-xs)/var(--leading-normal) var(--font-mono);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.source-chip:hover {
  border-color: hsl(var(--brand-orange-ring));
  background: hsl(var(--brand-orange-100));
}

.blank-line {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid hsl(var(--status-amber-border));
  border-radius: var(--radius);
  background: hsl(var(--status-amber-bg));
  color: hsl(var(--status-amber-fg));
  font-size: var(--text-xs);
}

.review-section-heading {
  margin: var(--space-6) 0 0;
  color: hsl(var(--text-muted));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.section-field { padding-left: var(--space-3); }

.generation-progress {
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 260px;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-5);
}

.generation-progress h2 { margin-bottom: var(--space-2); }

.generation-progress p {
  max-width: 520px;
  color: hsl(var(--text-muted));
}

.spinner {
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border: 3px solid hsl(var(--neutral-200));
  border-top-color: hsl(var(--brand-orange));
  border-radius: var(--radius-pill);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.elapsed {
  margin-top: var(--space-5);
  color: hsl(var(--text-muted)) !important;
  font-size: var(--text-xs);
}

.job-leave-note {
  margin-top: var(--space-5);
  padding-left: var(--space-3);
  border-left: 3px solid hsl(var(--brand-orange-300));
  color: hsl(var(--text-body)) !important;
}

.job-taking-long {
  margin-top: var(--space-5);
  padding: var(--space-3);
  border: 1px solid hsl(var(--status-amber-border));
  border-radius: var(--radius);
  background: hsl(var(--status-amber-bg));
}

.job-taking-long p {
  margin-bottom: var(--space-2);
  color: hsl(var(--status-amber-fg));
  font-weight: var(--weight-semibold);
}

.generation-error {
  display: block;
  min-height: 0;
  padding: var(--space-5);
  border: 1px solid hsl(var(--status-red-border));
  border-radius: var(--radius);
  background: hsl(var(--status-red-bg));
}

.generation-error h2,
.generation-error p { color: hsl(var(--status-red-fg)); }
.generation-error .button { margin-top: var(--space-2); }

.review-loading {
  min-height: 220px;
  padding-top: var(--space-10);
  color: hsl(var(--text-muted));
  text-align: center;
}

#source-popover {
  width: min(92vw, 590px);
  max-height: min(82vh, 680px);
  padding: 0;
  overflow: auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  background: hsl(var(--surface-card));
  color: hsl(var(--text-body));
  box-shadow: var(--shadow-md);
}

#source-popover::backdrop { background: hsl(var(--neutral-950) / 0.52); }

.source-dialog { padding: var(--space-6); }
.source-dialog h2 { overflow-wrap: anywhere; }

#source-title,
.source-page { font-family: var(--font-mono); }

.source-page {
  margin-bottom: var(--space-4);
  color: hsl(var(--text-muted));
  font-size: var(--text-xs);
}

.source-dialog blockquote {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border-left: 4px solid hsl(var(--brand-orange));
  background: hsl(var(--neutral-100));
  color: hsl(var(--text-body));
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
}

.page-loading {
  display: grid;
  min-height: 60vh;
  flex: 1 0 auto;
  place-items: center;
  color: hsl(var(--text-muted));
}

.access-page .access-notice { margin: auto; }

.access-notice {
  width: min(100%, 620px);
  padding: var(--space-8);
}

.access-notice h1 { margin-bottom: var(--space-3); }

.access-notice > p:last-child {
  margin-bottom: 0;
  color: hsl(var(--text-muted));
}

.page-error {
  width: min(100%, 620px);
  margin: auto;
  padding: var(--space-8);
}

.page-error p { color: hsl(var(--text-muted)); }

/* Account access and organization management use the same tokens and card
   language as claims. Firebase itself is loaded only when an auth view mounts. */

.account-menu {
  position: relative;
  z-index: 20;
}

.account-menu-button {
  display: flex;
  min-width: 180px;
  max-width: 44vw;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: hsl(var(--text-body));
  cursor: pointer;
  text-align: right;
}

.account-menu-button:hover,
.account-menu-button[aria-expanded="true"] {
  border-color: hsl(var(--border));
  background: hsl(var(--neutral-100));
}

.account-identity {
  display: grid;
  min-width: 0;
}

.account-identity strong,
.account-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-identity strong {
  color: hsl(var(--text-heading));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.account-identity span {
  color: hsl(var(--text-muted));
  font-size: var(--text-2xs);
}

.account-identity .signed-in {
  max-width: none;
  font-family: var(--font-sans);
}

.account-caret {
  flex: 0 0 auto;
  color: hsl(var(--text-muted));
  font-size: var(--text-base);
}

.account-popover {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 210px;
  padding: var(--space-1);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  background: hsl(var(--surface-card));
  box-shadow: var(--shadow-md);
}

.account-action {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: hsl(var(--text-body));
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: left;
}

.account-action:hover {
  background: hsl(var(--neutral-100));
  text-decoration: none;
}

.legacy-banner {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid hsl(var(--status-amber-border));
  border-radius: var(--radius);
  background: hsl(var(--status-amber-bg));
  color: hsl(var(--status-amber-fg));
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.auth-page .auth-card {
  margin: auto;
}

.auth-card {
  width: min(100%, 460px);
  padding: var(--space-8);
}

.accept-card { width: min(100%, 640px); }
.auth-heading { margin-bottom: var(--space-5); }
.auth-heading h1 { margin-bottom: 0; }
.auth-heading .message { margin: var(--space-4) 0 0; }

.message.amber {
  border-color: hsl(var(--status-amber-border));
  background: hsl(var(--status-amber-bg));
  color: hsl(var(--status-amber-fg));
}

.auth-form {
  display: grid;
  gap: var(--space-4);
}

.form-field {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
}

.field-caption {
  color: hsl(var(--text-heading));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.auth-form .button,
.auth-google { width: 100%; }

.auth-error {
  grid-column: auto;
  min-height: 0;
  margin: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: hsl(var(--text-muted));
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  flex: 1;
  background: hsl(var(--border));
  content: "";
}

.text-button {
  display: block;
  margin: var(--space-4) auto 0;
  padding: var(--space-1);
  border: 0;
  background: transparent;
  color: hsl(var(--brand-orange-700));
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.text-button:hover { text-decoration: underline; }

.auth-muted,
.password-policy,
.invite-summary {
  color: hsl(var(--text-muted));
  font-size: var(--text-sm);
}

.auth-muted {
  margin: var(--space-4) 0 0;
  text-align: center;
}

.auth-form .auth-muted,
.invitation-finish > .auth-muted { margin-top: 0; }

.page-loading.compact { min-height: 180px; }
.accept-preview > .button { margin-top: var(--space-2); }
.invite-summary { margin: var(--space-4) 0; }

.invitation-finish > h1 { margin-bottom: var(--space-1); }

.finish-option {
  display: grid;
  gap: var(--space-3);
}

.finish-option h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.finish-option .password-policy { margin-bottom: 0; }

.password-policy { margin-bottom: var(--space-3); }

.password-feedback {
  min-height: 18px;
  margin: 0;
  color: hsl(var(--text-muted));
  font-size: var(--text-xs);
}

.password-feedback.invalid { color: hsl(var(--status-red-fg)); }
.password-feedback.valid { color: hsl(var(--status-green-fg)); }

.admin-view,
.orgs-view {
  width: min(100%, 1100px);
  flex: 1 0 auto;
  margin: 0 auto;
}

.admin-heading {
  padding-top: var(--space-5);
}

.admin-heading .back-link {
  display: block;
  width: fit-content;
  margin: 0 0 var(--space-6);
}

.admin-section {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
}

.admin-section > h2,
.org-list > h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
}

.account-table { min-width: 0; }

.table-header,
.table-row {
  display: grid;
  align-items: center;
  gap: var(--space-3);
}

.members-table .table-header,
.member-row {
  grid-template-columns: minmax(180px, 1.5fr) 0.55fr 0.55fr 0.75fr minmax(190px, 1fr);
}

.invites-table .table-header,
.invite-row {
  grid-template-columns: minmax(180px, 1.2fr) 0.5fr minmax(120px, 0.85fr) 0.65fr 0.35fr minmax(210px, 1.2fr);
}

.table-header {
  padding: 0 var(--space-2) var(--space-2);
  color: hsl(var(--text-muted));
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.table-row {
  min-height: 58px;
  padding: var(--space-3) var(--space-2);
  border-top: 1px solid hsl(var(--border));
  font-size: var(--text-xs);
}

.person-cell,
.org-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.person-cell strong,
.person-cell span,
.table-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-cell strong,
.table-email { color: hsl(var(--text-heading)); }
.person-cell span,
.table-muted,
.table-date { color: hsl(var(--text-muted)); }

.role-badge,
.status-badge {
  display: inline-flex;
  width: fit-content;
  padding: 2px var(--space-2);
  border: 1px solid hsl(var(--status-gray-border));
  border-radius: var(--radius-pill);
  background: hsl(var(--status-gray-bg));
  color: hsl(var(--status-gray-fg));
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: capitalize;
}

.role-badge.admin,
.role-badge.staff {
  border-color: hsl(var(--status-blue-border));
  background: hsl(var(--status-blue-bg));
  color: hsl(var(--status-blue-fg));
}

.status-badge.active,
.status-badge.used {
  border-color: hsl(var(--status-green-border));
  background: hsl(var(--status-green-bg));
  color: hsl(var(--status-green-fg));
}

.status-badge.invited,
.status-badge.open,
.status-badge.expired {
  border-color: hsl(var(--status-amber-border));
  background: hsl(var(--status-amber-bg));
  color: hsl(var(--status-amber-fg));
}

.status-badge.removed,
.status-badge.revoked {
  border-color: hsl(var(--status-red-border));
  background: hsl(var(--status-red-bg));
  color: hsl(var(--status-red-fg));
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

.small-action {
  min-height: 30px;
  padding: 0 var(--space-2);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--surface-card));
  color: hsl(var(--text-body));
  cursor: pointer;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.small-action:hover {
  border-color: hsl(var(--brand-orange-ring));
  background: hsl(var(--neutral-100));
}

.small-action.danger { color: hsl(var(--status-red-fg)); }
.small-action:disabled { cursor: wait; opacity: 0.55; }

.invite-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(120px, 0.6fr) minmax(120px, 0.6fr) auto;
  align-items: end;
  gap: var(--space-3);
}

.invite-actions {
  display: flex;
  gap: var(--space-2);
}

.invite-form-error {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
}

.past-invitations { margin-top: var(--space-5); }

.past-invitations summary {
  color: hsl(var(--text-body));
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.past-invitations[open] summary { margin-bottom: var(--space-3); }
.table-empty { margin: 0; color: hsl(var(--text-muted)); }

.invite-link-fallback {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-1);
  padding-top: var(--space-2);
  color: hsl(var(--text-muted));
}

.invite-link-fallback input { font-family: var(--font-mono); font-size: var(--text-xs); }

.audit-item {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  border-top: 1px solid hsl(var(--border));
  font-size: var(--text-xs);
}

.audit-item:first-child { border-top: 0; }
.audit-item strong { color: hsl(var(--text-heading)); }
.audit-item p { margin: 2px 0 0; color: hsl(var(--text-muted)); }
.audit-item time { flex: 0 0 auto; color: hsl(var(--text-muted)); }

.org-form {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr auto;
  align-items: end;
  gap: var(--space-3);
}

.org-form-error {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
}

.org-list { margin-top: var(--space-6); }

.org-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-2);
  padding: var(--space-4) var(--space-5);
}

.org-copy strong { color: hsl(var(--text-heading)); font-size: var(--text-sm); }
.org-slug { color: hsl(var(--text-muted)); font-family: var(--font-mono); font-size: var(--text-xs); }
.org-counts { color: hsl(var(--text-muted)); font-size: var(--text-xs); }

.created-by {
  color: hsl(var(--text-muted));
  font-size: var(--text-xs);
}

@media (max-width: 900px) {
  .claim-columns { grid-template-columns: minmax(0, 1fr); }
  .review-panel { min-height: 400px; }

  .account-table .table-header { display: none; }

  .members-table .member-row,
  .invites-table .invite-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .member-row .row-actions,
  .invite-row .row-actions { grid-column: 1 / -1; justify-content: flex-start; }

  .invite-link-fallback { grid-column: 1 / -1; }

  .invite-form {
    grid-template-columns: 1fr 1fr;
  }

  .invite-actions { align-self: end; }
  .invite-form-error { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .page-shell { padding: 0 var(--space-4) var(--space-4); }

  .product-name,
  .brand-divider { display: none; }

  .signed-in {
    max-width: 42vw;
    font-size: var(--text-2xs);
  }

  .account-menu-button {
    min-width: 0;
    max-width: 48vw;
  }

  .account-popover { width: 190px; }

  .home-content { padding-top: var(--space-8); }
  .page-heading { margin-bottom: var(--space-5); }

  .new-claim {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .new-claim-controls { display: grid; }
  .new-claim-controls .button { width: 100%; }

  .form-error {
    grid-column: 1;
    margin-top: calc(var(--space-2) * -1);
  }

  .claims-section { margin-top: var(--space-8); }

  .claim-row {
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .claim-counts { grid-column: 1; }

  .row-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .claim-heading { padding-bottom: var(--space-4); }
  .claim-columns { gap: var(--space-4); }

  .documents-panel,
  .template-panel,
  .past-panel,
  .review-panel { padding: var(--space-4); }

  .dropzone {
    min-height: 128px;
    padding: var(--space-4);
  }

  .past-review { grid-template-columns: 1fr; }
  .past-status { justify-items: start; }
  .past-count { text-align: left; }
  .review-panel { min-height: 340px; }

  .review-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .review-actions .button { width: 100%; }

  .review-actions .compact {
    grid-column: 1 / -1;
    margin-left: 0;
  }

  .field-label {
    display: block;
    margin: 0 0 var(--space-1);
  }

  .field-sources {
    display: flex;
    margin: var(--space-2) 0 0;
  }

  .section-field { padding-left: var(--space-2); }

  .generation-progress {
    grid-template-columns: 1fr;
    min-height: 240px;
    padding: var(--space-8) var(--space-1);
  }

  .source-dialog { padding: var(--space-5); }

  .access-notice,
  .page-error { padding: var(--space-6) var(--space-5); }

  .auth-card { padding: var(--space-6) var(--space-5); }

  .admin-section { padding: var(--space-4); }

  .members-table .member-row,
  .invites-table .invite-row { grid-template-columns: minmax(0, 1fr); }

  .member-row .row-actions,
  .invite-row .row-actions { grid-column: 1; }

  .table-role,
  .table-status { display: inline-flex; }

  .invite-form,
  .org-form { grid-template-columns: 1fr; }

  .invite-actions { display: grid; }
  .invite-actions .button { width: 100%; }

  .invite-form-error,
  .org-form-error { grid-column: 1; }

  .audit-item { display: grid; gap: var(--space-1); }

  .org-row { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.account-popover-org {
  padding: var(--space-2) var(--space-3);
  font: var(--type-meta);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: hsl(var(--text-muted));
  border-bottom: 1px solid hsl(var(--border));
}