@import url("fonts.css");

/* Design tokens — see docs/ui/00-design-guidelines.md section 5.2 */
:root {
  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Brand */
  --color-brand-navy:        #1a3a5c;
  --color-brand-navy-text:   #cce0ff;
  --color-accent:            #2a7de1;
  --color-accent-hover:      #1a6fc4;

  /* Neutrals */
  --color-text-strong:       #1a3a5c;
  --color-text:              #222;
  --color-text-muted:        #444;
  --color-text-subtle:       #666;
  --color-text-faint:        #888;

  --color-surface-page:      #f8f8f8;
  --color-surface-card:      #fff;
  --color-surface-header:    #f0f4f8;
  --color-surface-row-hover: #f9fbff;
  --color-surface-code:      #f9f9f9;

  --color-border-subtle:     #e8e8e8;
  --color-border:            #e0e0e0;
  --color-border-input:      #ccc;
  --color-border-strong:     #bbb;

  /* Semantic */
  --color-success:           #28a745;
  --color-success-hover:     #218838;
  --color-success-bg:        #d4edda;
  --color-success-text:      #155724;
  --color-success-border:    #c3e6cb;
  --color-success-strong:    #22543d;
  --color-success-strong-bg: #9ae6b4;

  --color-warning:           #ed8936;
  --color-warning-bg:        #feebc8;
  --color-warning-text:      #c05621;

  --color-danger:            #dc3545;
  --color-danger-hover:      #c82333;
  --color-danger-bg:         #f8d7da;
  --color-danger-text:       #721c24;
  --color-danger-border:     #f5c6cb;
  --color-danger-strong:     #b30000;
  --color-danger-soft-bg:    #fed7d7;
  --color-danger-soft-text:  #9b2c2c;

  --color-info-bg:           #d1ecf1;
  --color-info-text:         #0c5460;
  --color-info-border:       #bee5eb;
  --color-info-soft-bg:      #bee3f8;
  --color-info-soft-text:    #2b6cb0;

  --color-neutral-soft-bg:   #e2e8f0;
  --color-neutral-soft-text: #4a5568;
  --color-accent-soft-bg:    #d6bcfa;
  --color-accent-soft-text:  #553c9a;

  --color-disclaimer-bg:     #fffbea;
  --color-disclaimer-text:   #8b6914;
  --color-disclaimer-border: #fef08a;

  /* Accountant instruction note — a human note, kept distinct from system flash alerts */
  --color-note-bg:           #fdf6ec;
  --color-note-border:       #ecdcbf;
  --color-note-accent:       #b9791f;
  --color-note-text:         #5a4516;

  /* Shadow */
  --shadow-table: 0 1px 3px rgba(0, 0, 0, 0.07);
}

/* Reset and base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-body); font-size: 15px; color: var(--color-text);
  /* Faint navy wash at the top of every page: gives the chrome a little depth
     without competing with the white cards. Falls back to the flat page color. */
  background-color: var(--color-surface-page);
  background-image: linear-gradient(180deg, #edf2f8 0%, var(--color-surface-page) 100%);
  background-repeat: no-repeat;
  background-size: 100% 340px;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--color-text-strong); }
a { color: var(--color-accent-hover); }
a:hover { text-decoration: underline; }

/* Layout */
/* Authenticated app navbar — mirrors the public landing header (landing.css
   .lp-header) so the chrome reads the same across the marketing site and the
   app, for accountant, operator, and member roles alike: sticky translucent
   bar, monogram-tile + serif wordmark brand, underline-on-hover links, a
   segmented language switch, and outline pill actions. */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text); padding: 0 1.5rem;
  display: flex; align-items: center; height: 60px; gap: 1.5rem;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
}
/* Brand: monogram tile + serif wordmark (matches .lp-brand). */
.nav-brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--color-brand-navy); text-decoration: none; white-space: nowrap;
}
.nav-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--color-brand-navy);
  box-shadow: 0 4px 10px -4px rgba(26, 58, 92, 0.6);
}
.nav-brand-mark svg {
  width: 17px; height: 17px; stroke: #fff; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.nav-brand-name {
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 600;
  letter-spacing: -0.01em;
}
.nav-links { display: flex; gap: 1.5rem; flex-shrink: 0; margin-left: 0.5rem; }
.nav-links a {
  position: relative; color: var(--color-text-muted); text-decoration: none;
  font-size: 0.9rem; font-weight: 500; padding: 0.3rem 0;
  transition: color 0.16s ease; white-space: nowrap;
}
/* Underline that grows from the left on hover and for the active page. */
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover { color: var(--color-brand-navy); text-decoration: none; }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--color-brand-navy); font-weight: 600; }
.nav-upload { background: var(--color-accent); padding: 6px 12px; border-radius: 999px; color: #fff !important; }
.nav-upload::after { display: none; }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }
.nav-identity {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-brand-navy); text-decoration: none;
  font-size: 0.85rem;
}
.nav-identity:hover { background: var(--color-surface-page); color: var(--color-brand-navy); text-decoration: none; }
.nav-identity-name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nav-identity-role { font-size: 0.75rem; color: var(--color-text-subtle); }
.nav-identity-role::before { content: "·"; padding-right: 0.3rem; opacity: 0.5; }

/* Login / Logout as refined outline pills (matches .lp-login). */
.nav-login,
.nav-logout-btn {
  padding: 7px 16px; border: 1px solid var(--color-border-strong); border-radius: 999px;
  background: transparent; color: var(--color-brand-navy);
  font-weight: 600; font-size: 0.88rem; cursor: pointer; text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.nav-login:hover,
.nav-logout-btn:hover {
  background: var(--color-brand-navy); border-color: var(--color-brand-navy);
  color: #fff; text-decoration: none;
}
.nav-logout-form { margin: 0; }

/* Segmented language switch: SK · EN · UA (matches .lp-langseg). */
.nav-langseg {
  display: inline-flex; margin: 0; padding: 2px; gap: 2px;
  background: var(--color-surface-page);
  border: 1px solid var(--color-border); border-radius: 999px;
}
.nav-langseg-btn {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 5px 11px; border-radius: 999px; font: inherit;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--color-text-subtle);
  transition: background 0.16s ease, color 0.16s ease;
}
.nav-langseg-btn:hover { color: var(--color-brand-navy); }
.nav-langseg-btn.is-active {
  background: var(--color-brand-navy); color: #fff;
  box-shadow: 0 3px 8px -3px rgba(26, 58, 92, 0.5);
}
.nav-langseg-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (max-width: 1180px) {
  .navbar { gap: 1rem; padding: 0 1rem; }
  .nav-links { gap: 0.9rem; }
  .nav-links a { font-size: 0.85rem; }
  .nav-brand-name { font-size: 1.15rem; }
  .nav-identity-name { max-width: 14ch; }
}

/* Admin index — grid of link cards. Reuses card-style spacing from sections. */
.admin-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; margin-top: 0.6rem;
}
.admin-card {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1rem 1.1rem;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 4px; box-shadow: var(--shadow-table);
  color: var(--color-text); text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.admin-card:hover { border-color: var(--color-accent); background: var(--color-surface-row-hover); text-decoration: none; }
.admin-card-title { font-weight: 600; color: var(--color-text-strong); font-size: 1rem; }
.admin-card-desc { color: var(--color-text-subtle); font-size: 0.88rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.container { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; }
.footer { text-align: center; color: var(--color-text-faint); font-size: 0.8rem; padding: 1rem; border-top: 1px solid var(--color-border); margin-top: 2rem; }

/* Page header */
.page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.2rem; gap: 1rem; }
.page-header h1 { margin: 0; }
.page-header h1 .filename-clip {
  display: inline-block; max-width: 60ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom;
}
.page-header-status { display: inline-flex; align-items: baseline; gap: 0.5rem; flex-shrink: 0; }
.page-header-status .confidence { font-size: 0.82rem; color: var(--color-text-subtle); }

/* Breadcrumbs */
.breadcrumbs { font-size: 0.85rem; color: var(--color-text-subtle); margin-bottom: 0.8rem; }
.breadcrumbs a { color: var(--color-accent-hover); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* Flash messages */
.flash { padding: 0.7rem 1rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.9rem; }
.flash-success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.flash-error   { background: var(--color-danger-bg); color: var(--color-danger-text); border: 1px solid var(--color-danger-border); }
.flash-info    { background: var(--color-info-bg); color: var(--color-info-text); border: 1px solid var(--color-info-border); }

/* Accountant instruction note — persistent human guidance, distinct from transient flash alerts */
.instruction-note {
  margin-bottom: 1rem;
  padding: 0.7rem 1rem 0.75rem 1.05rem;
  background: var(--color-note-bg);
  border: 1px solid var(--color-note-border);
  border-left: 3px solid var(--color-note-accent);
  border-radius: 4px;
}
.instruction-note__label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-bottom: 0.25rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-note-accent);
}
.instruction-note__label svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; }
.instruction-note__body { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--color-note-text); }

/* Tables */
table { width: 100%; border-collapse: collapse; background: var(--color-surface-card); box-shadow: var(--shadow-table); }
th, td { padding: 0.55rem 0.8rem; text-align: left; border-bottom: 1px solid var(--color-border-subtle); font-size: 0.88rem; }
th { background: var(--color-surface-header); font-weight: 600; }
tr:hover td { background: var(--color-surface-row-hover); }
.info-table { max-width: 500px; }
.info-table th { width: 160px; }
.record-count { color: var(--color-text-subtle); font-size: 0.82rem; margin-top: 0.4rem; }

/* Phones: wide list tables keep their natural column widths and scroll
   sideways instead of overflowing the page (receipt photos get uploaded from
   the site, so member pages must stay usable on a phone). */
@media (max-width: 720px) {
  .container table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Buttons */
.btn {
  display: inline-block; padding: 6px 14px; border-radius: 4px; border: 1px solid var(--color-border-strong);
  background: var(--color-surface-card); color: var(--color-text); font-size: 0.88rem; cursor: pointer; text-decoration: none;
  line-height: 1.4;
}
.btn:hover { background: var(--color-surface-page); text-decoration: none; }
.btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent-hover); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-confirm { background: var(--color-success); color: #fff; border-color: var(--color-success-hover); }
.btn-confirm:hover { background: var(--color-success-hover); }
.btn-danger  { background: var(--color-danger); color: #fff; border-color: var(--color-danger-hover); }
.btn-danger:hover  { background: var(--color-danger-hover); }
.btn-sm { padding: 3px 9px; font-size: 0.82rem; }

/* Double-submit guard (forms.js): a submitted form's buttons go inert until
   the response navigation happens. */
form[aria-busy="true"] button[type="submit"],
form[aria-busy="true"] input[type="submit"] {
  opacity: 0.65;
  cursor: progress;
}

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 3px; color: var(--color-text-muted); }
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password],
.form-group input[type=number],
.form-group input[type=date],
.form-group select,
.form-group textarea {
  width: 100%; padding: 6px 8px; border: 1px solid var(--color-border-input); border-radius: 4px;
  font-size: 0.9rem; background: var(--color-surface-card);
}
.form-group textarea { resize: vertical; min-height: 4.5rem; }
.form-checkbox { display: flex; align-items: center; gap: 0.5rem; }
.form-checkbox label { margin: 0; font-weight: normal; }
.checkbox-list { display: flex; flex-direction: column; gap: 0.4rem; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 0; }
.form-group-bottom { display: flex; align-items: flex-end; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1.2rem; }
.field-error { color: var(--color-danger); font-size: 0.82rem; margin-top: 2px; }

/* Narrow field helpers */
.field-currency { width: 60px; }
.field-sm       { width: 120px; }

/* Inline forms (row action delete confirms, unlink, etc.) */
.inline-form { display: inline; margin: 0; }

/* Inline row form: an input/select that fills available space next to a submit button. */
.row-inline-form { display: flex; gap: 0.5rem; align-items: stretch; margin-top: 0.7rem; }
.row-inline-form input[type=text],
.row-inline-form input[type=email],
.row-inline-form select {
  flex: 1; min-width: 160px;
  padding: 6px 8px; border: 1px solid var(--color-border-input); border-radius: 4px;
  font-size: 0.9rem; background: var(--color-surface-card);
}

/* Filter form */
.filter-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; align-items: center; }
.filter-form select, .filter-form input { padding: 5px 7px; border: 1px solid var(--color-border-input); border-radius: 4px; font-size: 0.85rem; background: var(--color-surface-card); }

/* Status badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.78rem; font-weight: 600; }
.badge-uploaded             { background: var(--color-neutral-soft-bg);  color: var(--color-neutral-soft-text); }
.badge-processed            { background: var(--color-info-soft-bg);     color: var(--color-info-soft-text); }
.badge-needs_review         { background: var(--color-warning-bg);       color: var(--color-warning-text); }
.badge-confirmed            { background: var(--color-success-bg);       color: var(--color-success-strong); }
.badge-exported             { background: var(--color-accent-soft-bg);   color: var(--color-accent-soft-text); }
.badge-rejected             { background: var(--color-danger-soft-bg);   color: var(--color-danger-soft-text); }
.badge-generated            { background: var(--color-success-bg);       color: var(--color-success-strong); }
.badge-failed               { background: var(--color-danger-soft-bg);   color: var(--color-danger-soft-text); }
.badge-overdue              { background: var(--color-danger-soft-bg);   color: var(--color-danger-strong); }
.badge-waived               { background: var(--color-neutral-soft-bg);  color: var(--color-neutral-soft-text); }
.badge-on                   { background: var(--color-success-bg);       color: var(--color-success-strong); }
.badge-off                  { background: var(--color-neutral-soft-bg);  color: var(--color-neutral-soft-text); }
.badge-pending              { background: var(--color-warning-bg);       color: var(--color-warning-text); }
.badge-sent_for_review      { background: var(--color-info-soft-bg);     color: var(--color-info-soft-text); }
.badge-accepted             { background: var(--color-success-bg);       color: var(--color-success-strong); }

/* Document intake source badges */
.badge-source               { background: var(--color-neutral-soft-bg);  color: var(--color-neutral-soft-text); }
.badge-source-upload        { background: var(--color-neutral-soft-bg);  color: var(--color-neutral-soft-text); }
.badge-source-email         { background: var(--color-info-soft-bg);     color: var(--color-info-soft-text); }
.badge-source-whatsapp      { background: var(--color-success-bg);       color: var(--color-success-strong); }
.badge-source-manual        { background: var(--color-neutral-soft-bg);  color: var(--color-neutral-soft-text); }

.text-overdue { color: var(--color-danger-strong); }

/* Dashboard stats */
.stats-grid { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.stat-card { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 6px; padding: 1rem 1.5rem; min-width: 160px; }
.stat-card.stat-warn { border-left: 4px solid var(--color-warning); }
.stat-card.stat-ok   { border-left: 4px solid var(--color-success); }
.stat-label { font-size: 0.82rem; color: var(--color-text-subtle); margin-bottom: 4px; }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--color-brand-navy); }
.quick-links { display: flex; gap: 0.7rem; margin-bottom: 2rem; flex-wrap: wrap; }

/* Document detail layout */
.detail-layout { display: flex; gap: 1.5rem; align-items: stretch; margin-bottom: 1rem; }
.detail-left  { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.detail-right { width: 380px; flex-shrink: 0; }
.detail-left .file-preview-actions { margin-top: auto; }
@media (min-width: 1024px) {
  .detail-left { position: sticky; top: 1rem; }
}
@media (max-width: 900px) {
  .detail-layout { flex-direction: column; }
  .detail-right { width: 100%; }
  .detail-left { position: static; }
}
.section { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
.section h2 { font-size: 0.95rem; margin-bottom: 0.7rem; color: var(--color-brand-navy); }
details.section > summary { cursor: pointer; list-style: none; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary h2 { display: inline; margin: 0; }
details.section > summary::after { content: " ▸"; color: var(--color-text-subtle); font-size: 0.85rem; }
details.section[open] > summary::after { content: " ▾"; }
/* Secondary accounting-period override on the document review form: collapsed
   by default because the period normally follows the document date. */
details.accounting-override { margin: 0.6rem 0 1rem; padding: 0.6rem 0.7rem; border: 1px dashed var(--color-border); border-radius: 6px; }
details.accounting-override > summary { cursor: pointer; font-size: 0.85rem; color: var(--color-text-subtle); }
details.accounting-override[open] > summary { margin-bottom: 0.5rem; }
.checkbox-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.extracted-text { white-space: pre-wrap; font-size: 0.8rem; font-family: monospace; max-height: 400px; overflow-y: auto; background: var(--color-surface-code); padding: 0.7rem; border: 1px solid var(--color-border-subtle); border-radius: 4px; }
.file-preview-pdf { width: 100%; height: calc(100vh - 6rem); min-height: 480px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface-page); display: block; }
.file-preview-image { width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; border: 1px solid var(--color-border); border-radius: 4px; display: block; }
.file-preview-actions { padding-top: 0.5rem; margin: 0; }
/* Height-capped example-document preview for the request detail pages, so the
   accountant-provided reference does not dominate the page like the full-height
   document viewer does. */
.example-preview-pdf { width: 100%; height: 440px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface-page); display: block; }
.example-preview-image { width: 100%; max-height: 440px; object-fit: contain; border: 1px solid var(--color-border); border-radius: 4px; display: block; }
.action-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.meta-info { font-size: 0.82rem; color: var(--color-text-subtle); margin-top: 0.8rem; margin-bottom: 0.8rem; }
.meta-info p { margin-bottom: 2px; }
.disclaimer { font-size: 0.82rem; color: var(--color-disclaimer-text); background: var(--color-disclaimer-bg); padding: 6px 10px; border-radius: 4px; margin-bottom: 1rem; border: 1px solid var(--color-disclaimer-border); }
.suggested-link { background: var(--color-info-bg); border: 1px solid var(--color-info-border); border-radius: 4px; padding: 0.6rem 0.8rem; margin-top: 0.5rem; font-size: 0.88rem; }

/* Intake channels (dashboard, upload, settings) */
.intake-channel-row { display: flex; gap: 0.5rem; align-items: center; }
.intake-channel-row .readonly-field { flex: 1; padding: 6px 8px; border: 1px solid var(--color-border-input);
                                       border-radius: 4px; font-size: 0.9rem; background: var(--color-surface-card); }
.intake-channel-status { font-size: 0.82rem; margin-top: 4px; }
.intake-channel-status-connected    { color: var(--color-success-strong); }
.intake-channel-status-pending      { color: var(--color-warning-text); }
.intake-channel-status-unconnected  { color: var(--color-text-subtle); }
.intake-channel-status-unconfigured { color: var(--color-text-subtle); }

/* Linked-items list (linked documents on a request; linked requirements on a document) */
.linked-list { display: flex; flex-direction: column; gap: 0.4rem; }
.linked-row { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
              padding: 0.55rem 0.75rem; border: 1px solid var(--color-border); border-radius: 6px;
              background: var(--color-surface-card); }
.linked-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.linked-row-title { font-weight: 600; color: var(--color-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linked-row-title:hover { text-decoration: underline; }
.linked-row-meta { font-size: 0.82rem; color: var(--color-text-subtle); }
.linked-row-side { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.linked-row-actions { display: flex; gap: 0.3rem; }

/* Document detail: read-only state banner + native disabled fieldset */
.detail-right fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.detail-right fieldset[disabled] { opacity: 0.85; }
.readonly-notice { font-size: 0.85rem; color: var(--color-text-subtle); margin-bottom: 0.8rem; }

/* Export form */
.export-form .form-row { align-items: flex-end; }
.download-section { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }
.download-section h2 { margin: 0; }

/* Login page */
.login-container {
  max-width: 380px; margin: 4rem auto;
  background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 6px; padding: 2rem;
}
.login-container h1 { margin-bottom: 1.5rem; }
.login-resend-form { margin-bottom: 1.2rem; }
.auth-switch-hint { margin-top: 1.2rem; font-size: 0.9rem; color: var(--color-text-muted); }

/* Registration page — CSS-only role toggle (hidden radios + sibling
   selectors), same mechanism as the landing audience switch. */
.register-container {
  max-width: 440px; margin: 3rem auto;
  background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 6px; padding: 2rem;
}
.register-container h1 { margin-bottom: 1.2rem; }
.reg-role-radio { position: absolute; left: -9999px; }
.reg-role-switch {
  display: flex; gap: 4px; padding: 3px; margin-bottom: 1.2rem;
  background: var(--color-surface-page); border: 1px solid var(--color-border); border-radius: 999px;
}
.reg-role-tab {
  flex: 1; text-align: center; padding: 8px 12px; border-radius: 999px;
  cursor: pointer; font-size: 0.9rem; font-weight: 500; color: var(--color-text-muted);
}
.reg-role-tab:hover { color: var(--color-text); }
#reg-role-accountant:checked ~ .reg-role-switch .reg-role-tab[for="reg-role-accountant"],
#reg-role-business:checked ~ .reg-role-switch .reg-role-tab[for="reg-role-business"] {
  background: var(--color-brand-navy); color: #fff;
}
#reg-role-accountant:checked ~ .reg-form--business { display: none; }
#reg-role-business:checked ~ .reg-form--accountant { display: none; }
.reg-role-hint { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1rem; }
/* Honeypot wrapper — parked off-screen rather than display:none (which naive
   bots detect); aria-hidden + tabindex=-1 in the markup keep it out of the
   a11y and tab order. */
.reg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* "Connect your accountant" nudge on the member home + the connected list in
   Settings. */
.connect-accountant-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.8rem 1rem; margin-bottom: 1rem;
  background: var(--color-info-bg); color: var(--color-info-text);
  border: 1px solid var(--color-info-border); border-radius: 6px;
}
.connected-accountants { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.connected-accountant-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--color-border);
}
.connected-accountant-row .hint { margin-left: 0.5rem; }

/* Accountant dashboard — period selector. One joined pill (‹ month 📅 ›),
   echoing the navbar language segment so the app chrome reads consistently. */
.period-nav {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-table);
}
.period-nav-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: none; border-radius: 999px;
  background: transparent; color: var(--color-text-muted);
  text-decoration: none; font-size: 1.1rem; line-height: 1;
  transition: background 0.14s ease, color 0.14s ease;
}
.period-nav-step:hover { background: var(--color-surface-header); color: var(--color-text-strong); text-decoration: none; }
.period-nav-readout { font-weight: 600; color: var(--color-text-strong); min-width: 10ch; text-align: center; font-size: 0.92rem; padding: 0 0.3rem; }
.period-nav-jump { display: inline-flex; align-items: center; }
/* Inside the pill the compact jump trigger loses its own box so it reads as
   one more segment (specificity beats the bare .dp-period--compact rule). */
.period-nav .dp-period--compact .dp-trigger.dp-trigger-iconbtn {
  width: 30px; height: 30px; border: none; border-radius: 999px;
}
.period-nav .dp-period--compact .dp-trigger.dp-trigger-iconbtn:hover { background: var(--color-surface-header); }

/* ============================================================
   Date / period pickers (datepicker.js)
   ============================================================ */
.dp-date, .dp-period, .dp-range { position: relative; display: inline-block; }
.form-group > .dp-date,
.form-group > .dp-period,
.form-group > .dp-range { display: block; width: 100%; }

/* Trigger — looks like a normal input until you click it. */
.dp-trigger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  width: 100%; min-width: 11rem;
  padding: 6px 10px;
  border: 1px solid var(--color-border-input); border-radius: 6px;
  background: var(--color-surface-card); color: var(--color-text);
  font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.dp-trigger:hover { border-color: var(--color-border-strong); }
.dp-trigger:focus-visible,
.dp-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(42, 125, 225, 0.18);
}
.dp-trigger-icon { font-size: 0.95rem; line-height: 1; opacity: 0.75; }
.dp-trigger-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-trigger-label.dp-placeholder { color: var(--color-text-faint); }

/* Filter variant — compact, sits inline in a filter bar. */
.dp-period--filter .dp-trigger { min-width: 9rem; width: auto; padding: 6px 9px; font-size: 0.85rem; }
.dp-range--filter .dp-trigger { min-width: 12rem; width: auto; padding: 6px 9px; font-size: 0.85rem; }

/* Compact icon-only variant — the dashboard period jump. */
.dp-period--compact .dp-trigger.dp-trigger-iconbtn {
  min-width: 0; width: 28px; height: 28px; padding: 0;
  justify-content: center;
  border-color: var(--color-border-strong); color: var(--color-text-muted);
}
.dp-period--compact .dp-trigger-icon { opacity: 1; }

/* Popover */
.dp-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: 17rem; padding: 0.7rem;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border); border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(26, 58, 92, 0.28), 0 2px 6px rgba(26, 58, 92, 0.08);
  animation: dp-pop-in 0.13s ease-out;
}
.dp-period--compact .dp-pop,
.dp-period--filter .dp-pop { width: 15rem; }
.dp-pop-period { width: 15rem; }
@keyframes dp-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dp-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.dp-pop-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; color: var(--color-text-strong);
}
.dp-nav {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid transparent; background: transparent;
  color: var(--color-text-muted); font-size: 1.2rem; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.dp-nav:hover { background: var(--color-surface-page); color: var(--color-text-strong); }

.dp-grid { display: grid; gap: 2px; }
.dp-grid-weekdays, .dp-grid-days { grid-template-columns: repeat(7, 1fr); }
.dp-grid-months { grid-template-columns: repeat(3, 1fr); gap: 5px; }

.dp-weekday {
  text-align: center; font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-text-faint); padding: 3px 0 5px;
}
.dp-day, .dp-month {
  border: 1px solid transparent; background: transparent;
  color: var(--color-text); font: inherit; cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s ease, color 0.1s ease;
}
.dp-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
}
.dp-month { padding: 0.55rem 0; font-size: 0.85rem; text-align: center; }
.dp-day:hover, .dp-month:hover { background: var(--color-surface-header); }
.dp-day-empty { cursor: default; }
.dp-day-empty:hover { background: transparent; }
.dp-today { font-weight: 700; color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-info-soft-bg); }
.dp-selected, .dp-selected:hover {
  background: var(--color-accent); color: #fff; font-weight: 600;
  box-shadow: none;
}
/* Months between the two ends of a selected range. */
.dp-in-range, .dp-in-range:hover {
  background: var(--color-info-soft-bg); color: var(--color-info-soft-text);
  border-radius: 4px;
}

.dp-pop-foot {
  display: flex; justify-content: space-between; gap: 0.5rem;
  margin-top: 0.55rem; padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-subtle);
}
.dp-link {
  border: none; background: transparent; cursor: pointer;
  color: var(--color-accent); font: inherit; font-size: 0.82rem; padding: 2px 4px;
  border-radius: 4px;
}
.dp-link:hover { color: var(--color-accent-hover); text-decoration: underline; }
.dp-hint { font-size: 0.72rem; color: var(--color-text-faint); align-self: center; max-width: 11rem; line-height: 1.2; }

/* Validation */
.dp-invalid .dp-trigger { border-color: var(--color-danger); }
.dp-error { color: var(--color-danger); font-size: 0.82rem; margin: 2px 0 0; }

/* Accountant dashboard — month-at-a-glance ledger bar. The five counters form
   one joined surface (1px grid gaps over the strip background read as hairline
   dividers) and double as the only filter for the card grid below: click a
   number to filter, click again or press "Show all" to clear. */
.summary-strip {
  display: grid;
  /* Explicit tracks (the strip renders exactly five counters): auto-fit would
     leave empty cells at some widths, showing as holes in the divider backdrop. */
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin: 0.4rem 0 1.3rem;
  background: var(--color-border-subtle);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(26, 58, 92, 0.05), 0 10px 24px -18px rgba(26, 58, 92, 0.3);
  overflow: hidden;
}
.summary-chip {
  /* column-reverse puts the small label above its big count while keeping
     "<count> <label>" reading order for screen readers. */
  display: flex; flex-direction: column-reverse; gap: 0.45rem;
  padding: 0.85rem 1.1rem 0.8rem;
  background: var(--color-surface-card);
  border: none; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  transition: background 140ms ease, box-shadow 140ms ease;
}
.summary-chip:hover { background: var(--color-surface-row-hover); }
.summary-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -3px; border-radius: 8px; }
.summary-chip-count {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 600;
  color: var(--color-brand-navy); line-height: 1; font-variant-numeric: tabular-nums;
}
.summary-chip-label {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-subtle);
}
.summary-chip-label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--chip-tone, var(--color-border-strong));
}
/* Status colour rides on the label dot and the count, so the number itself
   reads as urgent/neutral at a glance. Zero counts stay quiet. */
.summary-chip--sent_for_review { --chip-tone: var(--color-info-soft-text); --chip-tone-text: var(--color-info-soft-text); }
.summary-chip--overdue         { --chip-tone: var(--color-danger-strong);  --chip-tone-text: var(--color-danger-strong); }
.summary-chip--due_soon        { --chip-tone: var(--color-warning);        --chip-tone-text: var(--color-warning-text); }
.summary-chip--missing         { --chip-tone: var(--color-text-faint); }
.summary-chip--complete        { --chip-tone: var(--color-success);        --chip-tone-text: var(--color-success-strong); }
.summary-chip:not(.is-zero) .summary-chip-count { color: var(--chip-tone-text, var(--color-brand-navy)); }
.summary-chip.is-zero .summary-chip-count { color: var(--color-text-faint); }
.summary-chip.is-zero .summary-chip-label { color: var(--color-text-faint); }
.summary-chip.is-zero .summary-chip-label::before { background: var(--color-border); }
.summary-chip.is-active {
  background: var(--color-surface-row-hover);
  background: color-mix(in srgb, var(--chip-tone, var(--color-accent)) 9%, var(--color-surface-card));
  box-shadow: inset 0 -3px 0 0 var(--chip-tone, var(--color-accent));
}

/* Accountant dashboard — per-row status chip stack */
.status-chips { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.status-chip {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  padding: 1px 8px; border-radius: 10px;
  font-size: 0.78rem; font-weight: 500;
  background: var(--color-neutral-soft-bg); color: var(--color-neutral-soft-text);
}
.status-chip strong { font-weight: 700; }
.status-chip--sent_for_review { background: var(--color-info-soft-bg); color: var(--color-info-soft-text); }
.status-chip--overdue         { background: var(--color-danger-soft-bg); color: var(--color-danger-strong); }
.status-chip--due_soon        { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-chip--missing         { background: var(--color-neutral-soft-bg); color: var(--color-neutral-soft-text); }
.status-chip--complete        { background: var(--color-success-bg); color: var(--color-success-strong); }

/* Accountant dashboard — needs-attention section */
.attention-section { margin-bottom: 1.4rem; }
.attention-section h2 { margin: 0 0 0.5rem; }
.attention-list { display: flex; flex-direction: column; gap: 0.3rem; }
.attention-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-danger-strong);
  border-radius: 4px;
}
.attention-row[data-urgency="medium"] { border-left-color: var(--color-warning); }
.attention-row[data-urgency="low"] { border-left-color: var(--color-info-soft-text); }
.attention-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.attention-row-name { font-weight: 600; color: var(--color-text-strong); }
.attention-row-meta { font-size: 0.8rem; color: var(--color-text-subtle); }
.attention-row-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.attention-overflow {
  display: block; padding: 0.4rem 0.6rem; font-size: 0.85rem; color: var(--color-text-subtle);
  text-decoration: none;
}
.attention-overflow:hover { color: var(--color-accent); }

/* Accountant dashboard — kebab menu (details/summary) */
.kebab { position: relative; display: inline-block; }
.kebab > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--color-border-strong); border-radius: 4px;
  background: var(--color-surface-card); color: var(--color-text-muted);
  cursor: pointer; list-style: none; user-select: none;
  font-size: 1rem; line-height: 1;
}
.kebab > summary::-webkit-details-marker { display: none; }
.kebab > summary:hover { background: var(--color-surface-page); }
.kebab[open] > summary { background: var(--color-surface-page); border-color: var(--color-accent); }
.kebab-panel {
  position: absolute; right: 0; top: calc(100% + 2px); z-index: 20;
  min-width: 180px;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 4px 0;
}
.kebab-item {
  display: block; padding: 6px 12px; font-size: 0.85rem;
  color: var(--color-text); text-decoration: none;
}
.kebab-item:hover { background: var(--color-surface-row-hover); text-decoration: none; }

/* Clear-filter pill — sits between the summary bar and the card grid, only
   shown (via .is-hidden toggle) while a chip filter is active, giving an
   explicit, discoverable way back to "show all". */
.dashboard-clear {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: -0.2rem 0 1rem;
  height: 32px; padding: 0 0.9rem;
  border: 1px solid var(--color-accent); border-radius: 999px;
  background: var(--color-surface-card); color: var(--color-accent-hover);
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: background 120ms ease;
}
.dashboard-clear:hover { background: var(--color-surface-row-hover); }
.dashboard-clear.is-hidden { display: none; }
.dashboard-clear-x { font-size: 1rem; line-height: 1; }

@media (max-width: 720px) {
  .summary-strip { grid-template-columns: repeat(2, 1fr); }
  /* Odd counter out spans the full last row so no empty cell shows through. */
  .summary-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .summary-chip { padding: 0.7rem 0.85rem 0.65rem; }
  .summary-chip-count { font-size: 1.55rem; }
}

/* Back link (above page header on detail pages) */
.back-link {
  display: inline-block; margin-bottom: 0.6rem;
  font-size: 0.85rem; color: var(--color-text-subtle); text-decoration: none;
}
.back-link:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* Requirements overview — period → org tree */
.req-tree { display: flex; flex-direction: column; gap: 0.5rem; }
.req-tree-period, .req-tree-org {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 4px;
}
.req-tree-period > summary, .req-tree-org > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 0.55rem 0.8rem;
  display: flex; align-items: baseline; gap: 0.6rem;
}
.req-tree-period > summary::-webkit-details-marker,
.req-tree-org > summary::-webkit-details-marker { display: none; }
.req-tree-period > summary::before, .req-tree-org > summary::before {
  content: "▸"; color: var(--color-text-faint); font-size: 0.75rem; width: 0.9rem; flex-shrink: 0;
  transition: transform 120ms ease;
}
.req-tree-period[open] > summary::before, .req-tree-org[open] > summary::before { transform: rotate(90deg); }
.req-tree-period > summary:hover, .req-tree-org > summary:hover { background: var(--color-surface-row-hover); }
.req-tree-period > summary { background: var(--color-surface-header); border-radius: 4px; }
.req-tree-period[open] > summary { border-bottom: 1px solid var(--color-border-subtle); border-radius: 4px 4px 0 0; }
.req-tree-period-label { font-weight: 700; color: var(--color-brand-navy); font-size: 0.95rem; }
.req-tree-org-name { font-weight: 600; color: var(--color-text-strong); }
.req-tree-meta { font-size: 0.82rem; color: var(--color-text-subtle); margin-left: auto; }
.req-tree-period-link { color: var(--color-accent-hover); text-decoration: none; margin-left: 0.4rem; }
.req-tree-period-link:hover { text-decoration: underline; }
.req-tree-org { margin: 0.4rem 0.8rem; }
.req-tree-org:last-child { margin-bottom: 0.8rem; }
.req-tree-org > summary { background: var(--color-surface-card); border-bottom: 1px solid var(--color-border-subtle); }
.req-tree-org[open] > summary { border-bottom: 1px solid var(--color-border); }
.req-tree-org:not([open]) > summary { border-bottom: 0; }
.req-tree-table { box-shadow: none; }
.req-tree-table th { background: transparent; font-weight: 500; color: var(--color-text-subtle); font-size: 0.82rem; }

/* Misc */
.empty-state { color: var(--color-text-subtle); font-style: italic; padding: 1rem 0; }
.hint { font-size: 0.85rem; color: var(--color-text-subtle); margin-bottom: 0.5rem; }
h1 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--color-brand-navy); }
h2 { font-size: 1.1rem; margin: 1.2rem 0 0.7rem; color: var(--color-brand-navy); }
h3 { font-size: 0.88rem; font-weight: 700; margin: 0.6rem 0 0.4rem; color: var(--color-brand-navy); }
h3:first-child { margin-top: 0; }

/* Member home — header */
.home-header { align-items: flex-start; }
.home-header-title { display: flex; flex-direction: column; gap: 2px; }
.home-header-title h1 { margin: 0; }
.home-header-subtitle { margin: 0; font-size: 0.88rem; color: var(--color-text-subtle); }
.home-header-controls { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

/* Member home — section headers with right-aligned link */
.section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin: 1.4rem 0 0.5rem; }
.section-header h2 { margin: 0; }
.section-header-link { font-size: 0.85rem; color: var(--color-accent-hover); text-decoration: none; flex-shrink: 0; }
.section-header-link:hover { text-decoration: underline; }

/* Member home — attention block reuses .attention-row styling from accountant. */
.home-attention .attention-list { display: flex; flex-direction: column; gap: 0.4rem; }
.attention-row-reason { color: var(--color-text-muted); }
/* Calm "all caught up" panel shown in place of attention rows when nothing is
   pending. Mirrors the .attention-row geometry but uses a success left-border
   so the good state reads at a glance, consistent with the urgency borders. */
.home-allclear {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-success);
  border-radius: 4px;
  color: var(--color-text-muted); font-size: 0.9rem;
}

/* ============================================================
   Member home — "Action points" + "Recent activity". Action points
   is one prioritized, period-independent to-do list (docs to confirm
   + requirements to fulfil, overdue-first). Recent activity is the
   period-scoped record of handed-off work and owns the period
   selector. A wider masthead band sits above the inset body.
   ============================================================ */
/* Masthead: a deliberately wider header band — it spans the container while
   .home-body insets the content below, so the header reads as its own section.
   No controls live here; the period selector belongs to Recent activity. */
.home-masthead {
  margin-bottom: 1.3rem; padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.home-masthead h1 { margin: 0; }
/* Inset body so the masthead (and the section rules) read a touch wider. */
.home-body { padding: 0 1.5rem; }

/* Headline handoff progress, before the action points: the big figure makes the
   month's overall progress the first thing the eye lands on. */
.home-progress { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 1.7rem; }
.home-progress-figure { display: flex; align-items: baseline; flex-shrink: 0; }
.home-progress-count {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; line-height: 1;
  color: var(--color-brand-navy); font-variant-numeric: tabular-nums;
}
.home-progress-total {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin-left: 0.15rem;
  color: var(--color-text-faint); font-variant-numeric: tabular-nums;
}
.home-progress-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.home-progress-label { font-size: 0.9rem; color: var(--color-text-subtle); }
/* Track is a pale-green tint under the vivid-green fill so the bar clearly reads
   as "filled of total", not a floating line. Intentionally more contrast than
   the small neutral-track period-card bars — this is the page headline metric. */
.home-progress-bar {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--color-success-bg);
  box-shadow: inset 0 0 0 1px rgba(34, 84, 61, 0.08);
}
.home-progress-bar > span { display: block; height: 100%; background: var(--color-success); border-radius: 999px; }

.home-question { margin-bottom: 1.6rem; }
.question-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin: 0 0 0.8rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.question-title { margin: 0; font-size: 1.35rem; }
.question-meta { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* At-a-glance pills in the "What should I do?" header. */
.todo-pills { flex-wrap: wrap; }
.todo-pill {
  display: inline-flex; align-items: baseline;
  padding: 2px 10px; border-radius: 10px;
  font-size: 0.78rem; font-weight: 600;
  background: var(--color-neutral-soft-bg); color: var(--color-neutral-soft-text);
}
.todo-pill--overdue { background: var(--color-danger-soft-bg); color: var(--color-danger-strong); }
.todo-pill--redo    { background: var(--color-warning-bg);     color: var(--color-warning-text); }
.todo-pill--soon    { background: var(--color-warning-bg);     color: var(--color-warning-text); }
.todo-pill--confirm { background: var(--color-info-soft-bg);   color: var(--color-info-soft-text); }

/* Prioritized to-do list + calmer "already did" rows share one row shell,
   differing only by the left-border colour that encodes urgency / state. */
.todo-list, .done-list { display: flex; flex-direction: column; gap: 0.4rem; }
.todo-row, .done-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.6rem 0.85rem;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong); border-radius: 4px;
}
.todo-row[data-urgency="overdue"]  { border-left-color: var(--color-danger-strong); }
.todo-row[data-urgency="redo"]     { border-left-color: var(--color-warning); }
.todo-row[data-urgency="soon"]     { border-left-color: var(--color-warning); }
.todo-row[data-urgency="upcoming"] { border-left-color: var(--color-border-strong); }
.todo-row[data-urgency="confirm"]  { border-left-color: var(--color-info-soft-text); }
.todo-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.todo-row-name { font-weight: 600; color: var(--color-text-strong); text-decoration: none; }
.todo-row-name:hover { color: var(--color-accent-hover); text-decoration: underline; }
.todo-row-meta { font-size: 0.8rem; color: var(--color-text-subtle); }
.todo-row-reason { color: var(--color-text-muted); }
.todo-row-side { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.todo-more {
  align-self: flex-start; margin-top: 0.1rem;
  font-size: 0.85rem; color: var(--color-accent-hover); text-decoration: none;
}
.todo-more:hover { text-decoration: underline; }

/* Recent-activity sub-heads + state-coloured rows. */
.done-subhead {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-subtle); margin: 0.4rem 0 0.5rem;
}
.done-subhead-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin: 1.1rem 0 0.5rem; }
.done-subhead-row .done-subhead { margin: 0; }
.done-row[data-state="accepted"]        { border-left-color: var(--color-success); }
.done-row[data-state="sent_for_review"] { border-left-color: var(--color-info-soft-text); }

/* The period selector sits in the Recent activity header (it scopes only that
   section). The progress strip below it summarizes the month's handoff. */
.home-period { flex-shrink: 0; }

/* Member home — open requests list */
.open-request-list { display: flex; flex-direction: column; gap: 0.35rem; }
.open-request-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 4px;
}
.open-request-row.is-hidden { display: none; }
.open-request-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.open-request-title { font-weight: 600; color: var(--color-text-strong); text-decoration: none; }
.open-request-title:hover { color: var(--color-accent-hover); text-decoration: underline; }
.open-request-meta { font-size: 0.82rem; color: var(--color-text-subtle); }
.open-request-actions { flex-shrink: 0; }

/* Member home — divider before the intake-channels reference block. Separates
   the action-oriented sections ("what should I do next?") from the calm
   "how can I send documents?" reference that follows. */
.home-divider { border: 0; border-top: 1px solid var(--color-border); margin: 2.2rem 0 1.4rem; }

/* Member home — Send documents / intake-channels block */
.home-send-docs .hint { margin-top: 0; }
/* Intake-channels reference panel: recessed onto a faint tinted surface so the
   white channel rows lift off it and the whole block reads as reference, set
   apart from the action items above. */
.home-intake {
  background: var(--color-surface-header);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem 1.2rem 1.2rem;
}
.home-intake .section-header { margin-top: 0; }
.send-docs-list { display: flex; flex-direction: column; gap: 0.35rem; }
.send-docs-row {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center; gap: 0.8rem;
  padding: 0.55rem 0.8rem;
  background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 4px;
}
.send-docs-label { font-weight: 600; color: var(--color-text-strong); font-size: 0.9rem; }
.send-docs-body { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.send-docs-input {
  flex: 1; min-width: 18rem;
  padding: 4px 8px;
  background: var(--color-surface-code); border: 1px solid var(--color-border-input);
  border-radius: 3px; font-family: monospace; font-size: 0.85rem; color: var(--color-text);
}
.send-docs-status { font-size: 0.8rem; color: var(--color-text-subtle); }
.send-docs-status--connected { color: var(--color-success-strong); }
.send-docs-status--pending   { color: var(--color-warning-text); }
.send-docs-status--unconfigured { color: var(--color-text-faint); font-style: italic; }
.send-docs-note { font-size: 0.82rem; color: var(--color-text-subtle); }
.send-docs-actions { flex-shrink: 0; }

/* Member home — recent documents table */
.recent-docs-table { width: 100%; }
.recent-docs-table td, .recent-docs-table th { font-size: 0.88rem; }
.recent-docs-table .recent-docs-source,
.recent-docs-table .recent-docs-category,
.recent-docs-table .recent-docs-status { white-space: nowrap; }
.recent-docs-age { white-space: nowrap; color: var(--color-text-subtle); width: 6rem; }

@media (max-width: 720px) {
  .home-header { flex-direction: column; align-items: stretch; }
  .home-header-controls { justify-content: space-between; }
  .send-docs-row { grid-template-columns: 1fr; }
  .send-docs-label { font-size: 0.82rem; color: var(--color-text-subtle); }
}

/* Per-org per-period completeness card (period page header + dashboard grid).
   Flex column + margin-top:auto on the footer pins the action row to the
   bottom edge, so cards in one grid row share a baseline regardless of how
   much content (progress, missing chips, empty note) sits above it. */
.period-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(26, 58, 92, 0.05), 0 10px 24px -18px rgba(26, 58, 92, 0.3);
  padding: 1.25rem 1.35rem 1.15rem;
  margin-bottom: 1.2rem;
  transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease;
}
.period-card-grid .period-card:hover {
  box-shadow: 0 12px 28px -12px rgba(26, 58, 92, 0.2), 0 2px 6px rgba(26, 58, 92, 0.06);
  transform: translateY(-2px);
  border-color: #d3dce6;
}
/* A status-tinted bar across the top edge lets urgency read across the grid
   without reading any text. Keyed off the period-card--<status_key> modifier.
   Top corners are rounded to match the card so the card needs no overflow:hidden
   (which would otherwise clip the kebab dropdown). */
.period-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 12px 12px 0 0;
  background: var(--color-border-strong);
}
.period-card--overdue::before      { background: var(--color-danger-strong); }
.period-card--follow_up::before    { background: var(--color-warning); }
.period-card--needs_review::before { background: var(--color-info-soft-text); }
.period-card--complete::before     { background: var(--color-success); }
.period-card--empty::before        { background: var(--color-border); }
.period-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.period-card-name { font-family: var(--font-display); font-weight: 600; color: var(--color-text-strong); font-size: 1.2rem; }
.period-card-name a { color: inherit; text-decoration: none; }
.period-card-name a:hover { text-decoration: underline; }
.period-card-period { font-size: 0.85rem; color: var(--color-text-subtle); margin-bottom: 1rem; }
.period-card-progress-bar {
  height: 7px;
  border-radius: 999px;
  background: var(--color-border-subtle);
  overflow: hidden;
  margin-bottom: 0.45rem;
}
.period-card-progress-bar span { display: block; height: 100%; border-radius: 999px; background: var(--color-success); transition: width 200ms ease; }
/* Tint the progress fill by status so an in-progress/overdue period doesn't read
   as "done in green". Empty (0%) keeps a faint track via the bar background. */
.period-card--overdue .period-card-progress-bar span   { background: var(--color-danger-strong); }
.period-card--follow_up .period-card-progress-bar span { background: var(--color-warning); }
.period-card-progress-label { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1rem; }
.period-card-progress-label strong { color: var(--color-brand-navy); }
.period-card-missing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.period-card-missing-label { font-size: 0.82rem; color: var(--color-text-subtle); margin-right: 0.2rem; }
.period-card-missing-more { font-size: 0.82rem; color: var(--color-text-subtle); }
/* Footer keeps CTA buttons + kebab on one row. Primary grows so the secondary
   button and the ⋮ kebab are pushed to the right edge and share the baseline.
   margin-top:auto pins the row to the card's bottom edge (see .period-card). */
.period-card-footer { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.4rem; }
.period-card-cta-main { flex: 1 1 auto; text-align: center; }
.period-card-cta-alt { flex: 0 0 auto; text-align: center; }
.period-card-footer .period-card-actions { flex: 0 0 auto; display: flex; align-items: center; }
.period-card-empty { font-size: 0.9rem; color: var(--color-text-subtle); margin: 0.2rem 0 1rem; }

.period-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.period-card-grid .period-card { margin-bottom: 0; }
.period-card.is-hidden { display: none; }

/* ── Accountant org-list cards (/accountant) ─────────────────────────────────
   One card per client. The whole card is a single link to that client's period
   view, so it carries no inner buttons or kebab and reads as one large click
   target. Status tints the top edge; a submitted-documents cue and a sliding
   "Open period →" affordance signal what to do next. */
.org-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.1rem;
}
.org-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(26, 58, 92, 0.05), 0 12px 26px -20px rgba(26, 58, 92, 0.35);
  padding: 1.3rem 1.4rem 1.15rem;
  color: inherit; text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.org-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: #c5d3e2;
  box-shadow: 0 18px 34px -16px rgba(26, 58, 92, 0.28), 0 3px 8px rgba(26, 58, 92, 0.07);
}
.org-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Status-tinted top edge keyed off the org-card--<status_key> modifier. Rounded
   top corners match the card so no overflow:hidden is needed. */
.org-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 14px 14px 0 0;
  background: var(--color-border-strong);
}
.org-card--overdue::before      { background: var(--color-danger-strong); }
.org-card--follow_up::before    { background: var(--color-warning); }
.org-card--needs_review::before { background: var(--color-info-soft-text); }
.org-card--complete::before     { background: var(--color-success); }
.org-card--empty::before        { background: var(--color-border); }

.org-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.6rem; margin-bottom: 0.15rem;
}
.org-card-name {
  font-family: var(--font-display); font-weight: 600; min-width: 0;
  color: var(--color-text-strong); font-size: 1.25rem; line-height: 1.2;
}
.org-card-head .badge { flex-shrink: 0; white-space: nowrap; }
.org-card-period {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-faint); margin-bottom: 1rem;
}

/* "New documents waiting for review" cue — the headline reason to open a card. */
.org-card-review {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--color-info-soft-bg);
  color: var(--color-info-soft-text);
  border-radius: 9px;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem; font-weight: 600;
  margin-bottom: 1rem;
}
.org-card-review-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-accent);
  animation: org-review-pulse 2s ease-out infinite;
}
@keyframes org-review-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(42, 125, 225, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(42, 125, 225, 0); }
  100% { box-shadow: 0 0 0 0 rgba(42, 125, 225, 0); }
}
.org-card--has-review { border-color: #bcd6f3; }

.org-card-progress-bar {
  height: 7px; border-radius: 999px; background: var(--color-border-subtle);
  overflow: hidden; margin-bottom: 0.45rem;
}
.org-card-progress-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--color-success); transition: width 220ms ease;
}
.org-card--overdue .org-card-progress-bar span     { background: var(--color-danger-strong); }
.org-card--follow_up .org-card-progress-bar span   { background: var(--color-warning); }
.org-card--needs_review .org-card-progress-bar span { background: var(--color-info-soft-text); }
.org-card-progress-label { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.9rem; }
.org-card-progress-label strong { color: var(--color-brand-navy); }

.org-card-missing { margin-bottom: 1rem; }
.org-card-missing-label {
  display: block;
  font-weight: 600; color: var(--color-text-subtle);
  text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.72rem;
  margin-bottom: 0.4rem;
}
.org-card-missing-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* Each missing document is an "empty slot" tile: dashed border + hollow dot
   signal a document that has not arrived yet. Tinted by the card's status. */
.org-card-missing-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  font-size: 0.8rem; font-weight: 500; line-height: 1.3;
  color: var(--color-neutral-soft-text);
  background: color-mix(in srgb, var(--color-neutral-soft-bg) 45%, var(--color-surface-card));
  border: 1px dashed color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 8px;
  min-width: 0;
}
.org-card-missing-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid currentColor; opacity: 0.55;
}
.org-card--overdue .org-card-missing-chip {
  color: var(--color-danger-soft-text);
  background: color-mix(in srgb, var(--color-danger-soft-bg) 40%, var(--color-surface-card));
}
.org-card--follow_up .org-card-missing-chip {
  color: var(--color-warning-text);
  background: color-mix(in srgb, var(--color-warning-bg) 45%, var(--color-surface-card));
}
.org-card-missing-chip--more {
  color: var(--color-text-subtle);
  background: transparent;
}
.org-card-missing-chip--more::before { content: none; }
.org-card-empty { font-size: 0.9rem; color: var(--color-text-subtle); margin: 0.1rem 0 1rem; }

/* No button: the whole card is the link, so a sliding arrow signals the action. */
.org-card-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.9rem; font-weight: 600; color: var(--color-accent);
  padding-top: 0.5rem;
}
.org-card-cta-arrow { transition: transform 160ms ease; }
.org-card:hover .org-card-cta { color: var(--color-accent-hover); }
.org-card:hover .org-card-cta-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .org-card, .org-card-cta-arrow, .org-card-review-dot { transition: none; animation: none; }
  .org-card:hover { transform: none; }
}
@media (max-width: 560px) {
  .org-card-grid { grid-template-columns: 1fr; }
}

/* Client section tab bar (Period / Templates / Documents / Exports). */
.section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 1.2rem;
  border-bottom: 1px solid var(--color-border);
}
.section-nav-tab {
  padding: 0.45rem 0.9rem;
  font-size: 0.88rem;
  color: var(--color-text-subtle);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.section-nav-tab:hover { color: var(--color-accent-hover); text-decoration: none; }
.section-nav-tab.is-active {
  color: var(--color-brand-navy);
  font-weight: 600;
  border-bottom-color: var(--color-accent);
}

/* Requests toolbar on the period page: section heading on the left,
   list-management actions (Generate / one-off) on the right. */
.period-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.6rem 0 0.8rem;
}
.period-toolbar-title { margin: 0; }
.period-toolbar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Relative due context under the due date in the requirements table. */
.due-date { font-variant-numeric: tabular-nums; }
.due-context { font-size: 0.78rem; color: var(--color-text-faint); }
.due-context--overdue { color: var(--color-danger-strong); font-weight: 600; }
.due-context--soon { color: var(--color-warning-text); font-weight: 600; }
.row-overdue td { background: var(--color-danger-bg); }
.row-overdue:hover td { background: var(--color-danger-bg); }
.muted-dash { color: var(--color-text-faint); }
.row-actions-cell { white-space: nowrap; text-align: right; }
.row-action { margin-left: 0.6rem; }
.row-action:first-child { margin-left: 0; }

/* Requirement detail — empty-preview placeholder. When no document is linked
   yet, the left pane shows where the client's upload will land instead of
   blank space, keeping the two-column layout balanced. */
.preview-placeholder {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0.5rem;
  min-height: 320px; padding: 2rem;
  border: 2px dashed var(--color-border-strong); border-radius: 6px;
  background: var(--color-surface-page); color: var(--color-text-subtle);
}
.preview-placeholder-icon { color: var(--color-border-strong); margin-bottom: 0.2rem; }
.preview-placeholder-title { font-weight: 600; color: var(--color-text-muted); font-size: 0.95rem; }
.preview-placeholder-hint { font-size: 0.85rem; color: var(--color-text-subtle); max-width: 34ch; margin: 0; }

/* Requirement detail — metadata definition lists (Due date / Period; activity) */
.req-meta, .req-activity { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.9rem; align-items: baseline; }
.req-meta dt, .req-activity dt { font-size: 0.82rem; font-weight: 700; color: var(--color-brand-navy); }
.req-meta dd, .req-activity dd { margin: 0; font-size: 0.9rem; color: var(--color-text); }
.req-activity { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--color-border-subtle); }
.req-activity dt, .req-activity dd { font-size: 0.82rem; }
.text-subtle { color: var(--color-text-subtle); }

/* Requirement detail — due-date urgency cue next to the date */
.req-due-cue { display: inline-block; margin-left: 0.4rem; padding: 1px 8px; border-radius: 10px; font-size: 0.76rem; font-weight: 600; }
.req-due-cue--overdue { background: var(--color-danger-soft-bg); color: var(--color-danger-strong); }
.req-due-cue--soon { background: var(--color-warning-bg); color: var(--color-warning-text); }

/* Requirement detail — labelled action sub-blocks (reminder, reject) */
.action-block { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--color-border-subtle); }
.action-block h3 { margin-top: 0; margin-bottom: 0.4rem; }
.remind-channels { display: flex; gap: 1rem; margin-bottom: 0.5rem; }
.inline-checkbox { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; cursor: pointer; }
.remind-form .row-inline-form { margin-top: 0; }
/* In the narrow sidebar the override email field gets its own full-width row
   and the send button wraps beneath it, so the placeholder never clips. */
.remind-row { flex-wrap: wrap; }
.remind-row input[type=email] { flex: 1 1 100%; }

/* Requirement detail — danger zone: delete is destructive and collapsed so it
   cannot be mistaken for the Reject control. */
.danger-zone { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--color-border-subtle); }
.danger-zone > summary {
  cursor: pointer; list-style: none; user-select: none;
  font-size: 0.85rem; color: var(--color-danger-strong); font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.danger-zone > summary::-webkit-details-marker { display: none; }
.danger-zone > summary::before { content: "▸"; font-size: 0.7rem; color: var(--color-text-faint); }
.danger-zone[open] > summary::before { content: "▾"; }
.danger-zone > summary:hover { text-decoration: underline; }
.danger-zone .row-inline-form { margin-top: 0.6rem; }

/* Onboarding tour: "skip" controls appended under Driver.js popover footer. */
.onboarding-skip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: flex-end;
  margin-top: 0.6rem;
  padding: 0.7rem 0.75rem 0.2rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
}
.onboarding-skip button {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  color: var(--color-text-faint, #6b7280);
  cursor: pointer;
  text-decoration: underline;
}
.onboarding-skip button:hover { color: var(--color-text, #111827); }