/* Sunny Licensing. Tokens from the HR staff portal design system ("Sunny Glass", docs/design/hr-portal-ds.css
   sections 1 and 2: light by default, dark through prefers-color-scheme or data-theme="dark" on <html>).
   System font, weights 400 / 500 / 600 only. No inline styles anywhere (the CSP blocks them): every look is a
   class here. Authority colours come from /authorities.css (generated from workflows.json). */

/* ================================================================ 1 TOKENS (light) */
:root {
  color-scheme: light dark;

  --brand-navy: #00148D;
  --brand-blue: #0064E0;
  --brand-sky: #1877F2;
  --brand-gradient: linear-gradient(135deg, #00148D 0%, #0064E0 58%, #1877F2 100%);

  --tint: #0064E0;
  --tint-ink: #0059C8;
  --tint-pressed: #0050B5;
  --tint-bg: rgba(0, 100, 224, .10);
  --tint-bg-strong: rgba(0, 100, 224, .16);
  --tint-line: rgba(0, 100, 224, .28);
  --focus-ring: 0 0 0 4px rgba(0, 100, 224, .28);

  --green: #34C759;  --green-ink: #146C2E;  --green-bg: rgba(52, 199, 89, .15);  --green-line: rgba(52, 199, 89, .40);
  --amber: #FF9F0A;  --amber-ink: #A34A00;  --amber-bg: rgba(255, 159, 10, .16); --amber-line: rgba(255, 159, 10, .45);
  --red: #FF3B30;    --red-ink: #C40012;    --red-bg: rgba(255, 59, 48, .12);    --red-line: rgba(255, 59, 48, .35);
  --blue: #0064E0;   --blue-ink: #0059C8;   --blue-bg: rgba(0, 100, 224, .10);   --blue-line: rgba(0, 100, 224, .28);
  --gray: #8E8E93;   --gray-ink: #545458;   --gray-bg: rgba(120, 120, 128, .14);
  --badge-red: #E0281D;

  --canvas: #F2F2F7;
  --surface: #FFFFFF;
  --surface-2: #F7F7FA;
  --surface-elevated: #FFFFFF;
  --label: #1C1E21;
  --label-2: #444950;
  --label-3: #65676B;
  --label-4: #8E8E93;
  --fill: rgba(120, 120, 128, .16);
  --fill-2: rgba(120, 120, 128, .10);
  --fill-3: rgba(120, 120, 128, .06);
  --separator: rgba(60, 60, 67, .18);
  --separator-opaque: #E3E3E8;
  --on-brand: #FFFFFF;

  --mat-bar: rgba(255, 255, 255, .72);
  --mat-bar-solid: #FFFFFF;
  --mat-nav: rgba(242, 242, 247, .80);
  --mat-nav-solid: #F2F2F7;
  --mat-edge: rgba(255, 255, 255, .75);
  --mat-blur: blur(24px) saturate(180%);
  --backdrop: rgba(10, 14, 40, .36);

  --sh-1: 0 0 0 .5px rgba(16, 24, 64, .04), 0 1px 2px rgba(16, 24, 64, .04), 0 4px 14px -4px rgba(16, 24, 64, .06);
  --sh-2: 0 0 0 .5px rgba(16, 24, 64, .04), 0 2px 6px rgba(16, 24, 64, .05), 0 16px 36px -12px rgba(16, 24, 64, .16);
  --sh-3: 0 0 0 .5px rgba(16, 24, 64, .06), 0 6px 16px -4px rgba(16, 24, 64, .12), 0 24px 48px -12px rgba(16, 24, 64, .22);
  --sh-brand: 0 1px 2px rgba(0, 20, 141, .25), 0 10px 24px -8px rgba(0, 100, 224, .6);

  --r-xs: 8px;  --r-sm: 12px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 28px;  --r-pill: 999px;
  --r-input: 14px;  --r-icon: 10px;
  --gutter: 16px;
  --card-pad: 16px;
  --tap: 44px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Historic", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --nav-h: 52px;
  --tabbar-h: 64px;
  --sidebar-w: 248px;
  --logo-filter: none;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 120ms;  --t: 220ms;

  --alert-bg: #FFFFFF;
  --red-solid: #D70015;
}

/* ================================================================ 2 DARK TOKENS (automatic, and data-theme="dark") */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-gradient: linear-gradient(135deg, #0A1FA8 0%, #0064E0 58%, #1877F2 100%);
    --tint: #3D8BFF;  --tint-ink: #6AA6FF;  --tint-pressed: #2B78EE;
    --tint-bg: rgba(61, 139, 255, .18);  --tint-bg-strong: rgba(61, 139, 255, .26);  --tint-line: rgba(61, 139, 255, .40);
    --focus-ring: 0 0 0 4px rgba(61, 139, 255, .40);
    --green: #30D158;  --green-ink: #4CE07A;  --green-bg: rgba(48, 209, 88, .18);  --green-line: rgba(48, 209, 88, .40);
    --amber: #FF9F0A;  --amber-ink: #FFB547;  --amber-bg: rgba(255, 159, 10, .20); --amber-line: rgba(255, 159, 10, .45);
    --red: #FF453A;    --red-ink: #FF7A72;    --red-bg: rgba(255, 69, 58, .20);    --red-line: rgba(255, 69, 58, .45);
    --blue: #3D8BFF;   --blue-ink: #7DB2FF;   --blue-bg: rgba(61, 139, 255, .20);  --blue-line: rgba(61, 139, 255, .40);
    --gray: #8E8E93;   --gray-ink: #C7C7CC;   --gray-bg: rgba(142, 142, 147, .22);
    --canvas: #000000;
    --surface: #1C1C1E;
    --surface-2: #2C2C2E;
    --surface-elevated: #636366;
    --label: #FFFFFF;
    --label-2: rgba(235, 235, 245, .86);
    --label-3: #A1A1A8;
    --label-4: #6E6E73;
    --fill: rgba(120, 120, 128, .36);
    --fill-2: rgba(120, 120, 128, .24);
    --fill-3: rgba(120, 120, 128, .16);
    --separator: rgba(84, 84, 88, .65);
    --separator-opaque: #38383A;
    --mat-bar: rgba(37, 37, 40, .72);
    --mat-bar-solid: #252528;
    --mat-nav: rgba(18, 18, 20, .80);
    --mat-nav-solid: #121214;
    --mat-edge: rgba(255, 255, 255, .10);
    --backdrop: rgba(0, 0, 0, .55);
    --sh-1: 0 0 0 .5px rgba(255, 255, 255, .06);
    --sh-2: 0 0 0 .5px rgba(255, 255, 255, .07), 0 16px 36px -14px rgba(0, 0, 0, .7);
    --sh-3: 0 0 0 .5px rgba(255, 255, 255, .09), 0 24px 48px -12px rgba(0, 0, 0, .8);
    --sh-brand: 0 10px 24px -10px rgba(0, 100, 224, .7);
    --logo-filter: brightness(0) invert(1);
    --alert-bg: #2C2C2E;
  }
}
:root[data-theme="dark"] {
  --brand-gradient: linear-gradient(135deg, #0A1FA8 0%, #0064E0 58%, #1877F2 100%);
  --tint: #3D8BFF;  --tint-ink: #6AA6FF;  --tint-pressed: #2B78EE;
  --tint-bg: rgba(61, 139, 255, .18);  --tint-bg-strong: rgba(61, 139, 255, .26);  --tint-line: rgba(61, 139, 255, .40);
  --focus-ring: 0 0 0 4px rgba(61, 139, 255, .40);
  --green: #30D158;  --green-ink: #4CE07A;  --green-bg: rgba(48, 209, 88, .18);  --green-line: rgba(48, 209, 88, .40);
  --amber: #FF9F0A;  --amber-ink: #FFB547;  --amber-bg: rgba(255, 159, 10, .20); --amber-line: rgba(255, 159, 10, .45);
  --red: #FF453A;    --red-ink: #FF7A72;    --red-bg: rgba(255, 69, 58, .20);    --red-line: rgba(255, 69, 58, .45);
  --blue: #3D8BFF;   --blue-ink: #7DB2FF;   --blue-bg: rgba(61, 139, 255, .20);  --blue-line: rgba(61, 139, 255, .40);
  --gray: #8E8E93;   --gray-ink: #C7C7CC;   --gray-bg: rgba(142, 142, 147, .22);
  --canvas: #000000;
  --surface: #1C1C1E;
  --surface-2: #2C2C2E;
  --surface-elevated: #636366;
  --label: #FFFFFF;
  --label-2: rgba(235, 235, 245, .86);
  --label-3: #A1A1A8;
  --label-4: #6E6E73;
  --fill: rgba(120, 120, 128, .36);
  --fill-2: rgba(120, 120, 128, .24);
  --fill-3: rgba(120, 120, 128, .16);
  --separator: rgba(84, 84, 88, .65);
  --separator-opaque: #38383A;
  --mat-bar: rgba(37, 37, 40, .72);
  --mat-bar-solid: #252528;
  --mat-nav: rgba(18, 18, 20, .80);
  --mat-nav-solid: #121214;
  --mat-edge: rgba(255, 255, 255, .10);
  --backdrop: rgba(0, 0, 0, .55);
  --sh-1: 0 0 0 .5px rgba(255, 255, 255, .06);
  --sh-2: 0 0 0 .5px rgba(255, 255, 255, .07), 0 16px 36px -14px rgba(0, 0, 0, .7);
  --sh-3: 0 0 0 .5px rgba(255, 255, 255, .09), 0 24px 48px -12px rgba(0, 0, 0, .8);
  --sh-brand: 0 10px 24px -10px rgba(0, 100, 224, .7);
  --logo-filter: brightness(0) invert(1);
  --alert-bg: #2C2C2E;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ================================================================ 3 BASE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: var(--canvas); color: var(--label);
  font-family: var(--font); font-size: 16px; line-height: 22px; font-weight: var(--fw-regular);
  letter-spacing: -0.005em; -webkit-font-smoothing: antialiased;
}
b, strong, th { font-weight: var(--fw-semibold); }
h1, h2, h3, h4 { font-weight: var(--fw-semibold); }
a { color: var(--tint-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg, iframe { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r-sm);
        background: var(--surface); box-shadow: var(--sh-2); }
.skip:focus { top: 12px; }

.ico { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
       stroke-linecap: round; stroke-linejoin: round; }
.ico--more { stroke-width: 3.2; }
.muted { color: var(--label-3); }
.hint { margin: 6px 0 0; color: var(--label-3); font-size: 13px; line-height: 18px; }
.sub { margin-top: 2px; color: var(--label-3); font-size: 13px; line-height: 18px; }
.sub-inline { color: var(--label-3); font-size: 13px; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.nowrap { white-space: nowrap; }
.w-500 { font-weight: var(--fw-medium); }
.spacer { flex: 1 1 auto; }
.footnote { margin: 16px 0 0; text-align: center; color: var(--label-4); font-size: 12px; }
.req { color: var(--label-3); font-weight: var(--fw-regular); }
.plain-list { margin: 10px 0 0; padding-left: 18px; color: var(--label-2); font-size: 15px; line-height: 21px; }
.plain-list li + li { margin-top: 6px; }

/* ================================================================ 4 SHELL: sidebar (desktop), top bar + tab bar (phone) */
.main { padding: 16px var(--gutter) 32px; }
.app .main {
  padding-top: calc(var(--nav-h) + 16px);
  padding-bottom: calc(var(--tabbar-h) + 28px);
  padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom));
}
.page { width: 100%; max-width: 1240px; margin: 0 auto; min-width: 0; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--label); }
.brand:hover { text-decoration: none; color: var(--label); }
.brand__logo { display: block; height: 27px; width: auto; filter: var(--logo-filter); }
.brand__name { font-size: 17px; line-height: 22px; font-weight: var(--fw-semibold); color: var(--label); }
.brand--compact .brand__logo { height: 22px; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter);
  background: var(--mat-nav-solid); border-bottom: .5px solid var(--separator);
}
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  height: var(--tabbar-h); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--mat-bar-solid); border-top: .5px solid var(--separator);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar { background: var(--mat-nav); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }
  .tabbar { background: var(--mat-bar); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--mat-nav-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tabbar { background: var(--mat-bar-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0;
  color: var(--label-3); font-size: 11px; line-height: 13px; font-weight: var(--fw-medium);
  -webkit-tap-highlight-color: transparent;
}
.tab:hover { text-decoration: none; color: var(--label); }
.tab.is-active { color: var(--tint); }
.tab__icon { position: relative; display: grid; place-items: center; }
.tab__icon .ico { width: 24px; height: 24px; }
.tab__icon .badge { position: absolute; top: -5px; left: 14px; --badge-ring: var(--mat-bar-solid); }

.sidebar { display: none; }

@media (min-width: 1024px) {
  .topbar, .tabbar { display: none; }
  .app .main { padding: 28px 32px 48px calc(var(--sidebar-w) + 32px); }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: var(--sidebar-w);
    display: flex; flex-direction: column; gap: 18px; padding: 22px 12px 16px;
    background: var(--surface); border-right: .5px solid var(--separator); overflow-y: auto;
  }
  /* the wide logo and the app name do not fit side by side in 248 px: stack them */
  .sidebar .brand { flex-direction: column; align-items: flex-start; gap: 6px; padding: 2px 12px 6px; }
  .sidebar .brand__logo { height: 24px; }
}
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__label { margin: 14px 12px 4px; color: var(--label-3); font-size: 12px; line-height: 16px; font-weight: var(--fw-medium);
                  text-transform: uppercase; letter-spacing: .04em; }
.side-link {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: var(--r-sm);
  color: var(--label); font-size: 15px; line-height: 20px; font-weight: var(--fw-medium);
}
.side-link:hover { text-decoration: none; color: var(--label); background: var(--fill-3); }
.side-link .ico { color: var(--label-3); }
.side-link.is-active { color: var(--tint-ink); background: var(--tint-bg); }
.side-link.is-active .ico { color: var(--tint); }
.side-link__label { flex: 1 1 auto; min-width: 0; }
.side-link--button { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }
.sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 12px;
                 border-top: .5px solid var(--separator); }
.me { display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-width: 0; }
.me__body { display: flex; flex-direction: column; min-width: 0; }
.me__name { font-size: 15px; line-height: 20px; font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me__role { font-size: 12px; line-height: 16px; color: var(--label-3); }

/* ================================================================ 5 TITLES, SECTIONS */
.largetitle { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px;
              padding: 4px 4px 16px; }
.largetitle h1 { margin: 0; font-size: 26px; line-height: 32px; letter-spacing: -0.012em; }
.largetitle__sub { margin-top: 2px; color: var(--label-3); font-size: 15px; line-height: 20px; }
.largetitle__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.back { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 6px -4px; color: var(--tint-ink);
        font-size: 15px; line-height: 20px; font-weight: var(--fw-medium); }
.back .ico { width: 18px; height: 18px; }
.section { margin-top: 28px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px 10px; }
.section-head h2 { margin: 0; font-size: 20px; line-height: 25px; letter-spacing: -0.009em; }
.section-link { color: var(--tint-ink); font-size: 15px; line-height: 20px; font-weight: var(--fw-medium); }
.section-note { color: var(--label-3); font-size: 13px; line-height: 18px; }
.section-note--block { display: block; margin: -4px 4px 12px; }

/* ================================================================ 6 CARDS, LISTS, TILES */
.card { position: relative; min-width: 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.card--pad { padding: var(--card-pad); }
.card--highlight { box-shadow: 0 0 0 1.5px var(--green-line), var(--sh-1); }
.card__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px;
              margin-bottom: 12px; }
.card__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0;
               font-size: 17px; line-height: 22px; letter-spacing: -0.007em; }
.card__head .card__title { margin: 0; }
.card > .card__title { margin-bottom: 12px; }
.card__title-text { min-width: 0; }
.card__sub { margin: -6px 0 12px; color: var(--label-3); font-size: 13px; line-height: 18px; }
.card__aside { color: var(--label-3); font-size: 13px; line-height: 18px; }
.divider { height: 0; margin: 14px 0; border-top: .5px solid var(--separator); }
.table-card { overflow: hidden; }

.list { overflow: hidden; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.row-item {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px 10px 16px;
  color: var(--label); transition: background-color var(--t-fast) var(--ease-out);
}
.row-item + .row-item::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; border-top: .5px solid var(--separator); }
a.row-item:hover { text-decoration: none; color: var(--label); background: var(--fill-3); }
a.row-item:active { background: var(--fill-2); }
.row-item__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.row-item__title { font-size: 16px; line-height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-item__sub { margin-top: 1px; font-size: 13px; line-height: 18px; color: var(--label-3);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { flex: none; width: 17px; height: 17px; color: var(--label-4); stroke-width: 2.2; }
.ico-tile { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-icon);
            color: var(--tint-ink); background: var(--tint-bg); }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1480px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 104px;
  padding: 14px 14px 13px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); color: var(--label);
}
.tile:hover { text-decoration: none; color: var(--label); box-shadow: var(--sh-2); }
.tile__label { font-size: 14px; line-height: 19px; font-weight: var(--fw-medium); color: var(--label-2); }
.tile__value { font-size: 28px; line-height: 32px; font-weight: var(--fw-semibold); letter-spacing: -0.015em;
               font-variant-numeric: tabular-nums; }
.tile__sub { margin-top: -4px; font-size: 13px; line-height: 17px; color: var(--label-3); }
.tile--tint .tile__value { color: var(--tint-ink); }
.tile--red .tile__value { color: var(--red-ink); }
.tile--amber .tile__value { color: var(--amber-ink); }

.prompt {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: 0 0 0 1px var(--tint-line), var(--sh-1); color: var(--label);
}
.prompt:hover { text-decoration: none; color: var(--label); background: var(--tint-bg); }
.prompt__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.prompt__title { font-size: 16px; line-height: 21px; font-weight: var(--fw-semibold); }
.prompt__sub { margin-top: 2px; color: var(--label-3); font-size: 14px; line-height: 19px; }

.empty { padding: 32px 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); text-align: center; }
.empty__title { font-size: 17px; line-height: 22px; font-weight: var(--fw-semibold); }
.empty__text { max-width: 440px; margin: 6px auto 14px; color: var(--label-3); font-size: 15px; line-height: 20px; }

/* ================================================================ 7 BUTTONS, LINKS */
.btn {
  --h: 48px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 20px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font-size: 16px; line-height: 21px; font-weight: var(--fw-semibold); white-space: nowrap; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out), background-color var(--t-fast);
}
.btn:hover { text-decoration: none; }
.btn .ico { width: 18px; height: 18px; }
.btn--primary { color: #fff; background-color: var(--tint); background-image: var(--brand-gradient);
                box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn--primary:hover { color: #fff; filter: brightness(.94); }
.btn--secondary { color: var(--tint-ink); background: var(--tint-bg); }
.btn--secondary:hover { color: var(--tint-ink); background: var(--tint-bg-strong); }
.btn--gray { color: var(--label); background: var(--fill); }
.btn--gray:hover { color: var(--label); background: var(--fill-2); }
.btn--plain { color: var(--tint-ink); background: transparent; padding: 0 10px; }
.btn--plain:hover { background: var(--fill-3); }
.btn--destructive { color: var(--red-ink); background: var(--red-bg); }
.btn--destructive:hover { color: var(--red-ink); filter: brightness(.97); }
.btn--block { display: flex; width: 100%; }
.btn--sm { --h: 36px; padding: 0 14px; font-size: 15px; font-weight: var(--fw-medium); }
.btn--sm.btn--plain { padding: 0 8px; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; box-shadow: var(--focus-ring); }
.btn:disabled { color: var(--label-4); background: var(--fill-2); background-image: none; box-shadow: none;
                cursor: not-allowed; transform: none; filter: none; }

.icon-link {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  color: var(--label-3); background: transparent; cursor: pointer;
}
.icon-link:hover { color: var(--tint-ink); background: var(--fill-3); }
.icon-link--danger:hover { color: var(--red-ink); background: var(--red-bg); }
.icon-link .ico { width: 19px; height: 19px; }
.ext-link { display: inline-flex; align-items: center; gap: 4px; }
.ext-link .ico { width: 14px; height: 14px; }

/* ================================================================ 8 CHIPS, BADGES, AUTHORITY, AVATARS */
.chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 24px; padding: 0 9px;
  border-radius: var(--r-pill); background: var(--fill-2); color: var(--label-2);
  font-size: 12px; line-height: 16px; font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip .ico { width: 13px; height: 13px; }
.chip--sm { height: 22px; padding: 0 8px; }
.chip--blue { background: var(--blue-bg); color: var(--blue-ink); }
.chip--green { background: var(--green-bg); color: var(--green-ink); }
.chip--amber { background: var(--amber-bg); color: var(--amber-ink); }
.chip--red { background: var(--red-bg); color: var(--red-ink); }
.chip--gray { background: var(--gray-bg); color: var(--gray-ink); }
.chip--days { background: var(--fill-2); color: var(--label-2); font-variant-numeric: tabular-nums; }
.chip--days.is-long { background: var(--amber-bg); color: var(--amber-ink); }
.chip--link { height: 34px; padding: 0 13px; font-size: 14px; color: var(--label); background: var(--surface); box-shadow: var(--sh-1); }
.chip--link:hover { text-decoration: none; color: var(--label); background: var(--fill-3); }
.chip--link.is-active { color: var(--tint-ink); background: var(--tint-bg); box-shadow: inset 0 0 0 1px var(--tint-line); }
.chip__count { margin-left: 4px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.chipbar { display: flex; gap: 8px; margin: 0 -16px 10px; padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none; }
.chipbar::-webkit-scrollbar { display: none; }
.count-pill { color: var(--label-3); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.kinds { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.kind { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-pill);
        background: var(--fill-2); color: var(--label-3); font-size: 11px; line-height: 14px; font-weight: var(--fw-medium); }
.kind--pay { background: var(--green-bg); color: var(--green-ink); }

.badge {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--badge-red); color: #fff;
  font-size: 12px; line-height: 1; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--badge-ring, var(--surface));
}

/* authority badge: a dot of the authority's colour on a soft tint; the text stays the label colour (contrast) */
.auth {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-pill);
  background: var(--auth-bg, var(--fill-2)); color: var(--label); font-size: 12px; line-height: 16px;
  font-weight: var(--fw-semibold); letter-spacing: .02em; white-space: nowrap;
}
.auth__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--auth, var(--gray)); }

.avatar { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
          background: var(--tint-bg); color: var(--tint-ink); font-size: 15px; line-height: 1; font-weight: var(--fw-semibold); }
a.avatar:hover { text-decoration: none; }
.avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.avatar--xs { width: 24px; height: 24px; font-size: 11px; }
.avatar--lg { width: 72px; height: 72px; font-size: 26px; }

/* ================================================================ 9 NOTICES, BANNERS, FLASH */
.notice {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--tint-bg); color: var(--label); font-size: 15px; line-height: 20px;
}
.notice .ico { color: var(--tint-ink); margin-top: 0; }
.notice--error { background: var(--red-bg); }
.notice--error .ico { color: var(--red-ink); }
.notice--amber { background: var(--amber-bg); }
.notice--amber .ico { color: var(--amber-ink); }
.flash {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: 0 0 0 1px var(--green-line), var(--sh-1); font-size: 15px; line-height: 20px;
}
.flash .ico { color: var(--green-ink); }
.flash--error { box-shadow: 0 0 0 1px var(--red-line), var(--sh-1); }
.flash--error .ico { color: var(--red-ink); }
.banner {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding: 13px 14px; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--sh-1); border-left: 4px solid var(--gray);
}
.banner > .ico { margin-top: 1px; }
.banner__body { min-width: 0; }
.banner__title { font-size: 16px; line-height: 21px; font-weight: var(--fw-semibold); }
.banner__text { margin-top: 2px; font-size: 15px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.banner__meta { margin-top: 4px; color: var(--label-3); font-size: 13px; line-height: 18px; }
.banner--red { border-left-color: var(--red); }
.banner--red > .ico { color: var(--red-ink); }
.banner--amber { border-left-color: var(--amber); }
.banner--amber > .ico { color: var(--amber-ink); }
.banner--green { border-left-color: var(--green); }
.banner--green > .ico { color: var(--green-ink); }
.banner--gray > .ico { color: var(--gray-ink); }
.warn { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; color: var(--amber-ink); font-size: 14px; line-height: 19px; }
.warn .ico { width: 18px; height: 18px; }
.readonly-note { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--fill-3);
                 color: var(--label-2); font-size: 14px; line-height: 19px; }

/* ================================================================ 10 FORMS */
.field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field, .picker__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.label { display: block; padding: 0; color: var(--label-2); font-size: 13px; line-height: 18px; font-weight: var(--fw-medium); }
legend.label { margin-bottom: 6px; }
.input {
  display: block; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: .5px solid var(--separator-opaque);
  border-radius: var(--r-input); background: var(--surface); color: var(--label); font-size: 16px; line-height: 22px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder { color: var(--label-4); }
.input:focus { outline: none; border-color: var(--tint); box-shadow: var(--focus-ring); }
select.input { appearance: none; -webkit-appearance: none; padding-right: 34px; background-repeat: no-repeat;
  background-position: right 12px center; background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%238E8E93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
textarea.input { min-height: 72px; resize: vertical; }
.input--sm { min-height: 36px; padding: 6px 10px; border-radius: var(--r-sm); font-size: 15px; line-height: 20px; }
select.input--sm { padding-right: 30px; background-position: right 10px center; }
.input--note { min-height: 56px; margin-bottom: 10px; }
.input--file { padding: 8px 10px; font-size: 14px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--label); font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--tint); }
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide { grid-column: 1 / -1; }
}
@media (min-width: 480px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.form-actions--end { justify-content: flex-end; }
.form-stack > .form-actions { margin-top: 0; }
.form-wide { max-width: 860px; }
.form-narrow { max-width: 560px; }
.field--narrow { max-width: 320px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.inline-form .input { width: auto; flex: 1 1 160px; }

.searchbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.searchbar .input { flex: 1 1 240px; width: auto; min-height: 40px; }
.filters { margin-bottom: 14px; }
.filters__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.filters__grid .field--wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .filters__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filters__grid .field--wide { grid-column: span 2; }
}
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }

/* authority picker (intake dialog, new case) */
.picker { display: flex; flex-direction: column; gap: 16px; }
.authority-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .authority-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.authority-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 84px; padding: 14px;
  border-radius: var(--r-md); background: var(--surface); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--separator-opaque); transition: box-shadow var(--t-fast), background-color var(--t-fast);
}
.authority-card:hover { background: var(--fill-3); }
.authority-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.authority-card:focus-within { box-shadow: inset 0 0 0 1px var(--tint), var(--focus-ring); }
/* two rules: a browser without :has() drops a whole selector list it cannot parse */
.authority-card.is-selected { background: var(--auth-bg, var(--tint-bg)); box-shadow: inset 0 0 0 2px var(--auth, var(--tint)); }
.authority-card:has(input:checked) { background: var(--auth-bg, var(--tint-bg)); box-shadow: inset 0 0 0 2px var(--auth, var(--tint)); }
.authority-card__name { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; line-height: 23px; font-weight: var(--fw-semibold); }
.authority-card__name .auth__dot { width: 10px; height: 10px; }
.authority-card__full { color: var(--label-3); font-size: 13px; line-height: 17px; }
/* start page (a Statutory MOHAP / SHA / DHA button): the authority the button chose */
.authority-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-md);
                  background: var(--auth-bg, var(--tint-bg)); box-shadow: inset 0 0 0 2px var(--auth-line, var(--tint)); }
.authority-hero__dot { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--auth, var(--gray)); }
.authority-hero__body { display: flex; flex-direction: column; min-width: 0; }
.authority-hero__name { font-size: 28px; line-height: 34px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.authority-hero__full { color: var(--label-2); font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.radio-list { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-md);
              box-shadow: inset 0 0 0 1px var(--separator-opaque); }
.radio-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; cursor: pointer; }
.radio-row + .radio-row { border-top: .5px solid var(--separator); }
.radio-row:hover { background: var(--fill-3); }
.radio-row input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--tint); }
.radio-row__body { display: flex; flex-direction: column; min-width: 0; }
.radio-row__title { font-size: 16px; line-height: 21px; }
.radio-row__sub { color: var(--label-3); font-size: 13px; line-height: 18px; }

/* ================================================================ 11 TABLES */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 20px; }
.table th { padding: 11px 12px; border-bottom: .5px solid var(--separator); color: var(--label-3); text-align: left;
            font-size: 13px; line-height: 18px; font-weight: var(--fw-medium); white-space: nowrap; }
.table td { padding: 12px; border-bottom: .5px solid var(--separator); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table th:first-child, .table td:first-child { padding-left: 16px; }
.table th:last-child, .table td:last-child { padding-right: 16px; }
.table th.num, .table td.num { text-align: right; }
.table--cases { min-width: 980px; }
.table--intake { min-width: 900px; }
.table--compact td, .table--compact th { padding-top: 9px; padding-bottom: 9px; }
.card--pad .table--compact th:first-child, .card--pad .table--compact td:first-child { padding-left: 0; }
.card--pad .table--compact th:last-child, .card--pad .table--compact td:last-child { padding-right: 0; }
.table--types { max-width: 560px; }
.table--payments { min-width: 560px; }
tr[data-href] { cursor: pointer; }
tr[data-href]:hover td { background: var(--fill-3); }
.cell-title { font-weight: var(--fw-medium); }
.cell-link { font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.cell-request { white-space: nowrap; }
.cell-actions { width: 1%; }
.row-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.row-actions .btn { white-space: nowrap; }
.override { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
.override .input { width: auto; max-width: 168px; min-height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.th-sort { display: inline-flex; align-items: center; gap: 4px; color: var(--label-3); }
.th-sort:hover { color: var(--label); text-decoration: none; }
.th-sort.is-sorted { color: var(--label); }
.th-sort__arrow { font-size: 12px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.pager__info { color: var(--label-3); font-size: 14px; }

/* ================================================================ 12 TABS (intake) */
.tabs { display: flex; gap: 4px; margin: 0 -16px 12px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__item {
  display: inline-flex; flex: none; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  color: var(--label); font-size: 15px; line-height: 20px; font-weight: var(--fw-medium); white-space: nowrap;
}
.tabs__item:hover { text-decoration: none; color: var(--label); background: var(--fill-2); }
.tabs__item.is-active { color: var(--tint-ink); background: var(--tint-bg); }
.tabs__count { min-width: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--fill-2); color: var(--label-3);
               font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.tabs__item.is-active .tabs__count { background: var(--surface); color: var(--tint-ink); }

/* ================================================================ 13 DASHBOARD */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
@media (min-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.pipeline { display: flex; flex-direction: column; gap: 12px; }
.pipeline__services { margin: 0; padding: 0; list-style: none; }
.pipeline__service { padding: 10px 0; }
.pipeline__service + .pipeline__service { border-top: .5px solid var(--separator); }
.pipeline__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pipeline__name { color: var(--label); font-size: 15px; line-height: 20px; font-weight: var(--fw-medium); }
.pipeline__total { color: var(--label-2); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.pipeline__service.is-empty .pipeline__name, .pipeline__service.is-empty .pipeline__total { color: var(--label-4); font-weight: var(--fw-regular); }
.pipeline__stages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.stage-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 3px 4px 3px 10px;
              border-radius: var(--r-pill); background: var(--fill-2); color: var(--label-2); font-size: 13px; line-height: 17px; }
.stage-pill:hover { text-decoration: none; color: var(--tint-ink); background: var(--tint-bg); }
.stage-pill__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-pill__count { flex: none; min-width: 22px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--surface);
                     color: var(--label); text-align: center; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.avg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .avg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .avg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.avg-list { margin: 0; padding: 0; list-style: none; }
.avg-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; line-height: 19px; }
.avg-list li + li { border-top: .5px solid var(--separator); }
.avg-list__name { min-width: 0; color: var(--label-2); }
.avg-list__value { flex: none; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* ================================================================ 14 BOARD */
.board { display: flex; align-items: flex-start; gap: 12px; margin: 6px -16px 0; padding: 0 16px 12px; overflow-x: auto; }
.board__col { flex: 0 0 272px; min-width: 0; padding: 10px; border-radius: var(--r-lg); background: var(--fill-3);
              box-shadow: inset 0 0 0 .5px var(--separator); }
.board__head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; }
.board__step { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
               background: var(--surface); color: var(--label-3); font-size: 12px; font-weight: var(--fw-semibold); }
.board__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; line-height: 19px; }
.board__count { color: var(--label-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.board__empty { margin: 10px 4px 4px; color: var(--label-4); font-size: 13px; }
.board-card { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding: 11px 12px; border-radius: var(--r-md);
              background: var(--surface); box-shadow: var(--sh-1); color: var(--label); }
.board-card:hover { text-decoration: none; color: var(--label); box-shadow: var(--sh-2); }
.board-card__name { font-size: 15px; line-height: 20px; font-weight: var(--fw-medium); }
.board-card__ref { color: var(--label-3); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.board-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
@media (min-width: 1024px) { .board, .chipbar, .tabs { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } }

/* ================================================================ 15 CASE PAGE */
.case-head { margin-bottom: 16px; padding: 0 4px; }
.case-head__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.case-head__main { min-width: 0; }
.case-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--label-2); font-size: 14px; line-height: 19px; }
.case-head__service { font-weight: var(--fw-medium); }
.case-head__type { color: var(--label-3); }
.case-head__name { margin: 8px 0 2px; font-size: 26px; line-height: 32px; letter-spacing: -0.012em; overflow-wrap: anywhere; }
.case-head__sub { margin-bottom: 8px; color: var(--label-3); font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(4, auto); } }
.facts__item dt, .kv-list dt { color: var(--label-3); font-size: 12px; line-height: 16px; font-weight: var(--fw-medium); }
.facts__item dd { margin: 2px 0 0; font-size: 14px; line-height: 19px; overflow-wrap: anywhere; }

.case-grid { display: flex; flex-direction: column; gap: 16px; }
.case-col { display: contents; }
.o-1 { order: 1; } .o-2 { order: 2; } .o-3 { order: 3; } .o-4 { order: 4; }
.o-5 { order: 5; } .o-6 { order: 6; } .o-7 { order: 7; } .o-8 { order: 8; }
@media (min-width: 1024px) {
  .case-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .case-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
}
@media (min-width: 1280px) { .case-grid { grid-template-columns: minmax(0, 1fr) 380px; } }

.next-step__stage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 14px; }
.next-step__name { font-size: 20px; line-height: 25px; font-weight: var(--fw-semibold); letter-spacing: -0.009em; }
.next-step__stage .hint { flex-basis: 100%; margin: 0; }
.next-step__more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: .5px solid var(--separator); }
.action-form__q { margin: 0 0 8px; font-weight: var(--fw-medium); }
.action-form__row { display: flex; flex-wrap: wrap; gap: 10px; }
/* stage names can be long ("Done: Receive the malpractice insurance certificate"): let these buttons wrap */
.action-form__row .btn, .next-step__more .btn { max-width: 100%; white-space: normal; text-align: center;
                                                padding-top: 7px; padding-bottom: 7px; }
.action-form .hint { margin-top: 8px; }

.disclosure { margin-top: 14px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 .5px var(--separator); }
.disclosure > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; cursor: pointer;
                        color: var(--tint-ink); font-weight: var(--fw-medium); list-style: none; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor;
                                border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-fast); }
.disclosure[open] > summary::before { transform: rotate(45deg); }
.disclosure > form { padding: 0 14px 14px; }

.progress { display: block; width: 100%; height: 6px; margin: -2px 0 12px; border: 0; border-radius: var(--r-pill);
            background: var(--fill-2); color: var(--green); overflow: hidden; appearance: none; -webkit-appearance: none; }
.progress::-webkit-progress-bar { background: var(--fill-2); border-radius: var(--r-pill); }
.progress::-webkit-progress-value { background: var(--green); border-radius: var(--r-pill); }
.progress::-moz-progress-bar { background: var(--green); border-radius: var(--r-pill); }

.doc-lines { margin: 0; padding: 0; list-style: none; }
.doc-line { padding: 10px 0; }
.doc-line + .doc-line { border-top: .5px solid var(--separator); }
.doc-line__head { display: flex; align-items: center; gap: 12px; }
.doc-line__mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
                  box-shadow: inset 0 0 0 1.5px var(--separator-opaque); color: #fff; }
.doc-line__mark .ico { width: 15px; height: 15px; stroke-width: 2.4; }
.doc-line.is-done .doc-line__mark { background: var(--green); box-shadow: none; }
.doc-line--required:not(.is-done) .doc-line__mark { box-shadow: inset 0 0 0 1.5px var(--amber); }
.doc-line--not_needed .doc-line__label, .doc-line--not_needed .doc-line__note { color: var(--label-4); }
.doc-line__body { flex: 1 1 auto; min-width: 0; }
.doc-line__label { font-size: 15px; line-height: 20px; font-weight: var(--fw-medium); }
.doc-line__note { color: var(--label-3); font-size: 13px; line-height: 18px; }
.doc-line--check .doc-line__note { color: var(--amber-ink); }
.upload { flex: none; display: flex; align-items: center; gap: 6px; }
.upload__btn { position: relative; overflow: hidden; }
.upload__btn:focus-within { outline: 2px solid var(--tint); outline-offset: 2px; }
.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.files { margin: 8px 0 0 36px; padding: 0; list-style: none; }
.file { display: flex; align-items: center; gap: 8px; padding: 6px 0; min-width: 0; }
.file__icon { color: var(--label-3); width: 18px; height: 18px; }
.file__body { flex: 1 1 auto; min-width: 0; }
.file__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 19px; font-weight: var(--fw-medium); }
.file__meta { color: var(--label-3); font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-line--other { margin-top: 4px; }

.stat-list { margin: 0; padding: 0; list-style: none; }
.stat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 0; }
.stat-row + .stat-row { border-top: .5px solid var(--separator); }
.stat-row__body { flex: 1 1 220px; min-width: 0; }
.stat-row__title { font-size: 15px; line-height: 20px; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.stat-row__meta { color: var(--label-3); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.stat-row .chips { margin-top: 4px; }
.stat-row__import { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stat-row__import .input { width: auto; max-width: 240px; }

.stepper { margin: 0; padding: 0; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 28px; bottom: 2px; left: 12.5px; width: 1.5px;
                                background: var(--separator-opaque); }
.step--done:not(:last-child)::after { background: var(--green-line); }
.step__dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fill-2);
             color: var(--label-3); font-size: 12px; line-height: 1; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.step__dot .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.step--done .step__dot { background: var(--green-bg); color: var(--green-ink); }
.step--current .step__dot { background: var(--tint); color: #fff; box-shadow: 0 0 0 4px var(--tint-bg); }
.step__body { padding-top: 3px; min-width: 0; }
.step__name { font-size: 14px; line-height: 19px; }
.step--current .step__name { font-weight: var(--fw-semibold); }
.step--upcoming .step__name { color: var(--label-3); }
.step__meta { color: var(--label-3); font-size: 12px; line-height: 16px; }
.step__meta .kinds { margin-top: 2px; }

.kv-list { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.kv-list dd { margin: 2px 0 0; font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.kv-list--grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; }
@media (min-width: 720px) { .kv-list--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kv-list__wide { grid-column: 1 / -1; }
.kv { display: flex; flex-direction: column; }
.kv__k { color: var(--label-3); font-size: 12px; line-height: 16px; font-weight: var(--fw-medium); }
.kv__v { font-size: 15px; line-height: 20px; }

.note-form { margin-bottom: 8px; }
.timeline { margin: 8px 0 0; padding: 0; list-style: none; }
.event { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
.event + .event { border-top: .5px solid var(--separator); }
.event__dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--fill); }
.event--advance .event__dot, .event--approved .event__dot, .event--passed .event__dot, .event--created .event__dot { background: var(--green); }
.event--returned .event__dot, .event--failed .event__dot, .event--cancel .event__dot { background: var(--red); }
.event--hold .event__dot, .event--step_back .event__dot { background: var(--amber); }
.event--note .event__dot, .event--payment .event__dot { background: var(--tint); }
.event__title { font-size: 15px; line-height: 20px; font-weight: var(--fw-medium); }
.event__text { margin-top: 2px; color: var(--label-2); font-size: 14px; line-height: 19px; white-space: pre-wrap; overflow-wrap: anywhere; }
.event__changes { margin: 4px 0 0; padding-left: 16px; color: var(--label-2); font-size: 13px; line-height: 18px; }
.event__warn { margin-top: 2px; color: var(--amber-ink); font-size: 13px; }
.event__meta { margin-top: 3px; color: var(--label-3); font-size: 12px; line-height: 16px; }

/* ================================================================ 16 DIALOGS */
.dialog {
  width: 560px; max-width: calc(100% - 24px); max-height: calc(100% - 32px); margin: auto; padding: 0; border: 0;
  border-radius: var(--r-xl); background: var(--alert-bg); color: var(--label); box-shadow: var(--sh-3); overflow: auto;
}
.dialog::backdrop { background: var(--backdrop); }
.dialog--wide { width: 720px; }
.dialog__body { padding: 22px 20px 6px; }
.dialog__title { margin: 0; font-size: 20px; line-height: 25px; letter-spacing: -0.009em; }
.dialog__sub { margin: 4px 0 16px; color: var(--label-3); font-size: 15px; line-height: 20px; }
.dialog__body > .field + .field, .dialog__body > .picker + .field { margin-top: 14px; }
.dialog__body .hint { margin-top: 12px; }
.dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 16px 20px 20px; }
@media (max-width: 559px) {
  .dialog { width: 100%; max-width: 100%; max-height: 92%; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .dialog__foot { padding-bottom: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .dialog__foot .btn { flex: 1 1 0; }
}
.dialog--preview { width: 960px; height: 90vh; display: none; flex-direction: column; overflow: hidden; }
.dialog--preview[open] { display: flex; }
.preview__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
                 padding: 12px 14px; border-bottom: .5px solid var(--separator); }
.preview__title { flex: 1 1 200px; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                  font-size: 16px; line-height: 21px; }
.preview__actions { display: flex; gap: 6px; }
.preview__body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; background: var(--surface-2); }
.preview__frame { width: 100%; height: 100%; border: 0; background: #fff; }
.preview__img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ================================================================ 17 SETTINGS, MORE, LOGIN, ERRORS */
.wf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1100px) { .wf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wf { border-top: .5px solid var(--separator); }
.wf > summary { display: flex; flex-direction: column; gap: 1px; padding: 10px 0; cursor: pointer; list-style: none; }
.wf > summary::-webkit-details-marker { display: none; }
.wf__name { color: var(--tint-ink); font-size: 15px; line-height: 20px; font-weight: var(--fw-medium); }
.wf__meta { color: var(--label-3); font-size: 13px; line-height: 18px; }
.wf__body { display: grid; gap: 12px; padding: 0 0 12px; }
.wf__h { margin: 0 0 4px; color: var(--label-3); font-size: 12px; line-height: 16px; font-weight: var(--fw-medium);
         text-transform: uppercase; letter-spacing: .04em; }
.wf__stages, .wf__docs { margin: 0; padding-left: 20px; font-size: 14px; line-height: 20px; }
.wf__stages li + li, .wf__docs li + li { margin-top: 3px; }
.wf__stages .sub { margin: 0; }

.me-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 16px; }
.me-card__name { margin-top: 12px; font-size: 22px; line-height: 28px; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.me-card__role { margin-top: 2px; color: var(--label-2); font-size: 15px; line-height: 20px; }
.me-card__login { margin-top: 2px; color: var(--label-3); font-size: 14px; line-height: 19px; overflow-wrap: anywhere; }

.auth-wrap { display: grid; place-items: center; min-height: calc(100vh - 48px); padding: 24px 0; }
.auth-card { width: 100%; max-width: 420px; padding: 28px 22px 22px; }
.auth-card__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-card__title { margin: 0; font-size: 26px; line-height: 32px; letter-spacing: -0.012em; }
.auth-card__sub { margin: 4px 0 18px; color: var(--label-3); font-size: 15px; line-height: 20px; }
.auth-card__note { margin: 16px 0 0; color: var(--label-3); font-size: 13px; line-height: 18px; text-align: center; }

.error-page { max-width: 520px; margin: 48px auto; padding: 0 8px; text-align: center; }
.error-page__code { color: var(--label-4); font-size: 15px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.error-page__title { margin: 6px 0 8px; font-size: 26px; line-height: 32px; letter-spacing: -0.012em; }
.error-page__text { margin: 0 0 20px; color: var(--label-2); font-size: 16px; line-height: 22px; }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
@media print {
  .sidebar, .topbar, .tabbar, .btn, .upload, .next-step__more, .note-form { display: none !important; }
  .app .main { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}