/* BOLANDILA™ EMF Diagnostic — Bolandila brand system.
   Palette: ink #141517 + brand yellow #FFD400 on warm gray-beige canvas.
   The yellow triangle from the logo is the single signature motif: it marks
   progress, the selected answer and key list items. Yellow is never text —
   only action and position. Mobile-first; WCAG 2.2 AA: visible focus,
   4.5:1 contrast, no color-only meaning, keyboard operable. */

/* ---- Type: Manrope (self-hosted, variable, Cyrillic + Latin) ---- */
@font-face {
    font-family: "Manrope";
    src: url("/assets/fonts/manrope-cyrillic.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Manrope";
    src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

:root {
    --ink: #141517;
    --ink-soft: #56544c;
    --canvas: #f3f2ec;
    --paper: #ffffff;
    --brand: #ffd400;
    --brand-press: #ecc500;
    --brand-tint: #fff7d1;
    --line: #e4e2d7;
    --line-strong: #c9c6b8;
    --muted: #56544c;          /* legacy alias */
    --accent: #141517;         /* legacy alias: interactive = ink */
    --accent-ink: #ffffff;
    --warn-bg: #faf0ce;
    --warn-line: #8a6d1a;
    --error-bg: #f9e2de;
    --error-line: #a3341f;
    --ok-line: #38663f;
    --info-bg: #edecdf;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-card: 0 1px 2px rgba(20, 21, 23, .05), 0 10px 28px rgba(20, 21, 23, .05);
    --focus-ring: 0 0 0 3px var(--brand);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* A long unbreakable string (token, e-mail, URL) must wrap, never widen
   the page. Applies to the whole document, hence the broad selector. */
body { overflow-wrap: break-word; }
body {
    margin: 0;
    font-family: "Manrope", system-ui, "Segoe UI", Arial, sans-serif;
    font-size: 1rem;
    color: var(--ink);
    background: var(--canvas);
    line-height: 1.6;
}
.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }
main.wrap { padding-top: 1.25rem; padding-bottom: 3.5rem; }
@media (min-width: 48rem) {
    .wrap { padding: 0 1.5rem; }
    main.wrap { padding-top: 2rem; }
}

/* ---- Focus (yellow ring everywhere) ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}
a:focus, button:focus, input:focus { outline: 3px solid var(--brand); outline-offset: 2px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible) { outline: none; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: var(--paper); padding: .5rem 1rem;
    border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; z-index: 100; }

/* ---- Header / brand ---- */
.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: .7rem 0;
}
.site-header .wrap { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; }
.brand {
    display: inline-flex; align-items: center; gap: .55rem;
    color: var(--ink); font-weight: 800; letter-spacing: -.01em;
    text-decoration: none; font-size: 1.05rem; line-height: 1.2;
}
.brand-mark { width: 34px; height: 29px; flex-shrink: 0; color: var(--ink); }
.badge {
    margin-left: auto;
    border: 1px solid var(--line-strong); color: var(--ink-soft);
    border-radius: 999px; padding: .12rem .65rem; font-size: .78rem; font-weight: 600;
    letter-spacing: .02em; white-space: nowrap;
}

.site-footer {
    border-top: 1px solid var(--line);
    color: var(--ink-soft); font-size: .88rem;
    padding: 1.25rem 0 2.25rem; background: var(--canvas);
}
.site-footer a { color: var(--ink); }

/* ---- Typography ---- */
h1 {
    font-size: clamp(1.55rem, 1.1rem + 2vw, 2.05rem);
    line-height: 1.2; letter-spacing: -.02em; font-weight: 800;
    margin: 1rem 0 .75rem;
}
h2 {
    font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em;
    margin: 2.25rem 0 .75rem; padding-bottom: .35rem;
    border-bottom: 1px solid var(--line);
}
h3 { font-size: 1.02rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.lead { font-size: 1.12rem; }
.hint { color: var(--ink-soft); font-size: .9rem; }
a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--brand); text-decoration-thickness: 2px; }

/* ---- Buttons ---- */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--ink); color: var(--paper);
    border: 1px solid var(--ink); border-radius: 10px;
    padding: .6rem 1.25rem; font-size: .97rem; font-weight: 700; font-family: inherit;
    line-height: 1.3; min-height: 2.75rem;
    text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.button:hover { background: #2b2c30; border-color: #2b2c30; }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.button-primary:hover { background: var(--brand-press); border-color: var(--brand-press); }
.button-secondary { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.button-secondary:hover { background: var(--paper); border-color: var(--ink); }
.button-danger { background: var(--error-line); border-color: var(--error-line); color: #fff; }
.button-danger:hover { background: #872a19; border-color: #872a19; }
/* Row-level actions: several fit side by side without shouting over the data. */
.button-quiet {
    background: transparent; border-color: var(--line); color: var(--ink);
    padding: .35rem .7rem; font-size: .86rem; font-weight: 600; min-height: 2.1rem;
}
.button-quiet:hover { background: var(--paper); border-color: var(--line-strong); }
.action-cell { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* ---- Alerts ---- */
.alert {
    border: 1px solid var(--line); border-left: 4px solid var(--ink-soft);
    background: var(--paper);
    padding: .8rem 1rem; margin: 1rem 0; border-radius: 10px;
}
.alert p:first-child { margin-top: 0; }
.alert p:last-child { margin-bottom: 0; }
.alert-warning { background: var(--warn-bg); border-color: #e8d9a8; border-left-color: var(--warn-line); }

/* Б15: an overdue data-rights request. Colour is the SECOND signal — the
   row also says „просрочена" in words, so the state survives a monochrome
   print and reaches someone who cannot distinguish the tint. */
.row-overdue td { background: var(--warn-bg); }
.alert-error { background: var(--error-bg); border-color: #ecc8c1; border-left-color: var(--error-line); }
.alert-info { background: var(--paper); border-left-color: var(--ink); }
.alert-success { background: var(--paper); border-left-color: var(--ok-line); }

/* ---- Forms ---- */
.field { margin: 1.25rem 0; }
.field label { display: inline-block; margin-bottom: .4rem; font-weight: 600; font-size: .95rem; }
input[type="email"], input[type="password"], input[type="text"], input[type="search"],
input[type="date"], input[type="number"], select {
    display: block; width: 100%; max-width: 26rem;
    padding: .62rem .75rem; font-size: 1rem; font-family: inherit;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--line-strong); border-radius: 10px;
    min-height: 2.75rem;
}
select { max-width: 18rem; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--ink); width: 1.15rem; height: 1.15rem; }
textarea {
    display: block; width: 100%; max-width: 34rem;
    padding: .62rem .75rem; font-size: 1rem; font-family: inherit;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--line-strong); border-radius: 10px;
}

.token-box {
    display: block; word-break: break-all;
    background: var(--paper); border: 1px dashed var(--line-strong); border-radius: 8px;
    padding: .6rem .8rem; font-size: .92rem;
}

/* ---- Cards / question ---- */
fieldset.item {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--paper); box-shadow: var(--shadow-card);
    margin: 1rem 0 1.25rem; padding: 1.1rem 1.15rem 1.25rem;
    /* Fieldsets default to min-width:min-content and would otherwise be
       widened by the SJT table instead of scrolling it. */
    min-width: 0;
}
@media (min-width: 48rem) { fieldset.item { padding: 1.5rem 1.75rem 1.75rem; } }
/* The question statement sits on a brand-yellow panel so it clearly leads
   the screen. float:left takes the legend out of the fieldset border slot. */
fieldset.item legend {
    float: left; width: 100%;
    font-weight: 700;
    background: var(--brand-tint);
    border-left: 4px solid var(--brand);
    border-radius: 10px;
    padding: .8rem 1rem;
    margin-bottom: .5rem;
}
fieldset.item > * { clear: both; }
/* SJT: the situation description joins the same yellow panel. */
fieldset.sjt-item legend { border-radius: 10px 10px 0 0; margin-bottom: 0; padding-bottom: .35rem; }
fieldset.sjt-item .sjt-stem {
    background: var(--brand-tint);
    border-left: 4px solid var(--brand);
    border-radius: 0 0 10px 10px;
    padding: 0 1rem .8rem;
    margin: 0 0 .6rem;
}
.question-form { max-width: 46rem; }
.question-text { font-size: 1.18rem; line-height: 1.45; letter-spacing: -.01em; }
.question-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.question-nav .button { min-width: 8.5rem; }
@media (max-width: 30rem) {
    .question-nav .button { flex: 1 1 auto; min-width: 0; }
}

/* Progress: native <progress> styled brand-yellow. The strict participant
   CSP forbids inline styles, so the fill is driven by the value attribute. */
.progress-line { margin: .25rem 0 .3rem; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
progress.progress-track {
    display: block; width: 100%; height: .65rem;
    -webkit-appearance: none; appearance: none;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); overflow: hidden;
    margin-bottom: 1.25rem;
    accent-color: var(--brand);
}
progress.progress-track::-webkit-progress-bar { background: var(--paper); border-radius: 999px; }
progress.progress-track::-webkit-progress-value { background: var(--brand); border-radius: 999px; }
progress.progress-track::-moz-progress-bar { background: var(--brand); border-radius: 999px; }

/* Likert: tappable rows; the selected one gets the brand triangle. */
.likert-vertical { display: flex; flex-direction: column; gap: .55rem; max-width: 30rem; }
.likert-row {
    position: relative;
    display: flex; align-items: center; gap: .75rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
    padding: .7rem .95rem .7rem 1.15rem; cursor: pointer; font-size: 1rem;
    min-height: 3rem;
    transition: border-color .12s ease, background-color .12s ease;
}
.likert-row:hover { border-color: var(--ink); }
/* Selected state: .is-checked (server-rendered + likert.js) is the primary
   hook; the :has() twin covers the no-JS case. Keep them as SEPARATE rules —
   a shared selector list would be dropped whole by non-:has browsers. */
.likert-row.is-checked { border-color: var(--ink); background: var(--brand-tint); font-weight: 600; }
.likert-row:has(input:checked) { border-color: var(--ink); background: var(--brand-tint); font-weight: 600; }
.likert-row.is-checked::before {
    content: ""; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    border-left: .55rem solid var(--brand);
    border-top: .45rem solid transparent; border-bottom: .45rem solid transparent;
}
.likert-row:has(input:checked)::before {
    content: ""; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    border-left: .55rem solid var(--brand);
    border-top: .45rem solid transparent; border-bottom: .45rem solid transparent;
}
.likert-row input { flex-shrink: 0; }
.likert-row:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Legacy horizontal scale (kept for safety) */
.likert-scale { display: flex; flex-wrap: wrap; gap: .4rem; }
.likert-option {
    flex: 1 1 6.5rem; text-align: center;
    border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
    padding: .45rem .3rem; cursor: pointer; font-size: .85rem;
}
.likert-option:has(input:checked) { border-color: var(--ink); background: var(--brand-tint); }
.likert-value { display: block; font-weight: 700; font-size: 1rem; }
.likert-label { display: block; color: var(--ink-soft); }
@media (max-width: 40rem) {
    .likert-option { flex-basis: 100%; text-align: left; display: flex; gap: .6rem; align-items: center; }
    .likert-value, .likert-label { display: inline; }
}

/* SJT scenario: a card per reaction with two selectable chips —
   "Най-вероятна" fills brand-yellow, "Най-малко вероятна" fills ink. */
.sjt-options { display: flex; flex-direction: column; gap: .65rem; }
.sjt-card {
    border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
    padding: .75rem .95rem .8rem;
    transition: border-color .12s ease;
}
.sjt-card:has(input:checked) { border-color: var(--line-strong); }
.sjt-text { margin: 0 0 .6rem; }
.sjt-choices { display: flex; gap: .5rem; flex-wrap: wrap; }
.sjt-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1px solid var(--line-strong); border-radius: 999px;
    padding: .4rem .95rem; cursor: pointer;
    font-size: .9rem; font-weight: 600; line-height: 1.25;
    min-height: 2.4rem; background: var(--paper);
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.sjt-chip input {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); overflow: hidden;
}
.sjt-chip:hover { border-color: var(--ink); }
.sjt-chip:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
/* Selected states: .is-checked (server + likert.js) with a :has() twin for
   the no-JS case — SEPARATE rules so non-:has browsers keep the class one. */
.sjt-chip-most.is-checked { background: var(--brand); border-color: var(--brand-press); color: var(--ink); }
.sjt-chip-most:has(input:checked) { background: var(--brand); border-color: var(--brand-press); color: var(--ink); }
.sjt-chip-least.is-checked { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sjt-chip-least:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (max-width: 30rem) {
    .sjt-choices { flex-direction: column; align-items: stretch; }
    .sjt-chip { justify-content: center; }
}
/* Legacy table markup (texts-editor sample fallback) */
.sjt-table { width: 100%; border-collapse: collapse; }
.sjt-table th, .sjt-table td { border-bottom: 1px solid var(--line); padding: .6rem .5rem; text-align: left; vertical-align: top; }
.sjt-table thead th { border-bottom: 2px solid var(--ink); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.sjt-table .sjt-radio { text-align: center; width: 7rem; }

/* ---- Data tables (paper cards on the canvas) ----
   BOTH class names are styled. The markup uses `data-table` in 19 places and
   `data` in 8; only the second was ever styled, so most admin tables rendered
   as bare browser default — no padding, no header, no separation. That is the
   whole of the "tables look terrible" complaint. Rather than rewrite 19 views
   and risk missing one, the selector covers both spellings. */
table.data, table.data-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    margin: 1rem 0; box-shadow: var(--shadow-card);
    font-size: .95rem;
    /* Digits in a column line up under each other. Dates, counts and scores
       are read by comparison down the column, not one at a time. */
    font-variant-numeric: tabular-nums;
}
table.data th, table.data td,
table.data-table th, table.data-table td {
    padding: .7rem .9rem; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line);
}
table.data thead th, table.data-table thead th {
    background: var(--canvas);
    border-bottom: 2px solid var(--ink);
    font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-soft); white-space: nowrap;
    vertical-align: bottom;
}
/* Zebra + hover. The stripe carries the eye across a wide row; the hover says
   which row the pointer is actually on, which matters most in the tables that
   end in an action button. */
table.data tbody tr:nth-child(even),
table.data-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--canvas) 55%, transparent); }
table.data tbody tr:hover,
table.data-table tbody tr:hover { background: var(--brand-tint); }
table.data tbody tr:last-child td, table.data tbody tr:last-child th,
table.data-table tbody tr:last-child td, table.data-table tbody tr:last-child th { border-bottom: none; }

/* A key/value table (no header row) keeps its fixed label column. A LIST table
   has a header, and there the row header is simply the first column — 34% of
   the width would push everything else into a corner. */
table.data:not(:has(thead)) tbody th[scope="row"],
table.data-table:not(:has(thead)) tbody th[scope="row"] {
    font-weight: 600; color: var(--ink-soft); width: 34%;
}
table.data:has(thead) tbody th[scope="row"],
table.data-table:has(thead) tbody th[scope="row"] { font-weight: 600; width: auto; }

/* The action column: buttons on one line, pushed to the trailing edge, and
   never the reason a table needs horizontal scrolling. */
table.data td.action-cell, table.data-table td.action-cell {
    text-align: right; white-space: nowrap;
}
table.data td.action-cell > *, table.data-table td.action-cell > * {
    display: inline-block; vertical-align: middle; margin: .1rem 0 .1rem .3rem;
}
/* A long header stays visible while a long table scrolls. */
.table-scroll thead th { position: sticky; top: 0; z-index: 1; }
/* Wide matrix tables (test-by-test comparison) opt into horizontal scrolling:
   there the sideways gesture is the point. Everything else uses cards below. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table.data, .table-scroll table.data-table { min-width: 40rem; }

/* ---- Mobile tables ----
   A table must never widen the page. Two behaviours:
   1) .table-cards — each row becomes a stacked card with its column label
      (data-label) beside the value, so action buttons stay on screen;
   2) everything else — the table itself becomes the scroll container, so a
      stray wide table can never push the page sideways. */
@media (max-width: 47.99rem) {
    table.data:not(.table-cards) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    table.data.table-cards {
        display: block; background: transparent;
        border: none; border-radius: 0; box-shadow: none;
    }
    table.data.table-cards thead { display: none; }
    table.data.table-cards tbody { display: block; }
    table.data.table-cards tr {
        display: block;
        background: var(--paper); border: 1px solid var(--line);
        border-radius: var(--radius); box-shadow: var(--shadow-card);
        margin-bottom: .6rem; padding: .2rem .9rem;
    }
    table.data.table-cards td {
        display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
        border: none; border-bottom: 1px solid var(--line);
        padding: .55rem 0; text-align: right; white-space: normal;
    }
    table.data.table-cards tr td:last-child { border-bottom: none; }
    table.data.table-cards td::before {
        content: attr(data-label);
        flex: 0 1 auto; text-align: left; padding-right: .5rem;
        font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
        color: var(--ink-soft);
    }
    /* Flex children default to min-width:auto and would refuse to wrap a
       long value, pushing past the card edge. */
    table.data.table-cards td > * { min-width: 0; }
    /* Cells holding an action: label on top, full-width control underneath. */
    table.data.table-cards td.cell-action {
        display: block; text-align: left; padding-bottom: .7rem;
    }
    table.data.table-cards td.cell-action::before { display: block; margin-bottom: .35rem; }
    table.data.table-cards td.cell-action .button { width: 100%; }
    table.data.table-cards td.cell-action .inline-form { display: block; }
    /* Empty-state row ("Няма активни тестове.") spans the whole card. */
    table.data.table-cards td[colspan] { display: block; text-align: left; color: var(--ink-soft); }
    table.data.table-cards td[colspan]::before { content: none; }
}

/* ---- Report ---- */
.report-section {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    margin-top: 1.25rem; padding: .35rem 1.1rem 1.15rem;
}
@media (min-width: 48rem) { .report-section { padding: .5rem 1.6rem 1.5rem; } }
.report-section > h2:first-of-type { margin-top: 1rem; }
.report-section table.data { box-shadow: none; }
.score-line { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Band tones. Activation/SJT: higher = greener (non-judgmental soft palette,
   no red). Shadow (risk) bands are inverted: HIGH = red. The band label text
   in the adjacent column carries the meaning (no color-only). */
.band-strong { background: #e0efd8; }
.band-functional { background: #eef4e6; }
.band-developing { background: var(--warn-bg); }
.band-limited { background: #f7e8d3; }
.band-risk-low { background: #e0efd8; }
.band-risk-moderate { background: var(--warn-bg); }
.band-risk-elevated { background: #f8e5cb; }
.band-risk-high { background: var(--error-bg); }

/* Strengths list: brand triangle bullets (the signature motif). */
.strengths-list, .content-block ul { padding-left: 1.3rem; }
.strengths-list li { list-style: none; position: relative; margin: .45rem 0; }
.strengths-list li::before {
    content: ""; position: absolute; left: -1.3rem; top: .48em;
    border-left: .55rem solid var(--brand);
    border-top: .38rem solid transparent; border-bottom: .38rem solid transparent;
}

/* ---- Content blocks / static pages ---- */
.content-block h2 { margin-top: 1.4rem; }
.content-block li { margin: .3rem 0; }
.consent-text {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .9rem 1.1rem; background: var(--paper); box-shadow: var(--shadow-card);
}

/* ---- Admin navigation (ink bar under the paper header) ----
   No horizontal scrolling: links wrap on desktop and collapse behind the
   "Меню" button on small screens (admin.js). Without JS the button stays
   hidden and the links simply wrap — always reachable. */
.admin-nav {
    position: relative;
    background: var(--ink); color: var(--paper);
    margin: 0 0 1.25rem; border-radius: var(--radius);
    padding: .4rem .55rem;
    display: flex; align-items: center; gap: .3rem .15rem; flex-wrap: wrap;
}
.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.admin-nav a {
    color: #e8e7e2; text-decoration: none; font-weight: 600; font-size: .92rem;
    padding: .45rem .75rem; border-radius: 8px;
}
.admin-nav a:hover { background: #2b2c30; color: #fff; }
.admin-nav a[aria-current="page"] {
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--brand);
    border-radius: 8px 8px 0 0;
}
.admin-nav a:focus-visible { outline-color: var(--brand); }
.nav-logout { margin-left: auto; }
.admin-nav .button {
    background: transparent; border: 1px solid #4a4b4f; color: #e8e7e2;
    padding: .35rem .8rem; min-height: 0; font-size: .88rem;
}
.admin-nav .button:hover { border-color: var(--brand); color: #fff; }

/* Exports dropdown (native <details>) */
.nav-exports { position: relative; }
.nav-exports summary {
    list-style: none; cursor: pointer;
    color: #e8e7e2; font-weight: 600; font-size: .92rem;
    padding: .45rem .75rem; border-radius: 8px;
}
.nav-exports summary::-webkit-details-marker { display: none; }
.nav-exports summary::after { content: " ▾"; font-size: .8em; }
.nav-exports summary:hover { background: #2b2c30; color: #fff; }
.nav-exports[open] summary { background: #2b2c30; color: #fff; }
.nav-exports-menu {
    position: absolute; left: 0; top: calc(100% + .3rem); z-index: 40;
    min-width: 13rem;
    background: var(--paper); border: 1px solid var(--line-strong);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 21, 23, .18);
    padding: .35rem; display: flex; flex-direction: column;
}
.nav-exports-menu a { color: var(--ink); padding: .5rem .75rem; border-radius: 7px; }
.nav-exports-menu a:hover { background: var(--brand-tint); color: var(--ink); }

/* Mobile: collapse behind "Меню" (only when admin.js marked the nav as .js) */
.nav-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    background: transparent; border: 1px solid #4a4b4f; color: #e8e7e2;
    border-radius: 8px; padding: .45rem .9rem; font: inherit; font-weight: 700;
    font-size: .92rem; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    content: ""; display: block; width: 16px; height: 2px; background: var(--brand); border-radius: 2px;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -5px; }
.nav-toggle-bars::after { position: absolute; top: 5px; }
@media (min-width: 52rem) {
    .nav-toggle { display: none; }
}
@media (max-width: 51.99rem) {
    .admin-nav.js .nav-links { display: none; }
    .admin-nav.js.is-open .nav-links {
        display: flex; flex-direction: column; align-items: stretch;
        flex-basis: 100%; order: 10; gap: .15rem;
        padding-top: .4rem; margin-top: .35rem; border-top: 1px solid #2b2c30;
    }
    .admin-nav.js.is-open .nav-links a { padding: .65rem .75rem; }
    .admin-nav.js.is-open .nav-links a[aria-current="page"] {
        box-shadow: inset 3px 0 0 var(--brand); border-radius: 8px;
    }
    .nav-exports summary { padding: .65rem .75rem; }
    .admin-nav.js.is-open .nav-exports-menu {
        position: static; box-shadow: none; border: none;
        background: transparent; padding: 0 0 0 1rem;
    }
    .admin-nav.js.is-open .nav-exports-menu a { color: #e8e7e2; }
    .admin-nav.js.is-open .nav-exports-menu a:hover { background: #2b2c30; color: #fff; }
}

/* ---- Admin building blocks ---- */
.toolbar { display: flex; gap: .6rem .75rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.inline-form { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.toolbar input[type="text"] { max-width: 18rem; min-width: 0; flex: 1 1 12rem; }
.toolbar .inline-form { flex: 1 1 auto; }
.toolbar select { flex: 0 1 auto; }
@media (max-width: 30rem) {
    /* Search/filter controls stack full width rather than spill off screen. */
    .toolbar, .toolbar .inline-form { display: flex; width: 100%; }
    .toolbar .inline-form { flex-direction: column; align-items: stretch; }
    .toolbar .inline-form label { align-self: flex-start; }
    .toolbar input[type="text"], .toolbar select, .toolbar .button, .toolbar > .button { width: 100%; max-width: 100%; }
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .75rem; margin: 1.1rem 0; }
.stat {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-card); padding: .8rem 1rem;
}
.stat-label { display: block; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.stat-value { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin-top: .15rem; }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
/* Grid items default to min-width:auto and refuse to shrink below their
   content — a wide table then blows the whole column out. */
.grid-2 > * { min-width: 0; }
@media (min-width: 56rem) { .grid-2 { grid-template-columns: 1fr 1.4fr; gap: 2rem; } }

.notes-box { border: 1px dashed var(--line-strong); border-radius: 10px; padding: .6rem .8rem; background: var(--brand-tint); }
.badge-released { color: var(--ok-line); font-weight: 700; }
.badge-hidden { color: var(--error-line); font-weight: 700; }
.badge-edited { background: var(--warn-bg); border: 1px solid #e8d9a8; border-radius: 999px; padding: 0 .5rem; font-size: .8rem; }

.chart {
    display: block; max-width: 100%; height: auto; margin: .5rem 0 1rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); box-shadow: var(--shadow-card); padding: .5rem;
}
/* Report section bands (author decision G2): the same signal on screen as on
   paper, so a facilitator reading the page and the PDF sees one document. */
.report-body h2 {
    background: var(--ink); color: var(--paper);
    padding: .45rem .75rem; border-radius: 8px; border-bottom: 0;
    font-size: 1.05rem;
}
.chart-legend .legend-item { margin-right: 1rem; white-space: nowrap; }
.delta-up { color: var(--ok-line); font-weight: 700; }
.delta-down { color: var(--error-line); font-weight: 700; }
.delta-flat { color: var(--ink-soft); }
.cell-elevated { background: var(--warn-bg); }
.cell-high { background: var(--error-bg); }

/* Question editor */
.editor-field textarea, .editor-group textarea { width: 100%; max-width: 100%; min-height: 4.5rem; line-height: 1.5; }
.editor-group {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); box-shadow: var(--shadow-card);
    margin: 1rem 0; padding: .85rem 1.1rem;
}
.editor-group label, .editor-field label { display: block; width: 100%; font-weight: 600; font-size: .92rem; }
.editor-group input[type="text"], .editor-field input[type="text"] { width: 100%; max-width: 100%; }
.option-row { display: grid; grid-template-columns: 1fr; gap: .75rem; align-items: start; }
@media (min-width: 48rem) { .option-row { grid-template-columns: 1fr 11rem; gap: 1rem; } }
.fit-input { width: 6rem; }
.hash-short { font-size: .85rem; }

/* Report annotations */
.override-field { border-left: 3px solid var(--line-strong); padding-left: .75rem; }
.override-block { border-left: 3px solid var(--warn-line); padding-left: .6rem; background: var(--brand-tint); }
.annotations-panel details { margin: 1rem 0; }
.annotations-panel summary { cursor: pointer; font-weight: 700; }
[data-quill] { background: var(--paper); min-height: 6rem; border-radius: 0 0 8px 8px; }
.release-panel {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); box-shadow: var(--shadow-card);
    padding: .85rem 1.1rem; margin: 1rem 0;
}
.consultant-comment { background: var(--info-bg); border-radius: var(--radius); padding: .5rem 1rem 1rem; }

/* ---- Texts editor (visual in-place) ---- */
.emf-txt {
    background: rgba(255, 212, 0, .26);
    border-bottom: 1px dashed var(--warn-line);
    cursor: pointer; border-radius: 2px; padding: 0 1px;
}
.emf-txt:hover, .emf-txt:focus { background: rgba(255, 212, 0, .55); outline: 2px solid var(--warn-line); }
.emf-txt-custom { background: rgba(56, 102, 63, .18); border-bottom-color: var(--ok-line); }

.texts-legend { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; background: var(--paper); }
.texts-canvas { border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin: 1rem 0; background: var(--paper); }
.texts-missing { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1rem; }
.texts-missing .field { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; }
.texts-missing textarea { max-width: 100%; }

.txt-popover {
    position: absolute; z-index: 50; width: 340px; max-width: 92vw;
    background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(20, 21, 23, .18); padding: .75rem;
}
.txt-popover-key { font-size: .75rem; color: var(--ink-soft); margin: 0 0 .35rem; word-break: break-all; }
.txt-popover-input { width: 100%; max-width: 100%; font-size: .95rem; }
.txt-popover-hint { font-size: .8rem; color: var(--ink-soft); margin: .35rem 0; }
.txt-popover-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.txt-popover-actions .button { padding: .4rem .8rem; font-size: .9rem; min-height: 0; }

.texts-areas { list-style: none; padding: 0; }
.texts-areas li {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); box-shadow: var(--shadow-card);
    margin: .6rem 0; padding: .8rem 1.1rem;
}

/* ---- Utilities ---- */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---- Participant's own page ---- */
.report-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.report-list li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.report-list li:last-child { border-bottom: 0; }

/* ---- Technical details (author decision H2: folded away by default) ---- */
.tech-details { margin: .5rem 0 1.5rem; font-size: .86rem; color: var(--ink-soft); }
.tech-details > summary { cursor: pointer; color: var(--ink-soft); }
.tech-details > summary:hover { color: var(--ink); }
.tech-details code { font-size: .82rem; word-break: break-all; }

/* ---- Review decision marker ----
   Four workspace tables record a facilitator decision, and it used to be
   readable only from which button happened to be disabled. The marker states
   the outcome in the first column, where the eye already is.

   Colour is never the only carrier: each mark prints its word beside the dot,
   so the table survives greyscale and colour-blindness. The dot is the fast
   channel; the word is the correct one. */
.decision-mark {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; white-space: nowrap;
}
.decision-dot {
    width: .6rem; height: .6rem; border-radius: 50%; flex: none;
    border: 1.5px solid currentColor; background: currentColor;
}
.decision-mark.is-in    { color: var(--ok-line); }
.decision-mark.is-out   { color: var(--error-line); }
.decision-mark.is-seen  { color: var(--warn-line); }
/* Undecided is hollow, not grey-filled: an empty circle reads as "nothing has
   happened here yet" rather than as a third verdict. */
.decision-mark.is-open  { color: var(--line-strong); }
.decision-mark.is-open .decision-dot { background: transparent; }
.decision-mark.is-open .decision-word { color: var(--ink-soft); }

/* ---- Text editors (owner) ----
   Two screens over the frozen wording. Each entry has to carry enough context
   to be judged — a code is not context — so the row is a small card rather
   than a table line. */
.subnav { display: flex; gap: .25rem; margin: -.5rem 0 1.25rem; flex-wrap: wrap; }
.subnav a {
    padding: .4rem .8rem; border-radius: 999px; text-decoration: none;
    font-size: .88rem; font-weight: 600; color: var(--ink-soft);
    border: 1px solid var(--line);
}
.subnav a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.item-filter { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.item-filter input[type="search"] { min-width: 0; }
.inline-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; }

.item-edit {
    border: 1px solid var(--line); border-left: 3px solid var(--line);
    border-radius: var(--radius); padding: .8rem .95rem; margin: .6rem 0;
    background: var(--paper);
}
/* An edited entry is marked on the EDGE, not by a background wash: the frozen
   original is printed inside it, and a tint over both would suggest the
   original had been changed too. */
.item-edit.is-edited { border-left-color: var(--warn-line); }
.item-edit-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.item-edit-head code { font-size: .8rem; }
.item-edit textarea { width: 100%; }
.item-edit-actions { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }

.tag {
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--brand-tint); border: 1px solid var(--line);
    padding: .1rem .45rem; border-radius: 3px;
    white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%;
}
.tag-quiet { background: var(--canvas); color: var(--ink-soft); }

.item-warn, .item-mirror, .item-frozen {
    font-size: .88rem; margin: .4rem 0; padding: .5rem .7rem;
    border-radius: 4px; background: var(--canvas);
}
.item-warn { background: var(--warn-bg); border-left: 3px solid var(--warn-line); }
.item-mirror { border-left: 3px solid var(--line-strong); }
.item-frozen { border-left: 3px solid var(--ok-line); }

.sjt-case-edit {
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: .9rem 1rem; margin: 1.2rem 0; background: var(--canvas);
}
.sjt-case-edit > h3 { margin-top: 0; }
.sjt-case-edit .item-edit { background: var(--paper); }

/* ---- Session screens ----
   Two reports, two audiences: „Доклад към експерта" is a working surface,
   „Доклад към участника" is turned toward the person. The second is styled for
   reading at arm's length across a desk — larger type, fewer things per
   screen, no dense tables. */
.session-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.session-head h1 { margin-bottom: .2rem; }
.session-block {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 1.4rem 1.6rem; margin: 1.2rem 0;
    box-shadow: var(--shadow-card);
}
.session-block > h2 { margin-top: 0; font-size: 1.45rem; }
.session-block h3 { font-size: 1.05rem; margin-top: 1.4rem; }
.session-list { font-size: 1.05rem; line-height: 1.7; }
.session-cards { display: flex; flex-wrap: wrap; gap: .6rem; }
.session-card {
    flex: 1 1 15rem; padding: .8rem 1rem; border-radius: var(--radius);
    background: var(--canvas); border-left: 4px solid var(--line-strong);
    font-size: 1.02rem;
}
.session-card h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.session-card-good { border-left-color: var(--ok-line); }
.session-card-develop { border-left-color: var(--brand); }
.session-card-risk { border-left-color: var(--warn-line); }

/* ---- Chart motion -------------------------------------------------------
   One rule decides every case here: motion may say "the document has finished
   composing itself". It may never say anything about a number.

   This screen gets turned toward the person it describes. Whatever moves,
   they read as being about themselves — so a bar that grows encodes its own
   size twice, once in length and once in the speed of arriving, and a bar
   that grows slowly and stops short reads as effort that failed, watched by
   the person whose number it is. Nothing in a chart travels a distance that
   depends on a result.

   Nothing below is declared as a RESTING value. Every start state lives
   inside @keyframes, so wherever animation is switched off — reduced motion,
   print, no stylesheet at all, dompdf — each element renders from its own
   presentation attributes, which are the finished chart. There is no zero
   state to fall back to and nothing to restore.

   `backwards`, never `both`: `forwards` would pin each element to the
   animation's end value for the life of the page, which is a veto waiting for
   whoever writes the next rule. */

@keyframes chart-settle { from { opacity: 0; transform: translateY(6px); } }
@keyframes chart-ink-in { from { opacity: 0; } }

/* Identical timing on every chart. A stagger would put the charts in an
   order, and Експерт / Ментор / Фасилитатор is a profile, not a ranking. */
.chart { animation: chart-settle .32s cubic-bezier(.22, .61, .36, 1) backwards; }

/* The rings, the spokes and the axis tracks are the frame: they never move,
   so the scale is complete at the first frame and the shape arrives inside a
   frame that is already drawn. Deliberately NOT a stroke-dasharray draw-on —
   tracing an outline takes longest for the largest profile and turns a
   person's shape into a signature being written in front of them. */
.chart-radar,
.chart-vertex { animation: chart-ink-in .42s ease-out .14s backwards; }

/* Not motion — a resting state. Two people look at one screen and one of them
   points; this registers the pointing. It reveals nothing: every bar already
   prints its number, every chip its word, every axis its lean. */
.chart { transition: border-color .14s ease, box-shadow .14s ease; }
.chart:hover {
    border-color: var(--line-strong);
    box-shadow: 0 1px 2px rgba(20, 21, 23, .06), 0 12px 30px rgba(20, 21, 23, .09);
}

/* Off, not shortened. The global rule above already wins on !important alone,
   but `*` carries the lowest possible specificity, so a restatement without
   !important would merely TIE with the rules above and be decided by source
   order. Hover survives as an instant change: reduced motion removes the
   movement, not the affordance. */
@media (prefers-reduced-motion: reduce) {
    .chart, .chart-radar, .chart-vertex { animation: none !important; }
    .chart { transition: none !important; }
}

/* A browser print can otherwise capture a chart mid-entrance at opacity 0 and
   put a blank card on the paper. */
@media print {
    .chart, .chart-radar, .chart-vertex { animation: none !important; }
}

/* ---- SJT case cards (expert report) ----
   Replaced a table whose "choice" column printed the internal tag and whose
   score column printed a bare number. A situation and the sentence someone
   chose in it are prose, not table cells. */
.sjt-card {
    border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
    border-radius: var(--radius); padding: .9rem 1.1rem; margin: .7rem 0;
    background: var(--paper);
}
.sjt-card-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.sjt-card-head h3 { margin: 0; font-size: 1.05rem; flex: 1 1 auto; }
.sjt-stem { color: var(--ink-soft); font-size: .95rem; margin: 0 0 .6rem; }
/* The chosen sentence is the point of the card, so it is the one thing set
   apart rather than another paragraph among paragraphs. */
.sjt-choice {
    background: var(--brand-tint); border-radius: 4px;
    padding: .55rem .75rem; margin: 0 0 .4rem; font-size: 1rem;
}

/* ---- Risk cards (expert report) ----
   Twelve rows of which ten usually say "not reported" made the reader hunt for
   the two that matter. The signalled ones are cards, heaviest first; the silent
   ones collapse into a line that says they were checked. */
.risk-card {
    border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
    border-radius: var(--radius); padding: .9rem 1.1rem; margin: .7rem 0;
    background: var(--paper);
}
.risk-card-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.risk-card-head h3 { margin: 0; font-size: 1.05rem; flex: 1 1 auto; }
.risk-card p { margin: .3rem 0; }
/* Severity on the edge, and the word is in the tag beside the name — the
   colour is a second channel, never the only one. */
.risk-moderate { border-left-color: var(--warn-line); }
.risk-strong   { border-left-color: var(--error-line); }
.risk-extreme  { border-left-color: var(--error-line); border-left-width: 6px; }
.risk-silent { margin: 1rem 0; }
.risk-silent summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }


/* ---- Hypothesis cards (expert report) ----
   The old table squeezed the evidence into one narrow "Sources" cell, so a
   hypothesis resting on four families and one resting on a single family read
   the same. Here the five families are always laid out in the same order and
   the same places, which makes the shape of the evidence comparable at a
   glance between one card and the next. */
.hyp-card {
    border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
    border-radius: var(--radius); padding: .9rem 1.1rem; margin: .7rem 0;
    background: var(--paper);
}
.hyp-card-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.hyp-card-head h3 { margin: 0; font-size: 1.05rem; flex: 1 1 auto; }
.hyp-status { margin: 0 0 .6rem; color: var(--ink-soft); font-size: .9rem; }
/* Status on the edge. Supported and challenged are the two that change what
   you do with the card, so only those two are marked; the word is in the row
   above either way. */
.hyp-strong { border-left-color: var(--ok-line); }
.hyp-contested { border-left-color: var(--error-line); }
.hyp-mixed { border-left-color: var(--warn-line); }

.hyp-sources { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.hyp-src {
    display: inline-flex; align-items: baseline; gap: .35rem;
    border: 1px solid var(--line); border-radius: 999px;
    padding: .2rem .6rem; font-size: .82rem;
}
.hyp-src-dot {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--line-strong); flex: 0 0 auto; align-self: center;
}
.hyp-src-name { font-weight: 600; }
.hyp-src-word { color: var(--ink-soft); }
/* Every chip carries its verdict as a word, so the colour is never the only
   channel — it survives greyscale printing and colour blindness. */
.hyp-src.is-for { border-color: var(--ok-line); }
.hyp-src.is-for .hyp-src-dot { background: var(--ok-line); }
.hyp-src.is-against { border-color: var(--error-line); }
.hyp-src.is-against .hyp-src-dot { background: var(--error-line); }
.hyp-src.is-context { border-color: var(--warn-line); }
.hyp-src.is-context .hyp-src-dot { background: var(--warn-line); }
.hyp-src.is-absent { color: var(--ink-soft); opacity: .7; }
.hyp-src.is-absent .hyp-src-dot { background: transparent; border: 1px solid var(--line-strong); }


/* ---- Semantic pair cards (expert report) ----
   The table said "2 steps" without saying between what and what, or which way
   round. The two statements side by side, each with the answer given to it,
   is the whole content of a pair; the number is just its summary. */
.sem-card {
    border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
    border-radius: var(--radius); padding: .9rem 1.1rem; margin: .7rem 0;
    background: var(--paper);
}
.sem-card-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.sem-card-head h3 { margin: 0; font-size: 1.05rem; flex: 1 1 auto; }
.sem-card p { margin: .3rem 0; }
.sem-moderate { border-left-color: var(--warn-line); }
.sem-strong { border-left-color: var(--error-line); }
/* Two columns where there is room, stacked where there is not — the point is
   that the two statements are read against each other. */
.sem-sides { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 40rem) { .sem-sides { grid-template-columns: 1fr 1fr; } }
.sem-sides > li { background: var(--info-bg); border-radius: 8px; padding: .6rem .75rem; }
.sem-item { margin: 0 0 .35rem; font-size: .95rem; }
.sem-answer { margin: 0; }
.sem-quiet { margin: 1rem 0; }
.sem-quiet summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }


/* ---- The text finder ----
   One screen over four stores. A hit that nothing reads is shown deliberately
   and marked as dead, because a key the owner can edit into the void is worse
   than one they cannot find. */
.texts-find { margin: 1rem 0 1.5rem; max-width: 44rem; }
.texts-find label { display: block; font-weight: 600; margin-bottom: .35rem; }
.texts-find input { width: 100%; max-width: 30rem; margin-right: .5rem; }
.texts-find .hint { margin-top: .5rem; }
.text-hit {
    border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
    border-radius: var(--radius); padding: .8rem 1rem; margin: .6rem 0;
    background: var(--paper);
}
.text-hit-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.text-hit-kind { font-weight: 600; }
.text-hit-value { margin: 0 0 .5rem; }
.text-hit p { margin: .3rem 0; }
/* Dead, and saying so in more than colour: the paragraph inside spells it out. */
.text-hit-dead { border-left-color: var(--error-line); background: var(--canvas); }


/* ---- Severity rows (screen) ----
   Two equal columns, both wrapping. This replaced an SVG strip on screen
   because SVG cannot wrap text: with a fixed label column, a name longer than
   the column ran under the coloured chip, and shortening it with an ellipsis
   answered the overflow rather than the need — the whole name has to be
   readable. The SVG version stays in Charts::severities for the PDF.

   Below 40rem the two stack: on a phone, two columns of Bulgarian sentences
   are two columns of broken words. */
.sev-list { list-style: none; margin: .6rem 0 1rem; padding: 0; display: grid; gap: .45rem; }
.sev-row { display: grid; grid-template-columns: 1fr; gap: .45rem; align-items: stretch; }
@media (min-width: 40rem) { .sev-row { grid-template-columns: 1fr 1fr; } }
.sev-label {
    padding: .55rem .75rem; background: var(--canvas); border-radius: 8px;
    /* Long Bulgarian words break rather than push the column wider. */
    overflow-wrap: anywhere;
}
.sev-chip {
    padding: .55rem .75rem; border-radius: 8px; font-weight: 600;
    display: flex; align-items: center; overflow-wrap: anywhere;
}
/* The same four colours the SVG uses, so screen and PDF agree. The word is in
   the chip either way — colour is never the only channel. */
.sev-none     { }
.sev-none     .sev-chip { background: #8aa79a; color: #141517; }
.sev-moderate .sev-chip { background: #d9a441; color: #141517; }
.sev-strong   .sev-chip { background: #c25a2b; color: #ffffff; }
.sev-extreme  .sev-chip { background: #9b2c1f; color: #ffffff; }


/* =========================================================================
   Mobile repair, 31 July 2026.

   Nobody had opened this application on a phone. The audit found the list
   screens unusable rather than merely awkward: the document itself became the
   horizontal scroll container, so reading one sentence meant panning the whole
   page sideways.

   Everything below is additive, and every breakpoint is one the file already
   uses (47.99/48rem, 52rem, 30rem). No new breakpoint is introduced.
   ========================================================================= */

/* ---- Classes the markup uses that the stylesheet never defined ----------
   Found by grepping the views against this file. Each rendered as an unstyled
   default: .sr-only printed its label visibly — 498 times on /admin/items —
   and .content-block left the „Замрази нова ревизия" form, the most
   consequential control on the workspace, as a bare block among cards. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
.form-row { margin: 1.25rem 0; min-width: 0; }
fieldset.form-row {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .8rem 1rem; min-width: 0;
}
.form-row > label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .95rem; }
.inline-choice {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 2.75rem; padding: .35rem .75rem; margin: 0 .4rem .4rem 0;
    border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
}
.inline-choice:focus-within { border-color: var(--ink); box-shadow: var(--focus-ring); }
.stack-form > * + *, .stacked-form > * + * { margin-top: 1.1rem; }
.content-block {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    padding: .9rem 1.05rem 1.1rem; margin: 1.2rem 0;
}
@media (min-width: 48rem) { .content-block { padding: 1.1rem 1.5rem 1.4rem; } }

/* The toggle is `hidden` in the markup and admin.js clears the attribute.
   Without this, `display: inline-flex` beats the browser's own [hidden] rule,
   so with JS off a dead button announces a collapsed menu over eight
   expanded links. */
.nav-toggle[hidden] { display: none; }

/* ---- Tables on a phone --------------------------------------------------
   The existing mobile block was written for the `data` spelling only, and the
   string `data-table` does not appear in it once. Class tokens are exact, so
   fifteen tables kept automatic layout with unbreakable headers and pushed the
   document sideways. Same declarations, mirrored selector, appended rather
   than edited so the original block stays readable as written. */
@media (max-width: 47.99rem) {
    table.data-table:not(.table-cards) {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    /* The rounded box clips its own overflow, so a focus ring on a control in
       the first or last row is cut once the box scrolls. Drawing it inside
       costs nothing. */
    table.data:not(.table-cards) :is(a, button, input, select):focus-visible,
    table.data-table:not(.table-cards) :is(a, button, input, select):focus-visible {
        outline-offset: -3px;
    }

    table.data-table.table-cards {
        display: block; background: transparent;
        border: none; border-radius: 0; box-shadow: none;
    }
    table.data-table.table-cards thead { display: none; }
    table.data-table.table-cards tbody { display: block; }
    table.data-table.table-cards tr {
        display: block;
        background: var(--paper); border: 1px solid var(--line);
        border-radius: var(--radius); box-shadow: var(--shadow-card);
        margin-bottom: .6rem; padding: .2rem .9rem;
    }
    table.data-table.table-cards td {
        display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
        border: none; border-bottom: 1px solid var(--line);
        padding: .55rem 0; text-align: right; white-space: normal;
    }
    table.data-table.table-cards tr td:last-child { border-bottom: none; }
    table.data-table.table-cards td::before {
        content: attr(data-label);
        flex: 0 1 auto; text-align: left; padding-right: .5rem;
        font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
        color: var(--ink-soft);
    }
    table.data-table.table-cards td > * { min-width: 0; }
    table.data-table.table-cards td.cell-action { display: block; text-align: left; padding-bottom: .7rem; }
    table.data-table.table-cards td.cell-action::before { display: block; margin-bottom: .35rem; }
    table.data-table.table-cards td.cell-action .button { width: 100%; }
    table.data-table.table-cards td.cell-action .inline-form { display: block; }
    table.data-table.table-cards td[colspan] { display: block; text-align: left; color: var(--ink-soft); }
    table.data-table.table-cards td[colspan]::before { content: none; }

    /* The single unconditional line behind most of the overflow: a header was
       forbidden from ever breaking, at every width, with no relaxation
       anywhere. „УЧАСТНИКЪТ Е УВЕДОМЕН" is about 174px of unbreakable
       uppercase; five such headers is a 780px table in a 328px column. */
    table.data thead th, table.data-table thead th { white-space: normal; }
    /* Same for the action column, which is already a wrapping flex container:
       nowrap bought nothing and pinned it to its widest single button. */
    table.data td.action-cell, table.data-table td.action-cell { white-space: normal; }

    /* An unbreakable e-mail or pseudonym sets a column's min-content, and
       `overflow-wrap: break-word` does not reduce min-content. `anywhere`
       does. */
    table.data td, table.data-table td { overflow-wrap: anywhere; }

    /* Destructive controls were landing at 33.6px — below any reasonable
       touch target, and they are exactly the ones worth not mis-tapping. */
    .button-quiet { min-height: 2.75rem; padding: .5rem .85rem; font-size: .92rem; }
    .txt-popover-actions .button { min-height: 2.75rem; }
    .txt-popover-actions { gap: .6rem; }
    /* Five counters in one column is 500px of scrolling before anything
       actionable. */
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .stat { padding: .55rem .7rem; }
    .stat-value { font-size: 1.1rem; }
}


/* ---- Chart frame ---------------------------------------------------------
   A 660-unit chart in a 310px column renders its 12-unit labels at 5.6 CSS px.
   width="100%" + height:auto mean it shrinks rather than overflows, so
   nothing is clipped — it is simply unreadable, and no parameter can help:
   $width is shared with both PDFs. Below the desktop split the frame becomes
   the scroller and pins the chart to a width where the type is legible
   (34rem = 544px -> 9.9 CSS px). Above it the frame is inert. */
.chart-frame > .chart { margin-top: 0; }
@media (max-width: 47.99rem) {
    .chart-frame {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        margin: .5rem 0 1rem; border-radius: var(--radius);
    }
    .chart-frame > .chart { min-width: 34rem; margin: 0; }
    /* A scroll container that cannot be reached by keyboard is not a control. */
    .chart-frame:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
}
/* A silhouette is read whole; it must never be panned. */
.chart-frame-shape { overflow: visible; }
@media (max-width: 47.99rem) { .chart-frame-shape > .chart { min-width: 0; } }


/* ---- „Доклад към участника" ---------------------------------------------
   The one screen that gets turned toward the person it describes. The layout
   rule: a card carries a SENTENCE about this person; a chart sits under the
   sentence as evidence, never over it as a headline. At 360px a 660-unit bar
   chart writes „Фасилитатор" at 4.7 CSS px, so the chart cannot be the
   heading even if we wanted it to be.

   No style attribute, no <style>, no script: the same markup has to survive
   under style-src 'self' if it ever moves to the participant's own report. */

.pv { --pv-gutter: 1rem; }
@media (min-width: 48rem) { .pv { --pv-gutter: 1.5rem; } }

/* .wrap is padded 0 1rem, so this lands exactly on the viewport edge — no
   100vw, which overshoots when a scrollbar is present. */
.pv-act {
    margin-inline: calc(var(--pv-gutter) * -1);
    padding: 2.1rem var(--pv-gutter) 2.4rem;
    background: var(--canvas);
    border-top: 1px solid var(--line);
}
.pv-act + .pv-act { border-top-color: var(--line-strong); }
@media (min-width: 48rem) { .pv-act { padding: 3rem var(--pv-gutter) 3.2rem; } }

/* The global h2 carries a border-bottom, and .session-block h3 would beat any
   single class on specificity. Both are cancelled explicitly rather than
   fought. */
.pv-h2 {
    border-bottom: 0; padding-bottom: 0;
    margin: 0 0 .5rem;
    font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2rem);
    line-height: 1.15; letter-spacing: -.02em; font-weight: 800;
}
.pv-h3 { margin: 2.2rem 0 .3rem; font-size: 1.12rem; font-weight: 800; }
.pv-lead { margin: 0 0 1.3rem; max-width: 40ch; font-size: 1.06rem; color: var(--ink-soft); }
.pv-say  { margin: 1.6rem 0 .2rem; max-width: 40ch; color: var(--ink-soft); }

/* Was `alert alert-info`: a paper box with an ink edge, the second thing on
   the page, addressed to the facilitator. It stays; it stops being a
   headline. */
.pv-scope {
    margin: .2rem 0 1.4rem; max-width: 42rem;
    padding: .15rem 0 .15rem .75rem;
    border-left: 3px solid var(--line-strong);
    font-size: .88rem; line-height: 1.55; color: var(--ink-soft);
}

/* ---- the silhouette ----
   The stage runs to the viewport edge and the chart drops its card, so at
   360px the SVG viewport grows from 257px to 360px and the wheel from 129px
   to 181px across. The six names are printed a second time as HTML chips
   below 48rem, where the SVG's own labels are too small to lean on. */
.pv-shape { margin: .4rem 0 0; }
.pv-stage {
    margin-inline: calc(var(--pv-gutter) * -1);
    display: grid; place-items: center;
    background: radial-gradient(circle closest-side at 50% 46%,
        rgba(255, 212, 0, .14), rgba(255, 255, 255, 0) 72%);
}
/* Everywhere else .chart IS a card. Here the page is the card and the shape
   sits on it like a drawing on paper. :hover restated because .chart:hover
   has equal specificity and source order would otherwise decide it. */
.pv-stage .chart, .pv-stage .chart:hover {
    border: 0; box-shadow: none; background: transparent;
    padding: 0; margin: 0 auto;
    /* Clamped at EVERY width. With the clamp only above 48rem, the wheel grew
       with the viewport between ~480 and 767px and then snapped down at the
       breakpoint — seen live as the radar suddenly growing and shrinking. */
    max-width: min(100%, 30rem);
}
@media (min-width: 48rem) { .pv-stage { margin-inline: 0; } }
.pv-figtitle { margin: .7rem 0 .5rem; text-align: center; font-weight: 800; font-size: 1.1rem; }
.pv-poles {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
    gap: .35rem; padding: 0; margin: 0 0 .7rem;
}
.pv-poles li {
    font-size: .82rem; font-weight: 600; color: var(--ink-soft);
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 999px; padding: .18rem .7rem;
}
/* Above the split the SVG's own labels are legible, so the chips would be
   duplication — but they stay in the accessibility tree: <svg role="img"> is
   a leaf and without them not one pole name is announced. */
@media (min-width: 48rem) {
    .pv-poles {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
    }
}
.pv-shape figcaption .hint { max-width: 34rem; margin: 0 auto; text-align: center; }

/* ---- the three roles ----
   Card, not bar. The name is the person's own vocabulary and the band word is
   the sentence; the number sits between them. No sorting by value: ranking
   three roles turns a profile into a scoreboard. Every card is the same size,
   whatever its number. */
.pv-roles { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .7rem; }
@media (min-width: 48rem) { .pv-roles { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.pv-role {
    --pv-hue: var(--line-strong);
    background: var(--paper); border: 1px solid var(--line);
    border-top: 4px solid var(--pv-hue); border-radius: var(--radius-lg);
    padding: 1rem 1.05rem 1.1rem; box-shadow: var(--shadow-card);
}
.pv-role-name  { display: block; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.pv-role-value {
    display: block; margin: .2rem 0 .05rem; color: var(--pv-hue);
    font-size: 2.3rem; line-height: 1.05; font-weight: 800;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.pv-role-band  { display: block; font-size: .98rem; color: var(--ink); }
/* The role palette, mirrored from Palette::ROLE — CSS cannot read a PHP
   constant; if one moves, both move. At this size these are WCAG large text,
   and colour carries nothing alone: the name and the band word sit beside it. */
.pv-role-e { --pv-hue: #1f6feb; }
.pv-role-m { --pv-hue: #1a7f4b; }
.pv-role-f { --pv-hue: #c2600f; }

.pv-overall { margin: 1.1rem 0 0; font-size: 1.05rem; }
.pv-overall-value { font-weight: 800; font-variant-numeric: tabular-nums; }

.pv-detail { margin: 1rem 0 0; }
.pv-detail > summary {
    cursor: pointer; font-weight: 700; font-size: .95rem; color: var(--ink-soft);
    padding: .55rem 0; min-height: 2.75rem; display: flex; align-items: center;
}

/* ---- the three axes ----
   The payload carries the ORIENTATION only — five words, never two scores —
   so five slots reproduce exactly what the axes chart shows and nothing is
   invented. CLEAR is inset to 4%/96% so the dot stays on the rail. */
.pv-axes { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .8rem; }
@media (min-width: 56rem) { .pv-axes { grid-template-columns: repeat(3, 1fr); } }
.pv-axis {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: .95rem 1.05rem 1.05rem;
    box-shadow: var(--shadow-card);
}
.pv-axis-name {
    margin: 0 0 .2rem; font-size: .74rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft);
}
.pv-axis-lean { margin: 0 0 .75rem; font-size: 1.08rem; font-weight: 600; line-height: 1.4; }
.pv-axis-track {
    position: relative; height: 6px; margin: 0 .5rem;
    border-radius: 999px; background: var(--canvas); border: 1px solid var(--line);
}
.pv-axis-dot {
    position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
    transform: translate(-50%, -50%); background: var(--ink-soft);
    box-shadow: 0 0 0 3px var(--paper), 0 1px 3px rgba(20, 21, 23, .25);
}
.pv-at-l2 .pv-axis-dot  { left: 4%; }
.pv-at-l1 .pv-axis-dot  { left: 32.5%; }
.pv-at-mid .pv-axis-dot { left: 50%; }
.pv-at-r1 .pv-axis-dot  { left: 67.5%; }
.pv-at-r2 .pv-axis-dot  { left: 96%; }
.pv-axis-poles {
    display: flex; justify-content: space-between; gap: .6rem; margin: .55rem 0 0;
    font-size: .85rem; font-weight: 600; color: var(--ink-soft);
}
.pv-axis-poles span:last-child { text-align: right; }

/* ---- cards ----
   No severity anywhere: the payload carries label + topic_label only, so
   every risk card is identical by construction and no theme can be made to
   look worse than another. Warm ochre, never red — there is no red on this
   screen. */
.pv-cards { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .7rem; }
@media (min-width: 48rem) { .pv-cards { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }
.pv-cards > * { min-width: 0; }
.pv-card {
    --pv-hue: var(--line-strong);
    background: var(--paper); border: 1px solid var(--line);
    border-left: 4px solid var(--pv-hue); border-radius: var(--radius-lg);
    padding: 1rem 1.05rem; box-shadow: var(--shadow-card);
}
.pv-card-title { margin: 0 0 .3rem; font-size: 1.08rem; font-weight: 800; line-height: 1.35; }
.pv-card p { margin: .3rem 0 0; font-size: 1.02rem; line-height: 1.6; }
.pv-card > p:first-child { margin-top: 0; }
.pv-card-risk    { --pv-hue: var(--warn-line); background: var(--warn-bg); border-color: #e8d9a8; }
.pv-card-good    { --pv-hue: var(--ok-line); }
.pv-card-develop { --pv-hue: var(--brand); }
.pv-card-task    { --pv-hue: var(--ink); }

.pv-task-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem; }
.pv-task-head .pv-card-title { flex: 1 1 12rem; margin-bottom: 0; }
.pv-freq {
    flex: 0 1 auto; padding: .12rem .6rem; border-radius: 999px;
    background: var(--canvas); border: 1px solid var(--line);
    font-size: .78rem; font-weight: 700; letter-spacing: .03em; color: var(--ink-soft);
}
/* The only sentence in the whole payload that ASKS the person something. */
.pv-reflect {
    margin: .85rem 0 0; padding-top: .7rem;
    border-top: 1px solid var(--line);
    font-style: italic; color: var(--ink-soft);
}

/* ---- the questions ----
   The largest type on the page, because these are the sentences that will be
   spoken out loud in a minute. The numeral is a counter in --line-strong:
   texture, not data, never coloured by a result. At 360px the numeral sits
   ABOVE the question; the gutter appears from 30rem up. */
.pv-asks { list-style: none; counter-reset: pv-ask; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.pv-asks > li {
    counter-increment: pv-ask; position: relative;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    padding: 2.5rem 1.05rem 1.05rem;
    font-size: 1.1rem; line-height: 1.55;
}
.pv-asks > li::before {
    content: counter(pv-ask); position: absolute; top: .75rem; left: 1.05rem;
    font-size: 1.7rem; font-weight: 800; line-height: 1;
    color: var(--line-strong); font-variant-numeric: tabular-nums;
}
@media (min-width: 30rem) {
    .pv-asks > li { padding: 1.05rem 1.15rem 1.05rem 3.4rem; }
    .pv-asks > li::before { top: 1rem; left: 1.1rem; }
}

/* The page ends on a sentence, not on a list of homework. The yellow never
   becomes text — the emphasis is white on ink. */
.pv-coda {
    margin-inline: calc(var(--pv-gutter) * -1);
    padding: 2.4rem var(--pv-gutter) 3rem;
    background: var(--ink); color: #f0efe7;
}
.pv-coda p { margin: 0 auto; max-width: 34rem; font-size: 1.05rem; line-height: 1.65; }
.pv-coda strong { color: var(--paper); }

/* ---- motion ----
   The one rule, inherited from the chart doctrine above: motion may say "the
   document has finished composing itself"; it may never say anything about a
   number. The step is BETWEEN the acts the author ordered, never between the
   cards inside one — a delay between three role cards would rank them, and
   Експерт / Ментор / Фасилитатор is a profile, not a league table. Nothing
   travels a distance that depends on a result. */
.pv-act, .pv-coda { animation: chart-settle .34s cubic-bezier(.22, .61, .36, 1) backwards; }
.pv-act:nth-of-type(2) { animation-delay: .05s; }
.pv-act:nth-of-type(3) { animation-delay: .1s; }
.pv-act:nth-of-type(4) { animation-delay: .15s; }
.pv-act:nth-of-type(n+5) { animation-delay: .2s; }
.pv-coda { animation-delay: .24s; }
.pv-card, .pv-role, .pv-axis, .pv-asks > li {
    transition: border-color .14s ease, box-shadow .14s ease;
}
.pv-card:hover, .pv-role:hover, .pv-axis:hover, .pv-asks > li:hover {
    border-color: var(--line-strong);
    box-shadow: 0 1px 2px rgba(20, 21, 23, .06), 0 10px 26px rgba(20, 21, 23, .08);
}
/* Off, not shortened — same reasoning as the chart block: every keyframe has
   `from` only and `backwards`, so the declared state IS the finished state;
   with animation off each act renders complete. */
@media (prefers-reduced-motion: reduce) {
    .pv-act, .pv-coda { animation: none !important; }
    .pv-card, .pv-role, .pv-axis, .pv-asks > li { transition: none !important; }
}
@media print { .pv-act, .pv-coda { animation: none !important; } }


/* ---- Hypotheses, conclusions-first (author decision, 1 August 2026) ----
   The conclusion sentence is the largest thing on a contradiction card,
   because it is the thing the facilitator came for; the questions are next,
   because they are what gets said out loud; the evidence folds, because it
   is for verification, not first read. */
.hyp-lead { margin: 1.6rem 0 .5rem; font-size: 1.15rem; font-weight: 800; }
.hyp-conclusion {
    margin: .4rem 0 .9rem; max-width: 46rem;
    font-size: 1.25rem; line-height: 1.45; font-weight: 700;
    letter-spacing: -.01em;
}
.hyp-ask-label {
    margin: .9rem 0 .3rem; font-size: .74rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft);
}
.hyp-asks { margin: 0 0 .9rem; padding-left: 1.2rem; }
.hyp-asks li { margin: .35rem 0; font-size: 1.02rem; line-height: 1.55; }
.hyp-pair-decide { display: grid; gap: .7rem; margin: .6rem 0 .4rem; }
@media (min-width: 48rem) { .hyp-pair-decide { grid-template-columns: 1fr 1fr; } }
.hyp-pair-side {
    background: var(--canvas); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .6rem .75rem;
}
.hyp-pair-side .tag { margin-right: .4rem; }
.hyp-pair-side .inline-form { margin-top: .45rem; }
.hyp-evidence-fold { margin: .6rem 0 .2rem; }
.hyp-evidence-fold > summary,
.hyp-thin > summary,
.hyp-legend > summary {
    cursor: pointer; font-weight: 600; color: var(--ink-soft);
    padding: .35rem 0; min-height: 2.4rem; display: flex; align-items: center;
}
.hyp-thin { margin: 1.2rem 0; }
.hyp-legend { margin: 1.4rem 0 0; }


/* ---- Readiness strip + quality decisions (C3) ----
   The strip answers one question before anything is read: may this result be
   interpreted, and is anything mandatory still open. Tone is a second
   channel; the words carry the meaning. */
.ws-status {
    border: 1px solid var(--line); border-left: 5px solid var(--line-strong);
    border-radius: var(--radius); background: var(--paper);
    padding: .7rem 1rem; margin: .8rem 0 1.2rem;
}
.ws-status-line { margin: .15rem 0; }
.ws-status-ok   { border-left-color: var(--ok-line); }
.ws-status-care { border-left-color: var(--warn-line); }
.ws-status-hold { border-left-color: var(--error-line); background: var(--warn-bg); }

.qsig-card {
    border: 1px solid var(--line); border-left: 4px solid var(--warn-line);
    border-radius: var(--radius); background: var(--paper);
    padding: .8rem 1rem; margin: .6rem 0;
}
.qsig-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.qsig-head h4 { margin: 0; font-size: 1rem; flex: 1 1 auto; }
.qsig-form > summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); min-height: 2.4rem; display: flex; align-items: center; }
.qsig-form select { display: block; width: 100%; max-width: 26rem; padding: .55rem .7rem; font-size: 1rem; font-family: inherit; }

.hyp-side-status { margin: .3rem 0 .1rem; font-size: .88rem; color: var(--ink-soft); }


/* ---- C5: risk cards carry questions + rationale; SJT folds quiet cases ----
   The rationale input travels in the same form as the two buttons, so either
   decision records the reason typed beside it. */
.risk-questions ul { margin: .2rem 0 .5rem 1.2rem; }
.risk-questions li { margin: .2rem 0; }
.risk-decide { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.risk-decide input[type="text"] {
    flex: 1 1 16rem; min-width: 0; padding: .5rem .7rem;
    font-size: .95rem; font-family: inherit;
    border: 1px solid var(--line); border-radius: var(--radius);
}
.sjt-quiet { margin: 1rem 0; }
.sjt-quiet summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); min-height: 2.4rem; display: flex; align-items: center; }


/* ---- C6: one card per axis, two independent bars ---- */
.axis-card { margin: .8rem 0 1rem; }
.axis-card h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.axis-card .chart-frame { margin: 0 0 .2rem; }


/* ---- C8: comparison screen — the quality of both attempts, first ---- */
.cmp-quality { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cmp-quality-side {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); padding: .7rem 1rem;
}
.cmp-quality-side h3 { margin: 0 0 .4rem; font-size: 1rem; }
.cmp-quality-side ul { margin: .2rem 0 .4rem 1.2rem; }
@media (max-width: 40rem) {
    .cmp-quality { grid-template-columns: 1fr; }
}


/* ---- Workspace tabs (author's nine-tab layout) ----
   The panels always render; only with JS (html.ws-tabs-on) do the inactive
   ones hide. Print always shows the whole report. */
.ws-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.2rem; }
.ws-tab {
    display: inline-flex; align-items: center; min-height: 2.4rem;
    padding: .3rem .85rem; border: 1px solid var(--line);
    border-radius: 999px; background: var(--paper);
    text-decoration: none; color: var(--ink-soft); font-weight: 600;
}
.ws-tab:hover { border-color: var(--ink-soft); color: var(--ink); }
.ws-tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ws-tabs-on .ws-tab-panel { display: none; }
.ws-tabs-on .ws-tab-panel.is-active { display: block; }
@media print {
    .ws-tabs { display: none !important; }
    .ws-tab-panel { display: block !important; }
}

/* ---- Разгъваемите текстове се разпознават (жълтото от логото) ----
   Едно и също триъгълниче пред всеки <details> — сгънато сочи надясно,
   отворено надолу. Подсказката важи и за фасилитаторския, и за
   участническия екран; PDF-ите имат собствени стилове и не се променят. */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
    content: ''; display: inline-block; flex: 0 0 auto;
    width: 0; height: 0;
    border-left: .5rem solid #FFD400;
    border-top: .32rem solid transparent;
    border-bottom: .32rem solid transparent;
    margin-right: .5rem;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .25));
}
details[open] > summary::before {
    border-left: .32rem solid transparent;
    border-right: .32rem solid transparent;
    border-top: .5rem solid #FFD400;
    border-bottom: 0;
}


/* ---- C4 (v1.3): strengths/development candidate cards ---- */
.v13-card {
    border: 1px solid var(--line); border-left: 4px solid var(--ink-soft);
    border-radius: var(--radius); background: var(--paper);
    padding: .8rem 1rem; margin: .6rem 0;
}
.v13-auto { border-left-color: var(--ok-line, #3c7a3c); }
.v13-conditional { border-left-color: var(--warn-line, #b78312); }
.v13-card-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.v13-card-head h4 { margin: 0; font-size: 1.02rem; flex: 1 1 auto; }
.v13-warning { color: var(--ink); background: var(--warn-bg, #fdf6e3);
    border-radius: var(--radius); padding: .3rem .6rem; }
.v13-decide > summary, .v13-manual > summary { cursor: pointer; font-weight: 600;
    color: var(--ink-soft); min-height: 2.4rem; display: flex; align-items: center; }
.v13-ack { display: block; margin: .4rem 0; color: var(--ink-soft); }


/* ---- C5 (v1.3): participant strengths/development cards ---- */
.v13p-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); padding: .8rem 1rem; margin: .6rem 0;
}
.v13p-card h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.v13p-more > summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; }
.v13p-note { margin-top: 1.4rem; }


/* ==========================================================================
   The participant report, redesigned 3 August 2026.

   Design thesis: this instrument reports a LEAN and a DIRECTION, never a
   grade — so the document is dressed as a navigational instrument. A compass
   rose at its centre, measure ticks numbering the sections, quiet surfaces,
   and the three hues of the reader doing the talking. The boldness is spent
   in one place (the rose); everything around it stays disciplined.

   Scoped under .v13r so nothing here can reach the facilitator screens or
   the historical reports rendered by the legacy branch.
   ========================================================================== */

.v13r {
    --rail: 15rem;
    --card-radius: 14px;
}

/* ---- the flow and its sections ---- */
.v13r-flow { display: flex; flex-direction: column; gap: 2.6rem; }

.v13r-section {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.4rem;
    box-shadow: var(--shadow-card);
    scroll-margin-top: 5rem;
}
.v13r-h2 {
    margin: 0 0 .3rem;
    font-size: 1.22rem;
    letter-spacing: -.015em;
    line-height: 1.25;
}
.v13r-note { margin: .35rem 0 1rem; color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }
.v13r-lead { margin: 0 0 1.2rem; font-size: 1.06rem; line-height: 1.6; max-width: 46rem; }

/* ---- the hero: two wheels beside the three dimensions ---- */
.v13r-hero {
    background: linear-gradient(180deg, var(--paper) 0%, var(--canvas) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.4rem 1.2rem;
    box-shadow: var(--shadow-card);
}
.v13r-hero-grid { display: grid; gap: 1.4rem; }
.v13r-wheels { display: grid; gap: 1rem; }
.v13r-wheel { margin: 0; }
.v13r-wheel figcaption {
    margin-top: .3rem; color: var(--ink-soft); font-size: .85rem; line-height: 1.45; text-align: center;
}
.v13r-dims { display: grid; gap: .7rem; align-content: start; }
.v13r-dim {
    display: flex; align-items: center; gap: .75rem;
    background: var(--dim-tint, var(--canvas));
    border: 1px solid var(--line);
    border-left: 4px solid var(--dim, var(--line-strong));
    border-radius: var(--card-radius);
    padding: .7rem .85rem;
}
.v13r-dim-name { margin: 0; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.v13r-dim-band { margin: .1rem 0 0; color: var(--ink-soft); font-size: .9rem; }

/* ---- the signature: the compass rose ---- */
.v13r-rose-section { background: var(--canvas); }
.v13r-rose { max-width: 30rem; margin: 0 auto; }

/* ---- the icon disc ---- */
.v13-disc {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #fff; flex: 0 0 auto;
    box-shadow: 0 2px 6px rgba(20, 21, 23, .18);
}
.v13-disc svg { width: 58%; height: 58%; }

/* ---- topic cards ---- */
.v13r-cards { display: grid; gap: 1rem; }
.v13r-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    padding: 1rem 1.05rem;
}
.v13r-card > header { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .6rem; }
.v13r-card h3 { margin: 0; font-size: 1.06rem; letter-spacing: -.01em; line-height: 1.3; }
.v13r-card-status {
    margin: .2rem 0 0; font-size: .82rem; color: var(--ink-soft); letter-spacing: .01em;
}
.v13r-card-body { margin: 0 0 .6rem; line-height: 1.6; }
.v13r-card-row { margin: .45rem 0; line-height: 1.55; }
.v13r-card-row > span {
    display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--hue, var(--ink-soft)); margin-bottom: .1rem;
}
.v13r-card-caution > span { color: var(--warn-line); }
.v13r-card-list { margin: .2rem 0 .5rem; padding-left: 1.1rem; }
.v13r-card-list li { margin: .2rem 0; line-height: 1.5; }
.v13r-card-ask {
    margin: .7rem 0 0; padding: .6rem .8rem;
    background: var(--canvas); border-radius: var(--radius);
    font-style: italic; line-height: 1.55;
}
.v13r-card-more { margin-top: .6rem; }
.v13r-card-more > summary {
    cursor: pointer; color: var(--ink-soft); font-weight: 600; font-size: .9rem;
    min-height: 2.2rem; display: flex; align-items: center;
}
.v13r-card-more p { margin: .3rem 0; color: var(--ink-soft); font-size: .9rem; }

/* The kind of the section washes its cards: strengths sit on emerald,
   development directions on amber. The role hue stays on the disc, so the
   two never compete for the same surface. */
.v13r-kind-strength { background: linear-gradient(180deg, #f4faf6 0%, var(--paper) 60%); }
.v13r-kind-strength .v13r-card {
    background: #fbfefc; border-color: #cfe7da;
    box-shadow: 0 1px 2px rgba(30, 145, 89, .08), 0 10px 24px rgba(30, 145, 89, .10);
}
.v13r-kind-development { background: linear-gradient(180deg, #fdf7f0 0%, var(--paper) 60%); }
.v13r-kind-development .v13r-card {
    background: #fffdfa; border-color: #eeddc6;
    box-shadow: 0 1px 2px rgba(194, 96, 15, .08), 0 10px 24px rgba(194, 96, 15, .10);
}

/* ---- summary, keep/limit/develop, axes, risks ---- */
.v13r-summary { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.v13r-summary li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .55rem .8rem; background: var(--canvas); border-radius: var(--radius);
    border-left: 4px solid var(--dim, var(--line-strong));
}
.v13r-summary li span { color: var(--ink-soft); font-size: .93rem; }

.v13r-kld { display: grid; gap: 1rem; }
.v13r-kld-col {
    background: var(--canvas); border-radius: var(--card-radius);
    border-top: 3px solid var(--hue, var(--line-strong)); padding: .9rem 1rem;
}
.v13r-kld-col h3 { margin: 0 0 .2rem; font-size: 1rem; color: var(--hue, var(--ink)); }
.v13r-kld-col ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.v13r-kld-col li { margin: .25rem 0; line-height: 1.5; }

.v13r-axes { display: grid; gap: .7rem; }
.v13r-axis {
    display: flex; align-items: center; gap: .75rem;
    background: var(--canvas); border-radius: var(--card-radius); padding: .7rem .85rem;
    border-left: 4px solid var(--hue, var(--line-strong));
}
.v13r-axis-name { margin: 0; font-weight: 700; }
.v13r-axis-lean { margin: .1rem 0 0; color: var(--ink-soft); font-size: .93rem; }

.v13r-risks, .v13r-questions { margin: 0; padding-left: 1.2rem; }
.v13r-risks li, .v13r-questions li { margin: .35rem 0; line-height: 1.55; }

.v13r-narrative p { line-height: 1.65; margin: 0; }

.v13r-closing { background: var(--canvas); text-align: center; }
.v13r-methodnote { margin: 0 auto; max-width: 44rem; font-weight: 700; line-height: 1.6; }
.v13r-stamp { margin: .9rem 0 0; color: var(--ink-soft); font-size: .82rem; }

/* ---- the navigation: a rail on the desktop, a bar on the phone ---- */
.v13r-nav { margin: 0 0 1.4rem; }
.v13r-nav-title {
    margin: 0 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-soft);
}
.v13r-nav ol { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.v13r-nav a {
    display: flex; align-items: center; gap: .45rem;
    padding: .45rem .7rem; border-radius: 999px;
    background: var(--canvas); border: 1px solid var(--line);
    color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 600;
}
.v13r-nav a:hover { border-color: var(--line-strong); background: var(--paper); }
/* The tick is a measure mark, not an ordinal claim: the sections are a
   reading order, and the number says where you are on the scale. */
.v13r-nav-tick {
    font-variant-numeric: tabular-nums; font-size: .7rem; font-weight: 700;
    color: var(--ink-soft); letter-spacing: .04em;
}
.v13r-nav-short { display: none; }

/* A page that carries its own rail needs more than the reading column:
   measured at 960px the rail took a quarter and left each wheel at 157px,
   which is below the width six Cyrillic pole names can be read at. */
.wrap-wide { max-width: 1280px; }

@media (min-width: 900px) {
    .v13r { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 2rem; align-items: start; }
    .v13r-nav { position: sticky; top: 1.5rem; margin: 0; }
    .v13r-nav ol { flex-direction: column; gap: .25rem; }
    .v13r-nav a { border-radius: var(--radius); justify-content: flex-start; }
    .v13r-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem); align-items: center; }
    /* auto-fit, not 1fr 1fr: below 240px a wheel stops being readable, so the
       two stack instead of shrinking together. */
    .v13r-wheels { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: center; }
    .v13r-cards { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
    .v13r-kld { grid-template-columns: repeat(3, 1fr); }
    .v13r-axes { grid-template-columns: repeat(3, 1fr); }
    .v13r-section { padding: 1.7rem 1.8rem; }
}

@media (max-width: 899px) {
    /* On a phone the rail becomes a bar at the thumb, over the content. */
    .v13r-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        margin: 0; padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 20px rgba(20, 21, 23, .08);
    }
    .v13r-nav-title { display: none; }
    .v13r-nav ol { flex-wrap: nowrap; overflow-x: auto; gap: .35rem; scrollbar-width: none; }
    .v13r-nav ol::-webkit-scrollbar { display: none; }
    .v13r-nav a { white-space: nowrap; padding: .4rem .65rem; }
    .v13r-nav-long { display: none; }
    .v13r-nav-short { display: inline; }
    .v13r-flow { padding-bottom: 4.5rem; }
}

/* ---- motion: an entrance, and only when it is welcome ---- */
@media (prefers-reduced-motion: no-preference) {
    .v13r-section, .v13r-hero { animation: v13r-rise .5s cubic-bezier(.2, .7, .3, 1) both; }
    .v13r-card { transition: transform .18s ease, box-shadow .18s ease; }
    .v13r-card:hover { transform: translateY(-2px); }
}
@keyframes v13r-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ---- print: the page becomes a document ---- */
@media print {
    .v13r { display: block; }
    .v13r-nav { display: none; }
    .v13r-section, .v13r-hero { box-shadow: none; animation: none; break-inside: avoid; }
    .v13r-card { break-inside: avoid; }
    .v13r-card-more[open] > summary { display: none; }
}

/* ---- the printable band (PDF): tables, because dompdf draws no grid ---- */
.chart-band { width: 100%; border-collapse: separate; border-spacing: 6px; margin: .6rem 0; }
.chart-band-col { vertical-align: top; padding: 8px 10px; border-radius: 10px; width: 33%; }
.chart-band-title { margin: 0; font-weight: 700; font-size: 12px; }
.chart-band-value { margin: 2px 0 6px; font-size: 11px; color: #56544c; }
.chart-band-item { margin: 3px 0; padding-left: 6px; font-size: 11px; line-height: 1.4; }
.chart-band-kind { color: #56544c; font-size: 10px; }


/* ==========================================================================
   The facilitator workspace, 3 August 2026.

   Two candidate tabs get their own wash — emerald for strengths, amber for
   development — so the facilitator knows which side of the report they are
   deciding without reading the heading. The dense sections below give the
   four evidence tabs the same card language as the rest of the product.
   ========================================================================== */

.ws-tab-strengths.is-active { border-bottom-color: #1e9159; color: #166b42; }
.ws-tab-development.is-active { border-bottom-color: #c2600f; color: #94490b; }

.ws-panel-strengths { background: linear-gradient(180deg, #f4faf6 0%, transparent 260px); }
.ws-panel-development { background: linear-gradient(180deg, #fdf7f0 0%, transparent 260px); }
.ws-panel-strengths .v13-card { border-left-color: #1e9159; }
.ws-panel-development .v13-card { border-left-color: #c2600f; }

/* Cards in the workspace: a coloured rail, a quiet surface, tighter rows.
   The rail carries the state (automatic / conditional / decided) that the
   text spells out beside it — colour never speaks alone here either. */
.v13-card {
    background: var(--paper); border: 1px solid var(--line); border-left-width: 4px;
    border-radius: var(--radius); padding: .85rem 1rem; margin: .7rem 0;
    box-shadow: 0 1px 2px rgba(20, 21, 23, .04);
}
.v13-card p { margin: .35rem 0; line-height: 1.5; }
.v13-card .hint { font-size: .82rem; }

/* The four evidence tabs: sections become cards with a rail of their own. */
.ws-tab-panel .content-block {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .9rem 1.05rem; margin: .8rem 0;
    box-shadow: 0 1px 2px rgba(20, 21, 23, .04);
}
.ws-tab-panel .content-block > h3:first-child,
.ws-tab-panel .content-block > h4:first-child { margin-top: 0; }

@media (min-width: 900px) {
    /* Two columns where the content is a list of independent cards: the
       four evidence tabs were a single column of half-empty rows. */
    #tab-risks .risk-cards, #tab-sjt .sjt-cases, #tab-semantic .semantic-pairs {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: .9rem;
    }
    #tab-strengths .v13-card, #tab-development .v13-card { margin: .8rem 0; }
}

.v13r-poles {
    list-style: none; display: flex; flex-wrap: wrap; gap: .3rem;
    margin: .35rem 0 0; padding: 0;
}
.v13r-poles li {
    font-size: .78rem; color: var(--ink-soft);
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 999px; padding: .1rem .5rem;
}


/* ---- readable charts: the text lives outside the drawing ---- */
.bar-list { display: grid; gap: .55rem; margin: .6rem 0 .2rem; }
.bar-row {
    display: grid; grid-template-columns: minmax(6.5rem, 9rem) 1fr auto;
    align-items: center; gap: .6rem;
}
.bar-name { font-weight: 600; font-size: .95rem; }
.bar-track {
    height: 1.1rem; border-radius: 999px; background: var(--canvas);
    border: 1px solid var(--line); overflow: hidden;
}
.bar-fill { display: block; height: 100%; border-radius: 999px; }
.bar-note { font-size: .85rem; color: var(--ink-soft); white-space: nowrap; }

.wheel-key { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .7rem;
    margin: .5rem 0 0; padding: 0; justify-content: center; }
.wheel-key li { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; }
.wheel-key-dot {
    width: .7rem; height: .7rem; border-radius: 50%; background: var(--hue, var(--line-strong));
    flex: 0 0 auto;
}
.wheel-key li.is-peak { font-weight: 700; color: var(--hue, var(--ink)); }
.wheel-key-mark { font-size: .72rem; font-weight: 600; color: var(--ink-soft); }

/* ---- enlarge: any chart can be opened big ---- */
.chart-zoom {
    display: inline-flex; align-items: center; gap: .35rem;
    margin: .4rem auto 0; padding: .3rem .7rem;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 999px; font-size: .82rem; font-weight: 600;
    color: var(--ink); cursor: pointer;
}
.chart-zoom:hover { border-color: var(--line-strong); }
.chart-zoom svg { width: .9rem; height: .9rem; }

dialog.chart-modal {
    border: 0; border-radius: var(--radius-lg); padding: 0;
    width: min(94vw, 60rem); max-height: 92vh; background: var(--paper);
    box-shadow: 0 24px 60px rgba(20, 21, 23, .28);
}
dialog.chart-modal::backdrop { background: rgba(20, 21, 23, .55); }
.chart-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .9rem 1.1rem; border-bottom: 1px solid var(--line);
}
.chart-modal-head h3 { margin: 0; font-size: 1.05rem; }
.chart-modal-body { padding: 1.1rem; overflow: auto; }
.chart-modal-body .chart { max-height: 70vh; }

/* ---- the phone nav gets arrows ---- */
.v13r-nav-arrow {
    display: none; position: absolute; top: 50%; transform: translateY(-50%);
    width: 2rem; height: 2rem; border-radius: 50%; z-index: 2;
    background: var(--paper); border: 1px solid var(--line-strong);
    color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer;
    align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(20, 21, 23, .12);
}
.v13r-nav-arrow[hidden] { display: none !important; }

@media (max-width: 899px) {
    .v13r-nav { position: fixed; }
    .v13r-nav-arrow { display: inline-flex; }
    .v13r-nav-prev { left: .35rem; }
    .v13r-nav-next { right: .35rem; }
    .v13r-nav ol { padding: 0 2.2rem; }
    /* A single wheel plus its key reads better than two half-sized ones. */
    .v13r-wheels { gap: 1.4rem; }
    .bar-row { grid-template-columns: minmax(5.5rem, 7rem) 1fr auto; gap: .45rem; }
    .bar-name { font-size: .88rem; }
}


/* ==========================================================================
   „Доклад към експерта" — the working surface, 4 August 2026.

   The screen a facilitator lives in all day was still wearing the plain
   defaults while everything around it had been reworked. The rule here is
   the same one the participant document follows: a card carries a statement,
   a coloured rail says what KIND of statement it is, and the numbers sit
   quietly beside the words rather than instead of them.

   Nothing in this block changes what the screen says — only how densely and
   how legibly it says it.
   ========================================================================== */

/* ---- the tab bar: a real bar, not a row of links ---- */
.ws-tabs {
    position: sticky; top: 0; z-index: 20;
    display: flex; gap: .15rem; flex-wrap: wrap;
    padding: .35rem .35rem 0;
    margin: 0 0 1.2rem;
    background: rgba(243, 242, 236, .96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(6px);
}
.ws-tabs a {
    padding: .5rem .8rem; border-radius: var(--radius) var(--radius) 0 0;
    font-size: .9rem; font-weight: 600; color: var(--ink-soft);
    text-decoration: none; border: 1px solid transparent; border-bottom: 3px solid transparent;
}
.ws-tabs a:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.ws-tabs a.is-active {
    color: var(--ink); background: var(--paper);
    border-color: var(--line); border-bottom-color: var(--ink);
}

/* ---- section headings inside a panel ---- */
.ws-tab-panel > h2 {
    font-size: 1.3rem; letter-spacing: -.015em; margin: 0 0 .2rem;
    padding-bottom: .5rem; border-bottom: 2px solid var(--line);
}
.ws-tab-panel > h3, .ws-tab-panel .hyp-lead {
    font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-soft); margin: 1.6rem 0 .6rem;
}

/* ---- risks: severity on the rail, the word beside it ---- */
.risk-card {
    background: var(--paper); border: 1px solid var(--line);
    border-left: 4px solid var(--line-strong); border-radius: var(--radius);
    padding: .85rem 1rem; margin: .6rem 0;
    box-shadow: 0 1px 2px rgba(20, 21, 23, .04);
}
.risk-card-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.risk-card-head h3 {
    margin: 0; font-size: 1.02rem; text-transform: none; letter-spacing: -.01em;
    color: var(--ink); font-weight: 700;
}
.risk-extreme { border-left-color: #9b2c1f; }
.risk-strong { border-left-color: #c25a2b; }
.risk-moderate { border-left-color: #d9a441; }
.risk-none { border-left-color: #8aa79a; }

/* ---- hypotheses: the conclusion leads, the evidence folds ---- */
.hyp-card {
    background: var(--paper); border: 1px solid var(--line);
    border-left: 4px solid var(--line-strong); border-radius: var(--radius);
    padding: .9rem 1.05rem; margin: .7rem 0;
    box-shadow: 0 1px 2px rgba(20, 21, 23, .04);
}
.hyp-card-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.hyp-card-head h3 {
    margin: 0; font-size: 1.04rem; text-transform: none; letter-spacing: -.01em;
    color: var(--ink); font-weight: 700;
}
.hyp-strong { border-left-color: #1e9159; }
.hyp-mixed { border-left-color: #d9a441; }
.hyp-conclusion { font-size: 1rem; line-height: 1.55; margin: .5rem 0; }
.hyp-sources { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: .5rem 0; padding: 0; }
.hyp-src {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--canvas); border: 1px solid var(--line);
    border-radius: 999px; padding: .15rem .55rem; font-size: .8rem;
}
.hyp-src-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line-strong); }
.hyp-src.is-for .hyp-src-dot { background: #1e9159; }
.hyp-src.is-against .hyp-src-dot { background: #c25a2b; }
.hyp-src.is-context .hyp-src-dot { background: #6b46c1; }
.hyp-src-word { color: var(--ink-soft); }
.hyp-pair-decide { display: grid; gap: .8rem; margin-top: .7rem; }
.hyp-pair-side {
    background: var(--canvas); border-radius: var(--radius); padding: .7rem .85rem;
}
.hyp-evidence-fold > summary, .hyp-thin > summary, .hyp-legend > summary {
    cursor: pointer; font-weight: 600; color: var(--ink-soft); font-size: .9rem;
    min-height: 2.3rem; display: flex; align-items: center;
}

/* ---- SJT and coherence: same card, same rhythm ---- */
.sjt-card, .sem-card, .sem-pair {
    background: var(--paper); border: 1px solid var(--line);
    border-left: 4px solid #0d7d8f; border-radius: var(--radius);
    padding: .85rem 1rem; margin: .6rem 0;
    box-shadow: 0 1px 2px rgba(20, 21, 23, .04);
}
.sjt-card-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.sjt-card-head h3, .sjt-card-head h4 {
    margin: 0; font-size: 1.02rem; text-transform: none; letter-spacing: -.01em;
    color: var(--ink); font-weight: 700;
}
.sem-pair { border-left-color: #6b46c1; }

/* ---- the „what the participant sees" tab ---- */
.ws-pv-grid { display: grid; gap: 1rem; margin: 1rem 0; }
.ws-pv-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .7rem; background: var(--canvas);
    border-radius: var(--radius); border-left: 3px solid var(--hue, var(--line-strong));
    margin: .45rem 0;
}
.ws-pv-name { margin: 0; font-weight: 700; }
.ws-pv-strength { border-top: 3px solid #1e9159; }
.ws-pv-development { border-top: 3px solid #c2600f; }

/* ---- density on a wide screen ---- */
@media (min-width: 1100px) {
    .ws-pv-grid { grid-template-columns: 1fr 1fr; }
    .hyp-pair-decide { grid-template-columns: 1fr 1fr; }
    #tab-risks .risk-card { break-inside: avoid; }
}
@media (min-width: 1400px) {
    /* Two columns of cards where each card is an independent statement. */
    .ws-cards-2 { columns: 2; column-gap: 1rem; }
    .ws-cards-2 > * { break-inside: avoid; }
}

@media (max-width: 899px) {
    /* On a phone a six-name wheel writes its labels at about 9px whatever the
       font size — the drawing is round and the column is narrow. The names
       are already printed underneath at full size, so here the wheel is left
       as pure shape rather than as shape plus unreadable text. The expert
       screen keeps its labels: it shows values, and its column is wider. */
    .v13r-wheel svg text { display: none; }
}

.wheel-key-ring {
    width: .7rem; height: .7rem; border-radius: 50%;
    border: 2px solid var(--hue, var(--line-strong)); flex: 0 0 auto;
}
.wheel-key-axes { margin-top: .3rem; }


/* ---- the profile map: three columns, each saying its own thing ---- */
.pmap { display: grid; gap: 1rem; margin: .8rem 0; }
.pmap-col {
    background: var(--paper); border: 1px solid var(--line);
    border-top: 4px solid var(--hue, var(--line-strong));
    border-radius: var(--card-radius, 14px); padding: .9rem 1rem;
    box-shadow: 0 1px 2px rgba(20, 21, 23, .05), 0 8px 22px rgba(20, 21, 23, .05);
}
.pmap-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.pmap-name { margin: 0; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.pmap-band { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.pmap-bar {
    height: .55rem; border-radius: 999px; background: var(--hue-tint, var(--canvas));
    overflow: hidden; margin-bottom: .7rem;
}
.pmap-bar span { display: block; height: 100%; background: var(--hue); border-radius: 999px; }

.pmap-axes { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .3rem; }
.pmap-axes li {
    display: flex; flex-direction: column;
    background: var(--canvas); border-radius: var(--radius); padding: .4rem .6rem;
}
.pmap-axis-name { font-size: .82rem; font-weight: 600; }
.pmap-axis-lean { font-size: .82rem; color: var(--ink-soft); }

.pmap-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pmap-items li {
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    gap: .5rem; padding: .45rem .55rem; border-radius: var(--radius);
    background: var(--canvas); border-left: 3px solid var(--line-strong);
}
.pmap-items li.is-strength { border-left-color: #1e9159; background: #f4faf6; }
.pmap-items li.is-development { border-left-color: #c2600f; background: #fdf7f0; }
.pmap-items li > span:first-of-type { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.pmap-kind {
    grid-column: 2; font-size: .74rem; color: var(--ink-soft);
    text-transform: lowercase; letter-spacing: .02em;
}
.pmap-empty { margin: 0; font-size: .85rem; color: var(--ink-soft); }

@media (min-width: 760px) {
    .pmap { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* The PDF renders the same markup; dompdf lays out no grid, so the columns
   simply stack there and every name stays readable. */


/* ---- charts on the expert screen ---- */
.ws-charts { display: grid; gap: 1.2rem; align-items: center; margin: .6rem 0 1rem; }
.ws-wheel { margin: 0; }
.ws-wheel .wheel-key { justify-content: flex-start; }
@media (min-width: 900px) {
    .ws-charts { grid-template-columns: minmax(0, 1.3fr) minmax(16rem, .7fr); }
}


/* ---- the Texts editor: sections, not a wall ---- */
.texts-group {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 1rem 1.1rem; margin: 1rem 0;
}
.texts-group > h2 {
    margin: 0 0 .7rem; font-size: 1rem; letter-spacing: -.01em;
    padding-bottom: .45rem; border-bottom: 1px solid var(--line);
}
.texts-filter {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    background: var(--canvas); border-radius: var(--radius);
    padding: .6rem .8rem; margin: 1rem 0;
}
.texts-filter label { font-weight: 600; font-size: .9rem; }
.texts-filter input[type="search"] { flex: 1 1 16rem; padding: .45rem .6rem; }
.texts-only-edited { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; }