:root {
  /* Firyad civic system: one navy primary, quiet blue-gray neutrals, and semantic status colors. */
  --ink: #1e2d43;
  --ink-soft: #5d6d82;
  --ink-faint: #8794a5;
  --paper: #f8fafc;
  --card: #ffffff;
  --line: #e7ecf2;
  --line-strong: #d4dee9;
  --teal: #4b78a6;
  --teal-deep: #244d75;
  --teal-pale: #eef5fb;
  --saffron: #d9933e;
  --saffron-pale: #fff5e6;
  --blue: #6f8fb9;
  --blue-pale: #eff4fb;
  --coral: #c97870;
  --shadow: 0 10px 28px rgba(44, 73, 108, .055);
  --radius: 14px;
  --font-body: 'Avenir Next', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Avenir Next', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(223, 142, 60, .55); outline-offset: 3px; }
::selection { color: #fff; background: var(--teal); }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; transform: translateY(-160%); padding: 10px 14px; color: #fff; background: var(--teal-deep); border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 5; background: var(--card); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark { display: inline-flex; align-items: flex-end; gap: 3px; width: 28px; height: 29px; padding: 3px 5px; background: var(--teal); border-radius: 8px 8px 8px 2px; transform: rotate(-2deg); }
.brand-mark span { display: block; width: 4px; border-radius: 5px 5px 1px 1px; background: #f7c76b; }
.brand-mark span:first-child { height: 9px; opacity: .72; }.brand-mark span:nth-child(2) { height: 15px; }.brand-mark span:last-child { height: 20px; background: #fff; }
.brand-wordmark { font-size: 18px; font-weight: 700; letter-spacing: -.04em; }.brand-wordmark span { color: var(--teal); }
.header-actions, .profile-chip, .connection-state { display: flex; align-items: center; }.header-actions { gap: 22px; }.connection-state { gap: 7px; color: var(--ink-faint); font-size: 12px; }.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #63a78a; box-shadow: 0 0 0 3px rgba(99,167,138,.12); }
.icon-button { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--ink-soft); background: transparent; border: 0; border-radius: 8px; }.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }.icon-button:hover { color: var(--teal); background: var(--teal-pale); }.notification-badge { position: absolute; top: 1px; right: 0; display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; color: #fff; background: var(--coral); border: 2px solid #fff; border-radius: 99px; font-size: 9px; font-weight: 700; }
.profile-chip { gap: 9px; padding: 4px 0 4px 8px; color: inherit; border: 0; background: transparent; text-decoration: none; }.profile-name { font-size: 13px; font-weight: 600; }.chevron { color: var(--ink-faint); font-size: 18px; line-height: .6; }.avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; color: #fff; border-radius: 50%; font-size: 10px; font-weight: 700; letter-spacing: -.03em; }.avatar-saffron { background: #cf7b36; }.avatar-blue { background: #5579ae; }.avatar-purple { background: #8972aa; }.avatar-green { background: #5b9179; }.avatar-more { color: var(--teal); background: var(--teal-pale); }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 48px; }.primary-nav { display: flex; align-self: stretch; gap: 26px; }.nav-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 2px; color: var(--ink-faint); background: transparent; border: 0; font-size: 12px; font-weight: 600; }.nav-tab:hover { color: var(--teal); }.nav-tab.is-active { color: var(--teal); }.nav-tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--teal); border-radius: 2px 2px 0 0; content: ''; }.nav-icon { font-size: 16px; line-height: 1; }.header-help { color: var(--ink-faint); font-size: 12px; }.text-button { padding: 0; color: var(--teal); background: transparent; border: 0; font-size: inherit; font-weight: 600; }.text-button:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }

.welcome-band { color: var(--ink); background: #edf4fb; background-image: radial-gradient(circle at 85% 40%, rgba(139,174,213,.22), transparent 29%), linear-gradient(120deg, #f2f7fc 0%, #eaf2fa 55%, #e3eef8 100%); border-bottom: 1px solid #d9e5f1; }.welcome-inner { display: flex; align-items: center; justify-content: space-between; min-height: 156px; padding-block: 31px; }.welcome-band .eyebrow { color: #58708c; }.eyebrow { margin: 0 0 7px; color: var(--teal); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }.eyebrow-divider { padding-inline: 6px; color: var(--saffron); }.welcome-band h1 { margin: 0; color: var(--ink); font: 600 clamp(27px, 3vw, 39px)/1.05 var(--font-display); letter-spacing: -.035em; }.lede { margin: 9px 0 0; color: #60738a; font-size: 14px; }.trust-note { display: flex; align-items: center; gap: 11px; max-width: 282px; padding: 13px 15px; color: #5b6e84; background: rgba(255,255,255,.55); border: 1px solid #ceddec; border-radius: 9px; font-size: 11px; }.trust-icon { display: grid; flex: 0 0 auto; place-items: center; width: 21px; height: 21px; color: #bf7826; border: 1px solid #7d9cbd; border-radius: 50%; font-size: 12px; }

.view-panel { padding-top: 44px; padding-bottom: 74px; }.view-panel[hidden] { display: none; }.section-heading { margin-bottom: 26px; }.section-heading h2, .section-heading h3, .card h3 { margin: 0; letter-spacing: -.03em; }.section-heading h2 { font: 600 29px/1.12 var(--font-display); }.muted { color: var(--ink-soft); }.section-heading .muted { margin: 7px 0 0; }.split-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 700; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }.button:hover { transform: translateY(-1px); }.button:active { transform: translateY(0); }.button-primary { color: #fff; background: var(--teal); box-shadow: 0 4px 10px rgba(23,100,87,.14); }.button-primary:hover { background: var(--teal-deep); }.button-secondary { color: var(--teal); background: #fff; border-color: var(--line-strong); }.button-secondary:hover { border-color: var(--teal); background: var(--teal-pale); }.button-dark { min-height: 39px; color: #fff; background: var(--teal-deep); }.button-quiet { min-height: 34px; color: var(--teal); background: var(--teal-pale); }.button-small { min-height: 34px; padding-inline: 12px; font-size: 11px; }

.citizen-stats, .office-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }.stat-card { min-height: 116px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }.stat-card-teal { background: var(--teal); border-color: var(--teal); }.stat-label { display: block; color: var(--ink-soft); font-size: 11px; font-weight: 600; }.stat-card-teal .stat-label, .stat-card-teal .stat-foot { color: #b8d8d0; }.stat-card strong { display: block; margin: 8px 0 2px; color: var(--ink); font: 600 29px/1 var(--font-display); letter-spacing: -.03em; }.stat-card-teal strong { color: #fff; }.stat-card strong small, .kpi-card strong small { font: 600 14px var(--font-body); }.stat-foot { color: var(--ink-faint); font-size: 11px; }.trend-up, .kpi-change.positive { color: #4d9d7d; font-weight: 700; }.stat-card-teal .trend-up { color: #f9d69e; }
.citizen-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .8fr); gap: 20px; }.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }.form-card { padding: 25px 27px 22px; }.card-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 23px; }.card-heading h3 { font-size: 19px; }.section-kicker { display: block; margin-bottom: 6px; color: var(--teal); font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }.required-note { color: var(--ink-faint); font-size: 10px; }.required-note span, label > span { color: var(--coral); }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }.field { min-width: 0; }.field-span-2 { grid-column: span 2; }.field label { display: block; margin-bottom: 6px; color: var(--ink); font-size: 11px; font-weight: 700; }.field input, .field select, .field textarea, .track-form input, .note-form textarea, .search-field input, .case-toolbar select { width: 100%; color: var(--ink); background: #fbfcfa; border: 1px solid var(--line-strong); border-radius: 7px; outline: 0; transition: border-color .15s, box-shadow .15s; }.field input, .field select, .track-form input { height: 39px; padding: 0 11px; }.field textarea { display: block; min-height: 96px; padding: 10px 11px; resize: vertical; }.field input::placeholder, .field textarea::placeholder, .track-form input::placeholder, .search-field input::placeholder { color: #a6b2ad; }.field input:focus, .field select:focus, .field textarea:focus, .track-form input:focus, .note-form textarea:focus, .search-field input:focus, .case-toolbar select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(23,100,87,.1); }.field-hint { display: block; min-height: 15px; margin-top: 5px; color: var(--ink-faint); font-size: 10px; }.char-count { text-align: right; }.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 21px; margin-top: 6px; border-top: 1px solid var(--line); }.checkbox-label { display: flex; align-items: flex-start; gap: 9px; max-width: 60%; color: var(--ink-soft); font-size: 10px; cursor: pointer; }.checkbox-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }.checkmark { position: relative; flex: 0 0 auto; width: 16px; height: 16px; margin-top: -1px; background: #fff; border: 1px solid var(--line-strong); border-radius: 4px; }.checkbox-label input:checked + .checkmark { background: var(--teal); border-color: var(--teal); }.checkbox-label input:checked + .checkmark::after { position: absolute; top: 2px; left: 5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); content: ''; }.checkbox-label input:focus-visible + .checkmark { outline: 3px solid rgba(223,142,60,.55); outline-offset: 3px; }.form-feedback { min-height: 19px; margin-top: 12px; color: var(--coral); font-size: 11px; }.form-feedback.is-success { color: #3b896b; }
.privacy-callout { padding: 11px 13px; margin: -6px 0 20px; color: #5d7189; background: var(--teal-pale); border: 1px solid #d7e5f2; border-radius: 8px; font-size: 11px; }.privacy-callout strong { color: var(--teal-deep); }.privacy-callout a, .checkbox-label a { color: var(--teal-deep); font-weight: 700; text-underline-offset: 2px; }.stack-column { display: grid; align-content: start; gap: 20px; }.tracker-card { padding: 24px 24px 20px; }.compact-heading { align-items: center; margin-bottom: 10px; }.compact-heading h3 { font-size: 18px; }.mini-icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--teal); background: var(--teal-pale); border-radius: 50%; font-size: 20px; }.tracker-card > .muted { margin: 0 0 17px; font-size: 12px; }.track-form { display: flex; gap: 8px; }.track-form input { background: #fff; font-family: var(--font-mono); font-size: 11px; }.track-result { min-height: 0; }.track-result.has-result { padding: 12px 0 2px; }.track-result-card { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--teal-pale); border-radius: 8px; }.track-result-card strong { display: block; font-size: 11px; }.track-result-card small { color: var(--ink-soft); font-size: 10px; }.result-check { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; color: var(--teal); background: #fff; border-radius: 50%; }.recent-cases { padding-top: 18px; margin-top: 16px; border-top: 1px solid var(--line); }.recent-heading { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--ink-faint); font-size: 10px; font-weight: 700; }.recent-case { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 11px 0; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #eff2ef; }.recent-case:last-child { border-bottom: 0; }.recent-case > span:nth-child(2) { min-width: 0; }.recent-case strong, .recent-case small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.recent-case strong { color: var(--ink); font-size: 11px; }.recent-case small { margin-top: 3px; color: var(--ink-faint); font-size: 10px; }.recent-case:hover strong, .recent-case.is-selected strong { color: var(--teal); }.case-status-dot { width: 7px; height: 7px; border-radius: 50%; }.status-progress { background: var(--saffron); box-shadow: 0 0 0 3px var(--saffron-pale); }.status-waiting { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-pale); }.case-arrow { color: var(--ink-faint); font-size: 17px; }.loop-card { position: relative; overflow: hidden; padding: 22px 24px; background: #eff4ed; border-color: #e1ebdf; }.loop-card::after { position: absolute; right: -45px; bottom: -60px; width: 180px; height: 180px; border: 1px solid #d6e6d3; border-radius: 50%; content: ''; }.loop-card h3 { position: relative; z-index: 1; margin-top: 17px; font: 600 17px var(--font-display); }.loop-card > p { position: relative; z-index: 1; margin: 5px 0 14px; max-width: 290px; font-size: 11px; }.loop-graphic { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; color: var(--teal); font-family: var(--font-mono); font-size: 9px; }.loop-node { display: grid; place-items: center; width: 42px; height: 42px; background: #fff; border: 1px solid #c8ddd0; border-radius: 50%; }.node-two { color: var(--saffron); border-color: #f0d2a9; }.node-three { color: var(--blue); border-color: #cad7eb; }.loop-line { position: relative; width: 25px; border-top: 1px dashed #9bbbab; }.loop-line::after { position: absolute; right: 0; top: -4px; color: #9bbbab; content: '›'; }.line-return { width: 20px; transform: rotate(180deg); }

.office-heading { margin-bottom: 27px; }.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px; margin-left: 8px; color: #438063; background: #e8f4ec; border-radius: 99px; font: 9px var(--font-body); letter-spacing: 0; text-transform: none; vertical-align: middle; }.office-actions { display: flex; gap: 8px; }.office-kpis { grid-template-columns: repeat(4, 1fr); }.kpi-card { position: relative; min-height: 151px; padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }.kpi-icon { display: grid; place-items: center; width: 29px; height: 29px; margin-bottom: 16px; border-radius: 8px; font-size: 18px; }.kpi-icon-teal { color: var(--teal); background: var(--teal-pale); }.kpi-icon-amber { color: #b4752b; background: var(--saffron-pale); }.kpi-icon-blue { color: var(--blue); background: var(--blue-pale); }.kpi-icon-coral { color: var(--coral); background: #fdebe8; }.kpi-card strong { display: block; margin: 5px 0 5px; font: 600 28px/1 var(--font-display); }.kpi-change { display: block; font-size: 10px; }.kpi-change em { color: var(--ink-faint); font-style: normal; font-weight: 400; }.kpi-change.negative { color: var(--coral); font-weight: 700; }.focus-section { padding: 2px 0 30px; }.inline-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 14px; }.inline-heading h3 { font-size: 20px; }.focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }.focus-card { min-height: 121px; padding: 18px; text-align: left; border: 1px solid transparent; border-radius: 11px; transition: transform .15s ease, box-shadow .15s ease; }.focus-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }.focus-teal { background: #e7f3ef; border-color: #d5e9e3; }.focus-amber { background: #fff1dd; border-color: #f7e3c4; }.focus-blue { background: #eaf0fa; border-color: #dce6f7; }.focus-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }.focus-label { font: 9px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }.focus-teal .focus-label { color: var(--teal); }.focus-amber .focus-label { color: #a96b20; }.focus-blue .focus-label { color: #4a6b9e; }.focus-count { display: grid; place-items: center; width: 27px; height: 27px; color: var(--ink); background: rgba(255,255,255,.62); border-radius: 50%; font: 600 12px var(--font-display); }.focus-card strong { display: block; margin-bottom: 13px; font-size: 14px; }.focus-meta { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 10px; }.focus-meta > span:last-child { margin-left: auto; font-size: 16px; }.mini-progress { display: inline-block; width: 56px; height: 5px; overflow: hidden; background: rgba(72,112,99,.15); border-radius: 99px; }.mini-progress i { display: block; height: 100%; background: var(--teal); border-radius: inherit; }.focus-amber .mini-progress i { background: var(--saffron); }.focus-blue .mini-progress i { background: var(--blue); }

.office-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 20px; }.inbox-card, .insights-card, .team-card { padding: 23px 24px; }.inbox-heading { align-items: center; margin-bottom: 15px; }.inbox-heading h3 { display: flex; align-items: center; gap: 7px; }.count-badge { display: inline-grid; place-items: center; min-width: 23px; height: 20px; padding-inline: 5px; color: var(--coral); background: #fdeae7; border-radius: 99px; font: 700 10px var(--font-body); }.case-toolbar { display: grid; grid-template-columns: minmax(130px, 1fr) 133px 136px; gap: 7px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }.search-field { position: relative; display: flex; align-items: center; }.search-field > span { position: absolute; left: 10px; color: var(--ink-faint); font-size: 18px; line-height: 1; }.search-field input { height: 35px; padding: 0 10px 0 29px; font-size: 11px; }.case-toolbar select { height: 35px; padding: 0 8px; font-size: 10px; }.inbox-list { min-height: 280px; }.inbox-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 15px 5px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); }.inbox-item:hover { background: #fbfcfa; }.inbox-item.is-selected { margin-inline: -5px; padding-inline: 10px; background: #f0f6f3; }.inbox-item .case-status-dot { align-self: start; margin-top: 7px; }.inbox-item-main { min-width: 0; }.inbox-item-title { display: flex; align-items: center; gap: 8px; overflow: hidden; }.inbox-item-title strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.inbox-item:hover .inbox-item-title strong, .inbox-item.is-selected .inbox-item-title strong { color: var(--teal); }.inbox-item-meta, .inbox-item-owner { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--ink-faint); font-size: 10px; }.inbox-item-owner { margin-top: 8px; }.inbox-item-owner .avatar { width: 20px; height: 20px; font-size: 8px; }.item-priority { display: inline-flex; align-items: center; gap: 4px; padding: 2px 5px; border-radius: 4px; font-size: 9px; font-weight: 700; }.item-priority.high { color: #b65a4f; background: #feece9; }.item-priority.medium { color: #a26b23; background: #fff2dd; }.item-priority.normal { color: #57736a; background: #eff5f1; }.item-due { align-self: center; color: var(--ink-faint); font-size: 10px; text-align: right; }.item-due strong { display: block; color: var(--coral); font-size: 10px; }.list-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 16px; color: var(--ink-faint); font-size: 10px; }.empty-state { padding: 45px 10px; text-align: center; color: var(--ink-soft); }.empty-icon { display: block; margin-bottom: 8px; color: var(--ink-faint); font-size: 28px; }.empty-state strong { display: block; font-size: 12px; }.empty-state p { margin: 3px 0; font-size: 11px; }
.office-side-column { display: grid; align-content: start; gap: 20px; }.insights-card h3, .team-card h3 { font-size: 18px; }.small-icon-button { width: 25px; height: 25px; color: var(--ink-faint); border: 1px solid var(--line-strong); font-size: 11px; }.insights-card > .muted { margin: 0 0 22px; font-size: 11px; }.insight-chart { display: grid; gap: 13px; }.chart-row { display: grid; grid-template-columns: 1fr 23px; gap: 6px; color: var(--ink-soft); font-size: 10px; }.chart-row b { color: var(--ink); text-align: right; }.chart-row i { grid-column: 1 / -1; display: block; height: 6px; overflow: hidden; background: #edf2ef; border-radius: 99px; }.chart-row em { display: block; height: 100%; background: var(--teal); border-radius: inherit; }.chart-row:nth-child(2) em { background: var(--saffron); }.chart-row:nth-child(3) em { background: var(--blue); }.chart-row:nth-child(4) em { background: #8a9c95; }.insight-callout { display: flex; gap: 10px; padding: 12px; margin: 22px 0 14px; background: #f8f4e9; border-radius: 8px; }.spark-icon { color: var(--saffron); font-size: 18px; }.insight-callout p { margin: 0; color: var(--ink-soft); font-size: 10px; }.insight-callout strong { color: var(--ink); font-size: 11px; }.insight-callout b { color: var(--teal); }.team-card { padding-bottom: 21px; }.team-top { display: flex; align-items: start; justify-content: space-between; }.pulse-score { color: var(--teal); font: 600 21px var(--font-display); }.pulse-score span { color: var(--ink-faint); font: 11px var(--font-body); }.pulse-bar { height: 7px; margin: 16px 0 9px; overflow: hidden; background: #edf2ef; border-radius: 99px; }.pulse-bar i { display: block; height: 100%; background: #74b594; border-radius: inherit; }.team-card > .muted { margin: 0 0 16px; font-size: 10px; }.team-avatars { display: flex; align-items: center; }.team-avatars .avatar { width: 24px; height: 24px; margin-right: -5px; border: 2px solid #fff; font-size: 8px; }.team-label { margin-left: 13px; color: var(--ink-faint); font-size: 10px; }

.case-detail { margin-top: 20px; overflow: hidden; }.detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 25px 27px 20px; border-bottom: 1px solid var(--line); }.detail-header h3 { font-size: 20px; }.detail-id { display: block; margin-top: 6px; color: var(--ink-faint); font: 10px var(--font-mono); }.detail-actions { display: flex; align-items: center; gap: 17px; }.priority-label { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; }.priority-high { color: #b65a4f; background: #feefec; }.priority-dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }.detail-grid { display: grid; grid-template-columns: 1fr 255px; gap: 26px; padding: 25px 27px 27px; }.detail-summary { display: flex; gap: 13px; padding: 14px; background: #fbfcfa; border: 1px solid var(--line); border-radius: 9px; }.summary-icon { display: grid; flex: 0 0 auto; place-items: center; width: 35px; height: 35px; color: var(--saffron); background: var(--saffron-pale); border-radius: 8px; font-size: 19px; }.detail-summary p { margin: 0 0 8px; color: var(--ink-soft); font-size: 11px; }.detail-summary .muted { font-size: 10px; }.timeline { position: relative; display: grid; gap: 22px; padding: 25px 6px 0 4px; }.timeline::before { position: absolute; top: 37px; bottom: 22px; left: 14px; width: 1px; background: var(--line-strong); content: ''; }.timeline-step { position: relative; display: flex; gap: 13px; min-height: 30px; }.timeline-marker { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 21px; height: 21px; color: var(--ink-faint); background: #fff; border: 1px solid var(--line-strong); border-radius: 50%; font: 10px var(--font-mono); }.timeline-step.is-done .timeline-marker { color: #fff; background: var(--teal); border-color: var(--teal); }.timeline-step.is-current .timeline-marker { color: #fff; background: var(--saffron); border-color: var(--saffron); box-shadow: 0 0 0 4px var(--saffron-pale); }.timeline-step strong { display: block; font-size: 11px; }.timeline-step small { display: block; margin-top: 3px; color: var(--ink-faint); font-size: 10px; }.detail-side { display: grid; align-content: start; gap: 18px; padding-left: 23px; border-left: 1px solid var(--line); }.detail-field { display: grid; gap: 7px; }.detail-label { color: var(--ink-faint); font: 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }.assignee-button, .due-button { display: flex; align-items: center; gap: 9px; padding: 0; text-align: left; background: transparent; border: 0; }.assignee-button > span:nth-child(2), .due-button > span:nth-child(2) { display: grid; flex: 1; }.assignee-button strong, .due-button strong { font-size: 11px; }.assignee-button small, .due-button small { margin-top: 2px; color: var(--ink-faint); font-size: 10px; }.assignee-button > span:last-child { color: var(--ink-faint); }.due-button > span:first-child { display: grid; place-items: center; width: 29px; height: 29px; color: var(--teal); background: var(--teal-pale); border-radius: 7px; font-size: 16px; }.label-list { display: flex; flex-wrap: wrap; gap: 6px; }.label-chip { padding: 5px 7px; border: 0; border-radius: 5px; font-size: 9px; font-weight: 600; }.chip-yellow { color: #9a6422; background: #fff0d3; }.chip-teal { color: var(--teal); background: var(--teal-pale); }.chip-outline { color: var(--ink-faint); background: transparent; border: 1px dashed var(--line-strong); }.notes-section { padding: 0 27px 26px; }.notes-heading { display: flex; align-items: end; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }.notes-heading h4 { margin: 0; font-size: 16px; }.note-tabs { display: flex; gap: 18px; }.note-tab { position: relative; padding: 0 0 9px; color: var(--ink-faint); background: transparent; border: 0; font-size: 10px; font-weight: 600; }.note-tab span { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 3px; background: var(--paper); border-radius: 50%; font-size: 9px; }.note-tab.is-active { color: var(--teal); }.note-tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--teal); content: ''; }.note-list { display: grid; gap: 17px; padding: 18px 0 15px; }.note { display: flex; gap: 10px; }.note .avatar { width: 25px; height: 25px; font-size: 8px; }.note p { margin: 0; color: var(--ink-soft); font-size: 11px; }.note p + p { margin-top: 5px; }.note-time { margin-left: 8px; color: var(--ink-faint); font-size: 10px; font-weight: 400; }.note-tag { padding: 2px 4px; margin-left: 4px; color: var(--teal); background: var(--teal-pale); border-radius: 3px; font: 9px var(--font-body); }.internal-tag { color: #8b632d; background: var(--saffron-pale); }.note-form { padding-top: 12px; border-top: 1px solid var(--line); }.note-form textarea { display: block; min-height: 58px; padding: 10px; resize: vertical; font-size: 11px; }.note-form-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; }.note-mode { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-faint); font-size: 10px; }.visibility-dot { width: 7px; height: 7px; background: #66a083; border-radius: 50%; box-shadow: 0 0 0 3px #e8f4ed; }

.site-footer { padding: 18px 0 24px; border-top: 1px solid var(--line); }.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--ink-faint); font-size: 10px; }.footer-brand { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 700; }.small-mark { width: 19px; height: 20px; padding: 2px 3px; border-radius: 6px 6px 6px 2px; }.small-mark span { width: 3px; }.small-mark span:first-child { height: 6px; }.small-mark span:nth-child(2) { height: 10px; }.small-mark span:last-child { height: 14px; }.footer-divider { padding: 0 7px; color: var(--line-strong); }
.toast { position: fixed; z-index: 30; right: 24px; bottom: 24px; max-width: 350px; padding: 12px 16px; color: #fff; background: var(--teal-deep); border-radius: 8px; box-shadow: 0 10px 25px rgba(16,59,53,.22); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; }.toast.is-visible { opacity: 1; transform: translateY(0); }.modal-backdrop { position: fixed; z-index: 25; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(16,59,53,.42); backdrop-filter: blur(3px); }.modal-backdrop[hidden] { display: none; }.modal { position: relative; width: min(440px, 100%); padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 20px 60px rgba(16,59,53,.18); }.modal h2 { margin: 0 0 10px; font: 600 25px/1.1 var(--font-display); }.modal p { margin: 0 0 23px; color: var(--ink-soft); font-size: 12px; }.modal-close { position: absolute; top: 14px; right: 14px; font-size: 22px; }

@media (max-width: 980px) { .container { width: min(100% - 36px, 760px); }.citizen-grid, .office-layout { grid-template-columns: 1fr; }.stack-column, .office-side-column { grid-template-columns: 1fr 1fr; }.case-detail { margin-top: 20px; }.office-kpis { grid-template-columns: repeat(2, 1fr); }.inbox-card { min-width: 0; } }
@media (max-width: 680px) { body { font-size: 13px; }.container { width: min(100% - 28px, 560px); }.header-inner { height: 62px; }.connection-state, .profile-name, .header-help { display: none; }.header-actions { gap: 8px; }.nav-row { height: 43px; }.primary-nav { gap: 18px; }.nav-tab { font-size: 11px; }.welcome-inner { display: block; min-height: 154px; padding-block: 26px; }.trust-note { margin-top: 19px; max-width: 100%; }.view-panel { padding-top: 31px; padding-bottom: 48px; }.split-heading { display: block; }.split-heading > .button, .office-actions { margin-top: 17px; }.office-actions { display: flex; }.office-actions .button { flex: 1; }.section-heading h2 { font-size: 25px; }.citizen-stats { grid-template-columns: 1fr 1fr; }.citizen-stats .stat-card:last-child { grid-column: span 2; min-height: auto; }.stat-card { min-height: 107px; padding: 15px; }.stat-card strong { font-size: 26px; }.form-card, .tracker-card, .loop-card, .inbox-card, .insights-card, .team-card { padding: 19px 17px; }.form-grid { grid-template-columns: 1fr; gap: 13px; }.field-span-2 { grid-column: auto; }.form-actions { display: block; }.checkbox-label { max-width: 100%; margin-bottom: 15px; }.form-actions .button { width: 100%; }.stack-column, .office-side-column { grid-template-columns: 1fr; }.office-kpis { gap: 9px; }.kpi-card { min-height: 136px; padding: 14px; }.kpi-icon { margin-bottom: 11px; }.focus-grid { grid-template-columns: 1fr; }.focus-card { min-height: 109px; }.case-toolbar { grid-template-columns: 1fr 1fr; }.search-field { grid-column: span 2; }.case-toolbar select { width: 100%; }.inbox-item { grid-template-columns: 8px minmax(0, 1fr); }.item-due { display: none; }.detail-header { display: block; padding: 20px 17px 16px; }.detail-actions { justify-content: space-between; margin-top: 14px; }.detail-grid { grid-template-columns: 1fr; padding: 18px 17px 20px; }.detail-side { grid-template-columns: 1fr 1fr; padding: 19px 0 0; border-top: 1px solid var(--line); border-left: 0; }.detail-side .detail-field:last-child { grid-column: span 2; }.notes-section { padding: 0 17px 20px; }.notes-heading { display: block; }.note-tabs { margin-top: 15px; }.footer-inner { flex-wrap: wrap; justify-content: center; text-align: center; }.footer-brand { width: 100%; justify-content: center; }.footer-inner > span:nth-child(2) { display: none; }.toast { right: 14px; bottom: 14px; left: 14px; max-width: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.status-resolved { background: #66a083; box-shadow: 0 0 0 3px #e8f4ed; }
.priority-medium { color: #a26b23; background: #fff2dd; }
.priority-normal { color: #57736a; background: #eff5f1; }

/* Taste Skill v2 application: quiet hierarchy, tactile controls, and a system-aware dark mode. */
html { color-scheme: light; }
.app-shell { min-height: 100dvh; }
.button:active, .focus-card:active, .recent-case:active, .nav-tab:active { transform: translateY(1px) scale(.99); }
.button:focus-visible, .focus-card:focus-visible, .recent-case:focus-visible, .nav-tab:focus-visible, .profile-chip:focus-visible, .text-button:focus-visible { outline-offset: 4px; }
.button-secondary, .button-quiet { box-shadow: 0 1px 0 rgba(20, 49, 42, .04); }
.section-kicker { letter-spacing: .09em; }
.welcome-band h1, .section-heading h2, .stat-card strong, .kpi-card strong, .loop-card h3, .modal h2, .pulse-score, .focus-count { font-variant-numeric: tabular-nums; }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #e8eef7;
    --ink-soft: #b8c7d9;
    --ink-faint: #8d9db1;
    --paper: #101c2c;
    --card: #182a40;
    --line: #2b405a;
    --line-strong: #46617e;
    --teal: #82acd4;
    --teal-deep: #0d2644;
    --teal-pale: #1d3b5d;
    --saffron: #e3a258;
    --saffron-pale: #4b3520;
    --blue: #a1b9dc;
    --blue-pale: #263b5b;
    --coral: #ed968a;
    --shadow: 0 16px 36px rgba(0, 10, 24, .26);
  }

  body { background: var(--paper); }
  .site-header, .card, .stat-card, .kpi-card, .modal, .button-secondary, .timeline-marker { background: var(--card); }
  .notification-badge, .team-avatars .avatar { border-color: var(--card); }
  .button-secondary { color: var(--teal); }
  .button-secondary:hover { background: var(--teal-pale); }
  .button-quiet { color: var(--teal); background: var(--teal-pale); }
  .field input, .field select, .field textarea, .track-form input, .note-form textarea, .search-field input, .case-toolbar select { color: var(--ink); background: #14243a; border-color: var(--line-strong); }
  .field input::placeholder, .field textarea::placeholder, .track-form input::placeholder, .search-field input::placeholder { color: #91a3b8; }
  .checkmark { background: #14243a; border-color: var(--line-strong); }
  .inbox-item:hover { background: #14243a; }
  .inbox-item.is-selected, .detail-summary { background: #1d3856; }
  .loop-card { background: #1b3653; border-color: #345779; }
  .loop-node { background: #203d5d; border-color: #5a7b9e; }
  .insight-callout { background: #3a3022; }
  .pulse-bar, .chart-row i { background: #263e5a; }
  .note-tab span { background: #223b59; }
  .modal-backdrop { background: rgba(3, 12, 25, .78); }
  .focus-teal { background: #1d3b5a; border-color: #345b7f; }
  .focus-amber { background: #42321f; border-color: #654b2b; }
  .focus-blue { background: #23344f; border-color: #3a5278; }
}

@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  .loop-card { background: #edf3f9; border-color: #d9e4f0; }
  .loop-card::after { border-color: #ccdbea; }
  .loop-node { border-color: #c2d2e4; }
  .focus-teal { background: #e8eef7; border-color: #d5e1ef; }
  .focus-blue { background: #edf1f8; border-color: #dce4f0; }
  .focus-teal .focus-label, .focus-blue .focus-label { color: var(--teal); }
  .mini-progress { background: rgba(67, 99, 135, .15); }
  .chart-row i, .pulse-bar { background: #e8edf4; }
  .inbox-item:hover { background: #f7f9fc; }
  .inbox-item.is-selected, .detail-summary { background: #eef3f9; }
}

/* The public-service product stays light by design, even when the device prefers dark mode. */
html[data-theme="light"] {
  color-scheme: light;
  --ink: #1e2d43;
  --ink-soft: #5d6d82;
  --ink-faint: #8794a5;
  --paper: #f8fafc;
  --card: #ffffff;
  --line: #e7ecf2;
  --line-strong: #d4dee9;
  --teal: #4b78a6;
  --teal-deep: #244d75;
  --teal-pale: #eef5fb;
  --saffron: #d9933e;
  --saffron-pale: #fff5e6;
  --blue: #6f8fb9;
  --blue-pale: #eff4fb;
  --coral: #c97870;
  --shadow: 0 10px 28px rgba(44, 73, 108, .055);
}

html[data-theme="light"] body { color: var(--ink); background: var(--paper); }
html[data-theme="light"] .site-header,
html[data-theme="light"] .card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .modal,
html[data-theme="light"] .button-secondary,
html[data-theme="light"] .timeline-marker { background: var(--card); }
html[data-theme="light"] .notification-badge,
html[data-theme="light"] .team-avatars .avatar { border-color: var(--card); }
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .track-form input,
html[data-theme="light"] .note-form textarea,
html[data-theme="light"] .search-field input,
html[data-theme="light"] .case-toolbar select,
html[data-theme="light"] .checkmark { color: var(--ink); background: #ffffff; border-color: var(--line-strong); }
html[data-theme="light"] .field input::placeholder,
html[data-theme="light"] .field textarea::placeholder,
html[data-theme="light"] .track-form input::placeholder,
html[data-theme="light"] .search-field input::placeholder { color: #9aa7b6; }
html[data-theme="light"] .inbox-item:hover { background: #f7f9fc; }
html[data-theme="light"] .inbox-item.is-selected,
html[data-theme="light"] .detail-summary { background: #eef3f9; }
html[data-theme="light"] .loop-card { background: #edf3f9; border-color: #d9e4f0; }
html[data-theme="light"] .loop-card::after { border-color: #ccdbea; }
html[data-theme="light"] .loop-node { background: #ffffff; border-color: #c2d2e4; }
html[data-theme="light"] .insight-callout { background: #fff7ea; }
html[data-theme="light"] .pulse-bar,
html[data-theme="light"] .chart-row i { background: #e8edf4; }
html[data-theme="light"] .note-tab span { background: #f4f7fa; }
html[data-theme="light"] .modal-backdrop { background: rgba(36, 77, 117, .26); }
html[data-theme="light"] .focus-teal { background: #e8eef7; border-color: #d5e1ef; }
html[data-theme="light"] .focus-amber { background: #fff5e6; border-color: #f5dfbf; }
html[data-theme="light"] .focus-blue { background: #edf1f8; border-color: #dce4f0; }
html[data-theme="light"] .stat-card-teal { background: #eaf2fb; border-color: #d5e2f0; }
html[data-theme="light"] .stat-card-teal .stat-label,
html[data-theme="light"] .stat-card-teal .stat-foot { color: #5d7794; }
html[data-theme="light"] .stat-card-teal strong { color: var(--ink); }
html[data-theme="light"] .stat-card-teal .trend-up { color: var(--saffron); }

/* Trust pages share the same light civic system without borrowing the dashboard density. */
.legal-page { min-height: 100dvh; background: var(--paper); }
.legal-main { width: min(920px, calc(100% - 48px)); margin: 0 auto; padding: 58px 0 86px; }
.legal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.legal-header h1 { max-width: 660px; margin: 0; font: 600 clamp(30px, 4vw, 48px)/1.05 var(--font-display); letter-spacing: -.04em; }
.legal-header .muted { max-width: 610px; margin: 14px 0 0; font-size: 14px; }
.legal-back { color: var(--teal-deep); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.draft-banner { padding: 12px 14px; margin: 24px 0 28px; color: #72521f; background: var(--saffron-pale); border: 1px solid #f2d7ac; border-radius: 9px; font-size: 12px; }
.legal-content { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 38px; margin-top: 34px; }
.legal-nav { position: sticky; top: 20px; align-self: start; display: grid; gap: 9px; }
.legal-nav a { color: var(--ink-soft); font-size: 11px; text-decoration: none; }
.legal-nav a:hover, .legal-nav a:focus-visible { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.legal-copy { min-width: 0; }
.legal-copy section { padding: 0 0 28px; margin: 0 0 28px; border-bottom: 1px solid var(--line); }
.legal-copy section:last-child { border-bottom: 0; }
.legal-copy h2 { margin: 0 0 9px; font: 600 21px/1.15 var(--font-display); letter-spacing: -.025em; }
.legal-copy h3 { margin: 18px 0 7px; font-size: 14px; }
.legal-copy p, .legal-copy li { color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.legal-copy p { margin: 0 0 11px; }
.legal-copy ul, .legal-copy ol { padding-left: 20px; margin: 8px 0 0; }
.legal-copy li + li { margin-top: 6px; }
.legal-copy strong { color: var(--ink); }
.legal-copy a { color: var(--teal-deep); text-underline-offset: 3px; }
.legal-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; margin-top: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.legal-meta span { display: block; color: var(--ink-faint); font: 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.legal-meta strong { display: block; margin-top: 4px; font-size: 12px; }
.auth-main { width: min(560px, calc(100% - 36px)); margin: 0 auto; padding: 68px 0 90px; }
.auth-card { padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.auth-card h1 { margin: 0; font: 600 30px/1.08 var(--font-display); letter-spacing: -.035em; }
.auth-card > .muted { margin: 9px 0 24px; font-size: 13px; }
.auth-options { display: grid; gap: 10px; }
.auth-option, .otp-submit { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 43px; padding: 0 14px; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12px; font-weight: 700; }
.auth-option:hover { border-color: var(--teal); background: var(--teal-pale); }
.auth-provider-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--teal-deep); border: 1px solid var(--line-strong); border-radius: 50%; font: 11px var(--font-mono); }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 19px 0; color: var(--ink-faint); font-size: 10px; }
.auth-divider::before, .auth-divider::after { flex: 1; height: 1px; background: var(--line); content: ''; }
.otp-form { display: grid; gap: 8px; }
.otp-form label { color: var(--ink); font-size: 11px; font-weight: 700; }
.otp-form input { width: 100%; height: 42px; padding: 0 11px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; }
.otp-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(75,120,166,.14); }
.otp-submit { color: #fff; background: var(--teal); border-color: var(--teal); }
.otp-submit:hover { background: var(--teal-deep); }
.auth-notice { padding: 12px 13px; margin-top: 18px; color: var(--ink-soft); background: var(--teal-pale); border: 1px solid #d7e5f2; border-radius: 8px; font-size: 11px; }
.auth-feedback { min-height: 19px; margin: 13px 0 0; color: var(--teal-deep); font-size: 11px; }
.auth-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; font-size: 11px; }
.auth-footer a { color: var(--teal-deep); text-underline-offset: 3px; }

@media (max-width: 720px) {
  .legal-main { width: min(100% - 28px, 620px); padding-top: 37px; }
  .legal-header { display: block; }
  .legal-back { display: inline-block; margin-bottom: 20px; }
  .legal-content { display: block; margin-top: 28px; }
  .legal-nav { position: static; grid-template-columns: repeat(2, 1fr); padding: 13px; margin-bottom: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; }
  .legal-meta { grid-template-columns: 1fr; }
  .auth-main { padding-top: 38px; }
  .auth-card { padding: 21px 18px; }
}