:root {
  --ink:            #1a1612;
  --ink-soft:       #4a443c;
  --ink-muted:      #8a8075;

  --olive-deep:     #4A5C2F;
  --olive:          #6B7C3E;
  --olive-soft:     #9AAD5A;
  --olive-pale:     #D4E0A8;
  --olive-tint:     #F0F4E4;

  --burnt-deep:     #8B3A0F;
  --burnt:          #C4501A;
  --burnt-warm:     #E0723A;
  --burnt-soft:     #F0A87A;
  --burnt-tint:     #FAE8DA;

  --bg:             #F7F5F0;
  --white:          #ffffff;
  --border:         #ddd5c5;
  --border-light:   #ede8df;

  --danger:         #8b2020;
  --success:        #1a5c2e;
  --radius:         4px;
  --radius-lg:      8px;
  --shadow:         0 2px 12px rgba(26,22,18,0.08);
  --shadow-lg:      0 8px 32px rgba(26,22,18,0.12);
}

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

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.6;
}

/* ── NAVBAR ── */
.navbar {
  background: var(--olive-deep);
  padding: 0 40px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--burnt);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand { display: flex; align-items: baseline; gap: 8px; }

.brand-icon { font-size: 20px; color: var(--burnt-soft); }

.brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.5px;
}

.brand-sub {
  font-size: 11px;
  font-weight: 300;
  color: var(--olive-pale);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.nav-links { display: flex; gap: 4px; }

.nav-link {
  color: var(--olive-pale);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  padding: 6px 14px;
  border-radius: var(--radius);
  transition: all 0.2s;
  letter-spacing: 0.3px;
}

.nav-link:hover {
  color: var(--white);
  background: rgba(255,255,255,0.12);
}

/* ── MAIN ── */
.main-content { flex: 1; padding: 40px; max-width: 900px; margin: 0 auto; width: 100%; }

/* ── HOMEPAGE ── */
.home-hero { text-align: center; padding: 60px 0 40px; }

.home-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 12px;
}

.home-hero p {
  font-size: 17px;
  color: var(--ink-soft);
  font-weight: 300;
  margin-bottom: 36px;
}

.setup-notice {
  background: #fff8e6;
  border: 1px solid var(--burnt-warm);
  border-left: 4px solid var(--burnt);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 32px;
  font-size: 14px;
  color: var(--burnt-deep);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── DOC CARDS ── */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.doc-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  overflow: hidden;
}

.doc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--burnt);
  transform: scaleX(0);
  transition: transform 0.25s;
}

.doc-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--burnt-soft);
  background: var(--burnt-tint);
  transform: translateY(-2px);
}

.doc-card:hover::before { transform: scaleX(1); }

.doc-card.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.card-icon { font-size: 28px; margin-bottom: 12px; }
.card-icon-img { width: 52px; height: 52px; object-fit: contain; margin-bottom: 12px; display: block; }

.card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}

.card-desc { font-size: 13px; color: var(--ink-muted); line-height: 1.5; }

.card-badge {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--burnt-tint);
  color: var(--burnt);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.card-badge.coming-soon { background: var(--olive-tint); color: var(--olive); }

/* ── FORM PAGE ── */
.page-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
  margin-bottom: 32px;
}

.page-header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
}

.page-header p { font-size: 14px; color: var(--ink-muted); margin-top: 4px; }

/* ── PROGRESS BAR ── */
.progress-bar {
  display: flex;
  gap: 0;
  margin-bottom: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}

.progress-step {
  flex: 1;
  padding: 10px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  border-right: 1px solid var(--border);
  transition: all 0.2s;
  cursor: default;
}

.progress-step:last-child { border-right: none; }

.progress-step.active {
  background: var(--olive-deep);
  color: var(--white);
}

.progress-step.done {
  background: var(--olive-tint);
  color: var(--olive);
}

/* ── FORM SECTIONS ── */
.form-section { display: none; animation: fadeIn 0.3s ease; }
.form-section.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title .step-num {
  width: 28px; height: 28px;
  background: var(--olive-deep);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  flex-shrink: 0;
}

.section-subtitle {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 24px;
  padding-left: 38px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}

.form-grid.single  { grid-template-columns: 1fr; }
.form-grid.thirds  { grid-template-columns: 1fr 1fr 1fr; }
.form-group        { display: flex; flex-direction: column; gap: 6px; }
.form-group.full   { grid-column: 1 / -1; }

label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

input[type="text"],
input[type="date"],
select,
textarea {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  transition: all 0.2s;
  outline: none;
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--burnt);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(196,80,26,0.12);
}

input::placeholder, textarea::placeholder { color: #bbb5aa; }

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8075' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

textarea { resize: vertical; min-height: 80px; }

.field-hint { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }

/* Feature explanations. The line is always shown under a page heading; the
   block replaces the bare "nothing here" text, because an empty tab is
   exactly where someone wonders what the tab is for. */
.explainer-line {
  color: var(--ink-soft);
  font-size: 14px;
  margin: -4px 0 20px;
  max-width: 68ch;
}
.explainer {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--olive);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin: 20px 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
  max-width: 68ch;
}

.conditional-block {
  display: none;
  margin-top: 12px;
  padding: 16px;
  background: var(--olive-tint);
  border: 1px dashed var(--olive-pale);
  border-radius: var(--radius);
  animation: fadeIn 0.2s ease;
}

.conditional-block.visible { display: block; }

/* ── NAV BUTTONS ── */
.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

.btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 28px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2px;
}

.btn-primary {
  background: var(--olive-deep);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--olive);
  box-shadow: 0 4px 12px rgba(74,92,47,0.3);
}

.btn-secondary {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border);
}

.btn-secondary:hover { background: var(--olive-tint); border-color: var(--olive-pale); }

.btn-gold {
  background: var(--burnt);
  color: var(--white);
}

.btn-gold:hover {
  background: var(--burnt-deep);
  box-shadow: 0 4px 12px rgba(196,80,26,0.35);
}

.btn-lg { padding: 14px 36px; font-size: 15px; }

/* ── SETUP PAGE ── */
.setup-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 560px;
  margin: 0 auto;
  box-shadow: var(--shadow);
}

.setup-card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  margin-bottom: 6px;
}

.setup-card p { font-size: 14px; color: var(--ink-muted); margin-bottom: 28px; }

/* ── SUCCESS ── */
.success-panel {
  text-align: center;
  padding: 60px 40px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.success-icon { font-size: 52px; margin-bottom: 16px; }

.success-panel h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  margin-bottom: 8px;
  color: var(--success);
}

.success-panel p { color: var(--ink-soft); font-size: 15px; margin-bottom: 24px; }

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  background: var(--olive-deep);
  color: var(--white);
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 3px solid var(--burnt);
}

.toast.show { opacity: 1; transform: translateY(0); }

/* ── FOOTER ── */
.footer {
  background: var(--olive-deep);
  color: var(--olive-pale);
  text-align: center;
  padding: 16px;
  font-size: 12px;
  border-top: 2px solid var(--burnt);
}

/* ── RECENT TABLE ── */
.recent-table {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.recent-table table { font-family: 'DM Sans', sans-serif; }
.recent-table thead tr { background: var(--olive-tint); }
.recent-table tbody tr:hover { background: var(--burnt-tint); }
.recent-table tbody tr:last-child { border-bottom: none !important; }

/* ── FORM DIVIDER ── */
.form-divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 24px 0;
}

/* ── INVALID FIELD ── */
input.invalid, select.invalid, textarea.invalid {
  border-color: var(--danger) !important;
  background: #fff8f8 !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .main-content { padding: 24px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid.thirds { grid-template-columns: 1fr; }
  .section-card { padding: 20px; }

  /* Navbar — wrap to two rows on mobile */
  .navbar {
    padding: 8px 16px;
    height: auto;
    flex-wrap: wrap;
    gap: 6px;
  }
  .nav-brand { flex: 1; }
  .nav-links {
    width: 100%;
    gap: 2px;
    padding-bottom: 4px;
    /* Wrap onto as many rows as the links need. This block used to say
       flex-wrap:nowrap + overflow-x:auto (a horizontal scroll strip) while
       a later max-width:640px block said flex-wrap:wrap. The later rule
       won, so the strip never existed -- but the leftover overflow-x still
       created a clipping context that cut off the Documents menu. */
    flex-wrap: wrap;
  }
  .nav-link, .nav-dropdown-btn {
    white-space: nowrap;
    font-size: 13px;
    padding: 6px 10px;
  }
  /* The mobile dropdown overrides are NOT here: they must come after the
     base .nav-dropdown* rules further down the file, or they lose to them
     on source order at equal specificity. See "MOBILE NAV DROPDOWN". */
  /* Stat cards stack 2-up, hero smaller */
  .dash-hero h1 { font-size: 26px; }
  .stat-value { font-size: 24px; }
  /* Progress steps — show only circles, hide labels to fit */
  .progress-step { font-size: 0; }
  .progress-step::before { font-size: 13px; }
  .progress-step.active { font-size: 0; }
}

@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px 16px; }
}

/* ── DARK MODE (optimised — warm charcoal, not pure black) ──────────────────── */
[data-theme="dark"] {
  --ink:            #ece6da;
  --ink-soft:       #b8af9e;
  --ink-muted:      #7e756857;
  --ink-muted:      #8d8474;
  --olive-deep:     #9cbf57;
  --olive:          #b0d063;
  --olive-soft:     #88a449;
  --olive-pale:     #44502a;
  --olive-tint:     #232a16;
  --burnt-deep:     #f0894a;
  --burnt:          #e8753a;
  --burnt-warm:     #cf5c28;
  --burnt-soft:     #9a5535;
  --burnt-tint:     #2f1c10;
  --bg:             #16140f;
  --white:          #211e17;
  --border:         #38332a;
  --border-light:   #2b261e;
  --danger:         #e96a5a;
  --success:        #5fbd7e;
  --shadow:         0 2px 14px rgba(0,0,0,0.35);
  --shadow-lg:      0 12px 40px rgba(0,0,0,0.5);
}

[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] .navbar {
  background: #100e09;
  border-bottom: 3px solid var(--burnt);
}
[data-theme="dark"] .nav-link {
  color: #c8bfa8;
}
[data-theme="dark"] .nav-link:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.10);
}
[data-theme="dark"] .nav-dropdown-btn {
  color: #c8bfa8;
}
[data-theme="dark"] .brand-name { color: #f0ece0; }
[data-theme="dark"] .brand-sub  { color: #9aaa6a; }
[data-theme="dark"] .brand-icon { color: var(--burnt-deep); }
[data-theme="dark"] .dark-toggle { color: #f5d76e; }
[data-theme="dark"] .section-card,
[data-theme="dark"] .doc-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .continue-card,
[data-theme="dark"] .recent-table,
[data-theme="dark"] .progress-bar {
  background: var(--white);
  border-color: var(--border);
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #1a1812;
  color: var(--ink);
  border-color: var(--border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #6b6356; }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(176, 208, 99, 0.12);
}
[data-theme="dark"] .btn-secondary {
  background: #1a1812;
  border-color: var(--border);
  color: var(--ink-soft);
}
[data-theme="dark"] .btn-secondary:hover { background: #252119; }
[data-theme="dark"] .footer { background: #100e09; color: var(--ink-muted); border-top-color: var(--border); }
[data-theme="dark"] .setup-notice { background: var(--burnt-tint); border-color: var(--burnt-soft); }
[data-theme="dark"] .nav-dropdown-menu { background: #211e17; border-color: var(--border); }
[data-theme="dark"] .preview-box,
[data-theme="dark"] #gen-another-overlay > div { background: var(--white); }
[data-theme="dark"] .dup-warning { background: #2e2812; border-color: #6a5a20; color: #d4c068; }
[data-theme="dark"] .card-badge { background: var(--olive-tint); color: var(--olive); }

/* Smooth theme transition */
body, .navbar, .section-card, .doc-card, .stat-card, input, select, textarea {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* ── DARK MODE TOGGLE BUTTON ──────────────────────────────────────────────── */
.dark-toggle {
  background: none; border: none; cursor: pointer;
  font-size: 18px; padding: 6px 8px;
  border-radius: var(--radius); transition: all 0.2s;
  display: flex; align-items: center; opacity: 0.95;
  color: #ffffff;
}
.dark-toggle:hover { opacity: 1; transform: scale(1.1); }

/* ── AUTOCOMPLETE ─────────────────────────────────────────────────────────── */
.autocomplete-wrapper { position: relative; }
.autocomplete-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 500;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-height: 200px; overflow-y: auto;
}
.autocomplete-item {
  padding: 8px 12px; font-size: 13px; cursor: pointer;
  color: var(--ink-soft); border-bottom: 1px solid var(--border-light);
}
.autocomplete-item:hover { background: var(--olive-tint); color: var(--ink); }
.autocomplete-item strong { color: var(--ink); font-weight: 600; }

/* ── PREVIEW MODAL ────────────────────────────────────────────────────────── */
.preview-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 8000;
  align-items: center; justify-content: center;
}
.preview-modal.open { display: flex; }
.preview-box {
  background: var(--white); border-radius: var(--radius-lg);
  width: min(720px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.preview-header {
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.preview-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.preview-footer {
  padding: 16px 24px; border-top: 1px solid var(--border-light);
  display: flex; gap: 10px; flex-shrink: 0;
}
.preview-section { margin-bottom: 20px; }
.preview-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--ink-muted); font-weight: 600; margin-bottom: 10px;
}
.preview-row {
  display: flex; gap: 8px; font-size: 13px;
  padding: 5px 0; border-bottom: 1px solid var(--border-light);
}
.preview-row:last-child { border-bottom: none; }
.preview-label { color: var(--ink-muted); width: 140px; flex-shrink: 0; }
.preview-value { color: var(--ink); flex: 1; }
.preview-para {
  font-size: 13px; line-height: 1.9; color: var(--ink);
  padding: 10px 0; border-bottom: 1px solid var(--border-light);
}
.preview-para:last-child { border-bottom: none; }
.preview-para strong { color: var(--ink); }
.preview-toggle {
  font-size: 13px; color: var(--burnt); text-decoration: underline;
  cursor: pointer; background: none; border: none; padding: 0;
}
.preview-full-text { display: none; margin-top: 16px; }
.preview-full-text.open { display: block; }

/* ── DUPLICATE WARNING ────────────────────────────────────────────────────── */
.dup-warning {
  background: #fff8e1; border: 1px solid #f0c040;
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 13px; color: #7a5a00; margin-bottom: 16px; display: none;
}
.dup-warning.show { display: block; }

/* ── MULTI-DOC GENERATION ─────────────────────────────────────────────────── */
.multi-doc-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 20px; display: flex; align-items: center;
  gap: 14px; cursor: pointer; transition: all 0.2s;
  background: var(--white); margin-bottom: 10px;
}
.multi-doc-card:hover { border-color: var(--olive); background: var(--olive-tint); }
.multi-doc-card.selected { border-color: var(--olive); background: var(--olive-tint); }
.multi-doc-check {
  width: 20px; height: 20px; border-radius: 4px;
  border: 2px solid var(--border); background: var(--white);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.multi-doc-card.selected .multi-doc-check {
  background: var(--olive); border-color: var(--olive); color: white;
}

/* ── NAV DROPDOWN ──────────────────────────────────────────────────────────── */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}

.nav-caret {
  font-size: 10px;
  margin-left: 3px;
  opacity: 0.7;
  display: inline-block;
  transition: transform 0.2s;
}

@media (hover: hover) {
  .nav-dropdown:hover .nav-caret { transform: rotate(180deg); }
}
.nav-dropdown.open .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 500;
  padding: 8px 0;
  animation: dropIn 0.15s ease;
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hover opens these menus only where hovering is real. On a touch screen
   a tap is also reported as :hover, which latches a menu open that the JS
   .open toggle cannot then close.

   This must be a (hover: hover) gate rather than a (hover: none) override
   further down the file: `.nav-dropdown:hover .nav-dropdown-menu` scores
   (0,3,0), so a plain `.nav-dropdown-menu { display: none }` at (0,1,0)
   loses on specificity wherever it is placed. */
@media (hover: hover) {
  .nav-dropdown:hover .nav-dropdown-menu { display: block; }
}
.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-section { display:flex; align-items:center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-muted);
  font-weight: 600;
  padding: 8px 16px 4px;
}

.nav-dropdown-item {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: all 0.15s;
  border-radius: 0;
}

.nav-dropdown-item:hover {
  background: var(--olive-tint);
  color: var(--olive-deep);
  padding-left: 20px;
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--border-light);
  margin: 6px 0;
}

[data-theme="dark"] .nav-dropdown-menu {
  background: #2a2620;
  border-color: var(--border);
}
[data-theme="dark"] .nav-dropdown-item:hover {
  background: var(--olive-tint);
}

/* ══ DASHBOARD ═══════════════════════════════════════════════════════════════ */
.dash-hero {
  margin-bottom: 28px;
}
.dash-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.dash-hero p {
  font-size: 15px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* Stat cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  text-decoration: none;
  display: block;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
a.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--olive-pale);
}
.stat-card-accent {
  background: linear-gradient(135deg, var(--olive-deep), var(--olive-soft));
  border-color: transparent;
}
.stat-card-accent .stat-label,
.stat-card-accent .stat-value,
.stat-card-accent .stat-sub { color: #fff; }
.stat-card-accent .stat-label { opacity: 0.85; }
.stat-card-accent .stat-sub { opacity: 0.8; }
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.stat-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.stat-sub {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 6px;
}

/* Dashboard sections */
.dash-section { margin-bottom: 40px; }
.dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dash-section-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.dash-clear-btn {
  font-size: 12px; color: var(--ink-muted);
  background: none; border: none; cursor: pointer;
  text-decoration: underline;
}

/* Continue cards */
.continue-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.continue-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--burnt);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  transition: all 0.2s;
}
.continue-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.continue-type {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--burnt); font-weight: 600; margin-bottom: 6px;
}
.continue-label {
  font-size: 15px; font-weight: 500; color: var(--ink);
  margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.continue-meta { font-size: 12px; color: var(--ink-muted); margin-bottom: 12px; }
.continue-actions { display: flex; gap: 8px; }
.continue-btn {
  font-size: 12px; font-weight: 500; padding: 5px 12px;
  border-radius: 5px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--burnt-soft); color: var(--burnt);
  background: none; transition: all 0.15s;
}
.continue-btn:hover { background: var(--burnt-tint); }
.continue-btn-alt { border-color: var(--olive-pale); color: var(--olive-deep); }
.continue-btn-alt:hover { background: var(--olive-tint); }

/* Recent table cells */
.rt-th {
  text-align: left; padding: 10px 14px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--ink-muted); font-weight: 500;
}
.rt-td { padding: 10px 14px; font-size: 13px; }
.rt-action {
  font-size: 12px; font-weight: 500; padding: 4px 10px;
  border-radius: 4px; text-decoration: none; cursor: pointer;
}
.rt-action-reopen { color: var(--burnt); border: 1px solid var(--burnt-soft); }
.rt-action-clone { color: var(--olive-deep); border: 1px solid var(--olive-pale); background: none; }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .continue-row { grid-template-columns: 1fr; }
}

/* ══ PROGRESS BAR — POLISHED ════════════════════════════════════════════════ */
.progress-bar {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 36px;
  border: none;
  background: none;
  position: relative;
  padding: 0 4px;
}
.progress-bar::before {
  content: '';
  position: absolute;
  top: 16px; left: 24px; right: 24px;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.progress-fill-line {
  position: absolute;
  top: 16px; left: 24px;
  height: 2px;
  background: var(--olive-deep);
  z-index: 1;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  border: none;
  background: none;
  position: relative;
  z-index: 2;
  cursor: default;
  text-align: center;
}
.progress-step::before {
  content: attr(data-step);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  color: var(--ink-muted);
  transition: all 0.3s ease;
}
.progress-step.active::before {
  background: var(--olive-deep);
  border-color: var(--olive-deep);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 0 4px var(--olive-tint);
}
.progress-step.done::before {
  content: '✓';
  background: var(--olive);
  border-color: var(--olive);
  color: #fff;
}
.progress-step.active { color: var(--olive-deep); font-weight: 600; }
.progress-step.done { color: var(--olive); }

/* Clickable visited progress steps */
.progress-step.done:hover::before,
.progress-step.active:hover::before {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px var(--olive-tint);
}
.progress-step.done:hover { color: var(--olive-deep); }


/* ══ LOADING STATES ═════════════════════════════════════════════════════════ */
.gen-loading-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20, 18, 14, 0.55);
  backdrop-filter: blur(3px);
  z-index: 9500;
  align-items: center; justify-content: center;
}
.gen-loading-overlay.show { display: flex; }
.gen-loading-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 48px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: fadeUp 0.2s ease;
}
.gen-spinner {
  width: 44px; height: 44px;
  margin: 0 auto 18px;
  border: 3px solid var(--border);
  border-top-color: var(--olive-deep);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.gen-loading-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 600; color: var(--ink);
}
.gen-loading-sub {
  font-size: 13px; color: var(--ink-muted); margin-top: 4px;
}

/* Button press micro-interaction */
.btn { transition: transform 0.08s ease, background-color 0.2s, box-shadow 0.2s; }
.btn:active { transform: scale(0.97); }

/* ── NAV SUBMENU (flyout) ─────────────────────────────────────────────────── */
.nav-submenu { position: relative; }
.nav-submenu-trigger { cursor: pointer; }
.nav-submenu-trigger:hover { background: var(--olive-tint); color: var(--olive-deep); }
.nav-submenu-menu {
  display: none;
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 2px;
  min-width: 280px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  z-index: 600;
}
@media (hover: hover) {
  .nav-submenu:hover .nav-submenu-menu { display: block; }
}
.nav-submenu.open .nav-submenu-menu {
  display: block;
}
[data-theme="dark"] .nav-submenu-menu { background: #211e17; border-color: var(--border); }

/* ── MOBILE NAV DROPDOWN ───────────────────────────────────────────────────
   These override the base .nav-dropdown* rules above, so they must stay
   BELOW them: both are single-class selectors, so source order decides.
   Placing them in the earlier max-width:640px block near the top of the
   file silently does nothing. */
@media (max-width: 640px) {
  /* Anchor the menu to .navbar (already position:sticky, so it is a
     containing block) rather than to the button, and let it span the
     screen instead of the desktop 240px column. */
  .nav-dropdown { position: static; }
  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 12px;
    right: 12px;
    min-width: 0;
    /* Letters alone holds 18 of the 29 document types, and on mobile a
       category expands inline rather than flying out sideways (see the
       .nav-submenu-menu rule below). That makes the menu taller than the
       screen, so it has to scroll itself -- otherwise the items past the
       fold cannot be reached at all. */
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* 8px padding on 13px text gives a ~30px row -- too small to hit
     reliably with a fingertip. */
  .nav-dropdown-item,
  .nav-submenu-trigger {
    padding: 11px 16px;
    font-size: 14px;
  }
}

/* On small screens, the flyout opens below instead of to the side */
@media (max-width: 640px) {
  .nav-submenu-menu {
    position: static;
    right: auto;
    margin: 4px 0 4px 16px;
    min-width: auto;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--border);
    border-radius: 0;
  }
}

/* ── GENERATE ACTION BUTTONS (aligned row) ────────────────────────────────── */
.gen-actions {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 8px;
}
.gen-actions .btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gen-actions-main {
  flex: 1 1 auto;
  min-width: 200px;
}
@media (max-width: 640px) {
  .gen-actions { flex-direction: column; }
  .gen-actions .btn { width: 100%; }
}

/* ── SVG LINE ICONS (theme-aware, inline) ─────────────────────────────────── */
.ico {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  --ico-accent: var(--burnt);
}
.doc-icon-line {
  width: 32px; height: 32px;
  color: var(--olive-deep);
  --ico-accent: var(--burnt);
  margin-bottom: 12px;
  display: block;
}
.doc-card:hover .doc-icon-line { color: var(--burnt); }
[data-theme="dark"] .doc-icon-line { color: var(--olive); --ico-accent: var(--burnt); }
/* dropdown line icon */
.nav-doc-ico {
  width: 18px; height: 18px;
  color: var(--olive-deep);
  --ico-accent: var(--burnt);
  margin-right: 9px;
  vertical-align: -0.2em;
}
[data-theme="dark"] .nav-doc-ico { color: var(--olive); }

/* ── Dashboard / VAT metric cards (new-app shell) ─────────────────────────── */
.stat-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.stat-label { color: var(--ink-muted); font-size: 13px; margin-top: 4px; }
.nav-firm { white-space: nowrap; }
@media (max-width: 640px) {
  /* .navbar and .nav-links mobile layout live in the main max-width:640px
     block near the top of this file. Re-declaring them here is what let
     the two definitions drift apart -- keep this block to .nav-firm. */
  .nav-firm { display: none; }
}

/* ── Barrister-letter badge (second batch, kept visually distinct) ─────────── */
.badge-barrister {
  display:inline-block; font-size:11px; font-weight:600; padding:2px 8px;
  border-radius:10px; background:var(--burnt-tint); color:var(--burnt-deep);
  margin-left:6px; vertical-align:middle;
}

/* ── Letter calendar widget ──────────────────────────────────────────────── */
.lc-widget { border:1px solid var(--border); border-radius:var(--radius); padding:12px; max-width:320px; background:var(--white); }
.lc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:6px; }
.lc-month { font-weight:600; cursor:pointer; flex:1; text-align:center; }
.lc-nav, .lc-help { background:none; border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; width:26px; height:26px; flex:none; }
.lc-help-box { font-size:12px; color:var(--ink-soft); background:var(--olive-tint); border-radius:var(--radius); padding:8px; margin-bottom:8px; }
.lc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
.lc-dow { font-size:11px; color:var(--ink-muted); padding:2px 0; }
.lc-day { padding:6px 0; border-radius:var(--radius); cursor:pointer; font-size:13px; }
.lc-day:hover { background:var(--olive-tint); }
.lc-day.lc-selected { background:var(--olive-pale); font-weight:600; }
.lc-day.lc-excluded { background:none; text-decoration:line-through; color:var(--ink-muted); }
.lc-summary { font-size:12px; color:var(--ink-soft); margin-top:8px; }

/* ── Letter checklist widget ─────────────────────────────────────────────── */
.lchk-widget { border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.lchk-item { display:block; margin-bottom:6px; font-size:14px; }
.lchk-remove { background:none; border:none; color:var(--ink-muted); cursor:pointer; font-size:14px; margin-left:4px; }
.lchk-add { display:flex; gap:6px; margin-top:8px; }
.lchk-add-input { flex:1; }

/* ── Watch control ──────────────────────────────────────────────────────
   Prefixed tc- and added in one block, because this file already declares
   43 selectors more than once (including .recent-table and .page-header),
   the later one silently winning. Tokens only, no hex, so dark mode
   follows. The status pills that used to live here moved to the clp-
   block at the end of this file.                                         */

/* Text-weight on purpose: Browse runs to 140 rows, and a filled button on
   each would bury the listings, which are the actual content. .recent-table
   already lifts a row on hover, so the control joins that affordance
   rather than inventing one.                                              */
.tc-watch {
  background:none; border:none; padding:0; cursor:pointer;
  font-family:'DM Sans', sans-serif; font-size:12px; color:var(--ink-muted);
}
.tc-watch:hover { color:var(--olive); text-decoration:underline; }
.recent-table tbody tr:hover .tc-watch { color:var(--olive); }
.tc-tracked { font-size:12px; color:var(--ink-muted); }

/* ── Cause-list panel rows ──────────────────────────────────────────────
   Your cases, Possibly yours, Tracked cases and Search results, modelled on
   the front page's example "Your cases" panel. Prefixed clp- and added in
   one block, because this file already declares 43 selectors more than
   once, the later one silently winning. Tokens only, no hex, so dark mode
   follows with no rules of its own. Browse a court keeps .recent-table.  */
.clp-panel {
  list-style:none; margin:0; padding:0; background:var(--white);
  border:1px solid var(--border-light); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); overflow:hidden;
}
.clp-row { padding:14px 18px; border-bottom:1px solid var(--border-light); }
.clp-row:last-child { border-bottom:none; }
.clp-top {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:8px 12px;
}
.clp-ref {
  font-family:'DM Sans', sans-serif; font-size:13px; font-weight:600;
  color:var(--olive-deep); letter-spacing:0.2px; font-variant-numeric:tabular-nums;
}
.clp-tag { margin-left:6px; font-size:12px; font-weight:400; color:var(--ink-muted); }
.clp-side { display:flex; align-items:center; gap:12px; }
.clp-pill {
  display:inline-block; font-size:11px; font-weight:600; white-space:nowrap;
  padding:3px 10px; border-radius:999px; border:1px solid transparent;
}
.clp-pill-listed   { background:var(--olive-tint); color:var(--olive-deep); border-color:var(--olive-pale); }
.clp-pill-probable { background:var(--burnt-tint); color:var(--burnt-deep); border-color:var(--burnt-soft); }
.clp-pill-quiet    { background:var(--bg); color:var(--ink-muted); border-color:var(--border); }
.clp-name {
  margin-top:4px; font-family:'Cormorant Garamond', serif; font-size:19px;
  font-weight:600; line-height:1.25; color:var(--ink); overflow-wrap:anywhere;
}
.clp-meta {
  margin-top:2px; font-family:'DM Sans', sans-serif; font-size:13px;
  color:var(--ink-soft); overflow-wrap:anywhere;
}
.clp-meta a { color:var(--olive); }
@media (max-width: 420px) {
  .clp-side { width:100%; }
}