/* 2026-10-25 (owner: «общ стил»): one stylesheet for the СЕМ pages instead of a <style> block in every view.
   Tokens first, then the shared parts: box/card, filter bar, headings, stat tiles, lists, tags, tables, links, notes,
   the moment strip (запис · архив · фонограма · транскрипт) and the person avatar. Light and dark (.dark on <html>). */
:root {
  --sem-primary: #093c70; --sem-primary-soft: rgba(9,60,112,0.08);
  --sem-ink: #0f172a; --sem-text: #334155; --sem-muted: #64748b; --sem-faint: #94a3b8;
  --sem-line: #e2e8f0; --sem-bg: #ffffff; --sem-bg-2: #f8fafc;
  --sem-ok-bg: #dcfce7; --sem-ok: #14532d; --sem-bad-bg: #fee2e2; --sem-bad: #7f1d1d; --sem-warn-bg: #fef3c7; --sem-warn: #78350f;
  --sem-radius: 0.5rem; --sem-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
}
.dark {
  --sem-primary: #93c5fd; --sem-primary-soft: rgba(147,197,253,0.15);
  --sem-ink: #f1f5f9; --sem-text: #cbd5e1; --sem-muted: #94a3b8; --sem-faint: #64748b;
  --sem-line: rgba(255,255,255,0.08); --sem-bg: rgb(24 24 27); --sem-bg-2: rgba(255,255,255,0.05);
  --sem-ok-bg: rgba(34,197,94,0.2); --sem-ok: #bbf7d0; --sem-bad-bg: rgba(239,68,68,0.2); --sem-bad: #fecaca; --sem-warn-bg: rgba(245,158,11,0.2); --sem-warn: #fde68a;
  --sem-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
/* box / card */
.sem-box, .sem-card { padding: 0.75rem; border-radius: var(--sem-radius); background: var(--sem-bg); box-shadow: var(--sem-shadow); margin-bottom: 0.75rem; }
.sem-h { font-size: 0.875rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--sem-primary); }
/* filter bar */
.sem-bar { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.sem-field { display: flex; flex-direction: column; gap: 0.125rem; }
.sem-field label { font-size: 0.6875rem; font-weight: 600; color: var(--sem-muted); }
.sem-input { height: 2rem; padding: 0 0.5rem; border-radius: 0.375rem; border: 1px solid var(--sem-line); background: var(--sem-bg-2); font-size: 0.75rem; color: var(--sem-ink); }
.dark .sem-input { color-scheme: dark; }
.sem-input option, .sem-input optgroup { background: #ffffff; color: #1e293b; }
.dark .sem-input option, .dark .sem-input optgroup { background: #18181b; color: #e2e8f0; }
.sem-check { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; height: 2rem; color: var(--sem-text); }
/* stat tiles */
.sem-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--sem-muted); }
.sem-stats b { display: block; font-size: 1.125rem; color: var(--sem-ink); font-variant-numeric: tabular-nums; }
.sem-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.7rem; }
.sem-tile { border: 1px solid var(--sem-line); border-radius: var(--sem-radius); padding: 0.6rem 0.8rem; background: var(--sem-bg-2); }
.sem-tile .tm { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sem-primary); }
/* lists */
.sem-item { padding: 0.625rem 0; border-bottom: 1px solid var(--sem-line); }
.sem-item:last-child { border-bottom: 0; }
.sem-head { font-size: 0.8125rem; font-weight: 600; color: var(--sem-ink); }
.sem-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.25rem 1rem; margin-top: 0.25rem; font-size: 0.75rem; color: var(--sem-text); }
.sem-facts span { color: var(--sem-muted); }
.sem-quote { font-size: 0.75rem; color: var(--sem-text); margin-top: 0.25rem; overflow-wrap: anywhere; }
/* tags */
.sem-tag { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 0.75rem; font-size: 0.6875rem; margin: 0.25rem 0.25rem 0 0; }
.sem-tag.ok { background: var(--sem-ok-bg); color: var(--sem-ok); }
.sem-tag.bad { background: var(--sem-bad-bg); color: var(--sem-bad); }
.sem-tag.warn { background: var(--sem-warn-bg); color: var(--sem-warn); }
.sem-tag.info { background: var(--sem-primary-soft); color: var(--sem-primary); }
/* table */
.sem-scroll { overflow-x: auto; }
.sem-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.sem-table th { text-align: left; font-weight: 600; color: var(--sem-muted); padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--sem-line); white-space: nowrap; }
.sem-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--sem-line); vertical-align: top; color: var(--sem-text); }
.sem-table tr:last-child td { border-bottom: 0; }
.sem-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* links, notes, buttons, empty state */
.sem-link { color: var(--sem-primary); text-decoration: underline; font-size: 0.75rem; }
.sem-note { font-size: 0.6875rem; color: var(--sem-faint); }
.sem-btn { display: inline-block; padding: 0.4rem 0.9rem; border-radius: 0.4rem; background: #2563eb; color: #fff !important; text-decoration: none; font-weight: 600; font-size: 0.8rem; }
.sem-btn.ghost { background: transparent; color: var(--sem-primary) !important; border: 1px solid var(--sem-line); }
.sem-empty { padding: 1rem; text-align: center; color: var(--sem-muted); font-size: 0.8rem; border: 1px dashed var(--sem-line); border-radius: var(--sem-radius); }
/* the moment strip and the person avatar (App\Support\MomentBar, App\Support\PersonCard) */
.sem-moment { font-size: 0.75rem; }
.sem-moment a { color: var(--sem-primary); }
.sem-av { width: 1.8rem; height: 1.8rem; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--sem-line); background: var(--sem-line); }

/* 2026-10-25 (owner): the «Лица» page — tighter rows, calmer group headings, the filter strip as one card */
.fi-resource-face-persons .fi-ta-cell { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }
.fi-resource-face-persons .fi-ta-text { font-size: 0.8rem; }
.fi-resource-face-persons .fi-ta-group-header, .fi-resource-face-persons .fi-ta-row-group-heading { background: var(--sem-bg-2) !important; }
.fi-resource-face-persons .fi-ta-filters { background: var(--sem-bg-2); border: 1px solid var(--sem-line); border-radius: var(--sem-radius); padding: 0.75rem 1rem; }
.fi-resource-face-persons .fi-ta-filters .fi-fo-field-wrp-label { font-size: 0.7rem; color: var(--sem-muted); text-transform: uppercase; letter-spacing: .04em; }
.fi-resource-face-persons .fi-fo-toggle-buttons { gap: 0.3rem; }
.fi-resource-face-persons .fi-fo-toggle-buttons .fi-btn { font-size: 0.72rem; padding: 0.25rem 0.6rem; }
.fi-resource-face-persons .fi-ta-actions { gap: 0.25rem; }

/* 2026-10-26 (UI review): the explanation under the page title is two lines (it was 3–5 and on a phone filled the whole first screen);
   the rest opens while it is pointed at / touched. No script: a longer text simply stays clamped until then. */
.fi-header-subheading { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; cursor: help; }
.fi-header-subheading:hover, .fi-header-subheading:focus, .fi-header-subheading:active { display: block; -webkit-line-clamp: unset; overflow: visible; }