/* ==========================================================================
   Compazable theme: Direction A2 "Calm Professional, Compazable blue"
   --------------------------------------------------------------------------
   Load AFTER Bootstrap (if Bootstrap is used) so the overrides win.
   Copied as-is from the approved design package
   (design/compazable-redesign/theme/compazable-theme.css). Keep it that
   way: app-specific additions and small corrections live in
   compazable-shell.css next door, so this file can be swapped for a newer
   version from the designers without losing anything.
   Font: Compazable serves Plus Jakarta Sans from its own server - see
   /static/vendor/plus-jakarta-sans/plus-jakarta-sans.css - instead of the
   Google Fonts link the design package suggested (the app's security
   policy only allows fonts from its own server).
   All new classes are prefixed "cz-" so they never clash with existing ones.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Colour */
  --cz-bg: #F6F7F9;            /* page background */
  --cz-surface: #FFFFFF;       /* cards, sidebar, top bar */
  --cz-ink: #101828;           /* main text */
  --cz-muted: #5B6474;         /* secondary text (meets 4.5:1 on white) */
  --cz-faint: #98A2B3;         /* icons, inactive sort arrows only (not body text) */
  --cz-line: #E4E7EC;          /* borders, dividers */
  --cz-accent: #0D6EFD;        /* Compazable blue: primary buttons, active states */
  --cz-accent-deep: #0A58CA;   /* links and blue text on white */
  --cz-accent-soft: #E7F1FF;   /* selected menu item, info banners, avatars */

  /* Status (background / text pairs) */
  --cz-warn-bg: #FFF4E5;  --cz-warn: #9A4A00;   /* needs action, missing data, returned */
  --cz-ok-bg: #E7F6EE;    --cz-ok: #146C43;     /* done, agreed, rated */
  --cz-neutral-bg: #F2F4F7; --cz-neutral: #475467; /* draft, not yet due */

  /* Type */
  --cz-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cz-text-xs: 12px; --cz-text-sm: 13px; --cz-text: 14px; --cz-text-md: 15px;
  --cz-text-lg: 17px; --cz-text-xl: 20px; --cz-text-2xl: 28px;

  /* Shape and space */
  --cz-radius-sm: 8px; --cz-radius: 10px; --cz-radius-lg: 14px; --cz-radius-xl: 16px;
  --cz-shadow-pop: 0 12px 32px rgba(16, 24, 40, .14);
  --cz-sidebar-w: 248px;
  --cz-topbar-h: 64px;
  --cz-tabbar-h: 64px;
  --cz-touch: 44px;            /* minimum tap target */
}

/* ---------- 2. Bootstrap 5 bridge (restyles existing markup) ---------- */
:root {
  --bs-primary: var(--cz-accent);
  --bs-primary-rgb: 13, 110, 253;
  --bs-link-color: var(--cz-accent-deep);
  --bs-link-hover-color: var(--cz-accent-deep);
  --bs-body-font-family: var(--cz-font);
  --bs-body-color: var(--cz-ink);
  --bs-body-bg: var(--cz-bg);
  --bs-border-color: var(--cz-line);
  --bs-border-radius: var(--cz-radius);
  --bs-border-radius-lg: var(--cz-radius-lg);
  --bs-secondary-color: var(--cz-muted);
}
body { font-family: var(--cz-font); color: var(--cz-ink); background: var(--cz-bg); }
.card { border-color: var(--cz-line); border-radius: var(--cz-radius-lg); box-shadow: none; }
.btn { border-radius: var(--cz-radius); font-weight: 600; min-height: 40px; }
.badge { border-radius: 999px; font-weight: 600; }

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--cz-accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--cz-accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.cz-h1 { margin: 0; font-size: var(--cz-text-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.cz-h2 { margin: 0; font-size: var(--cz-text-lg); font-weight: 700; }
.cz-sub { margin: 0; font-size: var(--cz-text); color: var(--cz-muted); line-height: 1.5; }
.cz-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 4. App shell: sidebar (desktop) + bottom tab bar (phone) ---------- */
.cz-shell { display: flex; min-height: 100vh; }
.cz-sidebar {
  width: var(--cz-sidebar-w); flex-shrink: 0; background: var(--cz-surface);
  border-right: 1px solid var(--cz-line); padding: 24px 16px; display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.cz-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-weight: 700; font-size: 18px; color: var(--cz-ink); }
.cz-brand__mark { width: 32px; height: 32px; border-radius: 9px; background: var(--cz-accent); color: #fff; display: grid; place-items: center; font-weight: 800; }
.cz-nav { display: flex; flex-direction: column; gap: 2px; }
.cz-nav__item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--cz-radius);
  font-size: var(--cz-text); font-weight: 500; color: #344054; text-decoration: none;
}
.cz-nav__item:hover { background: var(--cz-bg); text-decoration: none; }
.cz-nav__item[aria-current="page"] { background: var(--cz-accent-soft); color: var(--cz-accent-deep); font-weight: 600; }
.cz-nav__group > summary { list-style: none; cursor: pointer; }
.cz-nav__group > summary::-webkit-details-marker { display: none; }
.cz-nav__group[open] > summary { color: var(--cz-ink); font-weight: 600; }
.cz-nav__sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 30px; }
.cz-nav__sub .cz-nav__item { padding: 8px 12px; color: var(--cz-muted); }
.cz-sidebar__me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid var(--cz-line); font-size: var(--cz-text-sm); }

.cz-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cz-topbar {
  height: var(--cz-topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 40px; background: var(--cz-surface); border-bottom: 1px solid var(--cz-line); position: sticky; top: 0; z-index: 10;
}
.cz-content { padding: 32px 40px 48px; display: flex; flex-direction: column; gap: 24px; max-width: 1280px; width: 100%; }
.cz-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cz-pagehead__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.cz-iconbtn {
  width: 40px; height: 40px; border-radius: var(--cz-radius); border: 1px solid var(--cz-line); background: var(--cz-surface);
  color: var(--cz-muted); display: inline-grid; place-items: center; position: relative; cursor: pointer;
}
.cz-iconbtn__dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--cz-warn); }

/* Bottom tab bar: phone only, max 5 items */
.cz-tabbar { display: none; }
@media (max-width: 767.98px) {
  .cz-sidebar, .cz-topbar { display: none; }
  .cz-content { padding: 16px 20px calc(var(--cz-tabbar-h) + 32px + env(safe-area-inset-bottom)); gap: 14px; }
  .cz-h1 { font-size: 26px; }
  .cz-tabbar {
    display: flex; justify-content: space-around; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    height: calc(var(--cz-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--cz-surface); border-top: 1px solid var(--cz-line);
  }
  .cz-tabbar__item {
    min-width: 56px; min-height: var(--cz-touch); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font-size: 11px; font-weight: 500; color: var(--cz-muted); text-decoration: none;
  }
  .cz-tabbar__item[aria-current="page"] { color: var(--cz-accent); font-weight: 700; }
  .cz-phone-header { padding: 8px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
}
@media (min-width: 768px) { .cz-phone-only { display: none !important; } }
@media (max-width: 767.98px) { .cz-desktop-only { display: none !important; } }

/* Focused task screens on phone (forms): back arrow header + fixed action bar */
.cz-actionbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px;
  background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-lg);
}
.cz-actionbar__buttons { display: flex; gap: 10px; }
@media (max-width: 767.98px) {
  .cz-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; border-radius: 0; border-width: 1px 0 0;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .cz-actionbar__hint { display: none; }
  .cz-actionbar__buttons { width: 100%; }
  .cz-actionbar__buttons > * { flex: 1; }
}

/* ---------- 5. Profile switcher (people with more than one profile) ---------- */
.cz-switcher { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cz-switcher__label { padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cz-muted); }
.cz-switcher__button {
  display: flex; align-items: center; justify-content: space-between; height: var(--cz-touch); padding: 0 12px;
  border-radius: var(--cz-radius); border: 1px solid var(--cz-line); background: var(--cz-surface);
  font: inherit; font-size: var(--cz-text); font-weight: 600; color: var(--cz-ink); cursor: pointer;
}
.cz-switcher__button[aria-expanded="true"] { border-color: var(--cz-accent); }
.cz-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; z-index: 30; padding: 8px;
  background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: 12px; box-shadow: var(--cz-shadow-pop);
  display: flex; flex-direction: column; gap: 2px;
}
.cz-menu[hidden] { display: none; }
.cz-menu__item {
  display: flex; align-items: center; gap: 10px; min-height: var(--cz-touch); padding: 0 12px; border-radius: var(--cz-radius-sm);
  font-size: var(--cz-text); font-weight: 600; color: var(--cz-ink); text-decoration: none; background: none; border: 0; font-family: inherit; text-align: left; cursor: pointer;
}
.cz-menu__item:hover { background: var(--cz-bg); text-decoration: none; }
.cz-menu__item[aria-current="true"] { background: var(--cz-accent-soft); color: var(--cz-accent-deep); }
.cz-menu__item--danger { color: var(--cz-warn); }
.cz-menu__divider { height: 1px; background: var(--cz-line); margin: 4px 0; }
.cz-pill-switch {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--cz-line); background: var(--cz-surface); font: inherit; font-size: var(--cz-text-sm); font-weight: 600;
}

/* ---------- 6. Buttons ---------- */
.cz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--cz-touch); padding: 0 18px;
  border-radius: var(--cz-radius); border: 1px solid transparent; font: inherit; font-size: var(--cz-text); font-weight: 600;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.cz-btn:hover { text-decoration: none; filter: brightness(.97); }
.cz-btn--primary { background: var(--cz-accent); border-color: var(--cz-accent); color: #fff; }
.cz-btn--secondary { background: var(--cz-surface); border-color: var(--cz-line); color: var(--cz-ink); }
.cz-btn--ghost { background: transparent; color: var(--cz-accent-deep); }
.cz-btn--sm { height: 36px; padding: 0 12px; font-size: var(--cz-text-sm); }
.cz-btn--block { width: 100%; }
.cz-btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Destructive actions (Delete, Withdraw) live inside a "More" menu, never as a red button on every row. */

/* ---------- 7. Status chips ---------- */
.cz-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: var(--cz-text-xs); font-weight: 600; white-space: nowrap; line-height: 1.3;
}
.cz-chip--info { background: var(--cz-accent-soft); color: var(--cz-accent-deep); }
.cz-chip--warn { background: var(--cz-warn-bg); color: var(--cz-warn); }
.cz-chip--ok { background: var(--cz-ok-bg); color: var(--cz-ok); }
.cz-chip--neutral { background: var(--cz-neutral-bg); color: var(--cz-neutral); }
.cz-missing { font-size: var(--cz-text-sm); font-weight: 600; color: var(--cz-warn); } /* e.g. "Not assigned" instead of "-" */

/* ---------- 8. Cards, hero, stats, banners, empty states ---------- */
.cz-card { background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.cz-card--highlight { border-color: var(--cz-accent); }
@media (max-width: 767.98px) { .cz-card { padding: 18px; } }
.cz-grid { display: grid; gap: 16px; grid-template-columns: repeat(var(--cz-cols, 3), minmax(0, 1fr)); }
@media (max-width: 767.98px) { .cz-grid { grid-template-columns: repeat(var(--cz-cols-phone, 1), minmax(0, 1fr)); gap: 10px; } }

/* The one thing that needs doing, shown first */
.cz-hero { background: var(--cz-accent); color: #fff; border-radius: var(--cz-radius-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.cz-hero__number { font-size: 44px; font-weight: 800; line-height: 1; }
.cz-hero .cz-btn { background: #fff; color: var(--cz-accent-deep); align-self: flex-start; }
.cz-stat { font-size: 32px; font-weight: 800; line-height: 1; }

.cz-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 12px; font-size: var(--cz-text); line-height: 1.5; }
.cz-banner--info { background: var(--cz-accent-soft); color: var(--cz-ink); }
.cz-banner--warn { background: var(--cz-warn-bg); color: var(--cz-ink); }
.cz-banner--ok { background: var(--cz-ok-bg); color: var(--cz-ink); }
.cz-banner--private { background: var(--cz-bg); border: 1px solid var(--cz-line); } /* padlock notes: "Priya never sees these" */
.cz-banner__action { margin-left: auto; }

.cz-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 16px; text-align: center; }
.cz-empty__icon { width: 56px; height: 56px; border-radius: 16px; background: var(--cz-accent-soft); color: var(--cz-accent-deep); display: grid; place-items: center; }
.cz-empty p { max-width: 520px; margin: 0; color: var(--cz-muted); line-height: 1.5; }

.cz-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--cz-accent-soft); color: var(--cz-accent-deep); display: grid; place-items: center; font-size: 13px; font-weight: 700; }

/* ---------- 9. Tables: every column sortable, searchable and filterable ---------- */
/* Use a real <table>. table-layout: fixed + <colgroup> guarantees headings and data line up. */
.cz-table-wrap { position: relative; background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-lg); overflow-x: auto; }
.cz-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--cz-text); }
.cz-table th, .cz-table td { padding: 12px 20px; text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.cz-table thead th { background: var(--cz-bg); padding-top: 8px; padding-bottom: 8px; }
.cz-table tbody tr { border-top: 1px solid var(--cz-line); }
.cz-table tbody tr:hover { background: #FAFBFC; }
.cz-table .cz-num { text-align: right; }   /* apply to BOTH th and td of number columns */
.cz-th { display: flex; align-items: center; gap: 4px; }
.cz-num .cz-th { justify-content: flex-end; }
.cz-th__sort {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--cz-text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cz-muted);
}
.cz-th__sort[aria-sort="ascending"], .cz-th__sort[aria-sort="descending"] { color: var(--cz-accent-deep); }
.cz-th__filter {
  position: relative; width: 26px; height: 26px; border-radius: 6px; border: 0; background: transparent; color: var(--cz-faint);
  display: inline-grid; place-items: center; cursor: pointer;
}
.cz-th__filter[data-active="true"] { background: var(--cz-accent-soft); color: var(--cz-accent-deep); }
.cz-th__filter[data-active="true"]::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--cz-accent); }
/* Column filter panel: sort A-Z / Z-A, search box, tick-list of values, Clear / Apply */
.cz-popover { position: absolute; z-index: 30; width: 280px; padding: 14px; background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: 12px; box-shadow: var(--cz-shadow-pop); display: flex; flex-direction: column; gap: 10px; }
.cz-popover[hidden] { display: none; }
.cz-popover__list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; }
.cz-popover__list label { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.cz-popover__foot { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--cz-line); }
.cz-pager { display: flex; align-items: center; justify-content: space-between; font-size: var(--cz-text-sm); color: var(--cz-muted); }

/* Quick filter buttons above a table ("No role 12", "Needs action 3") */
.cz-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.cz-seg__btn { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cz-line); background: var(--cz-surface); font: inherit; font-size: var(--cz-text-sm); font-weight: 600; color: var(--cz-ink); cursor: pointer; }
.cz-seg__btn[aria-pressed="true"] { background: var(--cz-ink); border-color: var(--cz-ink); color: #fff; }
.cz-seg__count { opacity: .7; margin-left: 4px; }
/* View toggle (Chart / Table, Company / By department) */
.cz-toggle { display: inline-flex; border: 1px solid var(--cz-line); border-radius: var(--cz-radius); overflow: hidden; background: var(--cz-surface); }
.cz-toggle button { height: 38px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: var(--cz-text-sm); font-weight: 600; color: var(--cz-ink); cursor: pointer; }
.cz-toggle button[aria-pressed="true"] { background: var(--cz-ink); color: #fff; }

/* Phone: tables become one-line-per-record lists */
.cz-list { background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-lg); overflow: hidden; }
.cz-list__row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; min-height: var(--cz-touch); border-bottom: 1px solid var(--cz-line); color: var(--cz-ink); text-decoration: none; }
.cz-list__row:last-child { border-bottom: 0; }
.cz-list__row:hover { text-decoration: none; background: #FAFBFC; }
.cz-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cz-list__title { font-size: var(--cz-text-md); font-weight: 600; }
.cz-list__meta { font-size: var(--cz-text-xs); color: var(--cz-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 10. Forms ---------- */
.cz-field { display: flex; flex-direction: column; gap: 8px; }
.cz-label { font-size: var(--cz-text); font-weight: 600; }
.cz-label small { font-weight: 400; color: var(--cz-muted); font-size: inherit; }
.cz-input, .cz-textarea, .cz-select {
  width: 100%; min-height: var(--cz-touch); padding: 10px 14px; border-radius: var(--cz-radius); border: 1px solid var(--cz-line);
  background: var(--cz-surface); font: inherit; font-size: var(--cz-text-md); color: var(--cz-ink);
}
.cz-textarea { min-height: 76px; resize: vertical; }
.cz-input:focus, .cz-textarea:focus, .cz-select:focus { border-color: var(--cz-accent); outline: none; box-shadow: 0 0 0 3px var(--cz-accent-soft); }
.cz-search { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: var(--cz-radius); background: var(--cz-bg); color: var(--cz-muted); }
.cz-search input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--cz-ink); flex: 1; min-width: 0; }
.cz-saved { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cz-text-sm); color: var(--cz-ok); } /* "Draft saved a moment ago" */

/* Rating scale: 5 large buttons showing number AND level name (replaces tiny radio buttons) */
.cz-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; border: 0; padding: 0; margin: 0; }
.cz-scale input { position: absolute; opacity: 0; pointer-events: none; }
.cz-scale label {
  height: 60px; border-radius: var(--cz-radius); border: 1px solid var(--cz-line); background: var(--cz-surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
}
.cz-scale__num { font-size: 18px; font-weight: 700; }
.cz-scale__name { font-size: var(--cz-text-xs); color: var(--cz-muted); }
.cz-scale input:checked + label { background: var(--cz-accent); border-color: var(--cz-accent); color: #fff; }
.cz-scale input:checked + label .cz-scale__name { color: #fff; }
.cz-scale input:focus-visible + label { outline: 3px solid var(--cz-accent); outline-offset: 2px; }
@media (max-width: 767.98px) { .cz-scale { gap: 6px; } .cz-scale label { height: 58px; } .cz-scale__name { font-size: 10px; } }

/* Read-only rating display: 5 dots + "3 · Competent" */
.cz-dots { display: inline-flex; gap: 4px; }
.cz-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--cz-line); }
.cz-dots span.is-on { background: var(--cz-accent); }

/* Other person's answer shown alongside (self-rating next to manager's) */
.cz-reference { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--cz-bg); }

/* On/off switch: <input type="checkbox" role="switch" class="cz-switch"> */
.cz-switch { appearance: none; width: 48px; height: 28px; flex-shrink: 0; border-radius: 999px; background: #D0D5DD; position: relative; cursor: pointer; margin: 0; }
.cz-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.2); transition: left .15s; }
.cz-switch:checked { background: var(--cz-accent); }
.cz-switch:checked::after { left: 22px; }
.cz-switch:disabled { background: var(--cz-line); cursor: not-allowed; }

/* Progress bar: "1 of 2 rated" */
.cz-progress { height: 8px; border-radius: 999px; background: var(--cz-line); overflow: hidden; }
.cz-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--cz-accent); }

/* ---------- 11. Dialogs and bottom sheets ---------- */
.cz-overlay { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 40; display: grid; place-items: center; }
.cz-dialog { width: min(520px, calc(100vw - 32px)); padding: 28px; border-radius: var(--cz-radius-xl); background: var(--cz-surface); box-shadow: 0 24px 48px rgba(16,24,40,.24); display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 767.98px) {
  .cz-overlay { place-items: end stretch; }
  .cz-dialog { width: 100%; border-radius: 20px 20px 0 0; padding: 12px 16px calc(28px + env(safe-area-inset-bottom)); }
  .cz-dialog::before { content: ""; align-self: center; width: 40px; height: 5px; border-radius: 999px; background: var(--cz-line); }
}