/* Staff components. Colours, fonts and the spacing scale live in theme.css: no colour literals here
   (the one exception is pure black behind the video player). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--font); }
img, svg { max-width: 100%; }

/* ---- Links, focus, motion ---- */
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
/* One visible ring on every interactive element; inputs also change their border (see below) */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; }
a, button, .btn, .tile, input, select, textarea, .chip, .tabs a, tbody tr {
  transition: color .12s, background-color .12s, border-color .12s; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Page frame ---- */
:root { --page-width: 1100px; --page-pad: var(--space-5); }
main { max-width: var(--page-width); margin: 0 auto; padding: var(--space-6) var(--page-pad) 48px; }
@media (max-width: 600px) { :root { --page-pad: var(--space-4); } main { padding-top: var(--space-5); padding-bottom: var(--space-6); } }
/* The warning bar and the header rows line up with the content column on wide screens */
.alert-bar, .site-top { padding-left: max(var(--page-pad), calc((100% - var(--page-width)) / 2 + var(--page-pad)));
  padding-right: max(var(--page-pad), calc((100% - var(--page-width)) / 2 + var(--page-pad))); }

/* Header: two tiers on a black band. Top: the brand and the signed-in user; below: the menu. */
header.site { background: var(--header-bg); border-bottom: 3px solid var(--accent); }
.site-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 64px; padding-top: var(--space-2); padding-bottom: var(--space-2); }
header.site .brand { display: inline-flex; flex: none; align-items: center; gap: var(--space-3); min-height: 44px;
  color: var(--heading); text-decoration: none; }
header.site .brand:hover { color: var(--accent); }
.logo { flex: none; width: auto; display: block; color: var(--muted); }
header.site .logo { height: 44px; color: var(--heading); }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand-name { font: 700 1.25rem/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.brand-sub { font: 400 .75rem/1.2 var(--font); letter-spacing: .02em; color: var(--muted); }
/* The user (a button to the profile) and sign-out */
header.site .site-user { display: flex; align-items: center; gap: var(--space-3); margin: 0; min-width: 0; }
header.site .site-user .btn-link { text-decoration: none; }
/* The email of a session that may not open the profile: plain text, nothing that looks clickable */
header.site .site-user .chip { padding-left: 0; padding-right: 0; border: 0; background: none; color: var(--muted); }
/* The menu row: the full width of the band under a hairline, primary entries left, the administrator's
   right. Its side padding is the content column's minus the links' own padding, so that the words line up
   with the page title. The current entry is underlined in yellow BELOW the words, clear of the yellow band. */
header.site .site-nav { display: flex; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
  padding-left: max(calc(var(--page-pad) - var(--space-3)), calc((100% - var(--page-width)) / 2 + var(--page-pad) - var(--space-3)));
  padding-right: max(calc(var(--page-pad) - var(--space-3)), calc((100% - var(--page-width)) / 2 + var(--page-pad) - var(--space-3))); }
header.site .site-nav::-webkit-scrollbar { display: none; }
.nav-group { display: flex; flex: none; }
header.site .site-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-3);
  color: var(--text); white-space: nowrap; text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 3px; text-underline-offset: 10px; }
header.site .site-nav a:hover { color: var(--heading); text-decoration-color: var(--field-border); }
header.site .site-nav a[aria-current=page] { color: var(--heading); text-decoration-color: var(--accent); }
@media (max-width: 600px) {
  .site-top { min-height: 56px; gap: var(--space-2); }
  .brand-sub { display: none; }
  header.site .brand { gap: var(--space-2); }
  .brand-name { font-size: 1rem; letter-spacing: .06em; }
  header.site .site-user { flex: 1 1 auto; justify-content: flex-end; gap: var(--space-2); }
  /* The email takes whatever width is left and is cut with an ellipsis; the sign-out button never shrinks */
  header.site .site-user .btn-link, header.site .site-user .chip { flex: 0 1 auto; min-width: 0; max-width: none; padding-left: var(--space-3); padding-right: var(--space-3); }
  header.site .site-user .chip { padding-left: 0; padding-right: 0; }
  header.site .site-user button { flex: none; padding-left: var(--space-3); padding-right: var(--space-3); }
  /* The entries wrap onto a second row instead of scrolling: the current one is never out of sight */
  header.site .site-nav { flex-wrap: wrap; justify-content: flex-start; gap: 0 var(--space-1); overflow: visible; }
  .nav-group { display: contents; }
  header.site .site-nav a { min-height: 44px; padding: 0 var(--space-3); }
}

/* A phone: the name of the service gives way to the email (the torch still links home) */
@media (max-width: 420px) { .brand-name { display: none; } }

/* A pill: the signed-in user in the header, a status tag. Long emails are cut with an ellipsis. */
.btn-link, .chip { display: inline-block; max-width: 220px; min-height: 36px; padding: 6px var(--space-4);
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text);
  font: 500 .9rem/1.5 var(--font); text-decoration: none; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
a.btn-link:hover, button.btn-link:hover { border-color: var(--accent); color: var(--heading); }
.chip { cursor: default; }
@media (max-width: 600px) { .btn-link { min-height: 44px; padding-top: 10px; } }

/* ---- Headings and text ---- */
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; color: var(--heading); line-height: 1.2; }
h1 { font-size: 1.9rem; letter-spacing: .01em; margin: 0 0 var(--space-5); overflow-wrap: anywhere; }
/* The short yellow bar under the page title */
h1::after { content: ""; display: block; width: 48px; height: 3px; margin-top: var(--space-3); background: var(--accent); }
h1 .badge { font: 500 .8rem/1.5 var(--font); letter-spacing: 0; vertical-align: middle; }
h2 { font-size: 1.3rem; margin: var(--space-6) 0 var(--space-3); }
h3 { font-size: 1.1rem; margin: var(--space-5) 0 var(--space-2); }
@media (max-width: 600px) { h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } }
p, ul, ol { margin: 0 0 var(--space-4); }
ul, ol { padding-left: 24px; }
li { margin-bottom: var(--space-1); }
strong { font-weight: 700; }
small, .meta { font-size: .85rem; }
.muted { color: var(--muted); }
code { font-family: var(--font-mono); font-size: .9em; }
code.link { display: block; padding: var(--space-3); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); word-break: break-all; margin: var(--space-2) 0; font-size: .85rem; }

/* ---- Cards ---- */
.card { --card-pad: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--card-pad); margin: 0 0 var(--space-4); }
.card > :last-child { margin-bottom: 0; }
.card > h2:first-child { margin-top: 0; }
/* The bold first line of a form card is its title */
.card > strong { display: block; margin-bottom: var(--space-4); font: 700 1.1rem/1.3 var(--font-head);
  letter-spacing: .01em; color: var(--heading); }
/* A table directly in a card runs edge to edge; its first and last cells keep the card's own padding */
.card > table, .card > .table-wrap { margin-left: calc(-1 * var(--card-pad)); margin-right: calc(-1 * var(--card-pad));
  width: calc(100% + 2 * var(--card-pad)); }
.card > table > * > tr > :first-child, .card > .table-wrap > table > * > tr > :first-child { padding-left: var(--card-pad); }
.card > table > * > tr > :last-child, .card > .table-wrap > table > * > tr > :last-child { padding-right: var(--card-pad); }
.card > table tbody tr:last-child td, .card > .table-wrap tbody tr:last-child td { border-bottom: 0; }
details.card summary, details.rights-edit summary { cursor: pointer; font-weight: 500; min-height: 28px; }
details.card[open] > summary { margin-bottom: var(--space-4); }
details.card summary { color: var(--heading); }
@media (max-width: 600px) { .card { --card-pad: var(--space-4); } }

/* Facts of one record: label above, value below on a phone, side by side from 600px */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .facts { grid-template-columns: 1fr; gap: 0; } .facts dd { margin-bottom: var(--space-3); } }

/* ---- Empty states: say what is missing ---- */
.empty { padding: var(--space-6) var(--space-5); text-align: center; color: var(--muted);
  border: 1px dashed var(--border); border-radius: var(--radius); }
.empty > :last-child { margin-bottom: 0; }
.empty .empty-title { display: block; margin-bottom: var(--space-2); color: var(--text); font-size: 1.1rem; font-weight: 500; }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: top; }
/* The unit names of the delivery table do not wrap word by word on a phone (the wrapper scrolls instead) */
#delivery th:nth-child(2), #delivery td:nth-child(2) { min-width: 140px; }
th { color: var(--muted); font-weight: 500; font-size: .8rem; letter-spacing: .02em; }
tbody tr:hover { background: var(--surface); }
.card tbody tr:hover { background: var(--surface-2); }
.table-wrap { overflow-x: auto; margin: 0 0 var(--space-4); }
.table-wrap > table { margin-bottom: 0; }
@media (max-width: 600px) { th, td { padding: var(--space-3) var(--space-3); font-size: .9rem; } th { font-size: .8rem; } }

/* ---- Forms ---- */
form p { margin: 0 0 var(--space-4); }
label { display: block; margin-bottom: 6px; color: var(--text); font-size: .9rem; font-weight: 500; }
.card > label { margin-bottom: var(--space-4); }
/* Fields rendered flat inside a card (Django field groups): a gap after each, hint between label and field */
.card > select, .card > input:not([type=hidden]), .card > textarea { margin-bottom: var(--space-4); }
.card > div.helptext { margin: calc(-1 * var(--space-1)) 0 var(--space-2); }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  display: block; width: 100%; max-width: 480px; min-height: 44px; padding: 10px var(--space-3);
  border-radius: var(--radius-sm); border: 1px solid var(--field-border); background: var(--surface-2);
  color: var(--text); font: 400 1rem/1.4 var(--font); }
textarea { min-height: 88px; }
input[type=file] { max-width: 100%; color: var(--text); font: 400 .95rem/1.4 var(--font); }
input[type=file]::file-selector-button { margin-right: var(--space-3); padding: 8px var(--space-4); border-radius: var(--radius-sm);
  border: 1px solid var(--field-border); background: transparent; color: var(--text); font: 500 .95rem/1.3 var(--font); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--surface-2); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox], input[type=radio] { flex: none; width: 20px; height: 20px; accent-color: var(--accent); }
.errorlist { color: var(--danger); list-style: none; padding: 0; margin: 0 0 var(--space-2); font-size: .9rem; }
.helptext { color: var(--muted); font-size: .85rem; }
/* Django's as_p puts the hint after the field in the same paragraph */
form p > .helptext { display: block; margin-top: 6px; }
/* A hint under its field, not beside it */
.field-hint { display: block; margin-top: 6px; }
fieldset.roots { border: 0; padding: 0; margin: 0 0 var(--space-4); }
fieldset.roots legend { padding: 0; margin-bottom: var(--space-2); font-size: .9rem; }
label.check { display: flex; align-items: center; gap: var(--space-2); color: var(--text); margin: 0 0 var(--space-2);
  font-size: 1rem; font-weight: 400; }
td label.check { margin: 0; }
/* A long email or name in a table cell wraps instead of widening the table */
/* (only inside cards: in a full-width table the column should keep the address on one line and the wrapper scrolls) */
.card td strong, .card td a { overflow-wrap: anywhere; }
/* Rights checkboxes: box in its own column, name and description aligned in the next one */
.rights-fields { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); max-width: 520px; }
label.right-field { display: grid; grid-template-columns: 20px 1fr; column-gap: var(--space-3); row-gap: 2px;
  align-items: start; margin: 0; color: var(--text); cursor: pointer; }
label.right-field input { grid-row: 1 / span 2; margin: 2px 0 0; }
label.right-field .right-name { font-size: .95rem; font-weight: 500; line-height: 1.4; }
label.right-field .helptext { grid-column: 2; line-height: 1.4; font-weight: 400; }
.rights-caption { font-size: .85rem; margin: 0 0 var(--space-2); }
@media (max-width: 600px) {
  input[type=text], input[type=email], input[type=password], input[type=number], select, textarea { max-width: none; }
  input[type=checkbox], input[type=radio] { width: 24px; height: 24px; }
}

/* ---- Buttons ---- */
button, .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
  padding: 8px var(--space-5); border-radius: var(--radius-sm); border: 1px solid var(--accent); cursor: pointer;
  background: var(--accent); color: var(--accent-text); font: 500 1rem/1.3 var(--font); text-decoration: none; }
button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }
button.secondary, .btn.secondary { background: transparent; color: var(--text); border-color: var(--field-border); }
button.secondary:hover, .btn.secondary:hover { background: var(--surface-2); border-color: var(--field-border); color: var(--heading); }
button.danger, .btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
button.danger:hover, .btn.danger:hover { background: var(--danger); border-color: var(--danger); color: var(--accent-text); }
button[disabled] { opacity: .4; cursor: default; pointer-events: none; }
button[hidden] { display: none; }
/* A note under the form, after its button (busy.js may put a status span in between, hence ~) */
button ~ p, .btn ~ p { margin-top: var(--space-4); }
button.btn-link { min-height: 36px; background: var(--surface-2); border: 1px solid var(--border); padding: 6px var(--space-4); }
button.btn-link:hover { background: var(--surface-2); }
@media (max-width: 600px) { button, .btn { min-height: 44px; } }

/* Buttons and links side by side: a wrapping row with an even gap */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); }
.actions form { margin: 0; }
.actions label { margin: 0; }
.actions input[type=number] { width: 90px; }
td .actions, .page-controls .actions { margin-bottom: 0; }

/* ---- Messages and notices ---- */
.messages { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.messages li { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2);
  border-left: 4px solid var(--field-border); margin-bottom: var(--space-2); }
.messages .error { border-left-color: var(--danger); }
.messages .success { border-left-color: var(--ok); }
.messages .warning { border-left-color: var(--accent); }
.drop-status, .warn-box { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2);
  border-left: 4px solid var(--danger); margin: 0 0 var(--space-4); }
.warn-box { border-left-color: var(--accent); }
.drop-status[hidden] { display: none; }
/* Warning for staff while the second factor is not required (templates/base.html). Cannot be closed. */
.alert-bar { background: var(--danger); color: var(--accent-text); font-weight: 500; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.alert-bar a { color: var(--accent-text); text-decoration-thickness: 2px; }
.danger-text { color: var(--danger); }

/* ---- Badges ---- */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: .8rem; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.badge.published, .badge.state-has_views { border-color: var(--ok); color: var(--ok); }
.badge.state-shared_no_views { border-color: var(--accent); color: var(--accent); }
.badge.disabled, .badge.no-responsible { border-color: var(--danger); color: var(--danger); }
.badge.responsible { color: var(--muted); }
.badge.superuser { border-color: var(--accent); color: var(--accent); }
.badge.right.on { border-color: var(--ok); color: var(--ok); }
.badge.right.off { color: var(--muted); text-decoration: line-through; }
#delivery-summary .badge.state-not_created, #delivery-summary .badge.state-not_shared,
#units-table .badge.state-not_created, #units-table .badge.state-not_shared { border-color: var(--danger); color: var(--danger); }

/* ---- Tabs: a row of links under the page title; the current one has a yellow underline ---- */
.tabs { display: flex; gap: var(--space-1); margin: 0 0 var(--space-5); padding: 0; list-style: none;
  overflow-x: auto; box-shadow: inset 0 -1px 0 var(--border); }
.tabs li { margin: 0; }
.tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); white-space: nowrap;
  color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; }
.tabs a:hover { color: var(--heading); border-bottom-color: var(--field-border); }
.tabs a[aria-current=page] { color: var(--heading); border-bottom-color: var(--accent); }

/* ---- Tiles: quick actions on the home page; the whole card is the link ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-4);
  padding: 0; list-style: none; }
.tile { display: block; padding: 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); text-decoration: none; }
.tile:hover { border-color: var(--accent); color: var(--text); text-decoration: none; transform: translateY(-2px); }
.tile-title { display: block; margin-bottom: var(--space-1); font: 700 1.2rem/1.3 var(--font-head);
  letter-spacing: .01em; color: var(--heading); }
.tile-text { display: block; color: var(--muted); font-size: .9rem; }
.tiles li { margin: 0; }
.tiles .tile { height: 100%; }
.tile { transition: color .12s, background-color .12s, border-color .12s, transform .12s; }
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } }

/* ---- Sign-in and passkey pages: one narrow card under the big torch ---- */
.auth { max-width: 420px; margin: 0 auto; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: var(--space-5) 0 var(--space-6); text-align: center; }
.auth-brand .logo { height: 72px; margin-bottom: var(--space-2); }
.auth-name { font: 700 1.6rem/1.1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--heading); }
.auth-sub { color: var(--muted); font-size: .9rem; }
.auth h1 { text-align: center; }
.auth h1::after { margin-left: auto; margin-right: auto; }
.auth input[type=text], .auth input[type=email], .auth input[type=password] { max-width: none; }
.auth .card form, .auth form.card { margin-bottom: var(--space-4); }
.auth button[type=submit] { width: 100%; }

/* ---- Passkey ceremony (static/js/passkey.js) ---- */
.passkey-status { margin: var(--space-3) 0 0; min-height: 1.5em; }
.passkey-status.is-error { color: var(--danger); }
.passkey-status.is-ok { color: var(--ok); }

/* ---- Unit tree ---- */
#unit-tree { padding: var(--space-3); margin: 0 0 var(--space-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); }
.unit-tree, .unit-tree ul { list-style: none; margin: 0; padding: 0; }
.unit-tree li { margin: 0; }
.unit-tree ul { margin-left: var(--space-4); padding-left: var(--space-4); border-left: 1px solid var(--border); }
.unit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3);
  min-height: 44px; margin: 2px 0; border-radius: var(--radius-sm); border: 1px dashed transparent; }
.unit-row:hover { background: var(--surface-2); }
.unit-row .unit-name { font-weight: 500; color: var(--heading); }
.unit-row[draggable=true] { cursor: grab; }
.unit-row.archived .unit-name { color: var(--muted); text-decoration: line-through; }
.unit-row .unit-edit { margin-left: auto; font-size: .9rem; }
.unit-row .headcount { font-size: .9rem; text-decoration: none; }
.unit-row .headcount:hover { text-decoration: underline; }
.drag-source { opacity: .45; }
.drop-ok { border-color: var(--accent); }
.drop-over { background: var(--surface-2); border-style: solid; }
.root-drop { display: none; margin: var(--space-3) 0 0; padding: 14px; text-align: center; color: var(--muted);
  border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.root-drop.drop-ok { display: block; }

/* ---- Materials ---- */
code.ua { display: block; min-width: 220px; max-width: 360px; font-size: .8rem; word-break: break-all; }
.pager { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.page-row { display: flex; gap: var(--space-5); align-items: flex-start; }
.page-row .thumb { width: 140px; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; }
.page-controls { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; min-width: 0; }
.page-controls > * { margin: 0; }
@media (max-width: 600px) { .page-row { flex-direction: column; gap: var(--space-4); } }
.video-frame { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; background: #000; margin-bottom: var(--space-4); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-limits ul { margin: var(--space-2) 0 0; padding-left: 20px; }

/* A refusal or failure of the video duration check: red text with a small "!" mark, on its own line. */
.status-error { color: var(--danger); font-weight: 500; }
.status-error::before { content: "!"; display: inline-block; width: 1.3em; height: 1.3em; margin-right: .5em;
  border-radius: 50%; background: var(--danger); color: var(--bg); text-align: center; font-size: .85em;
  line-height: 1.3em; }
#duration-status.status-error { display: block; margin-top: 6px; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); background: var(--surface-2); border-left: 4px solid var(--danger); }
/* "Do not stop the video": the length is being read from it. A box the editor cannot miss, not an alarm. */
#duration-status.status-progress { display: block; margin-top: 6px; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); background: var(--surface-2); border-left: 4px solid var(--accent);
  color: var(--text); font-weight: 500; }
#duration-status { white-space: pre-line; } /* the second line of the message */

/* ---- Delivery ---- */
details textarea { width: 100%; max-width: none; margin-top: 6px; }
.copy-buffer { position: fixed; top: 0; left: 0; opacity: 0; }
/* Recipient selection on the delivery page: shown by delivery_select.js only. */
.select-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.select-controls[hidden] { display: none; }
.select-controls select { width: auto; max-width: 100%; }
.select-status { margin: 0 0 var(--space-3); }

/* Busy state of slow forms (static/js/busy.js). The spinner is CSS only; --spinner-color is the
   one place to change its colour. */
.busy-status { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: var(--space-3); color: var(--muted); }
.busy-status.is-active::before { content: ""; flex: none; width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--spinner-color);
  animation: busy-spin .8s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
/* No motion: the ring stays still (its coloured quarter is still visible); the text says the rest. */
@media (prefers-reduced-motion: reduce) { .busy-status.is-active::before { animation: none; } }

/* ---- Analytics ---- */
.crumbs { margin: 0 0 var(--space-4); color: var(--muted); font-size: .9rem; }
.crumbs strong { color: var(--text); font-weight: 500; }
#reach-table { min-width: 900px; }
tr.row-total td { border-top: 2px solid var(--field-border); background: var(--surface); }
/* The unit name stays in view while the wide table scrolls sideways; it needs its own background to cover what slides under it */
#reach-table .c-label, #reach-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
#reach-table tbody tr:hover .c-label, tr.row-total .c-label { background: var(--surface); }
@media (max-width: 600px) { #reach-table td { min-width: 6.5rem; } #reach-table .c-label { min-width: 8rem; } }
small.sub, small.flag, small.warn-text { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; margin-top: 2px; }
small.warn-text, .kpi-warn { color: var(--accent); }
.warn { color: var(--accent); margin-left: var(--space-1); }
.reach-value { font-size: 1.05rem; }
.state-counts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-3); padding: 0; }
.state-counts .count { font: 700 1.6rem/1.2 var(--font-head); color: var(--heading); }
/* Key figures: four cards above the table. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-4);
  padding: 0; list-style: none; }
.kpi { margin: 0; padding: var(--space-4) 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.kpi-title { display: block; color: var(--muted); font-size: .85rem; font-weight: 500; }
.kpi-value { display: block; margin: var(--space-1) 0; font: 700 2.2rem/1.15 var(--font-head); color: var(--heading); }
.kpi-value.no-data { font: 500 1.1rem/1.9 var(--font); color: var(--muted); } /* "немає даних" is not a number: no big type */
.kpi-note, .kpi-warn { display: block; color: var(--muted); font-size: .85rem; line-height: 1.35; }
.kpi-warn { color: var(--accent); margin-top: var(--space-1); }
/* Bars: SVG with a 0-100 scale, so the fill is a width attribute and no inline style is needed. */
.bar, .state-bar { display: block; border-radius: 4px; overflow: hidden; }
/* One width in every column: bars compare by eye (so no `svg { max-width: 100% }`: it shrinks them in a narrow cell) */
.bar { width: 80px; max-width: none; height: 8px; margin-top: var(--space-1); }
.state-bar { width: 100%; }
.bar-bg { fill: var(--border); }
.bar-fill { fill: var(--accent); }
/* The delivery bar. Grey = nothing done yet, red = created but not handed over, orange = handed over, green = viewed.
   The legend (names and counts) carries the meaning, not the colour alone. */
.state-bar { height: 14px; margin-bottom: var(--space-3); }
.seg { stroke: var(--surface); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.seg-not_created { fill: var(--muted); }
.seg-not_shared { fill: var(--danger); }
.seg-shared_no_views { fill: var(--accent); }
.seg-has_views { fill: var(--ok); }
.state-counts.legend li::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: var(--space-2);
  border-radius: 3px; background: var(--border); }
.state-counts.legend li.state-not_created::before { background: var(--muted); }
.state-counts.legend li.state-not_shared::before { background: var(--danger); }
.state-counts.legend li.state-shared_no_views::before { background: var(--accent); }
.state-counts.legend li.state-has_views::before { background: var(--ok); }
.funnel { width: 100%; max-width: 560px; height: auto; display: block; }
.funnel-bar { fill: var(--accent); }
.funnel-label, .funnel-value { fill: var(--text); font-size: 13px; font-family: var(--font); }
.funnel-label { fill: var(--muted); }
details.help ul { margin: var(--space-2) 0 0; padding-left: 20px; }
details.help li { margin: 6px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Responsible people (unit page, user page, tree) ---- */
.rights { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-1) 0; }
details.rights-edit { margin: var(--space-1) 0; }
details.rights-edit summary { font-size: .9rem; }
details.rights-edit form { margin-top: var(--space-2); }
details.rights-edit .rights-fields { margin: var(--space-3) 0; }