/* Shared readable type scale and two complete color palettes. */
:root {
  color-scheme:light;
  --ink:#172f3d; --teal:#215b4a; --muted:#354f61;
  --paper:#f4f6f2; --surface:#ffffff; --surface-soft:#edf3e7;
  --surface-alt:#f6f8f3; --input:#ffffff; --line:#cbd7cc;
  --accent:#315d35; --accent-soft:#e5efd9; --accent-line:#7f9d6e;
  --primary:#285747; --primary-hover:#1c4638; --on-primary:#ffffff;
  --red:#a4312d; --danger-soft:#fff0ed; --danger-line:#c78a80;
  --sidebar:#193f3b; --sidebar-ink:#f2f7ee; --sidebar-muted:#d0dfd2;
  --sidebar-hover:#2e534a; --sidebar-selected:#dcebbe;
  --overlay:#fffffff2; --chart-track:#e9efdf; --chart-fill:#668d4f;
  --blue-soft:#eaf0f6; --blue-ink:#294f70; --sand-soft:#f6edda; --sand-ink:#70551c;
  --warning-soft:#fff2d2; --warning-ink:#70530d;
  font-size:16px;
}
:root[data-theme=dark] {
  color-scheme:dark;
  --ink:#edf4fb; --teal:#b5d99b; --muted:#c0cfde;
  --paper:#101a24; --surface:#192736; --surface-soft:#23364a;
  --surface-alt:#1e3041; --input:#122232; --line:#445a70;
  --accent:#d0e8b8; --accent-soft:#2b4339; --accent-line:#8cb881;
  --primary:#b6d896; --primary-hover:#c9e5ad; --on-primary:#11271b;
  --red:#ffb8af; --danger-soft:#40282d; --danger-line:#bc7f7c;
  --sidebar:#0b202b; --sidebar-ink:#f3f8fc; --sidebar-muted:#c4d6df;
  --sidebar-hover:#284453; --sidebar-selected:#e0f0c7;
  --overlay:#192736f2; --chart-track:#33485b; --chart-fill:#b0d48d;
  --blue-soft:#263f57; --blue-ink:#c0ddfa; --sand-soft:#443c29; --sand-ink:#f7dfaa;
  --warning-soft:#443a25; --warning-ink:#f3dda6;
  --shadow:0 8px 32px #00000025;
}
body { background:var(--paper); color:var(--ink); font-size:16px; line-height:1.7; }
button,input,textarea,select { font-size:16px; }
input,textarea,select { background:var(--input); color:var(--ink); border-color:var(--line); }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
input:focus,textarea:focus,select:focus { border-color:var(--accent-line); box-shadow:0 0 0 3px #7f9d6e35; }
input:disabled,textarea:disabled,select:disabled { background:var(--surface-alt); color:var(--ink); opacity:1; -webkit-text-fill-color:var(--ink); }
input[type=checkbox],input[type=radio] { width:21px; height:21px; accent-color:var(--primary); }
button:disabled { opacity:.7; }
.sidebar { background:var(--sidebar); color:var(--sidebar-ink); }
.brand { font-size:27px; }
.brand:hover { color:var(--sidebar-ink); }
.brand-sub { font-size:13px; color:var(--sidebar-muted); letter-spacing:3px; }
.workspace-label,.nav-label,.sidebar-bottom,.sidebar-bottom small { color:var(--sidebar-muted); }
.workspace-label { font-size:14px; margin:30px 10px 18px; }
.nav-label { font-size:12px; letter-spacing:1.5px; }
.nav-item { font-size:16px; color:var(--sidebar-muted); }
.nav-item:hover,.nav-item.active { background:var(--sidebar-hover); color:var(--sidebar-selected); }
.nav-count { font-size:14px; }
.sidebar-footer { margin-top:auto; padding-top:30px; }
.sidebar-bottom { margin-top:0; padding:18px 10px 0; font-size:14px; }
.sidebar-bottom small { font-size:12px; letter-spacing:.6px; }
.theme-switch { display:flex; gap:4px; background:#ffffff0c; padding:5px; border:1px solid #b8d0c055; border-radius:10px; }
.theme-button { flex:1; border:0; border-radius:7px; background:transparent; color:var(--sidebar-ink); padding:10px 8px; font-size:15px; white-space:nowrap; }
.theme-button:hover { background:var(--sidebar-hover); }
.theme-button.active { background:#d9e9b1; color:#163b2a; font-weight:700; }
:root[data-theme=dark] .theme-button.active { background:#b7d6e8; color:#102b3c; }
.topbar { color:var(--muted); background:var(--surface-alt); border-color:var(--line); font-size:15px; min-height:85px; height:auto; padding-top:15px; padding-bottom:15px; gap:16px; }
.topbar-right { gap:18px; flex-shrink:0; }
#breadcrumb { overflow-wrap:anywhere; }
.slash { color:var(--muted); }
.privacy-label { font-size:14px; }
.account { color:var(--ink); font-size:16px; }
.avatar { background:var(--accent-soft); color:var(--accent); font-size:15px; width:36px; height:36px; }
.eyebrow { font-size:14px; color:var(--muted); }
.page-heading { font-size:35px; }
.page-intro { font-size:17px; color:var(--muted); }
.stat-card,.survey-card,.question-nav,.question,.identity-card,.intro-card,.chart-card,.users-table,.danger-zone,.success-card { background:var(--surface); border-color:var(--line); }
.stat-card { padding:21px; min-width:0; }
.stat-label { font-size:15px; color:var(--muted); line-height:1.7; }
.stat-number { font-size:32px; }
.stat-icon,.card-icon { background:var(--surface-soft); color:var(--accent); }
.card-icon.blue { background:var(--blue-soft); color:var(--blue-ink); }
.card-icon.sand { background:var(--sand-soft); color:var(--sand-ink); }
.section-title { font-size:21px; }
.tiny-counter { font-size:14px; background:var(--accent-soft); color:var(--accent); }
.filters { background:var(--surface-soft); flex-wrap:wrap; }
.filter { color:var(--muted); font-size:15px; }
.filter.active { background:var(--surface); color:var(--ink); }
.survey-card h3 { font-size:21px; line-height:1.65; }
.survey-card:hover { border-color:var(--accent-line); }
.card-description { font-size:16px; line-height:1.85; color:var(--muted); }
.card-meta { font-size:14px; color:var(--muted); flex-wrap:wrap; gap:8px; }
.card-bottom { border-color:var(--line); gap:12px; flex-wrap:wrap; }
.card-bottom span { color:var(--muted); font-size:14px; }
.card-action { color:var(--accent); font-size:16px; white-space:nowrap; min-height:36px; }
.tag { font-size:14px; padding:5px 10px; background:var(--surface-soft); color:var(--muted); }
.tag.submitted { background:var(--accent-soft); color:var(--accent); }
.tag.draft,.tag.editing { background:var(--warning-soft); color:var(--warning-ink); }
.mini-progress { background:var(--chart-track); height:6px; }
.mini-progress i { background:var(--chart-fill); }
.notice { background:var(--accent-soft); color:var(--accent); font-size:16px; }
.notice strong { color:var(--accent); }
.notice p { font-size:15px; }
.page-footer { color:var(--muted); font-size:14px; }
.btn { font-size:16px; color:var(--ink); background:var(--surface); border-color:var(--line); min-height:44px; }
.btn:hover { background:var(--surface-soft); }
.btn.primary { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.btn.primary:hover { background:var(--primary-hover); }
.btn.soft { background:var(--accent-soft); border-color:var(--accent-soft); color:var(--accent); }
.btn.danger { color:var(--red); border-color:var(--danger-line); }
.btn.danger.primary { background:var(--danger-soft); color:var(--red); border-color:var(--danger-line); }
.btn.small { font-size:14px; min-height:38px; }
.loading,.empty { color:var(--muted); font-size:16px; }
.empty { background:var(--surface); border-color:var(--line); }
.modal { color:var(--ink); background:var(--surface); border-color:var(--line); }
.modal::backdrop { background:#0b202b99; }
.modal h2 { font-size:27px; }
.modal p { font-size:16px; color:var(--muted); line-height:1.9; }
.modal .eyebrow { font-size:13px; color:var(--muted); }
.form-label { font-size:16px; }
.modal-bottom { color:var(--muted); font-size:14px; }
.password-explanation { background:var(--accent-soft); color:var(--ink)!important; font-size:15px!important; }
.first-visit { display:block; margin-top:14px; padding:9px 0; background:transparent; border:0; color:var(--teal); font-size:16px; font-weight:700; text-decoration:underline; text-underline-offset:4px; text-align:left; }
.first-visit:hover { color:var(--ink); }
.field-error { color:var(--red); font-size:15px; }
.toast { color:var(--on-primary); background:var(--primary); font-size:16px; }
.toast.error { color:var(--red); background:var(--danger-soft); border:1px solid var(--danger-line); }
.back-link { color:var(--muted); font-size:16px; }
.survey-heading h1 { font-size:30px; }
.survey-heading .subline { color:var(--muted); font-size:15px; }
.survey-layout { grid-template-columns:220px minmax(0,1fr); }
.progress-label,.save-indicator { font-size:15px; color:var(--accent); }
.progress-track { background:var(--chart-track); height:8px; }
.progress-track i { background:var(--chart-fill); }
.q-anchor { border-color:var(--line); background:var(--surface); color:var(--muted); font-size:14px; min-height:36px; padding:4px; }
.q-anchor.done { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); }
.small-note { color:var(--muted); font-size:14px; }
.save-indicator { border-color:var(--line); }
.save-indicator.error { color:var(--red); }
.identity-card { background:var(--accent-soft); }
.identity-card .avatar { background:var(--surface); color:var(--accent); }
.identity-card strong { font-size:21px; }
.identity-card small,.locked-tag { color:var(--muted); font-size:14px; }
.intro-card summary { font-size:17px; color:var(--ink); }
.intro-card p { font-size:16px; color:var(--muted); }
.survey-introduction { padding:29px 30px; border:2px solid var(--accent-line); background:var(--surface-soft); }
.survey-introduction h2 { margin:0 0 20px; font-size:24px; line-height:1.6; }
.survey-introduction p { font-size:18px; color:var(--ink); line-height:2; margin:18px 0 0; }
.survey-introduction strong { font-weight:700; }
.section-heading { font-size:21px; }
.question-number { background:var(--accent-soft); color:var(--accent); font-size:14px; min-height:32px; }
.question h3 { font-size:19px; line-height:1.85; }
.reset-question { font-size:14px; color:var(--muted); padding:5px; }
.reset-question:hover { color:var(--red); }
.hint { color:var(--muted); font-size:16px; }
.field+.field { border-color:var(--line); }
.field-title { color:var(--ink); font-size:16px; font-weight:600; }
.field-hint { color:var(--muted); font-size:14px; }
.choice { color:var(--ink); border-color:var(--line); font-size:16px; line-height:1.85; padding:13px 14px; }
.choice:has(input:checked) { color:var(--ink); background:var(--accent-soft); border-color:var(--accent-line); }
.choice small { color:var(--muted); font-size:14px; }
.text-count { font-size:14px; color:var(--muted); }
.data-table { font-size:15px; }
.data-table th { background:var(--surface-soft); color:var(--ink); }
.data-table td,.data-table th { border-color:var(--line); }
.data-table .tiny { color:var(--muted); font-size:14px; }
.data-table tfoot { background:var(--surface-alt); }
.inline-check { color:var(--ink); font-size:16px; }
.field.invalid { border-color:var(--red); }
.step-row span { color:var(--muted); font-size:15px; }
.form-actions { background:var(--overlay); border-color:var(--line); }
.success-card { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }
.success-card strong { font-size:20px; }
.success-card p { font-size:15px; }
.task-toggle { border-color:var(--accent-line); }
.task-toggle small { color:var(--muted); font-size:15px; }
.admin-controls select,.search-input { font-size:16px; }
.scope-note { font-size:16px; color:var(--muted); }
.chart-card h3 { font-size:19px; }
.chart-field+.chart-field { border-color:var(--line); }
.chart-title { font-size:17px; }
.bar-row { font-size:15px; grid-template-columns:minmax(130px,42%) 1fr 105px; }
.bar-label,.bar-value { color:var(--muted); }
.bar-value { font-size:14px; }
.bar-track { background:var(--chart-track); height:19px; }
.bar-fill { background:var(--chart-fill); }
.chart-footnote { color:var(--muted); font-size:14px; }
.donut-center small { color:var(--muted); font-size:14px; }
.legend { font-size:15px; }
.raw-answers { color:var(--muted); font-size:15px; }
.raw-entry,.answer-block { background:var(--surface-alt); color:var(--ink); font-size:16px; }
.raw-entry strong { font-size:16px; color:var(--ink); }
.answer-block strong { font-size:17px; }
.answer-block p { font-size:16px; color:var(--ink); }
.account-code { display:block; font-size:14px; font-weight:400; color:var(--muted); margin-top:4px; overflow-wrap:anywhere; }
.raw-entry .account-code { display:inline; margin-left:8px; }
.danger-zone h3 { font-size:20px; color:var(--red); }
.danger-zone p { font-size:16px; color:var(--muted); }
.meta-line { font-size:14px; color:var(--muted); }
.tenure-inputs { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
.tenure-unit { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:18px; font-weight:600; }
.tenure-unit input { width:105px; min-width:0; text-align:center; font-size:20px; font-variant-numeric:tabular-nums; }
.tenure-total { color:var(--accent); font-size:17px; }
.tenure-legacy { padding:12px 16px; background:var(--accent-soft); color:var(--ink); border-radius:10px; font-size:16px; overflow-wrap:anywhere; }
.tenure-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:12px; margin:18px 0; }
.tenure-summary>div { padding:16px; background:var(--surface-alt); border:1px solid var(--line); border-radius:12px; }
.tenure-summary span { display:block; color:var(--muted); font-size:15px; }
.tenure-summary strong { display:block; margin-top:6px; color:var(--ink); font-size:20px; overflow-wrap:anywhere; }
.error-panel { background:var(--danger-soft); border-color:var(--danger-line); color:var(--red); }
.hero-symbol .sheet { background:var(--accent-soft); border-color:var(--line); }
.hero-symbol .sheet.front { background:var(--surface); }
.sheet i { background:var(--accent-line); }
.sheet .check { background:var(--accent-soft); border-color:var(--paper); color:var(--accent); }
@media(max-width:1200px) {
  .survey-layout { grid-template-columns:185px minmax(0,1fr); }
  .stat-card { padding:18px; }
}
@media(max-width:850px) {
  .sidebar { flex-wrap:wrap; gap:14px; }
  .sidebar-footer { margin:0; padding:0; flex:0 0 100%; }
  .theme-switch { max-width:250px; }
  .sidebar-bottom { display:none; }
  .brand { font-size:22px; }
  .brand-sub { font-size:12px; }
  .nav-item { font-size:15px; }
  .survey-layout { display:block; }
  .topbar { min-height:65px; }
  .page-intro { font-size:16px; }
}
@media(max-width:580px) {
  .sidebar { padding:18px; align-items:flex-start; }
  #main-nav { width:100%; margin:0; gap:8px; flex-wrap:wrap; }
  .nav-item { width:auto; font-size:15px; padding:10px 13px; }
  .sidebar-footer { flex:0 0 100%; }
  .theme-switch { max-width:260px; }
  .theme-button { font-size:15px; padding:8px; }
  .topbar { padding:13px 18px; align-items:flex-start; font-size:14px; }
  .topbar-right { min-width:0; }
  .account { font-size:15px; gap:7px; }
  .avatar { width:31px; height:31px; flex-shrink:0; }
  .page-heading { font-size:29px; }
  .eyebrow { font-size:13px; letter-spacing:1px; }
  .stat-label { font-size:14px; }
  .stat-number { font-size:30px; }
  .filter { font-size:14px; padding:8px 10px; }
  .survey-card h3 { font-size:22px; }
  .card-description { font-size:16px; }
  .card-meta,.card-bottom span { font-size:14px; }
  .notice { font-size:16px; }
  .notice p { font-size:15px; }
  .page-footer { font-size:13px; letter-spacing:0; gap:12px; }
  .modal { padding:26px 22px; }
  .modal h2 { font-size:25px; }
  .survey-heading h1 { font-size:25px; }
  .survey-introduction { padding:24px 20px; }
  .survey-introduction h2 { font-size:23px; }
  .survey-introduction p { font-size:18px; }
  .question h3 { font-size:18px; }
  .question-number { font-size:14px; }
  .question-top { gap:9px; flex-wrap:wrap; }
  .reset-question { font-size:14px; margin-left:auto; }
  .locked-tag { font-size:14px; margin-left:0; }
  .identity-card { flex-wrap:wrap; }
  .form-actions { position:static; padding:15px; margin-top:20px; }
  .form-actions>.btn,.action-right .btn { font-size:15px; min-height:42px; padding:10px 12px; }
  .action-right { width:100%; }
  .action-right .btn { flex:1; }
  .bar-row { grid-template-columns:minmax(90px,43%) 1fr 82px; font-size:15px; }
  .bar-value { font-size:14px; }
  .filters.small .filter { font-size:14px; padding:7px 9px; }
  .chart-title { flex-wrap:wrap; font-size:16px; }
  .scope-note { font-size:16px; }
  .step-row { flex-direction:column; gap:4px; }
  .step-row span { margin-top:0; font-size:15px; }
  .chart-card { padding:23px 18px; }
}