/* Tokens and base layout from docs/product/ui-guidelines.md §3–§5: the
   values of the Figma UI kit (variables, Light and Dark modes). */

/* Self-hosted fonts (static/fonts/VERSION.md; CSP font-src 'self'). */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope/manrope-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --bg-page: #F8F8FA;
  --bg-page-gradient: linear-gradient(180deg, #F8F8FA 0%, #F2F3FF 50%, #F8F8FA 100%);
  --bg-surface: #FFFFFF;
  --border: #E1E2E7;
  --text-primary: #13151D;
  --text-secondary: #535764;
  --accent: #3A5AFF;
  --accent-hover: #0019BE;
  --on-accent: #FFFFFF;
  /* Text that is a link or acts like one; accent stays for fills and borders. */
  --link: #3A5AFF;
  --link-hover: #0019BE;
  --error-text: #D52410;
  --error-bg: #FFF1EF;
  --info-text: #0C78A2;
  --info-bg: #E9F9FF;
  --ok-text: #1A8337;
  --ok-bg: #E9FFEF;
  --neutral-text: #535764;
  --neutral-bg: #F1F2F4;
  --radius: 12px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --player-height: 72px;
  /* The top bar stays at the top of the window (UI §6 «Навігація»): its height
     with the space around it, kept clear when the page scrolls to an anchor. */
  --topbar-height: 88px;
  --topbar-gap: 12px;
  --topbar-fade: 8px;
  /* Severity (UI §3): reserved for statuses, never decoration. */
  --critical-text: #D7105D;
  --critical-bg: #FFF1EF;
  --major-text: #906A08;
  --major-bg: #FFF9E9;
  --minor-text: #1A8337;
  --minor-bg: #E9FFEF;
  /* Top bar (Figma: Header, Button Tertiary, Segmented Controller). */
  --topbar-bg: rgba(255, 255, 255, 0.6);
  --topbar-border: #FFFFFF;
  --topbar-shadow: 4px 4px 11px rgba(0, 0, 0, 0.03);
  --nav-item-bg: transparent;
  --nav-hover-bg: #F6F9FF;
  --nav-current-bg: #E7F0FF;
  --theme-switch-bg: #FFEEC2;
  --theme-switch-icon: #F3BC2C;
  --theme-switch-active-bg: #F3BC2C;
  --theme-switch-active-icon: #FFFFFF;
  --badge-bg: #D52410;
  --badge-text: #FFFFFF;
  /* Buttons and form controls (Figma: Button Accent/Outline, Text Input,
     Select Input). States the kit does not spell out are built from its
     palette: pressed Brand 80, disabled Neutral 24/48, focus ring Brand 16. */
  --accent-pressed: #03288F;
  --control-border-hover: #C2C4CB;
  --focus-ring: #E7F0FF;
  --disabled-bg: #E1E2E7;
  --disabled-text: #818397;
  --select-arrow: url("../img/icons/chevron-down-16.svg");
  --search-clear: url("../img/icons/close-16.svg");
  --scrollbar-thumb: #C2C4CB;
  /* Cards (Figma: surface/card, border/surface): glass over the page
     gradient, radius 16. Severity and status glyphs take the kit's
     foreground colours (Figma: charts/series/violations). */
  --card-bg: rgba(255, 255, 255, 0.6);
  --card-border: #FFFFFF;
  --card-shadow: 4px 4px 11px rgba(0, 0, 0, 0.03);
  --radius-card: 16px;
  --critical-fg: #F14889;
  --major-fg: #F3BC2C;
  --minor-fg: #28C955;
}

/* Dark theme (ui-guidelines.md §2–§3): the same tokens, other values.
   static/js/theme.js sets data-theme on <html> from the user's choice. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #03030F;
  --bg-page-gradient: linear-gradient(180deg, #03030F 0%, #090B28 50%, #03030F 100%);
  --bg-surface: #13151D;
  --border: #3C4047;
  --text-primary: #FFFFFF;
  --text-secondary: #B1B4BB;
  --accent: #3A5AFF;
  --accent-hover: #0019BE;
  --on-accent: #FFFFFF;
  --link: #CEE0FF;
  --link-hover: #E7F0FF;
  --error-text: #F15948;
  --error-bg: #3B060C;
  --info-text: #39BCF0;
  --info-bg: #04252F;
  --ok-text: #28C955;
  --ok-bg: #042F19;
  --neutral-text: #B1B4BB;
  --neutral-bg: #21242A;
  --critical-text: #F14889;
  --critical-bg: #3B060C;
  --major-text: #F3BC2C;
  --major-bg: #43371A;
  --minor-text: #28C955;
  --minor-bg: #042F19;
  --topbar-bg: rgba(10, 10, 10, 0.4);
  --topbar-border: #21242A;
  --topbar-shadow: none;
  --nav-item-bg: var(--bg-surface);
  --nav-hover-bg: #21242A;
  --nav-current-bg: #00155F;
  --theme-switch-bg: #253B64;
  --theme-switch-icon: #39BCF0;
  --theme-switch-active-bg: #39BCF0;
  --theme-switch-active-icon: #FFFFFF;
  --badge-bg: #D52410;
  --badge-text: #FFFFFF;
  --accent-pressed: #03288F;
  --control-border-hover: #535764;
  --focus-ring: #00155F;
  --disabled-bg: #21242A;
  --disabled-text: #818397;
  --select-arrow: url("../img/icons/chevron-down-16-on-dark.svg");
  --search-clear: url("../img/icons/close-16-on-dark.svg");
  --scrollbar-thumb: #3C4047;
  --card-bg: rgba(10, 10, 10, 0.4);
  --card-border: #21242A;
  --card-shadow: none;
  --critical-fg: #F14889;
  --major-fg: #F3BC2C;
  --minor-fg: #28C955;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--topbar-height) + var(--topbar-fade)); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-page) var(--bg-page-gradient) no-repeat fixed;
  color: var(--text-primary);
  font: 14px/20px var(--font);
}

/* Heading scale of the kit (Typography/Desktop/Heading H1–H3). */
h1 { font-size: 28px; line-height: 32px; font-weight: 700; margin: 0 0 16px; }
h2 { font-size: 24px; line-height: 28px; font-weight: 700; margin: 0 0 16px; }
h3 { font-size: 20px; line-height: 24px; font-weight: 700; margin: 0 0 12px; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Top bar of the UI kit (ui-guidelines.md §6 «Навігація»): a rounded glass
   bar with the logo, the sections, notifications, the profile and the theme.
   It stays at the top of the window while the page scrolls. Behind it lies
   the page's own background (fixed, as the body's); once the page is
   scrolled (`data-scrolled`, menu.js) it fades out from the bar's lower edge
   down to --topbar-fade below the top bar, so the content passing under it
   melts away instead of being cut off. At rest nothing covers the content. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--topbar-gap);
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-page) var(--bg-page-gradient) no-repeat fixed;
  pointer-events: none;
}
.topbar[data-scrolled]::before {
  bottom: calc(-1 * var(--topbar-fade));
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--topbar-fade) - var(--topbar-gap)), transparent);
}
.topbar__bar {
  display: flex;
  align-items: center;
  padding: 12px 28px;
  border: 2px solid var(--topbar-border);
  border-radius: 40px;
  background: var(--topbar-bg);
  box-shadow: var(--topbar-shadow);
}
.topbar__logo { display: inline-flex; color: var(--text-primary); }
.logo {
  width: 70px;
  height: 24px;
  background-color: currentColor;
  mask: url("../img/logo-slukh.svg") no-repeat center / contain;
}

/* Icons of the kit: the SVG is a mask, so the icon takes the text colour of
   the theme (currentColor). */
.icon {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.icon--account { mask-image: url("../img/icons/account-20.svg"); }
.icon--chevron { mask-image: url("../img/icons/chevron-down-20.svg"); }
.icon--chevron-16 { width: 16px; height: 16px; mask-image: url("../img/icons/chevron-down-16.svg"); color: var(--text-secondary); }
.icon--sun { mask-image: url("../img/icons/sun-20.svg"); }
.icon--moon { mask-image: url("../img/icons/moon-20.svg"); }
/* The message glyph is 15.6 × 14.6 inside its 20 px box (Figma: MessageAlert 20). */
.icon--message { mask-image: url("../img/icons/message-20.svg"); mask-size: 15.6px 14.6px; mask-position: 2.2px 3.2px; }
/* The same bubble without the cut-out, while there is no unread counter to fill it. */
.icon--message-plain { mask-image: url("../img/icons/message-plain-20.svg"); }
.icon--calendar { mask-image: url("../img/icons/calendar-20.svg"); }
.icon--clock { mask-image: url("../img/icons/clock-20.svg"); }
.icon--chevron-left { mask-image: url("../img/icons/chevron-left-20.svg"); }
.icon--chevron-right { mask-image: url("../img/icons/chevron-right-20.svg"); }

.topnav { display: flex; align-items: center; gap: 4px; margin: 0 auto 0 32px; }
.topnav__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  min-width: 64px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--nav-item-bg);
  color: var(--text-primary);
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
summary.topnav__item { padding-right: 8px; }
a.topnav__item:hover,
summary.topnav__item:hover { background: var(--nav-hover-bg); color: var(--text-primary); }
.topnav__item[aria-current="page"],
.topnav__item.is-current { background: var(--nav-current-bg); }

.topbar__actions { display: flex; align-items: center; gap: 4px; }
.topbar__bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  background: var(--nav-item-bg);
  color: var(--text-primary);
}
.topbar__bell:hover { background: var(--nav-hover-bg); color: var(--text-primary); }
.topbar__user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  min-width: 80px;
  padding: 6px 8px 6px 12px;
  border-radius: 100px;
  background: var(--nav-item-bg);
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.topbar__user:hover { background: var(--nav-hover-bg); }

/* On a wide screen the foldable part is not a box of its own: the sections
   stay in the middle, the profile and the theme after the notifications. */
.topbar__menu { display: contents; }
.topbar__actions { order: 1; }
.topbar__account { display: flex; align-items: center; order: 2; margin-left: 4px; }
.topbar__toggle { display: none; }

/* Drop-down menus: <details data-menu> (static/js/menu.js closes them). */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.menu--end .menu__panel { left: auto; right: 0; }
.menu__panel form { margin: 0; }
.menu__item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu__item:hover,
.menu__item[aria-current="page"] { background: var(--nav-current-bg); color: var(--text-primary); }

/* Theme switch: a segment per theme, the pressed one is current (theme.js). */
.theme-switch {
  display: inline-flex;
  gap: 2px;
  margin-left: 16px;
  padding: 4px;
  border-radius: 100px;
  background: var(--theme-switch-bg);
}
.theme-switch__item {
  display: inline-flex;
  padding: 4px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--theme-switch-icon);
  cursor: pointer;
}
.theme-switch__item[aria-pressed="true"] { background: var(--theme-switch-active-bg); color: var(--theme-switch-active-icon); }

.content { max-width: 1440px; margin: 0 auto; padding: 20px 40px 40px; }
.footer { padding: 24px 40px 32px; color: var(--text-secondary); font-size: 12px; line-height: 16px; text-align: center; }

.auth { display: flex; align-items: flex-start; justify-content: center; padding-top: 96px; }
.auth__panel {
  width: 360px;
  padding: 32px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}

/* Text controls take the theme's colours wherever they stand (forms, tables,
   textareas); otherwise the dark theme leaves the browser's own grey. A
   control with its own background loses the native border, hence the border.
   Controls do not inherit the page font by default, hence font: inherit. */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select,
textarea {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background-color: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
}
textarea { border-radius: 16px; }
/* The kit's select: a pill with its own chevron instead of the native arrow. */
select {
  appearance: none;
  padding-right: 36px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):hover,
select:hover,
textarea:hover { border-color: var(--control-border-hover); }
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--error-text); }
input:disabled,
select:disabled,
textarea:disabled {
  border-color: var(--border);
  background-color: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: var(--text-secondary); }
/* Checkboxes and radio buttons of the interface (UI §6 «Елементи форм»):
   a rounded box and a circle; checked — the accent with a white tick or a
   dot. */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--control-border-hover);
  border-radius: 4px;
  background: var(--bg-surface) no-repeat center / 12px 12px;
  cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("../img/icons/check-12-on-accent.svg");
}
input[type="radio"]:checked {
  border-color: var(--accent);
  background-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg-surface);
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; }
input[type="checkbox"]:disabled:checked, input[type="radio"]:disabled:checked {
  border-color: var(--disabled-text);
  background-color: var(--disabled-text);
}

/* Number fields without the browser's ▲▼ arrows. */
input[type="number"] { appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }

/* The search field's clear button: the kit's cross instead of the browser's. */
input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--search-clear) no-repeat center / 16px 16px;
  cursor: pointer;
}

/* Date and time fields (static/js/date-fields.js): a text field with a
   button inside it, and a popup — the calendar or the list of times. */
.datefield { position: relative; display: inline-flex; min-width: 160px; }
.datefield--time { min-width: 112px; }
.datefield .datefield__input { width: 100%; min-width: 0; padding-right: 40px; }
.datefield__button {
  position: absolute;
  top: 50%;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: none;
  color: var(--text-secondary);
  transform: translateY(-50%);
  cursor: pointer;
}
.datefield__button:hover,
.datefield__button[aria-expanded="true"] { background: var(--nav-hover-bg); color: var(--text-primary); }
.datefield__button:disabled { color: var(--disabled-text); background: none; cursor: not-allowed; }
.datetimefield { display: flex; flex-wrap: wrap; gap: 8px; }
.datetimefield > .datefield:first-child { flex: 1 1 160px; }

.picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 25;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.picker--end { left: auto; right: 0; }
.picker--up { top: auto; bottom: calc(100% + 8px); }

.datepicker { width: max-content; }
.datepicker__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.datepicker__title { font-weight: 600; line-height: 24px; }
.datepicker__nav, .datepicker__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 100px;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.datepicker__nav:hover, .datepicker__day:hover { background: var(--nav-hover-bg); }
.datepicker__grid { border-collapse: collapse; }
.datepicker__grid th {
  height: 28px;
  padding: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}
.datepicker__grid td { padding: 1px 2px; }
.datepicker__day.is-outside { color: var(--text-secondary); }
.datepicker__day[aria-current="date"] { border-color: var(--accent); font-weight: 700; }
.datepicker__day[aria-pressed="true"],
.datepicker__day[aria-pressed="true"]:hover { background: var(--accent); color: var(--on-accent); }
.datepicker__day:disabled { background: none; color: var(--disabled-text); cursor: not-allowed; }
.datepicker__foot { display: flex; justify-content: space-between; margin-top: 8px; padding: 8px 4px 0; border-top: 1px solid var(--border); }

.timepicker {
  width: 100%;
  min-width: 112px;
  max-height: 240px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
}
.timepicker__option {
  padding: 6px 12px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.timepicker__option:hover, .timepicker__option.is-active { background: var(--nav-hover-bg); }
.timepicker__option[aria-selected="true"] { background: var(--nav-current-bg); font-weight: 600; }

.form { max-width: 400px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field > label { font-weight: 500; line-height: 24px; }
.field__error { margin: 0; color: var(--error-text); font-size: 12px; line-height: 16px; }

.settings-group {
  max-width: 640px;
  margin-bottom: 24px;
  padding: 24px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}
.settings-group .alert { margin: 0 0 16px; }
.provider-block + .provider-block {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.hint, .empty { color: var(--text-secondary); }

.alert { padding: 10px 16px; border-radius: 12px; }
.alert--error { color: var(--error-text); background: var(--error-bg); }
.alert--info { color: var(--info-text); background: var(--info-bg); }

/* Buttons of the kit: pills 36 px high, SemiBold 14/24. .button is Button
   Accent; .button--secondary is Button Outline; .button--link is a text link. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  min-width: 80px;
  padding: 6px 16px;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--accent-hover); color: var(--on-accent); }
.button:active { background: var(--accent-pressed); }
.button:disabled,
.button[aria-disabled="true"] {
  border-color: transparent;
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
}
.button--link {
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--link);
  font-weight: 400;
}
.button--link:active { background: none; }
.button--link:hover { background: none; color: var(--link-hover); }

/* Page headers, tables, filters (ui-guidelines.md §5–§7). */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.page-header h1 { margin: 0; }
.page-actions { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.page-actions form { margin: 0; }


.fieldset {
  margin: 0 0 16px;
  padding: 16px 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.fieldset legend { padding: 0 8px; color: var(--text-secondary); }
.field ul { margin: 0; padding: 0; list-style: none; }
.field li label, .field--checkbox label { display: flex; align-items: center; gap: 8px; }

.table-scroll {
  overflow: auto;
  max-height: calc(100vh - 232px);
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}

h2 { margin: 24px 0 12px; }
.mono { font-family: var(--mono); }
.alert--neutral { color: var(--neutral-text); background: var(--neutral-bg); }
.alert p { margin: 0; }
.button--secondary {
  border-color: var(--accent);
  background: transparent;
  color: var(--link);
}
.button--secondary:hover { background: var(--nav-current-bg); color: var(--link-hover); }
.button--secondary:active { background: var(--nav-current-bg); color: var(--link-hover); }

/* Status badge: colour, icon and text together (UI §1 p. 2, §3). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}
.badge__icon::before { content: "•"; }
.badge--neutral { color: var(--neutral-text); background: var(--neutral-bg); }
.badge--ok { color: var(--ok-text); background: var(--ok-bg); }
.badge--ok .badge__icon::before { content: "✓"; }
.badge--error { color: var(--error-text); background: var(--error-bg); }
.badge--error .badge__icon::before { content: "!"; font-weight: 700; }

/* Conversation list (S2 §1; UI §6 «Таблиця розмов»). */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}
.filters__field { display: flex; flex-direction: column; gap: 8px; }
.filters__field > label, .filters__field > span { font-weight: 500; line-height: 24px; }
.filters .field { min-width: 176px; }
/* A checkbox takes a control's 36px line, so its label sits level with the
   other fields' labels and the box with their controls. */
.filters__field > input[type="checkbox"] { margin-block: 10px; }
.filters__actions { display: flex; align-items: center; gap: 16px; }
.results__count { color: var(--text-secondary); }
.table-wrap {
  overflow-x: auto;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}
.table { width: 100%; border-collapse: collapse; }
/* Tables of the kit: headers SemiBold 14/24, cells 12/16 (decision of
   2026-10-15: the kit's sizes are kept), numbers in tabular figures. */
.table th, .table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.table td { font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.table tbody tr:last-child > * { border-bottom: 0; }
/* Criteria tables: long names and headers wrap instead of widening the table. */
.table--wrap th, .table--wrap td { white-space: normal; }
/* …but a code («C-01») or a time never breaks inside. */
.table--wrap .mono { white-space: nowrap; }
.table th {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-weight: 600;
  line-height: 24px;
}
/* A header cell in a body row (a rule's name) reads as a cell, not a header. */
.table tbody th { position: static; background: none; font-size: 12px; font-weight: 500; line-height: 16px; }
.table__row-link { position: relative; }
.table__row-link:hover { background: var(--nav-hover-bg); }
/* The whole row opens the card: the date link's area covers the row. */
.row-link { color: inherit; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }

/* Conversation card (S2 §1; UI §6 «Картка розмови»). */
.card { padding-bottom: calc(var(--player-height) + 24px); }
.card__header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
.card__header h1 { margin: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 24px; width: 100%; margin: 0; }
.meta dt { color: var(--text-secondary); font-size: 13px; }
.meta dd { margin: 0; }

.transcript { list-style: none; margin: 0; padding: 0; max-width: 880px; }
.segment {
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  font-size: 15px;
  line-height: 1.5;
  /* Off-screen segments cost almost nothing to lay out (ADR-0002, NFR §1). */
  content-visibility: auto;
  contain-intrinsic-size: auto 80px;
  scroll-margin-bottom: calc(var(--player-height) + 16px);
}
/* Operator and debtor differ by alignment and background (UI §6). */
.segment--operator { margin-right: 96px; }
.segment--debtor { margin-left: 96px; background: var(--bg-page); }
.segment.is-current { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.segment__meta { display: flex; align-items: center; gap: 12px; color: var(--text-secondary); font-size: 13px; }
.segment__time {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  cursor: pointer;
  font-size: 13px;
}
.segment__time:hover { color: var(--link-hover); text-decoration: underline; }
.segment__text { margin: 4px 0 0; }

/* Player fixed at the bottom (UI §6). */
.player {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-height: var(--player-height);
  padding: 12px 24px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
}
.player__toggle { min-width: 120px; }
.player__timeline { position: relative; flex: 1; min-width: 200px; }
/* The seek bar: a thin track, the part played in the accent (--progress is
   set by card-player.js), a round knob. */
.player__seek {
  --progress: 0%;
  display: block;
  width: 100%;
  height: 20px;
  margin: 0;
  appearance: none;
  background: none;
  cursor: pointer;
}
.player__seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--progress), var(--border) var(--progress));
}
.player__seek::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--progress), var(--border) var(--progress));
}
.player__seek::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid var(--bg-surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  appearance: none;
}
.player__seek::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid var(--bg-surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.player__markers { position: absolute; inset: 0; pointer-events: none; }
.player__speeds { display: flex; gap: 4px; }
.player__speed {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}
.player__speed[aria-pressed="true"] { border-color: var(--accent); background: var(--info-bg); color: var(--link); }
.player__error { width: 100%; margin: 0; }
.table__number { text-align: right; }
.table__actions form { margin: 0; }

/* Loading: the rows turn into skeleton bars while HTMX fetches the table. */
.table-region.htmx-request .table td { color: transparent; }
.table-region.htmx-request .table td > * { visibility: hidden; }
.table-region.htmx-request .table td::before {
  content: "";
  display: block;
  height: 12px;
  border-radius: 4px;
  background: var(--neutral-bg);
}

.pagination { display: flex; align-items: center; gap: 16px; padding: 16px 0; }

.empty-state {
  padding: 32px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  text-align: center;
}


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Tabs of the section «Розмови» (ui-guidelines §6). */
.tabs { display: flex; gap: 24px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.tabs__tab {
  padding: 8px 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
}
.tabs__tab:hover { color: var(--text-primary); }
.tabs__tab[aria-current="page"] { border-bottom-color: var(--accent); color: var(--text-primary); }

/* Manual upload (S1 §1): one row per file with its indicator and result. */
.upload__search { margin-bottom: 8px; }
/* The file picker: the kit's button and the chosen files in words; the
   browser's own input stays for the keyboard and screen readers, unseen. */
.filepicker { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.filepicker__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filepicker__input:focus-visible + .filepicker__button { outline: 2px solid var(--accent); outline-offset: 2px; }
.filepicker__input[aria-invalid="true"] + .filepicker__button { border-color: var(--error-text); }
.filepicker__names { color: var(--text-secondary); overflow-wrap: anywhere; }
.upload-results { max-width: 880px; margin: 24px 0 0; padding: 0; list-style: none; }
.upload-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  margin-bottom: 8px;
}
.upload-item__name { flex: 1; min-width: 200px; overflow-wrap: anywhere; }
.upload-item__state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.upload-item__reason { color: var(--text-secondary); }
.upload-item progress {
  width: 160px;
  height: 6px;
  border: 0;
  border-radius: 3px;
  background: var(--neutral-bg);
  appearance: none;
}
.upload-item progress::-webkit-progress-bar { border-radius: 3px; background: var(--neutral-bg); }
.upload-item progress::-webkit-progress-value { border-radius: 3px; background: var(--accent); }
.upload-item progress::-moz-progress-bar { border-radius: 3px; background: var(--accent); }


/* --- Conversation card: evaluation (S2 §1, task 4.2) --- */
.card__summary {
  margin: 16px 0;
  padding: 16px 20px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}
.card__summary h2 { margin: 0 0 4px; font-size: 15px; }
.card__summary p { margin: 0; }
.card__body--scored { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 960px) { .card__body--scored { grid-template-columns: 1fr; } }
.rule-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.severity { display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; border-radius: 100px; font-size: 12px; font-weight: 600; line-height: 16px; }
.severity--critical { color: var(--critical-text); background: var(--critical-bg); }
.severity--major { color: var(--major-text); background: var(--major-bg); }
.severity--minor { color: var(--minor-text); background: var(--minor-bg); }
/* The glyph (▲ ◆ ●) in the kit's colour; the words keep the AA text colour. */
.severity--critical > [aria-hidden] { color: var(--critical-fg); }
.severity--major > [aria-hidden] { color: var(--major-fg); }
.severity--minor > [aria-hidden] { color: var(--minor-fg); }
.segment--critical { background: var(--critical-bg); box-shadow: inset 3px 0 0 var(--critical-text); }
.segment--major { background: var(--major-bg); box-shadow: inset 3px 0 0 var(--major-text); }
.segment--minor { background: var(--minor-bg); box-shadow: inset 3px 0 0 var(--minor-text); }
.segment__codes { margin: 4px 0 0; font-size: 12px; color: var(--text-secondary); }

/* «Як спрацював оператор» (S2 §1; decision of 2026-10-20): one card with the
   rules' counters, «Профіль розмови», the violations, the criteria. */
.operator-block {
  display: grid;
  gap: 16px;
  padding: 20px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}
.operator-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.operator-block__head h2 { margin: 0; font-size: 16px; line-height: 24px; letter-spacing: 0.04em; text-transform: uppercase; }
.operator-block__label { margin: 0 0 8px; color: var(--text-secondary); font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.tallies { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tally { display: inline-flex; gap: 6px; align-items: center; padding: 2px 10px; border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tally--violated { color: var(--critical-text); background: var(--critical-bg); }
.tally--not-checked { color: var(--major-text); background: var(--major-bg); }
.tally--compliant { color: var(--ok-text); background: var(--ok-bg); }

.profile { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-surface); }
.profile > .hint { margin: 8px 0 0; font-size: 12px; line-height: 16px; }
.radar { display: block; width: 100%; height: auto; overflow: visible; }
.radar__ring, .radar__spoke { fill: none; stroke: var(--border); stroke-width: 1; }
.radar__area { fill: var(--accent); fill-opacity: 0.16; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.radar__dot { fill: var(--accent); }
.radar__dot--missed { fill: var(--error-text); }
.radar__label { fill: var(--text-secondary); font-size: 12px; }
.radar__label--unscored { fill-opacity: 0.7; }
.radar__score { font-weight: 700; }
.radar__score--missed { fill: var(--error-text); }
.radar__score--met { fill: var(--ok-text); }
.radar__score--neutral { fill: var(--text-primary); }
.radar__score--unscored { font-weight: 400; font-style: italic; }
.radar__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 8px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.radar__key { display: inline-flex; align-items: center; gap: 8px; }
.radar__swatch { width: 16px; height: 3px; border-radius: 2px; background: var(--accent); }
.profile__notes { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
/* «Обіцянка оплати (PTP)»: the main result of the conversation, above the radar. */
.promise { --tone: var(--neutral-text); --tone-bg: var(--neutral-bg); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; align-items: center; padding: 20px 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: radial-gradient(120% 140% at 0% 0%, var(--tone-bg) 0%, var(--bg-surface) 70%); }
.promise--yes { --tone: var(--ok-text); --tone-bg: var(--ok-bg); }
.promise--no { --tone: var(--error-text); --tone-bg: var(--error-bg); }
.promise__mark { grid-row: span 3; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border: 4px solid var(--tone); border-radius: 50%; color: var(--tone); font-size: 34px; font-weight: 800; line-height: 1; }
.promise__label { margin: 0; color: var(--text-secondary); font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.promise__value { margin: 0; color: var(--tone); font-size: 28px; font-weight: 800; line-height: 36px; }
.promise--none .promise__value { color: var(--text-secondary); font-size: 22px; line-height: 28px; }
.promise__note { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 20px; }

/* The violations: the card takes the colour of the worst severity. */
.violations-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-surface); }
.violations-card--critical { border-color: var(--critical-text); background: var(--critical-bg); }
.violations-card--major { border-color: var(--major-text); background: var(--major-bg); }
.violations-card--minor { border-color: var(--minor-text); background: var(--minor-bg); }
.violations-card__title { margin: 0; font-size: 14px; line-height: 20px; letter-spacing: 0.04em; text-transform: uppercase; }
.violations-card--critical .violations-card__title { color: var(--critical-text); }
.violations-card--major .violations-card__title { color: var(--major-text); }
.violations-card--minor .violations-card__title { color: var(--minor-text); }
.violations-card__count { color: var(--text-secondary); font-weight: 500; text-transform: none; letter-spacing: 0; }
.violated-rule { padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); }
.violated-rule__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.violated-rule__head h4 { flex: 1; min-width: 160px; margin: 0; font-size: 15px; line-height: 20px; }
.violated-rule__times { padding: 2px 8px; border-radius: 8px; color: var(--critical-text); background: var(--critical-bg); font-size: 12px; font-weight: 700; }
.episodes { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.episode { padding-left: 12px; border-left: 2px solid var(--border); }
.violations-card--critical .episode { border-left-color: var(--critical-text); }
.violations-card--major .episode { border-left-color: var(--major-text); }
.violations-card--minor .episode { border-left-color: var(--minor-text); }
.episode__quote { margin: 0; font-style: italic; }
.episode__quote--none { color: var(--text-secondary); }
.episode__explanation { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; }
.episode__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; }
.button--small { height: 28px; min-width: 0; padding: 2px 12px; font-size: 13px; }
.violation__time { border: none; background: none; padding: 0; color: var(--link); cursor: pointer; font: inherit; }
.violation__time:hover { text-decoration: underline; }

/* The criteria not done and done, each with its score on the radar. */
.criteria-list ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.criteria-list__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; font-weight: 600; line-height: 20px; }
.criteria-list__title--missed > [aria-hidden] { color: var(--error-text); }
.criteria-list__title--met > [aria-hidden] { color: var(--ok-text); }
/* Folding lists of the block: a chevron on the right, up while open. */
.collapsible > summary { list-style: none; cursor: pointer; }
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: auto;
  background-color: var(--text-secondary);
  mask: url("../img/icons/chevron-down-20.svg") no-repeat center / contain;
  transition: transform 0.15s;
}
.collapsible[open] > summary::after { transform: rotate(180deg); }
.collapsible > summary:hover::after { background-color: var(--text-primary); }
.criterion-item > details > summary, .criterion-item__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.criterion-item > details > summary { cursor: pointer; }
.criterion-item > details > .hint { margin: 6px 12px 0; }
.criterion-item__name { flex: 1; min-width: 160px; }
.criterion-item__value { color: var(--text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.criterion-item__score { font-weight: 700; font-variant-numeric: tabular-nums; }
.criterion-item__score--missed { color: var(--error-text); }
.criterion-item__score--met { color: var(--ok-text); }
.rules-rest .operator-block__label { margin-top: 4px; }
.rules-rest .collapsible { margin-top: 12px; }
.player__marker { position: absolute; top: 50%; width: 4px; height: 14px; margin-left: -2px; transform: translateY(-50%); border-radius: 2px; }
.player__marker--critical { background: var(--critical-text); }
.player__marker--major { background: var(--major-text); }
.player__marker--minor { background: var(--minor-text); }

/* --- Notifications (S2 «Сповіщення», task 4.7) --- */
/* The unread counter on the message icon (Figma: MessageAlert 20). */
.topbar__badge { position: absolute; top: 11px; left: 22.5px; transform: translate(-50%, -50%); min-width: 14px; padding: 0 3px; border: 1px solid var(--bg-surface); border-radius: 30px; background: var(--badge-bg); color: var(--badge-text); font-size: 10px; font-weight: 600; line-height: 12px; text-align: center; }
.notifications { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.notification form { margin: 0; }
.notification__open { display: grid; grid-template-columns: auto 160px 1fr auto; gap: 12px; align-items: baseline; width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.notification__open:hover { border-color: var(--accent); }
.notification--unread .notification__open { background: var(--info-bg); font-weight: 600; }
.notification__dot { color: var(--link); }
.notification__type, .notification__time { color: var(--text-secondary); font-weight: 400; }


/* --- Dashboard (S2 «Дашборд», task 4.5) --- */
.counters { display: flex; flex-wrap: wrap; gap: 24px; margin: 12px 0; color: var(--text-secondary); }
.metric-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
.metric-card {
  padding: 16px 20px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}
.metric-card p { margin: 0; }
/* Figma «Metric Cards»: title H4 15/20, value 28/32 Bold, change 12/16. */
.metric-card__label { font-size: 15px; font-weight: 700; line-height: 20px; }
.metric-card__value { margin-top: 8px; font-size: 28px; font-weight: 700; line-height: 32px; font-variant-numeric: tabular-nums; }
.metric-card__note, .metric-card__change { color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.dashboard-block { margin: 24px 0; }

/* --- «Оператори» (S2 «Оператори», «Сторінка оператора») --- */
.operator-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.operator-head h1 { margin-bottom: 4px; }
.operator-head__filters { margin: 0; }
/* The two figures one under the other on the left, the chart beside them. */
.operator-overview { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(320px, 3fr); gap: 12px; margin: 16px 0; }
.operator-overview > .operator-overview__cell { grid-column: 1; }
.operator-overview__cell {
  padding: 16px 20px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}
.operator-overview__cell p { margin: 0; }
.operator-overview > .operator-overview__cell--chart { grid-column: 2; grid-row: 1 / span 2; padding: 0; border: 0; background: none; box-shadow: none; }
.operator-overview__cell--chart .chart { height: 100%; }
.operator-overview__label { font-size: 15px; font-weight: 700; line-height: 20px; }
.operator-overview__value { margin: 8px 0 4px !important; font-size: 44px; font-weight: 700; line-height: 52px; font-variant-numeric: tabular-nums; }
.operator-overview__of { color: var(--text-secondary); font-size: 18px; font-weight: 400; }
/* The cards fill the row: no empty tracks after the last one. */
.metric-cards--stretch { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.skills { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
.skill-bars { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.skill-bar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(80px, 3fr) 56px 88px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.skill-bar__bar { width: 100%; height: 6px; }
.skill-bar__track { fill: var(--neutral-bg); }
.skill-bar__fill { fill: var(--ok-text); }
.skill-bar--low .skill-bar__fill { fill: var(--major-text); }
.skill-bar__value { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--ok-text); }
.skill-bar--low .skill-bar__value { color: var(--major-text); }
.skill-bar--neutral .skill-bar__fill { fill: var(--accent); }
.skill-bar--neutral .skill-bar__value { color: var(--text-primary); }
.skill-bar__count { color: var(--text-secondary); font-size: 12px; text-align: right; }
@media (max-width: 960px) {
  .operator-overview, .skills { grid-template-columns: 1fr; }
  .operator-overview > .operator-overview__cell, .operator-overview > .operator-overview__cell--chart { grid-column: auto; grid-row: auto; }
}
@media (max-width: 640px) {
  .skill-bar { grid-template-columns: minmax(0, 1fr) 56px; }
  .skill-bar__bar { grid-column: 1 / -1; grid-row: 2; }
  .skill-bar__count { display: none; }
}
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.chart {
  margin: 0;
  padding: 16px 20px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}
.chart figcaption { margin-bottom: 8px; color: var(--text-secondary); font-size: 13px; }
.chart svg { width: 100%; height: auto; }
.chart__grid { stroke: var(--border); stroke-width: 1; }
.chart__label { fill: var(--text-secondary); font-size: 10px; }
.chart__line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart__dot { fill: var(--accent); }
.chart__bar--critical { fill: var(--critical-text); }
.chart__bar--major { fill: var(--major-text); }
.chart__bar--minor { fill: var(--minor-text); }
.chart__legend { display: flex; gap: 8px; margin: 8px 0 0; }
.rule-bars th { font-weight: 400; text-align: left; }
.rule-bars__bar { width: 40%; }
.rule-bars__bar svg { width: 100%; height: 10px; display: block; }
.criterion--deviation td { background: var(--major-bg); }
.deviation { color: var(--major-text); font-weight: 600; }

/* «Мій звіт» (S3 §1; task 4.12): the goal card stands out, calmly. */
.report { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: start; }
.report__period { color: var(--text-secondary); }
.report-goal { margin: 16px 0; padding: 16px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--bg-surface); }
.report-goal h2 { margin-top: 0; }
.report-goal__text { font-size: 1.125rem; font-weight: 600; margin: 0; }
.report-items { padding-left: 20px; }
.report-items li + li { margin-top: 12px; }
.report-quote { margin: 4px 0 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--text-secondary); }
.report__list ul { list-style: none; padding: 0; }
.report__list li { padding: 4px 0; }
@media (max-width: 720px) { .report { grid-template-columns: 1fr; } }

/* «Правила» (tasks 5.6–5.7): the draft's banner and its changed rows. */
.draft-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.draft-banner p { margin: 0; }
.draft-banner__actions { display: flex; gap: 8px; }
.rules__changed td { background: var(--neutral-bg); }
/* Rules the draft deletes (FR-414), each with «Повернути». */
.deleted-rules { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.deleted-rules li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.deleted-rules form { margin: 0; }

/* «Аудит-лог» (task 5.4): long details wrap within their column. */
.audit-log__details { max-width: 420px; overflow-wrap: anywhere; font-size: 0.875rem; color: var(--text-secondary); }

/* --- Narrow screens (ui-guidelines.md §5 «Ширина екрана»; decision of
   2026-10-19): ≤ 1024 px a tablet or a narrow laptop, ≤ 640 px a phone (from
   360 px). The page itself never scrolls sideways: a wide table scrolls
   inside its card. --- */
@media (max-width: 1024px) {
  /* The top bar keeps the logo, the notifications and «☰»; the sections, the
     profile and the theme open in a panel under it (menu.js). Without
     JavaScript they stay open under the bar. */
  .topbar__bar { position: relative; flex-wrap: wrap; padding: 8px 8px 8px 20px; }
  .topbar__actions { margin-left: auto; }
  .topbar__menu {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    order: 3;
    gap: 12px;
    padding: 12px 12px 4px 0;
  }
  /* Three bars: one line and its two shadows. */
  .topbar__toggle-icon {
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }
  .topnav { flex-direction: column; align-items: stretch; margin: 0; }
  .topnav__item { width: 100%; }
  .topbar__menu .menu__panel {
    position: static;
    min-width: 0;
    margin-top: 4px;
    border: none;
    box-shadow: none;
    padding: 0 0 0 12px;
  }
  .topbar__account {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .theme-switch { margin-left: 0; }

  .content { padding: 16px 24px 32px; }
  .footer { padding: 24px 24px 32px; }

  /* Tabs scroll within their strip instead of widening the page. */
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs__tab { flex: none; white-space: nowrap; }
}

@media (max-width: 1024px) and (scripting: enabled) {
  .topbar__menu { display: none; }
  [data-topbar][data-open] .topbar__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 20;
    display: flex;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--bg-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  .topbar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 100px;
    background: var(--nav-item-bg);
    color: var(--text-primary);
    cursor: pointer;
  }
  .topbar__toggle:hover { background: var(--nav-hover-bg); }
  [data-topbar][data-open] .topbar__toggle { background: var(--nav-current-bg); }
}

@media (max-width: 640px) {
  :root { --topbar-height: 72px; --topbar-gap: 8px; }
  .content { padding: 12px 16px 24px; }
  .footer { padding: 16px 16px 24px; }

  .page-header, .page-actions, .draft-banner { flex-wrap: wrap; gap: 12px; }
  .auth { padding-top: 32px; }
  .auth__panel { width: 100%; padding: 24px 16px; }
  .form { max-width: none; }

  /* Filters: one field per line, across the whole width. */
  .filters__field, .filters .field { width: 100%; min-width: 0; }
  .filters__actions { flex-wrap: wrap; }

  /* A wide table scrolls inside its card at its full height. */
  .table-scroll { max-height: none; }
  /* Fields in a table (DPD buckets) share the cell's width instead of widening it. */
  .table td > input { width: 100%; min-width: 0; }
  .table th, .table td { padding: 10px 8px; }

  .metric-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .charts { grid-template-columns: minmax(0, 1fr); }
  .notification__open { grid-template-columns: auto 1fr; }
  .notification__open > :last-child { grid-column: 2; }

  /* Conversation card: the replies take the width, the player wraps. */
  .segment--operator { margin-right: 24px; }
  .segment--debtor { margin-left: 24px; }
  .player { padding: 8px 16px; }
  .player__timeline, .upload-item__name { min-width: 0; flex-basis: 100%; }
  /* The player wraps to two rows: 124 px measured at 360–640 px. */
  :root { --player-height: 124px; }
  .upload-item progress { width: 100%; }
  /* The radar shrinks with its card: its labels grow to stay readable. */
  .radar__label { font-size: 17px; }
  .promise { gap: 4px 14px; padding: 16px; }
  .promise__mark { width: 52px; height: 52px; border-width: 3px; font-size: 24px; }
  .promise__value { font-size: 22px; line-height: 28px; }
  .audit-log__details { max-width: 260px; }
}