/* ==========================================================================
   Civic Light — design system for StrataOne
   Municipal/admin visual direction. Light only. No gradients, no purple.
   Layers: 1 tokens, 2 base, 3 shell, 4 nav, 5 page, 6 surfaces, 7 metrics,
           8 tables, 9 forms, 10 buttons, 11 status, 12 alerts, 13 empty,
           14 auth, 15 settings, 16 responsive, 17 print/motion.
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --civic-primary: #1F4E5F;
  --civic-primary-dark: #173B48;
  --civic-primary-soft: #E7F0F2;
  --civic-primary-softer: #F2F7F9;
  --civic-accent: #2E7D32;
  --civic-accent-soft: #E8F3E9;
  --civic-bg: #F8FAFC;
  --civic-card: #FFFFFF;
  --civic-text: #0F172A;
  --civic-muted: #64748B;
  --civic-subtle: #94A3B8;
  --civic-border: #E2E8F0;
  --civic-border-strong: #CBD5E1;
  --civic-surface-alt: #F1F5F9;
  --civic-warning: #F59E0B;
  --civic-warning-soft: #FFFBEB;
  --civic-warning-text: #92400E;
  --civic-danger: #DC2626;
  --civic-danger-soft: #FEF2F2;
  --civic-info: #0369A1;

  --civic-radius-sm: .375rem;
  --civic-radius: .5rem;
  --civic-radius-lg: .75rem;
  --civic-radius-pill: 999px;

  --civic-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --civic-shadow: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
  --civic-shadow-lg: 0 8px 24px rgba(15, 23, 42, .09);

  --civic-topbar-h: 3.75rem;
  --civic-sidebar-w: 16.5rem;
  --civic-focus-ring: 0 0 0 .2rem rgba(31, 78, 95, .25);

  --civic-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 2. Base --------------------------------------------------------------- */
html,
body {
  background: var(--civic-bg);
  color: var(--civic-text);
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--civic-font);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--civic-text);
  letter-spacing: -.01em;
}

a {
  color: var(--civic-primary);
  text-underline-offset: .15em;
}

a:hover {
  color: var(--civic-primary-dark);
}

hr {
  background-color: var(--civic-border);
  border: 0;
  height: 1px;
  opacity: 1;
}

code, kbd, samp {
  font-size: .875em;
}

kbd {
  background: var(--civic-surface-alt);
  border: 1px solid var(--civic-border);
  border-radius: var(--civic-radius-sm);
  color: var(--civic-text);
  padding: .1rem .35rem;
}

:focus-visible {
  outline: 2px solid var(--civic-primary);
  outline-offset: 2px;
}

.text-muted {
  color: var(--civic-muted) !important;
}

/* Skip link */
.civic-skip-link {
  background: var(--civic-primary);
  border-radius: 0 0 var(--civic-radius) 0;
  color: #fff;
  left: 0;
  padding: .65rem 1rem;
  position: absolute;
  top: 0;
  transform: translateY(-120%);
  transition: transform .15s ease-in-out;
  z-index: 1080;
}

.civic-skip-link:focus {
  color: #fff;
  transform: translateY(0);
}

/* 3. Shell -------------------------------------------------------------- */
.civic-navbar {
  background: var(--civic-card);
  border-bottom: 1px solid var(--civic-border);
  box-shadow: var(--civic-shadow-sm);
  min-height: var(--civic-topbar-h);
  padding-bottom: 0;
  padding-top: 0;
  z-index: 1030;
}

.civic-brand {
  align-items: center;
  color: var(--civic-primary);
  display: inline-flex;
  font-weight: 700;
  gap: .55rem;
  letter-spacing: -.015em;
}

.civic-brand:hover {
  color: var(--civic-primary-dark);
}

.civic-brand-mark {
  align-items: center;
  background: var(--civic-primary);
  border-radius: var(--civic-radius-sm);
  color: #fff;
  display: inline-flex;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.civic-brand-mark svg {
  height: 1.05rem;
  width: 1.05rem;
}

.civic-shell {
  display: grid;
  grid-template-columns: var(--civic-sidebar-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--civic-topbar-h));
}

.civic-sidebar {
  background: var(--civic-card);
  border-right: 1px solid var(--civic-border);
  max-height: calc(100vh - var(--civic-topbar-h));
  overflow-y: auto;
  padding: 1rem .75rem 2rem;
  position: sticky;
  top: var(--civic-topbar-h);
}

.civic-main {
  min-width: 0;
  padding: 1.75rem;
}

.civic-main > .civic-main-inner {
  margin: 0 auto;
  max-width: 1320px;
}

.civic-footer {
  border-top: 1px solid var(--civic-border);
  color: var(--civic-muted);
  font-size: .8125rem;
  margin-top: 2.5rem;
  padding-top: 1rem;
}

/* 4. Navigation --------------------------------------------------------- */
.civic-nav-section {
  color: var(--civic-subtle);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  margin: 1.25rem .75rem .4rem;
  text-transform: uppercase;
}

.civic-nav-section:first-child {
  margin-top: .25rem;
}

.civic-sidebar .nav-link,
.manage-nav .nav-link {
  align-items: center;
  border-radius: var(--civic-radius-sm);
  color: #334155;
  display: flex;
  font-size: .9125rem;
  font-weight: 500;
  gap: .625rem;
  line-height: 1.3;
  padding: .55rem .75rem;
  transition: background-color .12s ease-in-out, color .12s ease-in-out;
}

.civic-sidebar .nav-link:hover,
.manage-nav .nav-link:hover {
  background: var(--civic-primary-softer);
  color: var(--civic-primary);
}

.civic-sidebar .nav-link.active,
.manage-nav .nav-link.active,
.manage-nav .nav-pills .nav-link.active {
  background: var(--civic-primary-soft);
  box-shadow: inset 3px 0 0 var(--civic-primary);
  color: var(--civic-primary);
  font-weight: 600;
}

.civic-sidebar .nav-link .nav-icon,
.manage-nav .nav-link .nav-icon {
  color: var(--civic-subtle);
  flex: 0 0 auto;
}

.civic-sidebar .nav-link:hover .nav-icon,
.civic-sidebar .nav-link.active .nav-icon,
.manage-nav .nav-link:hover .nav-icon,
.manage-nav .nav-link.active .nav-icon {
  color: currentColor;
}

.nav-icon {
  align-items: center;
  display: inline-flex;
  height: 1.125rem;
  justify-content: center;
  width: 1.125rem;
}

.nav-icon svg {
  height: 100%;
  width: 100%;
}

.civic-nav-badge {
  background: var(--civic-surface-alt);
  border-radius: var(--civic-radius-pill);
  color: var(--civic-muted);
  font-size: .6875rem;
  font-weight: 600;
  margin-left: auto;
  padding: .1rem .45rem;
}

/* Top-bar account menu */
.civic-usermenu .dropdown-toggle {
  align-items: center;
  border-radius: var(--civic-radius-pill);
  color: var(--civic-text);
  display: flex;
  gap: .5rem;
  padding: .3rem .6rem .3rem .3rem;
  text-decoration: none;
}

.civic-usermenu .dropdown-toggle:hover,
.civic-usermenu .dropdown-toggle:focus {
  background: var(--civic-surface-alt);
}

.civic-avatar {
  align-items: center;
  background: var(--civic-primary-soft);
  border-radius: 50%;
  color: var(--civic-primary);
  display: inline-flex;
  font-size: .8125rem;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  text-transform: uppercase;
  width: 2rem;
}

.civic-usermenu .dropdown-menu {
  border-color: var(--civic-border);
  border-radius: var(--civic-radius);
  box-shadow: var(--civic-shadow-lg);
  min-width: 15rem;
  padding: .35rem;
}

.civic-usermenu .dropdown-item {
  border-radius: var(--civic-radius-sm);
  padding: .5rem .65rem;
}

.civic-usermenu .dropdown-item:active {
  background: var(--civic-primary);
}

.civic-usermenu .dropdown-header {
  padding: .5rem .65rem;
}

.civic-usermenu form {
  margin: 0;
}

.civic-usermenu .dropdown-item-form {
  background: none;
  border: 0;
  text-align: left;
  width: 100%;
}

/* 5. Page header / toolbar ---------------------------------------------- */
.page-bar {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.page-bar h1,
.page-bar .h3 {
  margin-bottom: .25rem;
}

.page-bar .page-bar-lead {
  color: var(--civic-muted);
  margin-bottom: 0;
  max-width: 65ch;
}

.page-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.civic-breadcrumb {
  color: var(--civic-subtle);
  font-size: .8125rem;
  margin-bottom: .35rem;
}

.civic-breadcrumb a {
  color: var(--civic-muted);
  text-decoration: none;
}

.civic-breadcrumb a:hover {
  color: var(--civic-primary);
  text-decoration: underline;
}

/* Filter bar above tables */
.civic-toolbar {
  background: var(--civic-card);
  border: 1px solid var(--civic-border);
  border-radius: var(--civic-radius);
  box-shadow: var(--civic-shadow-sm);
  margin-bottom: 1rem;
  padding: .875rem 1rem;
}

.civic-search {
  position: relative;
}

.civic-search .civic-search-icon {
  color: var(--civic-subtle);
  left: .75rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.civic-search .form-control {
  padding-left: 2.25rem;
}

/* 6. Surfaces ----------------------------------------------------------- */
.civic-card,
.auth-card,
.manage-card,
.stat-panel,
.metric-card,
.app-form,
.table-shell {
  background: var(--civic-card);
  border: 1px solid var(--civic-border);
  border-radius: var(--civic-radius);
  box-shadow: var(--civic-shadow-sm);
}

.civic-card > .card-header,
.app-form > .card-header {
  background: var(--civic-card);
  border-bottom: 1px solid var(--civic-border);
  font-weight: 600;
  padding: .875rem 1.25rem;
}

.civic-card > .card-body,
.app-form > .card-body {
  padding: 1.25rem;
}

.civic-card > .card-footer,
.app-form > .card-footer {
  background: var(--civic-surface-alt);
  border-top: 1px solid var(--civic-border);
  padding: .875rem 1.25rem;
}

.civic-section-title {
  align-items: baseline;
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.civic-section-title h2 {
  margin-bottom: 0;
}

/* 7. Metrics ------------------------------------------------------------ */
.stat-panel,
.metric-card {
  display: block;
  height: 100%;
  padding: 1rem 1.125rem;
  text-decoration: none;
}

a.stat-panel,
a.metric-card {
  color: inherit;
  transition: border-color .12s ease-in-out, box-shadow .12s ease-in-out;
}

a.stat-panel:hover,
a.metric-card:hover {
  border-color: var(--civic-border-strong);
  box-shadow: var(--civic-shadow);
  color: inherit;
}

.stat-panel > span,
.metric-card > span {
  color: var(--civic-muted);
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.stat-panel > strong,
.metric-card > strong {
  color: var(--civic-text);
  display: block;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
  margin-top: .3rem;
}

.stat-panel .stat-meta,
.metric-card .stat-meta {
  color: var(--civic-subtle);
  display: block;
  font-size: .75rem;
  margin-top: .35rem;
}

.stat-panel.is-warning {
  border-color: #FDE68A;
}

.stat-panel.is-warning > strong {
  color: var(--civic-warning-text);
}

.stat-icon {
  align-items: center;
  background: var(--civic-primary-soft);
  border-radius: var(--civic-radius-sm);
  color: var(--civic-primary);
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  margin-bottom: .5rem;
  width: 2rem;
}

.stat-icon svg {
  height: 1.05rem;
  width: 1.05rem;
}

/* 8. Tables ------------------------------------------------------------- */
.table-shell {
  overflow: hidden;
}

.table-shell .table-responsive {
  border-radius: inherit;
}

.table {
  color: var(--civic-text);
  margin-bottom: 0;
}

.table thead th {
  background: var(--civic-surface-alt);
  border-bottom: 1px solid var(--civic-border);
  color: #475569;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .7rem .85rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.table tbody td {
  padding: .7rem .85rem;
  vertical-align: middle;
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--civic-border);
}

.table tbody tr:last-child > * {
  border-bottom-width: 0;
}

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--civic-primary-softer);
  background-color: var(--civic-primary-softer);
  color: var(--civic-text);
}

.table .cell-numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.table .cell-actions {
  text-align: right;
  white-space: nowrap;
}

.table .cell-actions form {
  display: inline;
}

.table .cell-actions > * + * {
  margin-left: .35rem;
}

.table .cell-primary {
  color: var(--civic-text);
  font-weight: 600;
}

.table .cell-sub {
  color: var(--civic-muted);
  display: block;
  font-size: .8125rem;
  font-weight: 400;
}

.table-footnote {
  border-top: 1px solid var(--civic-border);
  color: var(--civic-muted);
  font-size: .8125rem;
  padding: .65rem .85rem;
}

/* 9. Forms -------------------------------------------------------------- */
.app-form {
  max-width: 1100px;
}

.form-label {
  color: #334155;
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: .3rem;
}

.form-control,
.form-select {
  border-color: var(--civic-border-strong);
  color: var(--civic-text);
}

.form-control::placeholder {
  color: var(--civic-subtle);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--civic-primary);
  box-shadow: var(--civic-focus-ring);
}

.form-check-input:checked {
  background-color: var(--civic-primary);
  border-color: var(--civic-primary);
}

.form-text {
  color: var(--civic-muted);
  font-size: .8125rem;
}

.form-floating > label {
  color: var(--civic-muted);
}

.civic-fieldset {
  border: 0;
  margin: 0 0 1.5rem;
  padding: 0;
}

.civic-fieldset:last-child {
  margin-bottom: 0;
}

.civic-fieldset > legend {
  border-bottom: 1px solid var(--civic-border);
  color: var(--civic-text);
  float: none;
  font-size: .9375rem;
  font-weight: 600;
  margin-bottom: .9rem;
  padding-bottom: .5rem;
  width: 100%;
}

.civic-fieldset > legend .legend-hint {
  color: var(--civic-muted);
  display: block;
  font-size: .8125rem;
  font-weight: 400;
  margin-top: .15rem;
}

.form-check-panel {
  background: var(--civic-surface-alt);
  border: 1px solid var(--civic-border);
  border-radius: var(--civic-radius-sm);
  padding: .65rem .85rem;
}

.text-danger,
.field-validation-error,
.validation-summary-errors {
  color: var(--civic-danger) !important;
}

.validation-summary-errors {
  background: var(--civic-danger-soft);
  border: 1px solid #FECACA;
  border-radius: var(--civic-radius-sm);
  margin-bottom: 1rem;
  padding: .75rem 1rem;
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 1.15rem;
}

.validation-summary-valid {
  display: none;
}

.input-validation-error {
  border-color: var(--civic-danger);
}

.field-validation-error {
  display: block;
  font-size: .8125rem;
  margin-top: .25rem;
}

/* 10. Buttons ----------------------------------------------------------- */
.btn {
  border-radius: var(--civic-radius-sm);
  font-weight: 500;
}

.btn:focus-visible {
  box-shadow: var(--civic-focus-ring);
}

.btn-primary {
  --bs-btn-bg: var(--civic-primary);
  --bs-btn-border-color: var(--civic-primary);
  --bs-btn-hover-bg: var(--civic-primary-dark);
  --bs-btn-hover-border-color: var(--civic-primary-dark);
  --bs-btn-active-bg: var(--civic-primary-dark);
  --bs-btn-active-border-color: var(--civic-primary-dark);
  --bs-btn-disabled-bg: var(--civic-primary);
  --bs-btn-disabled-border-color: var(--civic-primary);
}

.btn-success {
  --bs-btn-bg: var(--civic-accent);
  --bs-btn-border-color: var(--civic-accent);
  --bs-btn-hover-bg: #266B29;
  --bs-btn-hover-border-color: #266B29;
}

.btn-outline-primary {
  --bs-btn-color: var(--civic-primary);
  --bs-btn-border-color: var(--civic-border-strong);
  --bs-btn-hover-bg: var(--civic-primary);
  --bs-btn-hover-border-color: var(--civic-primary);
  --bs-btn-active-bg: var(--civic-primary-dark);
  --bs-btn-active-border-color: var(--civic-primary-dark);
}

.btn-outline-secondary {
  --bs-btn-color: #475569;
  --bs-btn-border-color: var(--civic-border-strong);
  --bs-btn-hover-bg: var(--civic-surface-alt);
  --bs-btn-hover-border-color: var(--civic-border-strong);
  --bs-btn-hover-color: var(--civic-text);
  --bs-btn-active-bg: var(--civic-border);
  --bs-btn-active-color: var(--civic-text);
  --bs-btn-active-border-color: var(--civic-border-strong);
}

.btn-icon {
  align-items: center;
  display: inline-flex;
  gap: .4rem;
}

.btn-icon svg {
  height: 1rem;
  width: 1rem;
}

/* 11. Status pills ------------------------------------------------------ */
.status-pill {
  align-items: center;
  background: var(--civic-surface-alt);
  border: 1px solid var(--civic-border);
  border-radius: var(--civic-radius-pill);
  color: #475569;
  display: inline-flex;
  font-size: .75rem;
  font-weight: 600;
  gap: .35rem;
  line-height: 1.4;
  padding: .15rem .55rem;
  white-space: nowrap;
}

.status-pill::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: .4rem;
  width: .4rem;
}

.status-pill.is-active,
.status-pill.is-success {
  background: var(--civic-accent-soft);
  border-color: #C4E2C6;
  color: #1F6323;
}

.status-pill.is-pending,
.status-pill.is-warning {
  background: var(--civic-warning-soft);
  border-color: #FDE68A;
  color: var(--civic-warning-text);
}

.status-pill.is-danger {
  background: var(--civic-danger-soft);
  border-color: #FECACA;
  color: #991B1B;
}

.status-pill.is-info {
  background: var(--civic-primary-soft);
  border-color: #C9DDE3;
  color: var(--civic-primary);
}

.status-pill.is-muted::before {
  background: var(--civic-subtle);
}

.badge.text-bg-primary,
.badge.bg-primary {
  background: var(--civic-primary) !important;
}

.badge.text-bg-success,
.badge.bg-success {
  background: var(--civic-accent) !important;
}

/* 12. Alerts ------------------------------------------------------------ */
.civic-alerts {
  margin-bottom: 1.25rem;
}

.alert {
  border-radius: var(--civic-radius);
  font-size: .9375rem;
}

.alert-info {
  background: var(--civic-primary-soft);
  border-color: #C9DDE3;
  color: var(--civic-primary);
}

.alert-success {
  background: var(--civic-accent-soft);
  border-color: #C4E2C6;
  color: #1F6323;
}

.alert-warning {
  background: var(--civic-warning-soft);
  border-color: #FDE68A;
  color: var(--civic-warning-text);
}

.alert-danger {
  background: var(--civic-danger-soft);
  border-color: #FECACA;
  color: #991B1B;
}

/* 13. Empty state ------------------------------------------------------- */
.empty-state {
  background: var(--civic-card);
  border: 1px dashed var(--civic-border-strong);
  border-radius: var(--civic-radius);
  color: var(--civic-muted);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.empty-state-icon {
  align-items: center;
  background: var(--civic-surface-alt);
  border-radius: 50%;
  color: var(--civic-subtle);
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  margin-bottom: .85rem;
  width: 2.75rem;
}

.empty-state-icon svg {
  height: 1.35rem;
  width: 1.35rem;
}

.empty-state h2,
.empty-state .h4 {
  color: var(--civic-text);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: .35rem;
}

.empty-state p {
  margin: 0 auto;
  max-width: 46ch;
}

.empty-state .btn {
  margin-top: 1rem;
}

/* In-table empty state sits inside the shell rather than below it. */
.table-shell .empty-state {
  border: 0;
  border-radius: 0;
  margin: 0;
}

/* 14. Auth pages -------------------------------------------------------- */
.identity-page .civic-main {
  padding-block: 3rem;
}

.auth-wrap {
  margin: 0 auto;
  max-width: 1120px;
}

.auth-card {
  margin: 0 auto;
  max-width: 26.5rem;
  padding: 2rem;
}

.auth-card-wide {
  max-width: 44rem;
}

.auth-card h1 {
  font-size: 1.5rem;
}

.auth-brand {
  display: block;
  margin: 0 auto 1.5rem;
  text-align: center;
}

.auth-brand .civic-brand-mark {
  height: 2.5rem;
  width: 2.5rem;
}

.auth-brand .civic-brand-mark svg {
  height: 1.4rem;
  width: 1.4rem;
}

.auth-alt {
  border-top: 1px solid var(--civic-border);
  color: var(--civic-muted);
  font-size: .875rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  text-align: center;
}

/* 15. Account settings -------------------------------------------------- */
.manage-shell {
  margin: 0 auto;
  max-width: 1100px;
}

.manage-card {
  padding: 1.5rem;
}

.manage-card > h3,
.manage-card > h2 {
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
}

.manage-nav {
  position: sticky;
  top: calc(var(--civic-topbar-h) + 1.5rem);
}

.qr-panel {
  align-items: center;
  background: var(--civic-surface-alt);
  border: 1px solid var(--civic-border);
  border-radius: var(--civic-radius);
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  padding: 1.25rem;
}

.qr-panel img {
  background: #fff;
  height: 220px;
  padding: .5rem;
  width: 220px;
}

.recovery-codes {
  background: var(--civic-surface-alt);
  border: 1px solid var(--civic-border);
  border-radius: var(--civic-radius);
  display: grid;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  padding: 1rem;
}

/* Statement / definition lists */
.civic-dl {
  margin-bottom: 0;
}

.civic-dl dt {
  color: var(--civic-muted);
  font-size: .8125rem;
  font-weight: 500;
  padding-bottom: .55rem;
  padding-top: .55rem;
}

.civic-dl dd {
  border-bottom: 1px solid var(--civic-border);
  margin-bottom: 0;
  padding-bottom: .55rem;
  padding-top: .55rem;
}

.civic-dl dt:last-of-type,
.civic-dl dd:last-of-type {
  border-bottom: 0;
}

.civic-total {
  align-items: baseline;
  background: var(--civic-primary-soft);
  border-radius: var(--civic-radius);
  display: flex;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
}

.civic-total span {
  color: var(--civic-primary);
  font-weight: 600;
}

.civic-total strong {
  color: var(--civic-primary);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

/* Onboarding step rail */
.civic-steps {
  counter-reset: civic-step;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.civic-steps li {
  align-items: center;
  background: var(--civic-card);
  border: 1px solid var(--civic-border);
  border-radius: var(--civic-radius-pill);
  color: var(--civic-muted);
  counter-increment: civic-step;
  display: flex;
  font-size: .875rem;
  font-weight: 500;
  gap: .5rem;
  padding: .4rem .9rem .4rem .5rem;
}

.civic-steps li::before {
  align-items: center;
  background: var(--civic-surface-alt);
  border-radius: 50%;
  color: var(--civic-muted);
  content: counter(civic-step);
  display: inline-flex;
  font-size: .75rem;
  font-weight: 700;
  height: 1.5rem;
  justify-content: center;
  width: 1.5rem;
}

.civic-steps li.is-current {
  border-color: var(--civic-primary);
  color: var(--civic-primary);
}

.civic-steps li.is-current::before {
  background: var(--civic-primary);
  color: #fff;
}

.civic-steps li.is-done {
  border-color: #C4E2C6;
  color: #1F6323;
}

.civic-steps li.is-done::before {
  background: var(--civic-accent);
  color: #fff;
  content: "\2713";
}

/* Unit preview chips */
.unit-chip {
  background: var(--civic-surface-alt);
  border: 1px solid var(--civic-border);
  border-radius: var(--civic-radius-sm);
  color: #334155;
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  padding: .4rem .5rem;
  text-align: center;
}

/* Marketing / landing */
.civic-hero {
  background: var(--civic-card);
  border: 1px solid var(--civic-border);
  border-radius: var(--civic-radius-lg);
  box-shadow: var(--civic-shadow-sm);
  padding: 3rem 2rem;
}

.civic-hero h1 {
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

.civic-hero p.lead {
  color: var(--civic-muted);
  font-size: 1.0625rem;
  margin: 0 auto;
  max-width: 60ch;
}

.civic-eyebrow {
  color: var(--civic-primary);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.feature-card {
  background: var(--civic-card);
  border: 1px solid var(--civic-border);
  border-radius: var(--civic-radius);
  box-shadow: var(--civic-shadow-sm);
  height: 100%;
  padding: 1.5rem;
}

.feature-card .stat-icon {
  margin-bottom: .85rem;
}

.feature-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .35rem;
}

.feature-card p {
  color: var(--civic-muted);
  font-size: .9125rem;
  margin-bottom: 0;
}

/* Prose (privacy, policy copy) */
.civic-prose {
  max-width: 72ch;
}

.civic-prose h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.75rem;
}

.civic-prose h2:first-child {
  margin-top: 0;
}

.civic-prose p,
.civic-prose li {
  color: #334155;
}

/* 16. Responsive -------------------------------------------------------- */
@media (max-width: 991.98px) {
  .civic-shell {
    display: block;
  }

  .civic-sidebar {
    border-bottom: 1px solid var(--civic-border);
    border-right: 0;
    max-height: none;
    overflow: visible;
    padding: .5rem .75rem 1rem;
    position: static;
  }

  .civic-sidebar .civic-nav-section {
    margin-top: .9rem;
  }

  .civic-sidebar .nav {
    display: grid;
    gap: .25rem;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }

  .civic-nav-section {
    grid-column: 1 / -1;
  }

  .civic-main {
    padding: 1.25rem 1rem 2rem;
  }

  .identity-page .civic-main {
    padding-block: 2rem;
  }

  .manage-nav {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .page-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .page-bar-actions .btn {
    width: 100%;
  }

  .auth-card {
    padding: 1.5rem;
  }

  .civic-hero {
    padding: 2rem 1.25rem;
  }

  .table .cell-actions > * + * {
    margin-left: 0;
    margin-top: .35rem;
  }
}

/* 17. Print & motion ---------------------------------------------------- */
@media print {
  .civic-navbar,
  .civic-sidebar,
  .civic-footer,
  .page-bar-actions,
  .civic-skip-link,
  .no-print {
    display: none !important;
  }

  .civic-shell {
    display: block;
  }

  .civic-main {
    padding: 0;
  }

  .civic-card,
  .table-shell {
    border-color: #cbd5e1;
    box-shadow: none;
  }

  a[href]::after {
    content: "";
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}
.dashboard-chart { position: relative; min-height: 320px; width: 100%; }
@media (max-width: 767.98px) { .dashboard-chart { min-height: 250px; } }