/* North Star Onboarding — page styling in North Star's brand colors.
   Colors come from the logo files: forest #243D38, gold #BEA573, sage #919F93. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --forest: #243D38;
  --forest-hover: #1a2d29;
  --gold: #BEA573;
  --on-gold: #243D38;       /* text on a gold strip: forest in light and dark mode */
  --gold-light: #f4eee2;
  --sage: #919F93;
  --sage-light: #eef1ee;
  --line: #dfe4e0;
  --field-border: #c9d1cc;
  --page: #f5f4ef;
  --text: #1f2a27;
  --muted: #5f6b66;
  --danger: #a3302a;
  --paper: #fff;            /* the Digest preview: always white, it's printed */
  /* Dark mode: the colors below are redefined under [data-theme="dark"] */
  --surface: #fff;          /* cards, boxes, menus */
  --surface-alt: #fafaf7;   /* a table row under the mouse */
  --locked: #f3f4f2;        /* greyed-out answers */
  --locked-text: #a5aea9;
  --readonly: #f6f7f5;
  --heading: var(--forest); /* page titles and section names */
  --label: var(--forest);   /* field labels, table headings, links */
  --accent: var(--forest);  /* main buttons, ticked boxes, chosen answers */
  --accent-hover: var(--forest-hover);
  --on-accent: #fff;        /* text on a main button */
  --radio-dot: var(--gold);
  --focus-ring: rgba(36, 61, 56, 0.15);
  --shadow: var(--shadow);
  --nav-text: #e3e8e5;
  --preview-bg: #e9ebe7;
  --ok: #3f7a55;
  --saved: #2f6b45;
  --error-strong: #b3261e;
  --success-bg: #e8f1ea;
  --success-border: #a9c7b0;
  --error-bg: #fbeceb;
  --error-border: #e3aaa6;
  --tag-text: #6e5a2e;
  color-scheme: light;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", "Segoe UI", Arial, sans-serif;
}

/* Dark mode: deep forest green with gold highlights. data-theme is set by base.html from each
   person's Theme choice ("auto" follows Windows' setting). The Digest preview stays white. */
:root[data-theme="dark"] {
  --page: #13211e;
  --surface: #1c302b;
  --surface-alt: #223833;
  --locked: #1f322e;
  --locked-text: #6f827b;
  --readonly: #1f322e;
  --line: #2e4741;
  --field-border: #4a655e;
  --text: #e4eae7;
  --muted: #a2b2ab;
  --heading: #dcc99f;
  --label: #cfdcd5;
  --accent: var(--gold);
  --accent-hover: #cdb789;
  --on-accent: #13211e;
  --radio-dot: #13211e;
  --sage-light: #253d37;
  --gold-light: #3a3426;
  --danger: #ec8a82;
  --focus-ring: rgba(190, 165, 115, 0.35);
  --shadow: rgba(0, 0, 0, 0.45);
  --preview-bg: #0e1816;
  --ok: #8fd0a5;
  --saved: #8fd0a5;
  --error-strong: #ff9b92;
  --success-bg: #1e3a2c;
  --success-border: #3f6d51;
  --error-bg: #3d2523;
  --error-border: #7d3d37;
  --tag-text: #e8d7ad;
  color-scheme: dark;
}
/* The Word page drawn in the preview keeps black text on white paper in dark mode */
:root[data-theme="dark"] .preview-page section.docx { background: var(--paper); color: #000; }

body { margin: 0; background: var(--page); color: var(--text); font-family: var(--sans); font-size: 14px; }
[hidden], .source-off { display: none !important; }

/* ---- Header ---- */
/* Zack's PC only: the practice copy says so on every page (the website is the real copy) */
.practice-banner { background: var(--gold); color: var(--on-gold); text-align: center; font-size: 13px; padding: 6px 16px; }
.practice-banner a { color: var(--on-gold); font-weight: 600; }
.site-header { background: var(--forest); border-bottom: 3px solid var(--gold); }
.site-header .inner { max-width: 1100px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.site-header .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.site-header .brand .icon { height: 42px; width: auto; }
.site-header .brand .wordmark { height: 34px; width: auto; }
.site-header nav { display: flex; gap: 20px; }
.site-header nav a { color: var(--nav-text); text-decoration: none; font-size: 13px; letter-spacing: 0.04em; }
.site-header nav a:hover { color: var(--gold); }
/* G12: who is signed in, and Sign out */
.site-header nav { align-items: center; }
.site-header .sign-out { display: flex; align-items: center; gap: 10px; margin: 0 0 0 8px; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.25); }
.site-header .signed-in-as { color: var(--gold); font-size: 13px; }
.site-header .sign-out button { background: none; border: none; padding: 0; color: var(--nav-text); font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; cursor: pointer; }
.site-header .sign-out button:hover { color: var(--gold); }
.sign-in-card { max-width: 440px; margin: 40px auto; text-align: center; }
.sign-in-card .button { display: block; width: 100%; margin: 10px 0; box-sizing: border-box; }
.sign-in-card form { margin: 0; }
.sign-in-card .test-buttons { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
table.list.users td { vertical-align: middle; }
.users .actions { text-align: right; white-space: nowrap; }
.users .actions form { display: inline; margin-left: 6px; }
.add-user { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.add-user input.plain { width: 300px; }

main { max-width: 1100px; margin: 28px auto 48px; padding: 0 16px; }
h1 { font-family: var(--serif); font-weight: 600; font-size: 34px; color: var(--heading); margin: 0 0 18px; }

/* ---- Plan page: title row and live preview ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-head h1 { margin: 0; }
.editor { display: block; }
body.preview-on main { max-width: 1760px; }
body.preview-on .editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
/* G20: a client's Documents page: tick the PDFs to download together */
.documents .doc-col { width: 150px; text-align: center; }
.documents input[type=checkbox] { width: 18px; height: 18px; }
.documents-select { margin: 0 0 4px; font-size: 13px; }
.documents-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
/* G6: a plan page's top (back link, name, Done and the buttons) stays put while the form scrolls */
.frozen-head {
  position: sticky; top: 0; z-index: 40; background: var(--page);
  margin: -12px -16px 12px; padding: 12px 16px 2px; border-bottom: 1px solid var(--line);
}
.frozen-head .page-head { margin-bottom: 10px; }
#done-button.busy { opacity: 0.6; pointer-events: none; }
.preview-pane {
  position: sticky; top: calc(var(--frozen-height, 0px) + 12px); max-height: calc(100vh - var(--frozen-height, 0px) - 24px); display: flex; flex-direction: column;
  background: var(--preview-bg); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.preview-title { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--heading); }
.preview-status { font-size: 12px; color: var(--muted); text-align: right; }
.preview-status.busy { color: var(--gold); }
.preview-status.ok { color: var(--ok); }
.preview-status.error { color: var(--danger); }
.preview-pages { overflow-y: auto; scrollbar-gutter: stable; padding: 16px; }
/* The page: the Word file drawn by the browser, fitted to the pane's width (preview.js) */
.preview-page .docx-wrapper { background: transparent; padding: 0; display: block; }
.preview-page .docx-wrapper > section.docx { margin: 0; box-shadow: 0 2px 10px rgba(36, 61, 56, 0.18); }
/* Fallback: pictures of the real PDF */
.preview-pdf-pages { display: flex; flex-direction: column; gap: 16px; }
.preview-pdf-pages img { width: 100%; height: auto; display: block; background: var(--paper); box-shadow: 0 2px 10px rgba(36, 61, 56, 0.18); }
@media (max-width: 1100px) {
  body.preview-on .editor { grid-template-columns: 1fr; }
  .preview-pane { position: static; max-height: none; }
}

/* ---- Messages ---- */
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; border: 1px solid; }
.flash.success { background: var(--success-bg); border-color: var(--success-border); }
.flash.error { background: var(--error-bg); border-color: var(--error-border); }
.flash.warning { background: var(--gold-light); border-color: var(--gold); }

/* ---- Buttons ---- */
.button {
  display: inline-block; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  border-radius: 6px; padding: 9px 18px; font-family: var(--sans); font-size: 14px; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--accent-hover); }
.button.secondary { background: var(--surface); color: var(--label); border-color: var(--gold); }
.button.secondary:hover { background: var(--gold-light); }
.button.small { padding: 4px 12px; font-size: 12px; }
.link-button { background: none; border: none; color: var(--label); text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0; font-family: var(--sans); }

/* ---- Section cards ---- */
fieldset {
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--sage);
  border-radius: 10px; padding: 14px 20px 18px; margin: 0 0 20px;
}
/* A source's effective date (F1), at the right end of its section's first row */
.row-end { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.row-end input[type=date] {
  font-family: var(--sans); font-size: 14px; color: var(--text); background: var(--surface); height: 36px;
  border: 1px solid var(--field-border); border-radius: 6px; padding: 6px 10px; box-sizing: border-box;
}
legend { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--heading); padding: 0 8px; }

/* ---- Fields ---- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 4px; }
/* Stacked fields get space between them. Two-column grids use their own gap
   instead, so fields in the same row line up exactly. */
fieldset > .field + .field, fieldset > div:not(.form-grid) > .field + .field { margin-top: 12px; }
.form-grid > .field { margin: 0; }
/* Labels stay in normal case: all-caps would turn "401(k)" into "401(K)" */
.field label:not(.radios label), .field-label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--label);
  letter-spacing: 0.02em; margin-bottom: 6px;
}
.field input[type=text], .field input[type=number], .field input[type=date], .field select,
input.plain, .pct input, .money input, .combo input, .field textarea {
  font-family: var(--sans); font-size: 14px; color: var(--text); background: var(--surface);
  border: 1px solid var(--field-border); border-radius: 6px; box-sizing: border-box;
}
.field input[type=text], .field input[type=number], .field input[type=date], .field select,
input.plain, .pct input, .money input, .combo input { height: 36px; padding: 6px 10px; }
.field textarea { width: 100%; padding: 8px 10px; resize: vertical; }
.field > input, .field > select, input.plain { width: 100%; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring);
}
.field .inline { display: flex; align-items: center; gap: 8px; }
.field .inline select { flex: 1; }
.pct, .money { display: inline-flex; align-items: center; gap: 4px; color: var(--sage); font-weight: 500; }
.pct input { width: 64px; text-align: right; }
.money input { width: 130px; text-align: right; }
/* A money box that starts a row lines up with the other boxes; its $ sits just to the left */
.topic-controls > .money:first-child { position: relative; }
.topic-controls > .money:first-child > span { position: absolute; right: calc(100% + 3px); }
input.plain.short { width: 64px; text-align: right; }
.error-text { color: var(--danger); font-size: 13px; margin-top: 4px; }
.char-count { text-align: right; font-size: 11px; color: var(--muted); margin-top: 3px; }
.char-count.near { color: var(--gold); font-weight: 600; }
.locked-value { color: var(--muted); font-style: italic; padding: 8px 0; }
.lock-note { color: var(--muted); font-size: 12px; font-style: italic; margin-top: 6px; }
.sub-block { margin-top: 10px; margin-left: 4px; padding-left: 16px; border-left: 3px solid var(--sage-light); }
.sub-detail, .sh-detail { margin-top: 8px; }
.sub-block + .field { margin-top: 14px; }
/* Several short fields side by side on one line (wraps on narrow screens) */
.field-row { display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: flex-start; margin-top: 12px; }
.field-row > .field { margin: 0; }
.hint-inline { color: var(--muted); font-size: 13px; }
hr.divider { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* ---- Pill-style radio buttons ---- */
.radios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.radios label:has(input[type=radio]) {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  border: 1px solid var(--field-border); border-radius: 999px; background: var(--surface);
  color: var(--label); font-size: 13px; cursor: pointer; user-select: none;
}
.radios label:has(input[type=radio]):hover { border-color: var(--sage); }
.radios input[type=radio] {
  appearance: none; margin: 0; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--sage); background: var(--surface); flex: none;
}
.radios label:has(input[type=radio]:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.radios input[type=radio]:checked { border-color: var(--gold); background: radial-gradient(var(--radio-dot) 45%, transparent 52%); }
.radios label:has(input[type=radio]:focus-visible) { box-shadow: 0 0 0 3px var(--focus-ring); }

/* ---- Checkboxes ---- */
.radios label:has(input[type=checkbox]), .checkbox {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; margin-right: 10px;
}
.checkbox { font-weight: 500; color: var(--label); margin-bottom: 14px; }
input[type=checkbox] {
  appearance: none; margin: 0; width: 18px; height: 18px; flex: none; cursor: pointer;
  border: 1.5px solid var(--sage); border-radius: 4px; background: var(--surface); display: inline-grid; place-content: center;
}
input[type=checkbox]::after {
  content: ""; width: 9px; height: 5px; border: 2px solid var(--on-accent); border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
}
input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
input[type=checkbox]:checked::after { opacity: 1; }
input[type=checkbox]:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); outline: none; }

/* ---- Greyed-out (locked) answers ---- */
.radios.locked label { color: var(--locked-text); background: var(--locked); cursor: not-allowed; }
.radios.locked input[type=checkbox] { border-color: var(--field-border); background: var(--locked); cursor: not-allowed; }
.combo.locked input { color: var(--muted); background: var(--locked); }

/* ---- Pick-or-type boxes ---- */
.combo { position: relative; display: flex; }
.combo input { flex: 1; min-width: 0; padding-right: 28px; cursor: pointer; }
.combo input:focus { cursor: text; }
.combo-toggle {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 26px;
  border: none; background: transparent; color: var(--sage); cursor: pointer; font-size: 12px;
}
.combo-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin: 4px 0 0; padding: 4px 0;
  list-style: none; background: var(--surface); border: 1px solid var(--field-border); border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow); max-height: 260px; overflow-y: auto; min-width: 220px;
}
.combo-list li { padding: 7px 12px; font-size: 13px; cursor: pointer; }
.combo-list li:hover { background: var(--sage-light); color: var(--label); }

/* ---- Tables ---- */
table.list { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
/* Round the corner cells instead of hiding overflow, so the PDFs menu can open past the table (G7) */
table.list thead th:first-child { border-top-left-radius: 9px; }
table.list thead th:last-child { border-top-right-radius: 9px; }
table.list > tbody:last-child > tr:last-child > td:first-child { border-bottom-left-radius: 9px; }
table.list > tbody:last-child > tr:last-child > td:last-child { border-bottom-right-radius: 9px; }
table.list th { text-align: left; padding: 11px 14px; background: var(--sage-light); color: var(--label); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; }
table.list td { padding: 11px 14px; border-top: 1px solid var(--line); }
table.list tr:hover td { background: var(--surface-alt); }
.grid-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.grid-table th { text-align: left; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--label); padding: 8px 6px; background: var(--sage-light); }
.grid-table td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid-table .source-col { font-weight: 600; color: var(--label); }
.grid-table .elig-sources { margin-top: 4px; font-weight: 400; color: var(--text); }
.grid-table .elig-sources label { display: block; font-size: 12.5px; line-height: 1.6; white-space: nowrap; }
.grid-table .action-col { width: 44px; text-align: right; }

/* Source effective date (rule F1): a normal-width date box with a hint under it */
.source-date { max-width: 260px; margin-bottom: 12px; }
.source-date .hint-inline { font-size: 12px; }

/* ---- One row per topic (trial: the 401(k) section) ----
   Label on the left; the answer and its follow-ups on the same line */
.topic-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.topic-rows > .topic-row:first-child { border-top: none; }
.topic-label { font-size: 13px; font-weight: 600; color: var(--label); }
.topic-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.topic-controls > .radios { flex-wrap: nowrap; }
.topic-controls .error-text { flex-basis: 100%; margin-top: 0; }
.topic-controls textarea { flex: 1 1 100%; }
.topic-follow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.topic-follow input[type=date] { width: auto; }
.topic-follow select { width: auto; }
.topic-word { font-size: 13px; color: var(--text); }
.topic-controls.checks label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; margin-right: 14px; font-weight: 400; }
.topic-controls.checks label.disabled { color: var(--muted); cursor: not-allowed; }
@media (max-width: 700px) { .topic-row { grid-template-columns: 1fr; gap: 6px; } }
.topic-controls input[type=date], .topic-controls select, .topic-controls textarea {
  font-family: var(--sans); font-size: 14px; color: var(--text); background: var(--surface);
  border: 1px solid var(--field-border); border-radius: 6px; box-sizing: border-box;
}
.topic-controls input[type=date], .topic-controls select { height: 36px; padding: 6px 10px; }
.topic-controls textarea { padding: 8px 10px; resize: vertical; }
.topic-controls .char-count { flex-basis: 100%; margin-top: -6px; }
.topic-gap { margin-left: 18px; }
.topic-controls > input.plain, .topic-follow > input.plain { flex: 1 1 260px; width: auto; min-width: 0; }
.topic-controls > input.plain.short { flex: none; width: 64px; }
.topic-controls .combo { flex: 0 1 320px; min-width: 200px; }
.topic-controls .lock-note { flex-basis: 100%; }
.topic-controls .checkbox.inline-check { margin: 0; font-weight: 400; color: var(--text); }
.checkbox.elig-same-check { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px;
  font-size: 13px; font-weight: 400; color: var(--text); cursor: pointer; }
.topic-rows-after { margin-top: 10px; }
.radios .hours-box { width: 72px; height: 32px; text-align: right; margin-right: 10px; }
.radios .hours.disabled .hours-box { background: var(--page); color: var(--muted); }
fieldset > .topic-rows + .grid-table { margin-top: 6px; }
/* Beside the live preview the form column is narrower: a slimmer label column */
body.preview-on .topic-row { grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
/* The eligibility table's Source column is as wide as the label column plus its gap (less the
   cells' padding), so its names line up with the labels and its boxes with the boxes below */
.grid-table th:first-child, .grid-table td:first-child { padding-left: 0; }
.grid-table .source-col { width: 182px; }
body.preview-on .grid-table .source-col { width: 148px; }
body.preview-on .topic-controls.checks label { margin-right: 8px; }

/* Cash Balance benefit groups (rule C3) */
#cb-groups td .topic-controls { flex-wrap: nowrap; }
#cb-groups .group-col { width: 40%; }
#cb-groups input.plain { width: 100%; }
#cb-groups input.credit-amount { width: 120px; flex: none; text-align: right; }
/* "$ 1,500" or "10 %": only the unit for the chosen pay credit type shows */
.credit-box { display: inline-flex; align-items: center; gap: 4px; color: var(--sage); font-weight: 500; }
.credit-unit { width: 10px; text-align: center; }
.credit-box[data-credit-type="$"] .percent,
.credit-box[data-credit-type="% of Pay"] .dollars { visibility: hidden; }
.group-actions { margin: 8px 0 4px; }

/* Beside the live preview the eligibility table is narrow: slightly smaller text in its boxes
   so "Following/coinciding" and "2 YOS (1,000 hrs each)" still fit */
body.preview-on #eligibility-table .combo input { font-size: 12.5px; padding-left: 8px; padding-right: 22px; }
body.preview-on #eligibility-table .action-col { width: 20px; }
body.preview-on #eligibility-table .clear-row { font-size: 11px; }

/* Clients (rules CL1-CL3) */
.breadcrumb { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--label); }
.muted { color: var(--muted); font-size: 13px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin-bottom: 22px; }
.client-details { display: flex; flex-wrap: wrap; gap: 10px 36px; font-size: 14px; }
.client-details .detail-label { display: block; font-size: 12px; font-weight: 600; color: var(--label); margin-bottom: 2px; }
table.clients .client-row td { background: var(--page); font-weight: 600; }
table.clients .client-row .client-name { color: var(--label); font-size: 15px; margin-right: 12px; }
table.clients .plan-row .plan-name { padding-left: 34px; }
/* The New and Takeover rows use the same two equal columns, so the buttons line up */
.plan-buttons { margin: 0; display: grid; grid-template-columns: repeat(2, 256px); gap: 8px; }
.plan-buttons .button { text-align: center; white-space: nowrap; }
.page-head h2 { margin: 0; }
.intake-import .topic-row { border-top: none; padding: 0; }

/* Autosave (G6), warnings (G5), back links */
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.save-status { font-size: 12.5px; color: var(--muted); }
.save-status.saved { color: var(--saved); }
.save-status.pending { color: var(--muted); font-style: italic; }
.save-status.error { color: var(--error-strong); font-weight: 600; }
.warning-text { color: var(--danger); font-size: 12.5px; margin-top: 4px; flex-basis: 100%; }
.field-messages:empty { display: none; }
.field-messages { flex-basis: 100%; }
.back-row { margin: 0 0 6px; }
.back-link { font-size: 13px; color: var(--label); text-decoration: none; font-weight: 600; }
.back-link:hover { text-decoration: underline; }
.search-box { width: 100%; max-width: 420px; margin: 0 0 14px; height: 38px; }

/* Deleting (CL5) */
.inline-form { display: inline; margin: 0; }
.button.danger { background: var(--surface); color: var(--danger); border: 1px solid var(--danger); }
.button.danger:hover { background: var(--danger); color: var(--surface); }

/* Intake form drag and drop (CL2) */
.drop-zone { border: 2px dashed var(--sage); border-radius: 10px; padding: 22px; text-align: center;
  color: var(--label); background: var(--page); margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.drop-zone span { font-size: 13px; color: var(--muted); }
.drop-zone.active { border-color: var(--gold); background: var(--gold-light); }

/* Takeover plans and restating (T1-T5) */
.tag { display: inline-block; vertical-align: middle; font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 600;
       padding: 2px 8px; border-radius: 999px; margin-left: 8px; }
.tag.prior { background: var(--gold-light); color: var(--tag-text); border: 1px solid var(--gold); }
.restate-links { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.restate-links a { color: var(--label); font-weight: 600; }
.date-kind { color: var(--muted); font-size: 12px; }

/* Plan buttons (G7): Edit is the main action; PDFs is a drop-down menu */
.row-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; white-space: nowrap; }
details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; user-select: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu[open] > summary { background: var(--gold-light); }
.menu-arrow { font-size: 11px; margin-left: 4px; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 230px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 0;
  box-shadow: 0 8px 24px var(--shadow);
}
.menu-list a { display: block; padding: 7px 16px; color: var(--label); text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.menu-list a:hover, .menu-list a:focus { background: var(--gold-light); outline: none; }
.menu-list a.menu-strong { font-weight: 600; }
.menu-list hr { border: none; border-top: 1px solid var(--line); margin: 5px 0; }

/* Plan groups (G8): Current Docs, Prior Digests, Prior TPA. The tables share column widths
   so they line up with each other. */
.plan-group-title { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--heading); margin: 22px 0 8px; }
table.plan-group { table-layout: fixed; }
table.plan-group col.col-name { width: 31%; }
table.plan-group col.col-type { width: 13%; }
table.plan-group col.col-number { width: 12%; }
table.plan-group col.col-date { width: 18%; }
table.clients .group-note td { padding-top: 6px; padding-bottom: 8px; }
table.clients .group-note .plan-name { padding-left: 34px; }
table.clients .group-note a { color: var(--label); font-size: 12.5px; }

/* G10: the Template list at the top of a plan page */
.template-picker {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 10px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.template-picker label { font-size: 13px; font-weight: 600; color: var(--label); }
.template-picker select {
  min-width: 260px; height: 36px; padding: 6px 10px; font-family: var(--sans); font-size: 14px;
  color: var(--text); background: var(--surface); border: 1px solid var(--field-border); border-radius: 6px;
  box-sizing: border-box; cursor: pointer;
}
.template-picker .muted { margin-left: auto; }

/* G11: editing a dropdown list on the Admin page */
.list-editor table.list-rows { width: 100%; border-collapse: collapse; }
.list-editor td { padding: 6px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.list-editor td.list-text { width: 100%; padding-right: 14px; }
.list-editor td.list-actions { white-space: nowrap; }
.list-editor td.list-actions .button { margin-right: 4px; }
.list-editor input[readonly] { background: var(--readonly); color: var(--muted); }
.list-editor .list-buttons { display: flex; justify-content: space-between; margin: 14px 0 0; }
.list-editor td.drag-cell { width: 1%; padding-right: 10px; }
.list-editor .drag-handle {
  display: inline-block; padding: 4px 6px; color: var(--sage); font-size: 18px; line-height: 1; letter-spacing: -1px;
  cursor: grab; user-select: none;
}
.list-editor .drag-handle:hover { color: var(--label); }
.list-editor tr.dragging { opacity: 0.45; }
.list-editor tr.dragging td { background: var(--gold-light); }

/* Dark mode: the Theme menu in the top bar */
.site-header .theme-menu > summary { color: var(--nav-text); font-size: 13px; letter-spacing: 0.04em; cursor: pointer; }
.site-header .theme-menu > summary:hover, .site-header .theme-menu[open] > summary { color: var(--gold); background: none; }
.theme-menu .menu-list { min-width: 210px; margin: 0; }
.theme-menu .menu-list button {
  display: block; width: 100%; text-align: left; padding: 7px 16px; border: none; background: none;
  color: var(--label); font-family: var(--sans); font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
.theme-menu .menu-list button:hover, .theme-menu .menu-list button:focus { background: var(--gold-light); outline: none; }
.theme-menu .menu-list button.chosen { font-weight: 600; }
.theme-menu .menu-list button.chosen::before { content: "✓ "; color: var(--gold); }

/* EL1: City, State, ZIP on one row */
.topic-controls > input.plain.state-box { flex: none; width: 70px; }
.topic-controls > input.plain.zip { flex: none; width: 110px; }
/* EL3: Admin -> Engagement letters */
.letter-fees .money input { width: 110px; }
.letter-fees td { vertical-align: top; }
.signer-rows { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.signer-rows td { padding: 4px 0; }
.signer-rows .add-user input.plain { width: 260px; }
.placeholder-list { margin-top: 16px; }
.placeholder-list summary { cursor: pointer; color: var(--label); font-weight: 600; margin-bottom: 8px; }
code { font-size: 12.5px; }
.signer-rows .signer-name { display: inline-block; min-width: 220px; font-weight: 600; color: var(--label); }
.signer-add select { height: 36px; min-width: 260px; }
/* Client shortcuts (EL5): equal buttons in one row; a button inside a form fills its grid cell */
.shortcut-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: -6px 0 18px; }
.shortcut-row > .button, .shortcut-row > form { width: 256px; margin: 0; }
.shortcut-row .button, .plan-buttons form .button { text-align: center; white-space: nowrap; box-sizing: border-box; }
.shortcut-row form .button, .plan-buttons form .button { width: 100%; }
.shortcut-row > .button { width: 256px; }
table.engagement-letters { margin-bottom: 26px; }
.letters-head { margin-top: 30px; }
table.engagement-letters .year { text-align: center; }
/* EL6: a two-plan letter is two lines joined by a gold bar on the left and a dashed line between them */
table.engagement-letters tbody.letter:hover td { background: var(--surface-alt); }
table.engagement-letters tbody.two-plans td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
table.engagement-letters tr.second-plan td { border-top: 1px dashed var(--line); padding-top: 4px; }
table.engagement-letters tbody.two-plans > tr:first-child > td { padding-bottom: 4px; }
table.engagement-letters td[rowspan] { vertical-align: middle; }
.plan-buttons form { margin: 0; }

/* Every drop-down and file chooser matches the theme (light and dark), not just those inside form rows */
select {
  font-family: var(--sans); font-size: 14px; color: var(--text); background: var(--surface);
  border: 1px solid var(--field-border); border-radius: 6px; height: 36px; padding: 6px 10px; box-sizing: border-box;
}
input[type=file] { font-family: var(--sans); font-size: 13px; color: var(--muted); }
input[type=file]::file-selector-button {
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--label); background: var(--surface);
  border: 1px solid var(--gold); border-radius: 6px; padding: 6px 14px; margin-right: 10px; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--gold-light); }
.hint-inline a, .muted a { color: var(--label); }
.title-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.title-form input.plain { width: 150px; height: 30px; font-size: 13px; }
/* Users page: room for all its columns; short cells stay on one line */
body.wide main, body.wide .site-header .inner { max-width: 1400px; }
table.users td, table.users th { white-space: nowrap; }
.topic-controls > input.plain.year-other { flex: none; width: 76px; text-align: left; }
input[type=checkbox]:disabled { opacity: 0.55; cursor: not-allowed; }
table.users th.check-col, table.users td.check-col { text-align: center; }
.title-form input.plain.credentials { width: 100px; }
/* The gear in the top bar: each person's Settings */
.site-header .settings-link { display: inline-flex; align-items: center; color: var(--nav-text); }
.site-header .settings-link:hover { color: var(--gold); }
table.users td.actions { white-space: normal; width: 1%; }
.users .actions form { display: block; margin: 0 0 4px; }
.users .actions form:last-child { margin-bottom: 0; }
.users .actions .button { width: 100%; box-sizing: border-box; white-space: nowrap; }
.title-form input.plain { width: 130px; }
.title-form input.plain.credentials { width: 90px; }
/* CL7: a new intake form vs. what's saved, box by box */
table.intake-compare { margin: 12px 0 16px; }
table.intake-compare th.check-col, table.intake-compare td.check-col { text-align: center; width: 1%; white-space: nowrap; }
table.intake-compare tr.different td { font-weight: 600; }
table.intake-compare tr.different td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.intake-compare-actions { display: flex; gap: 10px; }
/* G19: the Microsoft sign-in secret's expiry date on the Admin page, and its how-to */
/* G22: the Admin menu: tiles grouped by category, each opening its own page */
.admin-group { font-size: 15px; margin: 22px 0 10px; color: var(--heading); }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.admin-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; }
a.admin-tile:hover { border-color: var(--gold); }
.admin-tile h3 { margin: 0; font-size: 16px; color: var(--heading); }
.admin-tile p { margin: 0; font-size: 13px; }
.admin-tile .tile-status { margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--label); font-weight: 600; }
.admin-tile .tile-warning { color: var(--danger); }
.admin-tile .tile-buttons { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; }
/* G21: Admin -> File names: a box per download, clickable fields under it, and an example */
.names-head { margin-bottom: 4px; }
.name-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.name-row label { font-weight: 600; font-size: 13.5px; }
.name-row .name-fields, .name-row .name-example, .name-row .field-messages { grid-column: 2; }
.name-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--field-border); background: var(--surface); color: var(--label); cursor: pointer; }
.chip:hover { border-color: var(--gold); color: var(--heading); }
.name-example { font-size: 12.5px; }
.name-example span { color: var(--text); }
@media (max-width: 700px) { .name-row { grid-template-columns: 1fr; } .name-row .name-fields, .name-row .name-example, .name-row .field-messages { grid-column: 1; } }
.secret-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; }
.secret-form label { font-weight: 600; font-size: 13.5px; }
.secret-form input[type=date] { width: 170px; }
.secret-form .field-messages { flex-basis: 100%; }
.secret-missing { color: var(--tag-text); background: var(--gold-light); border: 1px solid var(--gold);
  border-radius: 8px; padding: 6px 12px; font-size: 13.5px; }
.secret-help ol { padding-left: 22px; line-height: 1.7; }
.secret-warning a { font-weight: 600; color: inherit; }
/* G18: each person's Title / Credentials on the Users page say "Saving…" / "Saved" beside them */
.title-form .row-status { min-width: 52px; font-size: 12px; }
/* G17: Created ... · Last changed ... under a page's title, and the Last Changed cell in lists */
.changed-line { color: var(--muted); font-size: 12.5px; margin: -6px 0 12px; }
.changed-cell { font-size: 13px; white-space: nowrap; }
.changed-cell .changed-by { color: var(--muted); font-size: 12px; }
table.templates td.changed-cell { color: var(--muted); }
/* CL6: "may already be a client" after an import, and the note under Company Name / EIN while typing */
table.duplicates { margin: 14px 0 18px; }
table.duplicates td.actions { text-align: right; width: 1%; }
.duplicate-choice { display: flex; align-items: center; gap: 12px; }
.duplicate-note { flex-basis: 100%; font-size: 13px; color: var(--tag-text); background: var(--gold-light);
  border: 1px solid var(--gold); border-radius: 8px; padding: 4px 10px; margin-top: 6px; }
.duplicate-note a { color: var(--tag-text); font-weight: 600; }
/* Users page: email under the name, and the tick boxes stacked in one Permissions column (G16) */
.users .person-email { color: var(--muted); font-size: 13px; }
.users .permission { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.9; }
.users .permission form { margin: 0; display: flex; }
.users td.permissions .hint-inline { margin: -3px 0 2px 21px; font-size: 12px; }
/* EL5: the Missing note on a letter: each item a small tag */
.missing-details .missing-item { display: inline-block; padding: 1px 9px; margin: 2px 3px; border: 1px solid var(--gold); border-radius: 999px; font-size: 12.5px; }
.missing-details .missing-item a { color: var(--label); }
.missing-details .hint-inline { margin-left: 8px; }
/* EL6: Plan Type pills are tick boxes (a 401(k) type and/or a Cash Balance type) but look like the other pills */
.radios.pill-checks label:has(input[type=checkbox]) {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; margin: 0;
  border: 1px solid var(--field-border); border-radius: 999px; background: var(--surface);
  color: var(--label); font-size: 13px; cursor: pointer; user-select: none;
}
.radios.pill-checks label:has(input[type=checkbox]):hover { border-color: var(--sage); }
.radios.pill-checks label:has(input[type=checkbox]:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.radios.pill-checks input[type=checkbox] { width: 14px; height: 14px; }
.radios.pill-checks input[type=checkbox]:checked { background: var(--radio-dot); border-color: var(--radio-dot); }
.radios.plan-type-grid { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; }
.radios.plan-type-grid label:has(input[type=checkbox]) { justify-content: flex-start; }