/* ==========================================================================
   CELT — Clinical Monitoring theme
   --------------------------------------------------------------------------
   Palette and typography taken from celt.ru.

   This file deliberately restyles the EXISTING Bootstrap-3 class names
   (.panel, .label, .input-group-addon, .btn-default …) rather than requiring
   the views to be rewritten. The app loads Bootstrap 3 *and* Bootstrap 4 CSS,
   and the views are written in BS3 markup — this layer sits on top of both and
   makes them agree.

   Load order matters: this must come last. See assets/AppAsset.php.
   ========================================================================== */

:root {
    /* --- brand, from celt.ru ------------------------------------------- */
    --celt-navy:       #1d3e71;   /* primary — the celt.ru brand colour     */
    --celt-navy-deep:  #0e2f76;   /* pressed / hover                        */
    --celt-blue:       #3d90c0;   /* accent                                 */
    --celt-blue-hover: #4ea6d6;
    --celt-cyan:       #5cc4ef;   /* highlight, used sparingly              */
    --celt-soft:       #a8c4e8;
    --celt-line:       #d1defa;   /* hairlines and soft fills               */
    --celt-tint:       #f1f5fd;   /* page background                        */
    --celt-red:        #d6453b;   /* required / error                       */

    /* --- neutrals ------------------------------------------------------ */
    --celt-ink:        #2b2b2b;
    --celt-ink-soft:   #696969;
    --celt-ink-faint:  #8a8f98;
    --celt-hairline:   #e3e8f0;
    --celt-surface:    #ffffff;
    --celt-surface-2:  #f7f9fd;

    /* --- type ----------------------------------------------------------
       celt.ru sets Inter. Inter is not vendored here (no CDN — this runs on
       an isolated clinic network), so the stack falls through to the Windows
       system face, which is visually very close. Drop Inter woff2 files into
       web/fonts/ and add an @font-face block to get the exact brand face. */
    --celt-font: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui,
                 -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --celt-font-data: ui-monospace, 'Cascadia Mono', 'Consolas',
                      'SF Mono', Menlo, monospace;

    /* --- geometry ------------------------------------------------------ */
    --celt-radius:     8px;       /* celt.ru uses 8px                       */
    --celt-radius-sm:  6px;
    --celt-shadow:     0 1px 2px rgba(29, 62, 113, .06),
                       0 8px 24px -12px rgba(29, 62, 113, .18);
}

/* ==========================================================================
   1. Foundation
   ========================================================================== */

/* Bootstrap 3 sets `html { font-size: 10px }`. Bootstrap 4 — which this app
   also loads, and whose widgets it uses — sizes everything in rem and assumes
   16px. The result is that every BS4 dimension renders at 62.5% of intended.
   Restore the root size so rem means what both this file and BS4 expect. */
html { font-size: 16px; }

body {
    font-family: var(--celt-font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--celt-ink);
    background: var(--celt-tint);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.panel-title {
    font-family: var(--celt-font);
    color: var(--celt-navy);
    letter-spacing: -0.01em;
}

h1 { font-size: 1.6rem; font-weight: 650; margin-bottom: 1.25rem; }

a       { color: var(--celt-blue); text-decoration: none; }
a:hover { color: var(--celt-navy); text-decoration: underline; }

/* Numbers are data here — stent diameters, lengths, scores, IDs. Tabular
   figures keep 2.25 / 2.75 / 3.5 aligned when scanned in a column. */
input[type="number"],
input[type="text"],
td, th,
.grid-view,
.detail-view,
.celt-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* ==========================================================================
   2. Sections  (.panel — BS3 markup, restyled)
   --------------------------------------------------------------------------
   The form previously used Bootstrap's contextual colours (panel-primary /
   -info / -success / -warning) as decoration: eleven sections in four random
   colours, none of which meant anything. Colour is reserved here for status
   (required, error, complete). Structure is carried by the section number,
   which is real information — sections 1→11 follow the clinical timeline of
   the procedure.
   ========================================================================== */

.panel {
    background: var(--celt-surface);
    border: 1px solid var(--celt-hairline);
    border-radius: var(--celt-radius);
    box-shadow: var(--celt-shadow);
    margin-bottom: 22px;
    overflow: hidden;
}

.panel > .panel-heading,
.panel-heading {
    background: var(--celt-navy);
    border: 0;
    border-radius: 0;
    padding: 14px 18px;
    color: #fff;
}

.panel-heading .panel-title,
.panel-title {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-title > .glyphicon {
    opacity: .7;
    font-size: 0.9em;
}

.panel-body { padding: 20px 18px; background: var(--celt-surface); }

/* Bootstrap's contextual panel colours, neutralised.
   These selectors carry two classes so they must be matched at the same
   specificity to be overridden — a bare .panel-heading rule loses to them. */
.panel-primary > .panel-heading,
.panel-info    > .panel-heading,
.panel-success > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger  > .panel-heading,
.panel-default > .panel-heading,
.panel-primary   .panel-heading,
.panel-info      .panel-heading,
.panel-success   .panel-heading,
.panel-warning   .panel-heading,
.panel-danger    .panel-heading,
.panel-default   .panel-heading {
    background-image: none;
    background-color: var(--celt-navy);
    border-color: transparent;
    color: #fff;
}

.panel-primary, .panel-info, .panel-success,
.panel-warning, .panel-danger, .panel-default {
    border-color: var(--celt-hairline);
}

/* `.subsection-heading` is used on panels that are NOT .subsection-panel
   (e.g. section 10, discharge medication). Without this they inherited the
   full navy section treatment while their titles carried an inline dark
   colour — dark text on a dark bar. */
.panel-heading.subsection-heading {
    background-color: var(--celt-surface-2);
    background-image: none;
    color: var(--celt-navy);
    border-bottom: 1px solid var(--celt-hairline);
    padding: 11px 15px;
}

.panel-heading.subsection-heading .panel-title,
.panel-heading.subsection-heading .panel-title > .glyphicon {
    color: var(--celt-navy);
    font-size: 0.86rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.panel-default > .panel-heading.subsection-heading,
.panel-primary > .panel-heading.subsection-heading,
.panel-info    > .panel-heading.subsection-heading,
.panel-success > .panel-heading.subsection-heading,
.panel-warning > .panel-heading.subsection-heading {
    background-color: var(--celt-surface-2);
    background-image: none;
    color: var(--celt-navy);
}

/* subsections stay quiet whatever contextual class they carry */
.panel-info.subsection-panel    > .panel-heading,
.panel-success.subsection-panel > .panel-heading,
.panel-warning.subsection-panel > .panel-heading,
.panel-primary.subsection-panel > .panel-heading,
.panel-default.subsection-panel > .panel-heading {
    background-color: var(--celt-surface-2);
    color: var(--celt-navy);
    border-bottom: 1px solid var(--celt-hairline);
}
.panel-info.subsection-panel    > .panel-heading .panel-title,
.panel-success.subsection-panel > .panel-heading .panel-title,
.panel-warning.subsection-panel > .panel-heading .panel-title,
.panel-primary.subsection-panel > .panel-heading .panel-title,
.panel-default.subsection-panel > .panel-heading .panel-title {
    color: var(--celt-navy);
}

.panel.subsection-panel,
.panel-info.subsection-panel,
.panel-success.subsection-panel,
.panel-warning.subsection-panel,
.panel-primary.subsection-panel {
    border-left: 3px solid var(--celt-blue);
}

/* Subsections: quieter — a hairline card with an accent keyline, no fill. */
.subsection-panel {
    box-shadow: none;
    border: 1px solid var(--celt-hairline);
    border-left: 3px solid var(--celt-blue);
    border-radius: var(--celt-radius-sm);
    margin-bottom: 16px;
}

.subsection-panel > .panel-heading {
    background: var(--celt-surface-2);
    color: var(--celt-navy);
    padding: 11px 15px;
    border-bottom: 1px solid var(--celt-hairline);
}

.subsection-panel > .panel-heading .panel-title {
    color: var(--celt-navy);
    font-size: 0.86rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.subsection-panel > .panel-body { padding: 16px 15px; }

/* status chip in a section header ("Обязательно") */
.label,
.section-status {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.5;
}

.panel-heading .label,
.panel-heading .section-status {
    margin-left: auto;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.label-success { background: #1f7a4d; color: #fff; }
.label-danger  { background: var(--celt-red); color: #fff; }
.label-info    { background: var(--celt-blue); color: #fff; }
.label-warning { background: #b8791d; color: #fff; }
.label-default { background: #e9edf4; color: var(--celt-ink-soft); }

/* ==========================================================================
   3. Form controls
   ========================================================================== */

.control-label,
label.control-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--celt-navy);
    letter-spacing: 0.01em;
    margin-bottom: 6px;
    display: block;
}

.large-label { font-size: 0.86rem; }

.form-group { margin-bottom: 16px; }

.form-control,
.form-control.input-lg,
.enhanced-input,
select.form-control {
    height: auto;
    min-height: 42px;
    padding: 9px 13px;
    font-size: 0.94rem;
    font-family: var(--celt-font);
    color: var(--celt-ink);
    background-color: var(--celt-surface);
    border: 1px solid #cfd8e6;
    border-radius: var(--celt-radius-sm);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Bootstrap 3 ships `select.input-lg { height: 46px; line-height: 46px }`.
   A 46px line inside a 46px box that also has 9px of vertical padding cannot
   fit, so the option text was being clipped at the bottom of every dropdown.
   Reset line-height and let the box size to its content. Listed with enough
   specificity to beat both `select.input-lg` and `.form-group-lg .form-control`. */
select.form-control,
select.form-control.input-lg,
select.input-lg,
textarea.form-control,
input.form-control,
input.form-control.input-lg,
.form-group-lg .form-control,
.form-group-lg select.form-control {
    height: auto;
    min-height: 42px;
    line-height: 1.45;
    font-size: 0.94rem;
    padding: 9px 13px;
}

select.form-control,
select.form-control.input-lg,
select.input-lg,
.form-group-lg select.form-control {
    padding-right: 34px;
}

/* textareas need room to grow, not a fixed line box */
textarea.form-control { min-height: 84px; line-height: 1.5; }

.form-control::placeholder { color: var(--celt-ink-faint); }

.form-control:focus,
.enhanced-input:focus {
    border-color: var(--celt-blue);
    box-shadow: 0 0 0 3px rgba(61, 144, 192, .18);
    outline: 0;
}

.form-control[readonly] { background-color: var(--celt-surface-2); }

.form-control:disabled,
.form-control[disabled] { background-color: #eef1f6; color: var(--celt-ink-faint); }

/* native selects: kill the oversized BS3 .input-lg height */
select.form-control,
select.input-lg {
    padding-right: 32px;
    background-image:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23697a92' d='M1.4 1.6 6 6.2l4.6-4.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* required marker */
.required > .control-label::after,
.control-label .text-danger { color: var(--celt-red); }

.help-block { font-size: 0.78rem; color: var(--celt-ink-soft); margin-top: 5px; }
.help-block:empty { display: none; margin: 0; }

.has-error .form-control { border-color: var(--celt-red); }
.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(214, 69, 59, .16); }
.has-error .help-block { color: var(--celt-red); }

/* ==========================================================================
   4. Input groups + the date field
   --------------------------------------------------------------------------
   The date control is BS3 markup (.input-group-addon) rendered under BS4's
   flex .input-group — which is why the calendar and clear buttons floated
   away from the field as detached grey blocks. This joins them back up.
   ========================================================================== */

.input-group { display: flex; width: 100%; }

.input-group > .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-radius: var(--celt-radius-sm) 0 0 var(--celt-radius-sm);
}

.input-group .input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2;                       /* push the buttons to the right       */
    min-width: 44px;
    padding: 0 12px;
    font-size: 0.95rem;
    color: var(--celt-navy);
    background: var(--celt-surface-2);
    border: 1px solid #cfd8e6;
    border-left: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.input-group .input-group-addon:hover {
    background: var(--celt-line);
    color: var(--celt-navy-deep);
}

/* last addon carries the rounded right edge */
.input-group .input-group-addon:last-child {
    border-radius: 0 var(--celt-radius-sm) var(--celt-radius-sm) 0;
}

/* when the field has focus, the joined buttons follow it */
.input-group:focus-within > .form-control,
.input-group:focus-within .input-group-addon {
    border-color: var(--celt-blue);
}
.input-group:focus-within { border-radius: var(--celt-radius-sm); }

.kv-dp-icon { line-height: 1; }

/* the datepicker popup */
.datepicker.dropdown-menu {
    border: 1px solid var(--celt-hairline);
    border-radius: var(--celt-radius);
    box-shadow: var(--celt-shadow);
    padding: 8px;
    font-family: var(--celt-font);
    z-index: 9000;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active {
    background: var(--celt-navy) !important;
    background-image: none !important;
    color: #fff !important;
    text-shadow: none;
}
.datepicker table tr td.today {
    background: var(--celt-line) !important;
    background-image: none !important;
    color: var(--celt-navy) !important;
}
.datepicker table tr td.day:hover { background: var(--celt-tint); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
    font-family: var(--celt-font);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 9px 18px;
    border-radius: var(--celt-radius-sm);
    border: 1px solid transparent;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn-lg { padding: 11px 22px; font-size: 0.94rem; }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

.btn-primary        { background: var(--celt-navy); border-color: var(--celt-navy); color: #fff; }
.btn-primary:hover,
.btn-primary:focus  { background: var(--celt-navy-deep); border-color: var(--celt-navy-deep); color: #fff; }

.btn-success        { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.btn-success:hover  { background: #19653f; border-color: #19653f; color: #fff; }

.btn-info           { background: var(--celt-blue); border-color: var(--celt-blue); color: #fff; }
.btn-info:hover     { background: var(--celt-blue-hover); border-color: var(--celt-blue-hover); color: #fff; }

.btn-danger         { background: var(--celt-red); border-color: var(--celt-red); color: #fff; }
.btn-danger:hover   { background: #bb392f; border-color: #bb392f; color: #fff; }

.btn-default,
.btn-secondary {
    background: var(--celt-surface);
    border-color: #cfd8e6;
    color: var(--celt-navy);
}
.btn-default:hover,
.btn-secondary:hover {
    background: var(--celt-tint);
    border-color: var(--celt-soft);
    color: var(--celt-navy-deep);
}

.btn-outline-primary   { border-color: var(--celt-navy); color: var(--celt-navy); background: transparent; }
.btn-outline-primary:hover { background: var(--celt-navy); color: #fff; }
.btn-outline-secondary { border-color: #cfd8e6; color: var(--celt-ink-soft); background: transparent; }
.btn-outline-secondary:hover { background: var(--celt-tint); color: var(--celt-navy); }

.btn:focus-visible {
    outline: 2px solid var(--celt-blue);
    outline-offset: 2px;
}

/* ==========================================================================
   6. Section navigation rail
   --------------------------------------------------------------------------
   Sections 1–11 are a real chronological sequence (before → during → after →
   follow-up), so the numbering carries information and is worth showing.
   ========================================================================== */

/* It floats over the form, so it has to read as a raised object rather than
   another band of page content: a deeper shadow than anything else on the
   page, a navy keyline along the top tying it to the header, and a slight
   inset tint so it is not the same flat white as the panels beneath it. */
.quick-nav-panel {
    position: sticky;
    top: 66px;
    z-index: 500;
    border: 1px solid var(--celt-line);
    border-top: 3px solid var(--celt-navy);
    border-radius: var(--celt-radius);
    background: linear-gradient(180deg, #ffffff 0%, var(--celt-tint) 100%);
    box-shadow: 0 10px 26px -10px rgba(11, 34, 66, .38),
                0 2px 6px rgba(11, 34, 66, .10);
}

.quick-nav-panel > .panel-body { padding: 11px 14px; background: transparent; }

.quick-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.quick-nav-buttons .btn {
    background: var(--celt-surface);
    border: 1px solid var(--celt-line);
    color: var(--celt-navy);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 12px;
    box-shadow: 0 1px 2px rgba(11, 34, 66, .06);
}

.quick-nav-buttons .btn .glyphicon {
    color: var(--celt-blue);
    margin-right: 4px;
    font-size: 0.85em;
}

/* Hover only — deliberately NOT :focus.
   A clicked button keeps :focus until focus moves elsewhere. Painting it the
   same navy as .is-current meant that after jumping to section 6 and scrolling
   on to section 9, BOTH looked like the current section, and the stale one only
   cleared when you clicked something else on the page.
   Keyboard users still get a clear indicator from .btn:focus-visible above,
   which is an outline rather than a fill, so it cannot be confused with
   "you are here". */
.quick-nav-buttons .btn:hover {
    background: var(--celt-navy);
    border-color: var(--celt-navy);
    color: #fff;
}
.quick-nav-buttons .btn:hover .glyphicon { color: rgba(255, 255, 255, .85); }

/* The section you are actually in. Set by the scroll-spy in
   web/js/clinical-record-form.js — on an eleven-section form, knowing where
   you are is worth more than any amount of decoration. */
.quick-nav-buttons .btn.is-current {
    background: var(--celt-navy);
    border-color: var(--celt-navy);
    color: #fff;
    box-shadow: 0 2px 8px -2px rgba(29, 62, 113, .55);
}
.quick-nav-buttons .btn.is-current .glyphicon { color: var(--celt-cyan); }

/* Save and Наверх are actions, not destinations — keep them distinct. */
.quick-nav-buttons .btn-success {
    background: #1f7a4d; border-color: #1f7a4d; color: #fff;
}
.quick-nav-buttons .btn-success:hover { background: #19653f; border-color: #19653f; }
.quick-nav-buttons .btn-success .glyphicon,
.quick-nav-buttons .btn-info .glyphicon { color: rgba(255, 255, 255, .85); }
.quick-nav-buttons .btn-info {
    background: var(--celt-blue); border-color: var(--celt-blue); color: #fff;
}
.quick-nav-buttons .btn-info:hover { background: var(--celt-blue-hover); border-color: var(--celt-blue-hover); }

/* ==========================================================================
   7. Patient-type cards, alerts, info boxes
   ========================================================================== */

.patient-type-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

.patient-type-card {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    flex: 1 1 220px;
    padding: 14px 16px;
    background: var(--celt-surface);
    border: 1px solid var(--celt-hairline);
    color: var(--celt-ink);
    border-radius: var(--celt-radius);
}

.patient-type-card .patient-type-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: var(--celt-tint);
    color: var(--celt-navy);
}

.patient-type-card .patient-type-text { display: flex; flex-direction: column; line-height: 1.3; }
.patient-type-card .patient-type-text strong { font-size: 0.84rem; font-weight: 650; letter-spacing: .01em; }
.patient-type-card .patient-type-text small  { font-size: 0.75rem; color: var(--celt-ink-soft); }

.patient-type-card.active,
.patient-type-btn.active {
    background: var(--celt-navy);
    border-color: var(--celt-navy);
    color: #fff;
}
.patient-type-card.active .patient-type-icon { background: rgba(255,255,255,.16); color: #fff; }
.patient-type-card.active .patient-type-text small { color: rgba(255,255,255,.8); }

.alert {
    border: 1px solid var(--celt-hairline);
    border-left: 3px solid var(--celt-blue);
    border-radius: var(--celt-radius-sm);
    padding: 13px 16px;
    font-size: 0.88rem;
    background: var(--celt-surface-2);
    color: var(--celt-ink);
}
.alert-danger  { border-left-color: var(--celt-red); background: #fdf3f2; }
.alert-success { border-left-color: #1f7a4d;        background: #f1f9f4; }
.alert-info    { border-left-color: var(--celt-blue); background: var(--celt-tint); }

.info-box {
    background: var(--celt-tint);
    border: 1px solid var(--celt-line);
    border-radius: var(--celt-radius-sm);
    padding: 11px 14px;
    font-size: 0.82rem;
    color: var(--celt-ink-soft);
}
.info-box p { margin: 0; }

/* ==========================================================================
   8. Tables — grids and detail views
   ========================================================================== */

.grid-view table,
.detail-view {
    background: var(--celt-surface);
    border-radius: var(--celt-radius);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.grid-view thead th {
    background: var(--celt-surface-2);
    color: var(--celt-navy);
    font-size: 0.76rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--celt-line) !important;
    padding: 11px 12px;
    white-space: nowrap;
}

.grid-view tbody td,
.detail-view th,
.detail-view td {
    padding: 10px 12px;
    border-top: 1px solid var(--celt-hairline);
    font-size: 0.88rem;
    vertical-align: middle;
}

.grid-view tbody tr:hover td { background: var(--celt-tint); }

.detail-view th {
    background: var(--celt-surface-2);
    color: var(--celt-navy);
    font-weight: 600;
    width: 34%;
}

.pagination > li > a,
.pagination > li > span,
.page-link {
    color: var(--celt-navy);
    border-color: var(--celt-hairline);
}
.pagination > .active > a,
.page-item.active .page-link {
    background: var(--celt-navy);
    border-color: var(--celt-navy);
    color: #fff;
}

/* ==========================================================================
   8b. Record list — the clinical records index
   --------------------------------------------------------------------------
   The default Gii grid read as a spreadsheet: hairlines in both directions,
   10px rows, every column weighted the same, and three icons in the last cell.
   This makes the ROW the control. The identifier a doctor scans for leads, the
   supporting data recedes, and the only thing on the right is «Изменить» — the
   delete button was removed from this page entirely.
   ========================================================================== */

.rl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 4px;
}
.rl-head h1 { margin: 0; }

.rl-hint {
    color: var(--celt-ink-faint);
    font-size: 0.82rem;
    margin: 0 0 14px;
}

.record-list .rl-summary {
    color: var(--celt-ink-soft);
    font-size: 0.82rem;
    margin-bottom: 10px;
}

/* --- the table itself ---------------------------------------------------- */

.record-list .rl-table {
    width: 100%;
    margin: 0;
    background: var(--celt-surface);
    border-radius: var(--celt-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    box-shadow: var(--celt-shadow);
}

/* Column rules, added back on 2026-09-10. They were removed to stop the grid
   reading as a spreadsheet, and the result was the opposite problem: nothing
   held the eye across a row and the whole thing floated. A hairline between
   columns and a dark header give it a spine. Keep them faint — the row, not
   the cell, is still the unit here. */
.record-list .rl-table th + th,
.record-list .rl-table td + td { border-left: 1px solid var(--celt-hairline); }

/* Deep header. The page is otherwise very light and needed one anchor. */
.record-list .rl-table thead th {
    background: linear-gradient(180deg, #24487d, var(--celt-navy));
    color: rgba(255, 255, 255, .78);
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0;
    border-bottom: 0 !important;
    border-left-color: rgba(255, 255, 255, .13) !important;
    white-space: nowrap;
    position: relative;
}

.rl-th {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 10px 11px 14px;
    min-height: 42px;
}
.rl-th-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* The sort arrow shows the CURRENT state; the menu changes it. */
.rl-th-sort { flex: 0 0 auto; width: 10px; height: 12px; position: relative; text-decoration: none; }
.rl-th-sort span::before,
.rl-th-sort span::after {
    content: '';
    position: absolute;
    left: 1px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: .3;
}
.rl-th-sort span::before { top: 0;  border-bottom: 5px solid #fff; }
.rl-th-sort span::after  { bottom: 0; border-top: 5px solid #fff; }
.rl-th-sort[data-sort="asc"] span::before,
.rl-th-sort[data-sort="desc"] span::after { opacity: 1; }

.rl-th-btn {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background .13s ease, border-color .13s ease;
}
.rl-th-btn:hover,
.rl-th-btn.is-open { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); }

/* A funnel, drawn rather than iconed — no glyph to go missing. */
.rl-funnel {
    width: 11px; height: 10px;
    background: rgba(255, 255, 255, .8);
    clip-path: polygon(0 0, 100% 0, 62% 45%, 62% 100%, 38% 82%, 38% 45%);
}
.rl-th.is-filtered { background: rgba(92, 196, 239, .22); }
.rl-th.is-filtered .rl-funnel { background: var(--celt-cyan); }
.rl-th.is-filtered .rl-th-label { color: #fff; }

/* The Yii filter row still submits; it is simply not drawn. */
.record-list .rl-table thead tr.rl-filters-hidden { display: none; }

.record-list .rl-table tbody td {
    padding: 11px 14px;
    border-top: 1px solid var(--celt-hairline);
    font-size: 0.9rem;
    vertical-align: middle;
}
.record-list .rl-table tbody tr:first-child td { border-top: 0; }

/* --- the filter menu ------------------------------------------------------ */
.rl-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 6px;
    z-index: 40;
    min-width: 232px;
    max-width: 300px;
    padding: 6px;
    background: var(--celt-surface);
    border: 1px solid var(--celt-line);
    border-radius: 10px;
    box-shadow: 0 18px 44px -18px rgba(15, 34, 66, .55);
    text-transform: none;
    letter-spacing: 0;
    font-size: .84rem;
    font-weight: 400;
    color: var(--celt-ink);
    white-space: normal;
    cursor: default;
}
.rl-menu.is-right { left: auto; right: 6px; }

.rl-menu-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--celt-ink);
    text-decoration: none;
}
.rl-menu-item:hover { background: var(--celt-tint); color: var(--celt-navy); text-decoration: none; }
.rl-menu-item.is-on { color: var(--celt-navy); font-weight: 650; background: var(--celt-surface-2); }
.rl-menu-ico { width: 14px; text-align: center; color: var(--celt-blue); }
.rl-menu-sep { height: 1px; background: var(--celt-hairline); margin: 6px 4px; }

.rl-menu-field { padding: 4px; display: flex; flex-direction: column; gap: 6px; }
.rl-menu-op {
    width: 100%;
    height: 34px;
    padding: 4px 8px;
    border: 1px solid var(--celt-line);
    border-radius: 6px;
    background: var(--celt-surface);
    font-size: .84rem;
    color: var(--celt-navy);
    font-weight: 600;
}
.rl-menu-note {
    padding: 2px 6px 6px;
    font-size: .72rem;
    color: var(--celt-ink-faint);
    line-height: 1.45;
}
.rl-menu-note code {
    background: var(--celt-surface-2);
    color: var(--celt-ink-soft);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: .72rem;
}
.rl-menu-check.is-all {
    font-weight: 650;
    color: var(--celt-navy);
    border-bottom: 1px solid var(--celt-hairline);
    border-radius: 6px 6px 0 0;
    margin-bottom: 2px;
}

.rl-menu-input, .rl-menu-input2, .rl-menu-search {
    width: 100%;
    height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--celt-line);
    border-radius: 6px;
    background: var(--celt-surface-2);
    font-size: .84rem;
}
.rl-menu-input:focus, .rl-menu-input2:focus, .rl-menu-search:focus {
    outline: none; background: var(--celt-surface); border-color: var(--celt-blue);
}
.rl-menu-search { margin: 4px 4px 6px; width: calc(100% - 8px); }

.rl-menu-list { max-height: 216px; overflow-y: auto; padding: 2px 4px; }
.rl-menu-check {
    display: flex; align-items: center; gap: 9px;
    margin: 0; padding: 6px 8px;
    border-radius: 6px; font-weight: 400; cursor: pointer;
}
.rl-menu-check:hover { background: var(--celt-tint); }
.rl-menu-check input { margin: 0; flex: 0 0 auto; accent-color: var(--celt-navy); }
.rl-menu-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rl-menu-foot {
    display: flex; gap: 6px; justify-content: space-between;
    padding: 8px 4px 4px; margin-top: 4px; border-top: 1px solid var(--celt-hairline);
}
.rl-menu-foot button {
    flex: 1 1 0;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: .8rem;
    cursor: pointer;
    border: 1px solid var(--celt-line);
    background: var(--celt-surface);
    color: var(--celt-ink-soft);
}
.rl-menu-apply { background: var(--celt-navy) !important; border-color: var(--celt-navy) !important; color: #fff !important; font-weight: 600; }
.rl-menu-foot button:hover { border-color: var(--celt-soft); }

/* --- the row as a control ------------------------------------------------ */

.record-list tr.rl-row { cursor: pointer; }
.record-list tr.rl-row td { transition: background .12s ease; }
.record-list tr.rl-row:hover td { background: var(--celt-tint); }

/* A quiet accent on the leading edge, so it is obvious which row is armed. */
.record-list tr.rl-row:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--celt-blue);
}

.record-list tr.rl-row:hover .rl-open { opacity: 1; transform: translateX(0); }

/* --- cell typography ----------------------------------------------------- */

.rl-c-id     { width: 74px; }
.rl-c-date   { width: 140px; }
.rl-c-age    { width: 104px; }
.rl-c-sex    { width: 130px; }
.rl-c-clinic { max-width: 260px; }
.rl-c-actions { width: 1%; text-align: right; white-space: nowrap; }

.rl-id {
    font-family: var(--celt-font-data);
    font-size: 0.82rem;
    color: var(--celt-ink-faint);
    text-decoration: none;
}
.rl-id:hover, .rl-id:focus { color: var(--celt-navy); text-decoration: none; }

/* The identifier is what people actually search a registry by, so it leads. */
.rl-patient {
    font-weight: 650;
    font-size: 0.96rem;
    color: var(--celt-navy);
    letter-spacing: -0.005em;
}

.rl-date { font-family: var(--celt-font-data); font-size: 0.86rem; }

.rl-age { font-family: var(--celt-font-data); font-size: 0.9rem; }
.rl-age::after {
    content: ' лет';
    font-family: var(--celt-font);
    font-size: 0.78rem;
    color: var(--celt-ink-faint);
}

/* One neutral pill for both values — a colour per sex would be reading
   something into the data that is not there. */
.rl-sex {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--celt-surface-2);
    border: 1px solid var(--celt-hairline);
    font-size: 0.76rem;
    color: var(--celt-ink-soft);
    white-space: nowrap;
}

.rl-clinic {
    font-size: 0.84rem;
    color: var(--celt-ink-soft);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rl-empty { color: var(--celt-ink-faint); }

/* --- right-hand actions --------------------------------------------------- */

.rl-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

.rl-edit {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--celt-navy);
    border: 1px solid var(--celt-line);
    border-radius: var(--celt-radius-sm);
    padding: 5px 12px;
    background: var(--celt-surface);
    text-decoration: none;
    white-space: nowrap;
}
.rl-edit:hover, .rl-edit:focus {
    background: var(--celt-navy);
    border-color: var(--celt-navy);
    color: #fff;
    text-decoration: none;
}

/* Hidden until the row is hovered: it explains the row click without adding a
   permanent column of chrome. */
.rl-open {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--celt-blue);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .12s ease, transform .12s ease;
}

.rl-empty-state {
    background: var(--celt-surface);
    border: 1px dashed var(--celt-line);
    border-radius: var(--celt-radius);
    padding: 34px 20px;
    text-align: center;
    color: var(--celt-ink-soft);
}

/* The table scrolls inside this; the page does not. A filter menu opened near
   the right edge still needs to escape the box, so overflow-y stays visible —
   which browsers only honour when the other axis is `auto`, hence the pair. */
.rl-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--celt-radius);
}

/* On a touch screen there is no hover, so the affordance is always visible. */
@media (max-width: 767.98px) {
    .record-list .rl-open { opacity: 1; transform: none; }
    .record-list .rl-table { min-width: 640px; }
    .record-list .rl-table tbody td { padding: 11px 12px; }
    .rl-menu { min-width: 200px; }
}

/* Deleting is separated from the other actions on the record page, so the
   pointer never rests near it on the way to something else. */
.record-actions-danger { display: inline-block; margin-left: 26px; }
.btn-delete-record { background: transparent; border-color: var(--celt-red); color: var(--celt-red); }
.btn-delete-record:hover, .btn-delete-record:focus {
    background: var(--celt-red);
    border-color: var(--celt-red);
    color: #fff;
}

/* ==========================================================================
   8c. Analytics dashboard
   --------------------------------------------------------------------------
   Every chart on this page is inline SVG generated in PHP. The previous
   version pulled ECharts from a CDN, which cannot be relied on inside a clinic
   network — an external <script> in this project has already hung Chrome once.
   ========================================================================== */

.an-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.an-head h1 { margin: 0 0 4px; }
.an-sub { margin: 0; color: var(--celt-ink-soft); font-size: .9rem; }

.an-waiting { text-align: center; padding: 60px 20px; color: var(--celt-ink-soft); }

/* The caveats lead the page. They are not a footnote — on forty procedures
   they are the most important thing on it. */
.an-caveats {
    background: linear-gradient(135deg, #fff8ec 0%, #fdf3e3 100%);
    border: 1px solid #f0dfc2;
    border-left: 4px solid #c99331;
    border-radius: var(--celt-radius);
    padding: 16px 20px;
    margin-bottom: 22px;
}
.an-caveats h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
    color: #96701f; margin: 0 0 10px; }
.an-caveats ul { margin: 0; padding-left: 18px; }
.an-caveats li { font-size: .88rem; line-height: 1.55; color: #6b5320; margin-bottom: 6px; }
.an-caveats li:last-child { margin-bottom: 0; }

.an-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}
.an-kpi {
    background: var(--celt-surface);
    border: 1px solid var(--celt-hairline);
    border-radius: var(--celt-radius);
    padding: 16px 18px;
    box-shadow: var(--celt-shadow);
}
.an-kpi.is-warn { border-left: 3px solid #c99331; }
.an-kpi-value {
    display: block;
    font-family: var(--celt-font-data);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--celt-navy);
}
.an-kpi-label { display: block; margin-top: 4px; font-size: .78rem; color: var(--celt-ink-soft); }

.an-block { margin-bottom: 34px; }
.an-block > h2 {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--celt-navy);
    margin: 0 0 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--celt-line);
}
.an-note { font-size: .84rem; color: var(--celt-ink-soft); margin: 10px 0 16px; max-width: 82ch; }

.an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.an-grid-wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.an-card {
    background: var(--celt-surface);
    border: 1px solid var(--celt-hairline);
    border-radius: var(--celt-radius);
    padding: 14px 16px;
}
.an-card h3 {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--celt-ink-faint); margin: 0 0 10px;
}

/* --- frequency rows ------------------------------------------------------ */
.an-tally-row { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.an-tally-label { flex: 0 0 40%; font-size: .82rem; color: var(--celt-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-tally-track { flex: 1 1 auto; height: 8px; background: var(--celt-surface-2);
    border-radius: 999px; overflow: hidden; }
.an-tally-fill { display: block; height: 100%;
    background: linear-gradient(90deg, var(--celt-blue), var(--celt-navy)); }
.an-tally-n { flex: 0 0 auto; font-family: var(--celt-font-data); font-size: .8rem;
    color: var(--celt-ink-soft); min-width: 22px; text-align: right; }
.an-tally-row.is-missing .an-tally-label,
.an-tally-row.is-missing .an-tally-n { color: var(--celt-ink-faint); font-style: italic; }

.an-unassessed { font-size: .82rem; color: var(--celt-ink-faint); font-style: italic; }

/* --- tables --------------------------------------------------------------- */
.an-rates { margin-bottom: 22px; }
.an-rates h3, .an-assoc h3 {
    font-size: .86rem; font-weight: 650; color: var(--celt-navy); margin: 0 0 8px;
}
.an-assoc h3 small { font-weight: 400; color: var(--celt-ink-faint); margin-left: 8px; }

.an-table {
    width: 100%;
    background: var(--celt-surface);
    border: 1px solid var(--celt-hairline);
    border-radius: var(--celt-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.an-table thead th {
    background: var(--celt-surface-2);
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--celt-ink-faint); font-weight: 650;
    padding: 9px 12px; white-space: nowrap;
    border-bottom: 1px solid var(--celt-hairline);
}
.an-table tbody td {
    padding: 9px 12px; font-size: .85rem; vertical-align: middle;
    border-top: 1px solid var(--celt-hairline);
}
.an-table tbody tr:first-child td { border-top: 0; }
.an-table tbody tr:hover td { background: var(--celt-tint); }
.an-num { text-align: right; font-family: var(--celt-font-data); white-space: nowrap; }
.an-num small { color: var(--celt-ink-faint); font-family: var(--celt-font); font-size: .72rem; }
.an-chart { width: 160px; min-width: 130px; }

/* A row measured over too few records is dimmed rather than hidden: the
   reader still needs to know the field exists. */
.an-table tr.is-thin td { color: var(--celt-ink-faint); background: #fcfbf7; }
.an-table tr.is-unassessed td { color: var(--celt-ink-faint); }
.an-table tr.is-notable td { background: rgba(52, 168, 116, .06); }
.an-table tr.is-notable .an-diff { font-weight: 700; color: #1f7a52; }

/* --- the interval bar ----------------------------------------------------- */
.an-bar { display: block; width: 100%; height: 14px; }
.an-bar-ci   { fill: rgba(61, 144, 192, .22); }
.an-bar-fill { fill: var(--celt-blue); }
.an-bar-tick { stroke: var(--celt-navy); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
/* Below the bar, never beside it: at 7.1–29.1% the label was breaking across
   two lines in the gap left over next to a short bar. */
.an-ci-text {
    display: block;
    font-family: var(--celt-font-data);
    font-size: .7rem;
    color: var(--celt-ink-faint);
    margin-top: 2px;
    white-space: nowrap;
}

.an-hist { width: 90px; height: 26px; vertical-align: middle; }
.an-hist rect { fill: var(--celt-soft); }

.an-skip {
    font-size: .84rem; color: var(--celt-ink-soft);
    background: var(--celt-surface-2);
    border: 1px dashed var(--celt-line);
    border-radius: var(--celt-radius-sm);
    padding: 10px 14px; margin-bottom: 10px;
}
.an-assoc { margin-bottom: 22px; }

/* --- completeness --------------------------------------------------------- */
.an-complete h3 {
    display: flex; align-items: baseline; justify-content: space-between;
    text-transform: none; letter-spacing: 0; font-size: .84rem;
    color: var(--celt-navy); font-weight: 650;
}
.an-complete-pct { font-family: var(--celt-font-data); font-size: 1.05rem; }
.an-complete-track { height: 6px; border-radius: 999px; background: var(--celt-surface-2); overflow: hidden; }
.an-complete-track span { display: block; height: 100%; }
.an-complete.is-low  .an-complete-track span { background: #d6453b; }
.an-complete.is-mid  .an-complete-track span { background: #c99331; }
.an-complete.is-high .an-complete-track span { background: #1f8a6d; }
.an-complete.is-low  .an-complete-pct { color: #d6453b; }
.an-complete.is-mid  .an-complete-pct { color: #a5761f; }
.an-complete.is-high .an-complete-pct { color: #1f8a6d; }
.an-complete-fields { list-style: none; margin: 10px 0 0; padding: 0; }
.an-complete-fields li {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: .76rem; color: var(--celt-ink-soft); padding: 2px 0;
}
.an-complete-fields code {
    background: none; padding: 0; color: var(--celt-ink-soft);
    font-family: var(--celt-font-data); font-size: .74rem;
}

/* --- donuts and columns --------------------------------------------------- */
.an-donut-wrap { display: flex; align-items: center; gap: 14px; }
.an-donut { width: 104px; height: 104px; flex: 0 0 auto; }
.an-donut circle { transition: opacity .15s ease; }
.an-donut:hover circle { opacity: .55; }
.an-donut circle:hover { opacity: 1; }
.an-donut-total {
    text-anchor: middle;
    font-family: var(--celt-font-data);
    font-size: 19px;
    font-weight: 700;
    fill: var(--celt-navy);
}
.an-donut-cap { text-anchor: middle; font-size: 8px; fill: var(--celt-ink-faint); }

.an-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; }
.an-legend li { display: flex; align-items: center; gap: 7px; font-size: .78rem; padding: 2px 0; }
.an-swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.an-swatch.is-empty { background: var(--celt-hairline); }
.an-legend-label { flex: 1 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; color: var(--celt-ink); }
.an-legend-n { flex: 0 0 auto; font-family: var(--celt-font-data);
    font-size: .72rem; color: var(--celt-ink-faint); }
.an-legend li.is-missing .an-legend-label { color: var(--celt-ink-faint); font-style: italic; }

.an-cols { width: 100%; height: 62px; display: block; }
.an-cols-labels { display: flex; margin-top: 4px; }
.an-cols-labels span {
    flex: 1 1 0; min-width: 0; text-align: center;
    font-size: .68rem; color: var(--celt-ink-soft); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis;
}
.an-cols-labels b {
    display: block; font-family: var(--celt-font-data);
    font-size: .8rem; color: var(--celt-navy);
}

/* --- cohort explorer ------------------------------------------------------ */
#cohort-explorer { background: var(--celt-surface); border: 1px solid var(--celt-line);
    border-radius: var(--celt-radius); padding: 18px 20px; box-shadow: var(--celt-shadow); }
#cohort-explorer > h2 { border-bottom-color: var(--celt-blue); }

.an-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    align-items: start;
    padding: 14px 16px;
    background: var(--celt-surface-2);
    border: 1px solid var(--celt-hairline);
    border-radius: var(--celt-radius-sm);
    margin-bottom: 16px;
}
.an-control-wide { grid-column: 1 / -1; }
.an-control > label {
    display: block; font-size: .74rem; font-weight: 650;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--celt-ink-faint); margin-bottom: 8px;
}
.an-control > label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.an-control > label strong { color: var(--celt-navy); font-family: var(--celt-font-data); }

/* Two ordinary range inputs stacked, not a custom dual-handle widget: a native
   slider is keyboard accessible and behaves correctly on a touch screen, and
   the pair cannot cross because the script clamps them. */
.an-sliders { display: flex; flex-direction: column; gap: 6px; }
.an-sliders input[type="range"] { width: 100%; accent-color: var(--celt-blue); }

.an-segbtns { display: inline-flex; border: 1px solid var(--celt-line);
    border-radius: 999px; overflow: hidden; background: var(--celt-surface); }
.an-segbtns button {
    border: 0; background: transparent; padding: 7px 14px;
    font-size: .8rem; color: var(--celt-ink-soft); cursor: pointer;
}
.an-segbtns button.is-on { background: var(--celt-navy); color: #fff; font-weight: 600; }

.an-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.an-chip {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--celt-line); background: var(--celt-surface);
    border-radius: 999px; padding: 6px 8px 6px 14px;
    font-size: .8rem; color: var(--celt-ink); cursor: pointer;
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.an-chip:hover { border-color: var(--celt-soft); box-shadow: 0 6px 16px -10px rgba(29,62,113,.6); }
.an-chip-state {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; padding: 2px 8px; border-radius: 999px;
    background: var(--celt-surface-2); color: var(--celt-ink-faint);
    font-size: .72rem; font-weight: 600;
}
.an-chip[data-state="yes"] { border-color: rgba(31,122,82,.45); background: rgba(52,168,116,.07); }
.an-chip[data-state="yes"] .an-chip-state { background: #1f7a52; color: #fff; }
.an-chip[data-state="no"] { border-color: rgba(43,112,153,.4); background: rgba(61,144,192,.07); }
.an-chip[data-state="no"] .an-chip-state { background: #2b7099; color: #fff; }

.an-reset {
    align-self: end; border: 1px solid var(--celt-line); background: var(--celt-surface);
    border-radius: var(--celt-radius-sm); padding: 8px 16px;
    font-size: .8rem; color: var(--celt-ink-soft); cursor: pointer;
}
.an-reset:hover { border-color: var(--celt-soft); color: var(--celt-navy); }

.an-cohort-head { font-size: .95rem; margin: 0 0 6px; }
.an-cohort-head strong { font-family: var(--celt-font-data); font-size: 1.3rem; color: var(--celt-navy); }
.an-cohort-warn { font-size: .82rem; color: var(--celt-ink-soft); margin: 0 0 14px; }
.an-cohort-warn.is-thin { color: #a5761f; font-weight: 600; }
.an-cohort-warn.is-empty { color: var(--celt-red); font-weight: 600; }

.an-generated { font-size: .74rem; color: var(--celt-ink-faint); text-align: right; }

/* A table of seven numeric columns cannot compress to a phone. It scrolls
   inside its own box rather than pushing the whole page sideways — measured at
   629px against a 420px viewport before this was added. */
.an-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px) {
    .an-chart { display: none; }
    .an-kpi-value { font-size: 1.5rem; }
    .an-table { min-width: 460px; }
    .an-donut-wrap { flex-direction: column; align-items: flex-start; }
    .an-controls { padding: 12px; }
    .an-cols-labels span { font-size: .62rem; }
}

/* ==========================================================================
   8d. Колофон — /site/creator
   --------------------------------------------------------------------------
   The markup carried these class names from the day the page was written and
   nothing ever defined them, so the page rendered as unstyled text. It is a
   single quiet card, centred, with the brand keyline down its left edge.
   ========================================================================== */

.creator-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62vh;
    padding: 24px 12px;
}

.creator-card {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 640px;
    background: var(--celt-surface);
    border: 1px solid var(--celt-hairline);
    border-radius: 18px;
    box-shadow: 0 20px 50px -28px rgba(15, 34, 66, .55);
    overflow: hidden;
}

/* The keyline, and the only colour on the card. */
.creator-rail {
    flex: 0 0 6px;
    background: linear-gradient(180deg, var(--celt-cyan), var(--celt-blue) 45%, var(--celt-navy));
}

.creator-body { flex: 1 1 auto; padding: 34px 38px 28px; min-width: 0; }

.creator-eyebrow {
    margin: 0 0 14px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--celt-ink-faint);
}

.creator-name {
    margin: 0 0 6px;
    font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--celt-navy);
    line-height: 1.15;
}

.creator-role {
    margin: 0;
    font-size: .95rem;
    color: var(--celt-blue);
    font-weight: 550;
}

.creator-sep {
    margin: 22px 0;
    border: 0;
    border-top: 1px solid var(--celt-hairline);
}

/* Two columns on a comfortable width, stacked when there is not room. The
   grid keeps the terms aligned without a table. */
.creator-facts {
    display: grid;
    grid-template-columns: minmax(110px, 150px) 1fr;
    gap: 10px 20px;
    margin: 0;
}
.creator-facts dt {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--celt-ink-faint);
    padding-top: 2px;
}
.creator-facts dd {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--celt-ink);
}

.creator-note {
    margin: 22px 0 0;
    padding: 14px 16px;
    background: var(--celt-surface-2);
    border-left: 3px solid var(--celt-line);
    border-radius: var(--celt-radius-sm);
    font-size: .84rem;
    line-height: 1.6;
    color: var(--celt-ink-soft);
}

.creator-back { margin: 22px 0 0; }
.creator-back a { font-size: .84rem; color: var(--celt-ink-soft); text-decoration: none; }
.creator-back a:hover { color: var(--celt-navy); }

@media (max-width: 575.98px) {
    .creator-body { padding: 24px 20px 20px; }
    .creator-facts { grid-template-columns: 1fr; gap: 4px 0; }
    .creator-facts dd { margin-bottom: 10px; }
}

/* ==========================================================================
   9. Chrome — navbar, breadcrumbs, footer
   ========================================================================== */

.app-navbar {
    background: var(--celt-navy) !important;
    border-bottom: 0;
    box-shadow: 0 1px 12px rgba(11, 34, 66, .18);
    min-height: 58px;
    /* line the brand up with the content column, which site.css indents by 40px */
    padding: 0 40px;
}

@media (max-width: 991.98px) {
    .app-navbar { padding: 0 15px; }
}

/* keep the brand and the links on one line, vertically centred */
.app-navbar > .container,
.app-navbar > .container-fluid {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.app-navbar .navbar-brand {
    color: #fff !important;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    white-space: nowrap;
    /* the legacy stylesheet pulls the brand 15px left, out of alignment with
       the content column below it */
    margin-left: 0;
    /* clear separation between the brand (which is the home link) and the
       navigation proper, reinforced by the divider below */
    margin-right: 0;
    padding: 14px 0;
    flex: 0 0 auto;
}

/* No divider: with the brand hard left and the navigation grouped right,
   a rule would float unanchored in the middle of the bar. The whitespace
   between them already does the separating. */
.app-navbar .navbar-brand:hover { color: #fff !important; text-decoration: none; opacity: .88; }

/* Bootstrap 3 ships `.navbar > .container-fluid .navbar-brand { margin-left: -15px }`
   (three classes) which outranks a two-class rule. Match it to keep the brand
   aligned with the content column. */
.app-navbar > .container .navbar-brand,
.app-navbar > .container-fluid .navbar-brand {
    margin-left: 0;
}

.app-navbar .navbar-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.app-navbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .85) !important;
    font-size: 0.86rem;
    font-weight: 550;
    white-space: nowrap;
    padding: 7px 12px;
    border-radius: var(--celt-radius-sm);
}
.app-navbar .navbar-nav .nav-item + .nav-item { margin-left: 2px; }

.app-navbar .navbar-nav .nav-link:hover,
.app-navbar .navbar-nav .nav-link:focus,
.app-navbar .navbar-nav .active > .nav-link {
    color: #fff !important;
    background: rgba(255, 255, 255, .14);
}

/* The bar never collapses (navbar-expand, no breakpoint), so the hamburger
   is never needed. */
.app-navbar .navbar-toggler { display: none; }

/* Narrow screens: keep ONE row and scroll it sideways rather than stacking.
   The previous rules here forced the collapsed menu open in a column, which
   grew the fixed bar to 221px and covered the top of the page. */
.app-navbar > .container,
.app-navbar > .container-fluid {
    flex-wrap: nowrap;
    min-width: 0;
}

/* Bootstrap aligns the menu with `.navbar-expand > .navbar-collapse`, which
   requires the collapse to be a DIRECT child of the navbar. Yii's NavBar puts
   a .container-fluid in between, so that rule never matches and the collapse
   stays `display: block`. A block-level <ul> fills its parent, and margin-left:
   auto does nothing on it — which is why `ml-auto` failed to right-align the
   menu. Making the collapse a flex container turns the <ul> into a flex item,
   and ml-auto then works as intended. */
.app-navbar .navbar-collapse {
    display: flex !important;
    align-items: center;
    flex-basis: auto;
    flex-grow: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* the bar is short; a scrollbar would crowd it */
}
.app-navbar .navbar-collapse::-webkit-scrollbar { display: none; }

@media (max-width: 991.98px) {
    .app-navbar .navbar-brand { font-size: 0.9rem; }
    .app-navbar .navbar-nav .nav-link { padding: 7px 9px; font-size: 0.82rem; }
}

.breadcrumb {
    background: transparent;
    padding: 0 0 14px;
    margin-bottom: 4px;
    font-size: 0.82rem;
}
.breadcrumb > li + li::before,
.breadcrumb-item + .breadcrumb-item::before { color: var(--celt-ink-faint); }
.breadcrumb a { color: var(--celt-ink-soft); }
.breadcrumb a:hover { color: var(--celt-navy); }

.footer {
    background: transparent !important;
    border-top: 1px solid var(--celt-hairline);
    color: var(--celt-ink-faint);
    font-size: 0.8rem;
    height: auto;
}

/* ==========================================================================
   10. Final submit panel
   ========================================================================== */

/* coronary artery diagram */
.coronary-diagram { text-align: center; }
.coronary-diagram img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--celt-hairline);
    border-radius: var(--celt-radius);
    padding: 8px;
    background: #fff;
}

.final-submit-panel { border: 1px solid var(--celt-line); }
.final-submit-panel > .panel-heading { background: var(--celt-navy); }
.submit-description { font-size: 0.88rem; color: var(--celt-ink-soft); margin-bottom: 16px; }
.submit-button { min-width: 240px; }

/* ==========================================================================
   10b. Landing page
   --------------------------------------------------------------------------
   Kept deliberately sparse. The soft tint panel and the green primary action
   are carried over from the original design — they read well and the green
   gives the page one clear place to go next.
   ========================================================================== */

/* The top offset that clears the navigation. It was an inline style on the
   container in layouts/main.php; it lives here so a page can override it.

   NOTE it is 70px for a bar that is 58px tall and NOT actually fixed: the app
   loads Bootstrap 3 after Bootstrap 4, and BS3's `.navbar { position: relative }`
   wins over BS4's `.fixed-top`, so the bar sits in the flow and brings its own
   20px bottom margin. The 70px is therefore dead space on every page. Left
   alone here rather than removed, because every other view was laid out
   against it; the landing page overrides it below. */
.page-body { padding-top: 70px; }

.site-index { padding: 24px 10px 10px; }

.landing-hero {
    background: linear-gradient(135deg, #f4f8ff 0%, #e9f7f0 100%);
    border: 1px solid #dfe9f6;
    border-radius: 16px;
    padding: 44px 20px;
}

.landing-card { max-width: 900px; margin: 0 auto; }

.landing-title {
    color: var(--celt-navy);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.landing-subtitle {
    color: var(--celt-ink-soft);
    font-size: 1.02rem;
    margin-bottom: 28px;
}

/* --------------------------------------------------------------------------
   Fit the landing page to the screen it is on
   --------------------------------------------------------------------------
   The complaint was that the same page is too big on a 15" laptop — it ran
   past the fold and had to be scrolled — and too small on a 21" monitor, where
   the content sat in a small clump under a large void.

   Both come from fixed pixel sizes. The fix has two halves:

   1. LAYOUT. <body> becomes a full-height flex column, the content is centred
      in whatever is left between the bar and the footer, and the two pieces of
      dead space are reclaimed: the 70px offset for a bar that is not fixed,
      and the footer's `mt-5` (48px).

   2. SIZE. Type and padding scale with `min(vw, vh)`, so they shrink on a
      short screen and grow on a tall one. Keying on width alone is what breaks
      laptops — a 1920×660 window is wide and short, and vw-only sizing makes it
      overflow. The clamp() floors and ceilings stop it going illegible or
      cartoonish at the extremes.

   `min-height`, never `height`: if the text is longer than expected the page
   grows and scrolls rather than clipping.
   -------------------------------------------------------------------------- */

body.page-landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.page-landing .wrap {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.page-landing .page-body {
    padding-top: 10px;              /* the bar is in the flow; it needs no gap */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.page-landing .site-index {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;        /* centre the block in the space it has */
    padding: 0 10px;
    gap: clamp(10px, min(1.4vw, 2.2vh), 22px);
}
/* Bootstrap's mt-5 on the footer is 48px of nothing on a page that is trying
   to fit. */
.page-landing footer.footer { margin-top: 0 !important; }

.page-landing .landing-hero {
    padding: clamp(18px, min(3.4vw, 5.2vh), 54px) 20px;
}
.page-landing .landing-title {
    font-size: clamp(1.3rem, min(2.5vw, 4.3vh), 2.45rem);
    margin-bottom: clamp(6px, 1.2vh, 16px);
}
.page-landing .landing-subtitle {
    font-size: clamp(.92rem, min(1.2vw, 2.05vh), 1.3rem);
    margin-bottom: clamp(14px, min(1.8vw, 2.9vh), 32px);
}
.page-landing .landing-actions .btn {
    min-width: clamp(160px, 14vw, 240px);
    padding: clamp(7px, 1.15vh, 14px) 20px;
    font-size: clamp(.9rem, min(1vw, 1.75vh), 1.12rem);
}

.page-landing .almanac {
    margin-top: 0;
    padding: clamp(16px, min(2.3vw, 3.4vh), 32px)
             clamp(18px, 2.2vw, 40px)
             clamp(13px, min(1.8vw, 2.6vh), 24px);
}
.page-landing .almanac-year  { font-size: clamp(1.15rem, min(1.75vw, 3vh), 1.95rem); }
.page-landing .almanac-title { font-size: clamp(1.02rem, min(1.5vw, 2.55vh), 1.7rem); }
.page-landing .almanac-text  { font-size: clamp(.88rem, min(1.05vw, 1.8vh), 1.18rem); }
.page-landing .almanac-glyph { font-size: clamp(78px, min(9vw, 17vh), 150px); }
.page-landing .almanac-foot {
    margin-top: clamp(10px, min(1.4vw, 2.2vh), 20px);
    padding-top: clamp(9px, 1.4vh, 14px);
}

/* Entries differ in length, and a centred page would shift on every change.
   Reserving three lines keeps the band a stable height for almost all of them;
   almanac.js measures the real maximum and locks it exactly once laid out. */
.page-landing .almanac-text { min-height: calc(3 * 1.7em); }

/* Below the two-column breakpoint the page is a scrolling column again —
   forcing a phone screen to hold hero plus band would shrink both to nothing. */
@media (max-width: 767.98px) {
    body.page-landing { min-height: 0; display: block; }
    .page-landing .wrap,
    .page-landing .page-body,
    .page-landing .site-index { display: block; }
    .page-landing .page-body { padding-top: 10px; }
    .page-landing .site-index { padding: 0 10px 16px; }
    .page-landing .almanac { margin-top: 16px; }
    .page-landing .almanac-text { min-height: 0; }
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.landing-actions .btn { min-width: 190px; }

/* the outline button sits on a tinted panel, so give it a solid ground */
.landing-actions .btn-outline-primary { background: #fff; }

@media (max-width: 575.98px) {
    .landing-hero { padding: 30px 16px; }
    .landing-title { font-size: 1.35rem; }
    .landing-actions .btn { width: 100%; min-width: 0; }
}

/* ==========================================================================
   10c. Record viewer
   ========================================================================== */

.record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.record-section { margin-bottom: 18px; }

.record-section .panel-title { justify-content: flex-start; }

.section-fill-count {
    margin-left: auto;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.record-section-empty {
    margin: 0;
    color: var(--celt-ink-faint);
    font-size: 0.88rem;
}

.record-detail { margin-bottom: 0; }

.record-detail th {
    width: 42%;
    font-weight: 600;
    color: var(--celt-navy);
    background: var(--celt-surface-2);
    border-top: 1px solid var(--celt-hairline);
    padding: 8px 12px;
    font-size: 0.85rem;
    vertical-align: top;
}

.record-detail td {
    border-top: 1px solid var(--celt-hairline);
    padding: 8px 12px;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

/* Empty fields stay legible but recede — the old viewer shouted them in red,
   which made a mostly-blank section look like an error. */
.record-detail tr.is-empty th { color: var(--celt-ink-faint); font-weight: 500; }
.record-detail .not-set { color: var(--celt-ink-faint); font-style: italic; }

@media (max-width: 575.98px) {
    .record-detail th, .record-detail td { display: block; width: 100%; }
    .record-detail td { border-top: 0; padding-top: 0; }
    .record-actions { justify-content: stretch; }
    .record-actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   10d. Coronary segment chips (section 5)
   --------------------------------------------------------------------------
   Each selected segment carries its own × so it can be removed directly.
   Previously the chips were inert and the only way to deselect was to find
   the segment again in the 1-16C grid.
   ========================================================================== */

.selected-segments-display {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.selected-segment-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border-radius: 999px;
    background: var(--celt-navy);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
}

.segment-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

.segment-remove-btn:hover,
.segment-remove-btn:focus {
    background: var(--celt-red);
    color: #fff;
    outline: none;
}

.segment-remove-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

#clear-all-segments { margin-left: 4px; }

/* ==========================================================================
   10e. Optional blocks — «Выполнено: Да / Нет»
   --------------------------------------------------------------------------
   ВСУЗИ, ОКТ and section 11 are optional. The switch sits in the block header;
   «Нет» folds the body and disables everything in it so nothing is submitted.
   ========================================================================== */

/* Sits immediately after the block's title, NOT pushed to the far edge.
   `margin-left: auto` looked tidier but put «Выполнено» a screen-width away
   from the ВСУЗИ/ОКТ heading it belongs to, so nobody could find it. */
.performed-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(29, 62, 113, .18);
}

.performed-toggle-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    opacity: .75;
    margin-right: 2px;
}

/* the radios drive the labels; keep them reachable by keyboard */
.performed-toggle-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.performed-toggle-btn {
    margin: 0;
    padding: 3px 12px;
    border: 1px solid var(--celt-line);
    background: var(--celt-surface);
    color: var(--celt-ink-soft);
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.performed-toggle-btn.performed-yes { border-radius: 999px 0 0 999px; }
.performed-toggle-btn.performed-no  { border-radius: 0 999px 999px 0; margin-left: -1px; }

.performed-toggle-input:checked + .performed-yes {
    background: #1f7a4d; border-color: #1f7a4d; color: #fff;
}
.performed-toggle-input:checked + .performed-no {
    background: var(--celt-ink-soft); border-color: var(--celt-ink-soft); color: #fff;
}
.performed-toggle-input:focus-visible + .performed-toggle-btn {
    outline: 2px solid var(--celt-blue);
    outline-offset: 2px;
}

/* A folded block stays visible as a heading so it is obvious the question was
   answered «Нет», rather than the section having gone missing. */
.optional-block.is-collapsed { opacity: .78; }
.optional-block.is-collapsed > .panel-heading { border-bottom: 0; }

.optional-block.is-collapsed .performed-toggle-label::after {
    content: ' — раздел свёрнут';
    font-weight: 500;
    opacity: .8;
}

/* Section 11's ВСУЗИ and ОКТ blocks sit INSIDE the section 11 block, so two
   collapsed states can stack. Do not compound the dimming — one level of
   "folded" is the message; two just looks like a rendering fault. */
.optional-block.is-collapsed .optional-block.is-collapsed { opacity: 1; }

@media (max-width: 767.98px) {
    .performed-toggle { margin-left: 0; padding-left: 0; width: 100%; }
    .optional-block .panel-title { flex-wrap: wrap; row-gap: 8px; }
}

/* ==========================================================================
   11. Quality floor — motion, focus, small screens, print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

:focus-visible { outline: 2px solid var(--celt-blue); outline-offset: 2px; }

@media (max-width: 767.98px) {
    .panel-body { padding: 15px 13px; }
    .quick-nav-panel { position: static; }
    .patient-type-card { flex: 1 1 100%; }
    .submit-button { width: 100%; min-width: 0; }
}

@media print {
    .app-navbar, .quick-nav-panel, .footer, .btn, .breadcrumb { display: none !important; }
    .panel { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    .panel-heading { background: #fff !important; color: #000 !important; border-bottom: 1px solid #ccc; }
    .panel-title { color: #000 !important; }
    body { background: #fff; }
}

/* ==========================================================================
   12. Three-state Да / Нет segmented control
   --------------------------------------------------------------------------
   Section 10 used to be a row of large colourful yes/no pills. Converting the
   form to dropdowns fixed the data problem — a radio cannot be un-clicked, so
   one stray click permanently recorded a finding — but it cost the form its
   legibility: thirteen identical full-width selects read as a wall of grey.

   This restores the pill feel and adds the state the old widget never had:
   «—» means "не оценивалось", so any answer can be taken back with one click.
   ========================================================================== */

.yesno-field { margin-bottom: 20px; }

.yesno-caption {
    display: block;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--celt-ink-soft);
    margin-bottom: 9px;
}

/* Sized for a gloved hand on a cath-lab workstation and for a thumb on a
   tablet: the WCAG 2.5.8 minimum for a touch target is 24px, the AAA
   recommendation 44px. These segments are 44px tall and never narrower than
   64px, so they clear both. */
.yesno-seg {
    /* FLUID, not inline-flex. The control used to size itself to its content
       and then simply overflow whatever held it: in section 10 the drug
       pickers sit two and three columns deep, the card came out 113px wide,
       and «Да» hung outside its own border. `max-width: 100%` did not help,
       because the segments had a min-width and could not shrink.

       Now it fills its container up to its natural size and the segments share
       whatever there is. It can no longer spill on any screen. */
    display: flex;
    width: 100%;
    max-width: 268px;
    min-width: 0;
    border: 1px solid var(--celt-line);
    border-radius: 999px;
    background: linear-gradient(180deg, #eef2f9, var(--celt-surface-2));
    padding: 4px;
    gap: 4px;
    /* Recessed track, raised pill — the depth is what makes the selected
       segment read as physically pressed in rather than merely coloured. */
    box-shadow: inset 0 1px 3px rgba(29, 62, 113, .10);
}

/* The real radios stay in the DOM for keyboard and form semantics. */
.yesno-seg-input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}

.yesno-seg-btn {
    margin: 0;
    /* flex-basis 0 with min-width 0: «Нет» and «Да» split the room evenly and
       can shrink when there is little of it, instead of pushing out of the
       track. 44px min-height is the WCAG 2.5.8 AAA touch target and stays. */
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--celt-ink-soft);
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.yesno-seg-btn.is-blank {
    /* Fixed, not shared: «—» needs no more room than its glyph, and giving it
       an equal third would steal width from the two real answers. */
    flex: 0 0 auto;
    width: 52px;
    min-width: 0;
    padding: 0;
    color: var(--celt-ink-faint);
    font-size: 1.15rem;      /* the em dash needs the extra size to read as a glyph */
    /* Outlined at all times. Previously the ring appeared only while «—» was
       selected, so on a filled-in record the clear button looked like inert
       text and nobody could tell it was clickable. */
    background: var(--celt-surface);
    box-shadow: inset 0 0 0 1px var(--celt-line);
}

.yesno-seg-btn:hover { background: rgba(61, 144, 192, .12); color: var(--celt-navy); }

/* Last-resort guard against ever spilling again. Text cannot shrink below the
   width of the word «Нет», so in a container narrower than that the three
   options stack instead of bursting out of the track. Nothing on the form is
   this narrow today; this is here so that a future nested block cannot
   reintroduce the bug. */
.yesno-field,
.form-group:has(> .choice-group) { container-type: inline-size; }

@container (max-width: 176px) {
    .yesno-seg {
        flex-wrap: wrap;
        border-radius: 20px;
        max-width: 100%;
    }
    .yesno-seg-btn { flex: 1 0 100%; }
    .yesno-seg-btn.is-blank { width: auto; }
}

/* Selected states. Да and Нет are deliberately different colours: at a glance
   across a long form, "something was found here" should stand out from
   "checked, nothing found". */
.yesno-seg-input:checked + .yesno-seg-btn.is-yes {
    background: linear-gradient(180deg, #34a874, #1f7a52);
    color: #fff;
    box-shadow: 0 3px 9px -2px rgba(31, 122, 82, .55),
                inset 0 1px 0 rgba(255, 255, 255, .28);
}
.yesno-seg-input:checked + .yesno-seg-btn.is-no {
    background: linear-gradient(180deg, #4a9dcc, #2b7099);
    color: #fff;
    box-shadow: 0 3px 9px -2px rgba(43, 112, 153, .55),
                inset 0 1px 0 rgba(255, 255, 255, .28);
}
.yesno-seg-input:checked + .yesno-seg-btn.is-blank {
    background: var(--celt-surface);
    color: var(--celt-navy);
    box-shadow: 0 2px 6px -2px rgba(29, 62, 113, .35),
                inset 0 0 0 1px var(--celt-soft);
}

/* Keyboard focus — an outline, never a fill, so it cannot be mistaken for
   the selected state. Same reasoning as the section-nav rail. */
.yesno-seg-input:focus-visible + .yesno-seg-btn {
    outline: 2px solid var(--celt-blue);
    outline-offset: 2px;
}

.yesno-seg-input:disabled + .yesno-seg-btn {
    opacity: .5;
    cursor: not-allowed;
}

/* ==========================================================================
   12b. Field cards
   --------------------------------------------------------------------------
   Each question is a card: caption on its own line, answer underneath, and any
   conditional follow-up below that, full width. It is deliberately NOT laid out
   side by side.

   An earlier version put the caption left and the pills right on one line. It
   was 35px shorter per question and it was wrong. Two reasons, both found by
   looking at it:

     1. It squeezed. «постдилатация» in section 7 opens a balloon diameter and a
        pressure field when you answer «да». On one line those became flex items
        competing with the caption and the pills and were crushed to a few
        pixels wide. That was one field out of 61 today; the next conditional
        field anyone adds would have hit the same wall.
     2. It read as cramped. Two questions abreast, each with its caption pushed
        away from its own answer, is denser but not clearer, and this form is
        filled in by someone at the end of a list of procedures.

   Height still has to come from somewhere, so it comes from COLUMNS instead:
   a vertical card is narrow, so a panel of questions flows into two or three
   of them across a wide screen. Nothing is made smaller — the caption is still
   14px bold, the segments are still 44px (WCAG 2.5.8 AAA) and the pressed-in
   depth on the pills is untouched.

   The card is also what stops you losing your place:

     - hover lifts it 1px and warms the border;
     - an answered card keeps a tinted leading edge, green for Да, blue for Нет;
     - «—» stays completely plain. Not assessed is a legitimate answer here and
       must never look like an error or an omission.

   Implemented with :has() rather than by editing nine view partials, each of
   which carries `style="margin-bottom: 15px; display: block"` inline on the
   caption. Where :has() is unsupported the form simply stays as it was.
   ========================================================================== */

/* Shape A: caption is a sibling label, answer is wrapped in .choice-group.
   This is what the section partials render. */
.form-group:has(> .choice-group),
/* Shape B: _yesno rendered with its own non-empty label. */
.yesno-field:has(> .yesno-caption) {
    display: block;
    margin-bottom: 8px;
    padding: 9px 13px 11px;
    border: 1px solid var(--celt-hairline);
    border-radius: 12px;
    background: var(--celt-surface);
    transition: border-color .16s ease, box-shadow .16s ease,
                transform .16s ease, background-color .16s ease;
}

/* 15px between a caption and its own control is a lot of air when the pair is
   repeated fifteen times. 7px still reads as one unit. !important is
   unavoidable: the margin and display are inline in the views. */
.form-group:has(> .choice-group) > .control-label {
    margin-bottom: 6px !important;
    display: block !important;
    line-height: 1.3;
}
.yesno-field:has(> .yesno-caption) > .yesno-caption { margin-bottom: 6px; }

.form-group > .choice-group .yesno-field { margin-bottom: 0; }

/* A follow-up question that appears when you answer «да» — balloon diameter
   after постдилатация, GFR after снижение функции почек. It belongs to the card
   above it and is set in from the edge to say so. Never squeezed beside the
   answer: it gets the full width of the card. */
.form-group:has(> .choice-group) > .conditional-section,
.form-group:has(> .choice-group) > [id$="-details"],
.form-group:has(> .choice-group) > [id$="-field"] {
    margin-top: 12px;
    padding-top: 12px;
    padding-left: 12px;
    border-top: 1px solid var(--celt-hairline);
    border-left: 2px solid var(--celt-line);
}
.form-group:has(> .choice-group) > .conditional-section .form-group {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Typed answers get the same card as chosen ones
   --------------------------------------------------------------------------
   Once the yes/no questions became cards, everything that was NOT one fell
   through the floor: «ДРУГАЯ ГИПОЛИПИДЕМИЧЕСКАЯ ТЕРАПИЯ» in section 10,
   «Клинические данные» in section 2, «Выберите препарат» in section 4. They
   were a bare label over a bare input on the page background, so they read as
   decoration rather than as fields waiting to be filled in.

   Same card, same hover, same filled state. Filled is detected with
   :not(:placeholder-shown) for text and :valid on a select whose empty option
   is disabled; where neither applies the card simply stays neutral, which is
   the safe direction.
   -------------------------------------------------------------------------- */
/* [class*="form-group"], not .form-group: Yii's `options => ['class' => …]`
   REPLACES the default class, so every field given `form-group-lg` — the two
   dropdowns in «Клинические данные» among them — is not a .form-group at all.
   Matching only .form-group left exactly those fields flat. */
#clinical-record-form [class*="form-group"]:has(> input.form-control),
#clinical-record-form [class*="form-group"]:has(> select.form-control),
#clinical-record-form [class*="form-group"]:has(> textarea.form-control) {
    padding: 9px 13px 11px;
    border: 1px solid var(--celt-hairline);
    border-radius: 12px;
    background: var(--celt-surface);
    transition: border-color .16s ease, box-shadow .16s ease,
                transform .16s ease, background-color .16s ease;
}
#clinical-record-form [class*="form-group"]:has(> input.form-control):hover,
#clinical-record-form [class*="form-group"]:has(> select.form-control):hover,
#clinical-record-form [class*="form-group"]:has(> textarea.form-control):hover {
    border-color: var(--celt-soft);
    box-shadow: 0 8px 20px -12px rgba(29, 62, 113, .6);
    transform: translateY(-1px);
}
/* Focus wins over hover: while you are typing in it, that is the card that
   matters. */
#clinical-record-form [class*="form-group"]:has(> .form-control:focus) {
    border-color: var(--celt-blue);
    box-shadow: 0 0 0 3px rgba(61, 144, 192, .16);
    transform: none;
}
/* Something has been entered. Blue rather than green: a typed value is a
   recorded observation, the same statement as «Нет». */
#clinical-record-form [class*="form-group"]:has(> input.form-control:not(:placeholder-shown)),
#clinical-record-form [class*="form-group"]:has(> textarea.form-control:not(:placeholder-shown)),
/* A dropdown counts as answered when the option that is selected is not the
   empty prompt. `option:checked` is how CSS can see that. */
#clinical-record-form [class*="form-group"]:has(> select.form-control option:checked:not([value=""])) {
    border-color: rgba(43, 112, 153, .30);
    background-color: rgba(61, 144, 192, .045);
    box-shadow: inset 3px 0 0 rgba(43, 112, 153, .48);
}

/* The caption above a typed answer, matched to the yes/no captions so a
   section reads as one list of questions rather than two. */
#clinical-record-form [class*="form-group"] > label.control-label { margin-bottom: 6px; }

/* Some follow-ups are SIBLINGS of their question rather than children of it —
   #gfr-field belongs to «снижение функции почек», #hb-level-field to «наличие
   анемии». Give them the same card and the same accent keyline so it is
   obvious which question they answer. */
div[id$="-field"]:has(> .form-group .form-control),
.panel-body > .conditional-section {
    padding: 10px 13px;
    border: 1px solid var(--celt-hairline);
    border-left: 3px solid var(--celt-line);
    border-radius: 12px;
    background: var(--celt-surface);
    margin-bottom: 8px;
}
div[id$="-field"]:has(> .form-group .form-control) > .form-group { margin-bottom: 0; }

/* The lift. Small on purpose — this repeats fifteen times down a section, and
   anything more would make the page restless rather than responsive. */
.form-group:has(> .choice-group):hover,
.yesno-field:has(> .yesno-caption):hover {
    border-color: var(--celt-soft);
    box-shadow: 0 8px 20px -12px rgba(29, 62, 113, .6);
    transform: translateY(-1px);
}

/* Answered. The tint is very light and sits only on the leading edge — enough
   to read as "done" while scanning, not enough to shout. */
.form-group:has(> .choice-group):has(.yesno-seg-input[value="1"]:checked),
.yesno-field:has(> .yesno-caption):has(.yesno-seg-input[value="1"]:checked) {
    border-color: rgba(31, 122, 82, .34);
    background-color: rgba(52, 168, 116, .045);
    box-shadow: inset 3px 0 0 rgba(31, 122, 82, .55);
}
.form-group:has(> .choice-group):has(.yesno-seg-input[value="0"]:checked),
.yesno-field:has(> .yesno-caption):has(.yesno-seg-input[value="0"]:checked) {
    border-color: rgba(43, 112, 153, .30);
    background-color: rgba(61, 144, 192, .045);
    box-shadow: inset 3px 0 0 rgba(43, 112, 153, .48);
}
/* Hover has to win over the answered state, or the row stops responding once
   it is filled in — which is when you are most likely to be re-checking it. */
.form-group:has(> .choice-group):has(.yesno-seg-input[value="1"]:checked):hover,
.yesno-field:has(> .yesno-caption):has(.yesno-seg-input[value="1"]:checked):hover {
    box-shadow: inset 3px 0 0 rgba(31, 122, 82, .55),
                0 8px 20px -12px rgba(29, 62, 113, .6);
}
.form-group:has(> .choice-group):has(.yesno-seg-input[value="0"]:checked):hover,
.yesno-field:has(> .yesno-caption):has(.yesno-seg-input[value="0"]:checked):hover {
    box-shadow: inset 3px 0 0 rgba(43, 112, 153, .48),
                0 8px 20px -12px rgba(29, 62, 113, .6);
}

/* A panel that is nothing but questions flows them into as many columns as the
   screen can hold at a comfortable reading width. The selector requires the
   rows to be DIRECT children, so a panel body built out of Bootstrap rows and
   columns — which is most of them — is left alone. */
@media (min-width: 1200px) {
    .panel-body:has(> .form-group > .choice-group) {
        display: grid;
        /* 250px holds the three segments (52 + 64 + 64 plus gaps) inside the
           card padding with room for the caption to wrap above them. */
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 10px 14px;
        align-content: start;
    }
    .panel-body:has(> .form-group > .choice-group) > .form-group { margin-bottom: 0; }
    /* A conditional block that is a SIBLING of the questions rather than inside
       one — #gfr-field, #hb-level-field — takes the whole width when it opens,
       instead of appearing as a stray narrow column. */
    .panel-body:has(> .form-group > .choice-group) > div[id$="-field"],
    .panel-body:has(> .form-group > .choice-group) > .conditional-section {
        grid-column: 1 / -1;
    }
    /* Bootstrap 3 puts a clearfix on .panel-body via ::before/::after. In a
       grid container generated content becomes a grid ITEM, so the clearfix
       silently took the first and last cell and pushed every question one
       place along — the first question appeared in column two under an empty
       box. Nothing to clear here; the grid does its own layout. */
    .panel-body:has(> .form-group > .choice-group)::before,
    .panel-body:has(> .form-group > .choice-group)::after { content: none; }
}

/* --------------------------------------------------------------------------
   Multi-select tiles — target arteries, diseased vessels, ablation technology
   --------------------------------------------------------------------------
   These were bare native checkboxes in two stiff Bootstrap columns: a 13px box
   and a label, nine of them, with no relationship to the pill controls beside
   them. Small targets, no visible answered state, and a lot of dead space to
   the right of the shorter column.

   Now each option is a tile with the same border, hover lift and green answered
   state as the Да/Нет cards, and they flow into as many columns as the panel
   can hold rather than being cut in half in the markup. The markup already had
   the classes; only sections-legacy.css ever touched them, and only to set a
   bottom margin.
   -------------------------------------------------------------------------- */

/* The view splits the options across two .col-md-6. Undo that so the tiles can
   flow — the split is a markup accident, not a grouping that means anything. */
#clinical-record-form .form-group > .row:has(.checkbox-lg) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
#clinical-record-form .form-group > .row:has(.checkbox-lg) > [class*="col-"] {
    display: contents;
}

#clinical-record-form .checkbox.checkbox-lg {
    margin: 0;
    flex: 0 1 auto;
}

#clinical-record-form .checkbox.checkbox-lg > .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 16px 9px 12px;
    min-height: 44px;                 /* same touch target as the Да/Нет pills */
    border: 1px solid var(--celt-hairline);
    border-radius: 999px;
    background: var(--celt-surface);
    font-weight: 500;
    color: var(--celt-ink);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background .15s ease,
                box-shadow .15s ease, transform .15s ease;
}

#clinical-record-form .checkbox.checkbox-lg > .checkbox-label:hover {
    border-color: var(--celt-soft);
    box-shadow: 0 6px 16px -10px rgba(29, 62, 113, .6);
    transform: translateY(-1px);
}

/* The native box is kept in the DOM for the keyboard and the form, and drawn
   as a square that can carry a tick. */
#clinical-record-form .checkbox.checkbox-lg input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    position: static;
    border: 1.5px solid var(--celt-line);
    border-radius: 6px;
    background: var(--celt-surface-2);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
#clinical-record-form .checkbox.checkbox-lg input[type="checkbox"]::before {
    content: '';
    width: 11px;
    height: 11px;
    transform: scale(0);
    transition: transform .12s ease-in-out;
    background: #fff;
    /* A tick, as a clip path, so there is no icon font to depend on. */
    clip-path: polygon(14% 44%, 0 60%, 39% 100%, 100% 18%, 84% 4%, 39% 68%);
}
#clinical-record-form .checkbox.checkbox-lg input[type="checkbox"]:checked {
    background: linear-gradient(180deg, #34a874, #1f7a52);
    border-color: #1f7a52;
}
#clinical-record-form .checkbox.checkbox-lg input[type="checkbox"]:checked::before {
    transform: scale(1);
}
#clinical-record-form .checkbox.checkbox-lg input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--celt-blue);
    outline-offset: 2px;
}

/* Selected tile — the same green as «Да», so a filled-in form reads one way. */
#clinical-record-form .checkbox.checkbox-lg:has(input:checked) > .checkbox-label {
    border-color: rgba(31, 122, 82, .45);
    background: rgba(52, 168, 116, .08);
    color: var(--celt-navy);
    font-weight: 650;
}

#clinical-record-form .checkbox.checkbox-lg .checkbox-text { white-space: nowrap; }

@media (max-width: 575.98px) {
    #clinical-record-form .form-group > .row:has(.checkbox-lg) { gap: 6px; }
    #clinical-record-form .checkbox.checkbox-lg > .checkbox-label { padding: 8px 13px 8px 10px; }
    #clinical-record-form .checkbox.checkbox-lg .checkbox-text { white-space: normal; }
}

/* Subsections give back a little more without touching any type. */
.subsection-panel { margin-bottom: 12px; }
.subsection-panel > .panel-heading { padding: 8px 14px; }
.subsection-panel > .panel-body { padding: 12px 12px; }

/* Sections nest panels three deep in places — a subsection holding an inner
   .panel-info holding the questions — and only the middle level carried the
   .subsection-panel class. Trim any panel inside a panel on this form, so the
   depth of the nesting stops costing 40px a level. */
#clinical-record-form .panel .panel { margin-bottom: 12px; }
#clinical-record-form .panel .panel > .panel-heading { padding: 8px 14px; }
#clinical-record-form .panel .panel > .panel-body { padding: 12px 12px; }

/* Section 10 is five full-width therapy panels stacked in a column, each about
   166px tall, on a screen wide enough for three of them side by side. */
@media (min-width: 1200px) {
    .discharge-medication-panel > .panel-body {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
        gap: 14px;
        align-items: start;
    }
    /* .mt-4 is a Bootstrap utility and carries !important of its own. */
    .discharge-medication-panel > .panel-body > .therapy-option {
        margin: 0 !important;
    }
    /* Same clearfix trap as above — see the note there. */
    .discharge-medication-panel > .panel-body::before,
    .discharge-medication-panel > .panel-body::after { content: none; }
}

/* A therapy panel puts its drugs in Bootstrap columns, and inside a panel that
   is itself one of three columns those become 185px and then 113px wide. Three
   answer segments do not go in 113px. Everything inside a therapy panel is
   full width and stacks, which is also the clearer way to read a drug list. */
.therapy-option [class*="col-md-"],
.therapy-option [class*="col-sm-"],
.therapy-option [class*="col-lg-"] {
    width: 100%;
    float: none;
    /* max-width and flex are needed as well as width: Bootstrap 4 is also
       loaded and sizes columns with `flex: 0 0 33.33%; max-width: 33.33%`,
       which caps a plain `width: 100%` and leaves the column narrow. Setting
       only `width` looked like it had worked — `float` changed and the width
       did not. */
    max-width: 100%;
    flex: 0 0 100%;
}

/* --------------------------------------------------------------------------
   Chrome on the record form
   --------------------------------------------------------------------------
   593px sat above the first section: the 70px offset for a bar that is not
   fixed, a 97px section rail, an 81px pager bar, a heading and a breadcrumb.
   On a 15" laptop that left 67px for the section itself. None of the tools go
   away — the rail and both pager bars still work exactly as before — they just
   stop being tall.
   -------------------------------------------------------------------------- */
.page-record-form .page-body { padding-top: 12px; }
.page-record-form footer.footer { margin-top: 16px !important; }
.page-record-form .breadcrumb { margin-bottom: 0; padding-top: 4px; padding-bottom: 4px; }
.page-record-form h1 { margin-bottom: 10px; }

.page-record-form .quick-nav-panel { margin-bottom: 12px; }
.page-record-form .quick-nav-panel > .panel-body { padding: 7px 10px; }
.page-record-form .pager-bar { margin-bottom: 10px; padding-top: 6px; padding-bottom: 6px; }
.page-record-form .pager-bar-bottom { margin-top: 10px; margin-bottom: 10px; }
.page-record-form .pager-status { gap: 2px; }
.page-record-form .pager-progress { margin-top: 4px; }

/* Text inputs and dropdowns get the same treatment, so a section reads as one
   kind of thing rather than two. */
.form-group .form-control:hover:not(:disabled):not([readonly]) {
    border-color: var(--celt-soft);
}

/* --- adaptive ---------------------------------------------------------------
   Tablet in portrait and phone: the control goes full width and the three
   segments share it equally, so the tap targets grow rather than shrink. */
@media (max-width: 991.98px) {
    .yesno-seg-btn { padding: 0 20px; }
}

/* Below the tablet breakpoint the row goes back to stacked — a long Russian
   caption and a three-segment control cannot share 400px of width. */
@media (max-width: 767.98px) {
    .form-group:has(> .choice-group),
    .yesno-field:has(> .yesno-caption) { padding: 10px 12px; }
    /* No hover on a touch screen, and a card that moves under a finger is
       just a card that looks broken. */
    .form-group:has(> .choice-group):hover,
    .yesno-field:has(> .yesno-caption):hover { transform: none; }
}

@media (max-width: 767.98px) {
    .yesno-seg { display: flex; width: 100%; }
    .yesno-seg-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 8px;
        font-size: .98rem;
    }
    .yesno-seg-btn.is-blank { flex: 0 0 58px; min-width: 58px; }
}

/* Very narrow phones — keep 44px height, let the labels shrink instead. */
@media (max-width: 359.98px) {
    .yesno-seg-btn { font-size: .9rem; padding: 0 4px; }
    .yesno-seg-btn.is-blank { flex: 0 0 46px; min-width: 46px; }
}

/* Coarse pointers (touch) get no hover tint — it sticks after a tap. */
@media (hover: none) {
    .yesno-seg-btn:hover { background: transparent; color: var(--celt-ink-soft); }
}


/* ==========================================================================
   15. Section pager
   --------------------------------------------------------------------------
   One section on screen at a time. The form itself is unchanged — all eleven
   sections still post together in a single transaction; only visibility moves.
   ========================================================================== */

.pager-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: -12px 0 22px;
    padding: 11px 14px;
    background: var(--celt-surface);
    border: 1px solid var(--celt-hairline);
    border-radius: var(--celt-radius);
    box-shadow: var(--celt-shadow);
    position: sticky;
    top: 8px;
    z-index: 30;
}

.pager-bar .btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    background: var(--celt-navy);
    border: 1px solid var(--celt-navy);
    color: #fff;
}
.pager-bar .btn:hover:not(:disabled) { background: var(--celt-navy-deep); border-color: var(--celt-navy-deep); }
.pager-bar .btn:disabled { opacity: .35; cursor: not-allowed; }

.pager-bar .pager-all {
    background: transparent;
    border-color: var(--celt-line);
    color: var(--celt-navy);
    margin-left: 4px;
}
.pager-bar .pager-all:hover:not(:disabled) { background: var(--celt-tint); border-color: var(--celt-soft); color: var(--celt-navy); }
.pager-bar.is-showing-all .pager-all { background: var(--celt-navy); border-color: var(--celt-navy); color: #fff; }

.pager-status {
    flex: 1 1 auto;
    min-width: 0;               /* let the name ellipsis instead of stretching the bar */
    text-align: center;
}

.pager-count {
    display: inline-block;
    font-family: var(--celt-font-data);
    font-size: .78rem;
    font-weight: 700;
    color: var(--celt-blue);
    letter-spacing: .04em;
}

.pager-name {
    display: block;
    font-size: .95rem;
    font-weight: 650;
    color: var(--celt-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pager-progress {
    height: 3px;
    margin-top: 7px;
    background: var(--celt-hairline);
    border-radius: 999px;
    overflow: hidden;
}
.pager-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--celt-blue), var(--celt-cyan));
    border-radius: 999px;
    transition: width .25s ease;
}

/* Sections already visited read as done, so the rail doubles as progress. */
.quick-nav-buttons .btn.is-done {
    border-color: var(--celt-soft);
    color: var(--celt-navy);
    background: var(--celt-tint);
}

@media (max-width: 767.98px) {
    .pager-bar { flex-wrap: wrap; gap: 9px; position: static; }
    .pager-status { order: -1; flex: 1 0 100%; }
    .pager-bar .btn { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
    .pager-bar .pager-all { flex: 1 0 100%; margin-left: 0; }
}

/* Paging is a screen affordance. On paper every section prints. */
@media print {
    .pager-bar { display: none !important; }
    .form-section, [id^="section-"] { display: block !important; }
}

/* The rail wraps instead of overflowing: eleven buttons plus Save and Наверх
   do not fit one line on a laptop, and a cut-off «11. Проверка» is unusable. */
.quick-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.quick-nav-buttons > .btn { flex: 0 0 auto; }

/* Give the current section room so it reads as the whole screen rather than a
   band floating in a page. */
[id^="section-"] { min-height: 55vh; }
@media print { [id^="section-"] { min-height: 0; } }

/* The duplicate pager below the section is a convenience, not a second
   navigation bar — it must not stick or compete with the one above. */
.pager-bar-bottom {
    position: static;
    margin: 6px 0 22px;
}

/* ==========================================================================
   13. Кардиологический альманах — landing band
   --------------------------------------------------------------------------
   A full-width navy band under the hero, not a narrow white card floating in
   whitespace. The earlier version was 860px wide with a coloured stripe down
   its left edge: on a wide monitor that read as a small note someone had
   bolted on, and the stripe looked arbitrary.

   Dark ground with light type is what made the first news bar pleasant, so
   that is what this keeps — just given room to breathe and laid out across the
   width instead of scrolling sideways.
   ========================================================================== */

.almanac {
    position: relative;
    margin-top: 20px;
    padding: 26px 32px 22px;
    border-radius: 16px;
    background:
        radial-gradient(120% 150% at 88% 0%, rgba(92, 196, 239, .20) 0%, transparent 55%),
        linear-gradient(135deg, #1d3e71 0%, #17325d 55%, #122745 100%);
    box-shadow: 0 14px 34px -18px rgba(15, 34, 66, .75);
    color: #eaf2fb;
    overflow: hidden;
}

/* The stripe is gone — the band itself carries the colour now. */
.almanac-rail { display: none; }

/* Two columns on a wide screen so the horizontal space is used: the label
   block sits left, the writing gets the rest. */
.almanac-body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px, 210px) 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: 34px;
    align-items: start;
}

.almanac-slide { display: none; }
.almanac-slide.is-active {
    display: contents;                 /* children join the parent grid */
    animation: none;
}

/* --- left column: kind, year, person ------------------------------------- */
.almanac-meta {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding-right: 22px;
    border-right: 1px solid rgba(255, 255, 255, .13);
    min-height: 76px;
    /* Spans both text rows, otherwise it stretches row 1 and leaves a gap
       between the title and the paragraph beside it. */
    grid-row: 1 / span 2;
    align-self: stretch;
}

.almanac-kind {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--acc-band, rgba(255, 255, 255, .18));
    border-radius: 999px;
    padding: 4px 13px;
}

.almanac-year {
    font-family: var(--celt-font-data);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    letter-spacing: -.02em;
}

.almanac-who {
    font-size: .84rem;
    color: rgba(234, 242, 251, .68);
    line-height: 1.35;
}
.almanac-who::before { content: none; }

/* --- right column: the writing ------------------------------------------- */
.almanac-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 650;
    line-height: 1.28;
    letter-spacing: -.015em;
    color: #ffffff;
}

.almanac-text {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(234, 242, 251, .88);
    max-width: 78ch;
}

/* The category glyph, very quiet, as texture in the corner. */
.almanac-glyph {
    position: absolute;
    top: -14px;
    right: -6px;
    font-size: 128px;
    line-height: 1;
    color: #fff;
    opacity: .05;
    pointer-events: none;
}

/* --- footer: source + dots ----------------------------------------------- */
.almanac-foot {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

.almanac-source {
    font-size: .74rem;
    letter-spacing: .04em;
    color: rgba(234, 242, 251, .55);
}

.almanac-dots { display: inline-flex; gap: 7px; flex-wrap: wrap; }

.almanac-dot {
    width: 7px; height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .26);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.almanac-dot:hover { background: rgba(255, 255, 255, .55); }
.almanac-dot.is-active { background: var(--celt-cyan); transform: scale(1.4); }
.almanac-dot:focus-visible { outline: 2px solid var(--celt-cyan); outline-offset: 3px; }

/* A hairline draining over the dwell time, so the change is expected rather
   than sudden. */
.almanac-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    overflow: hidden;
}
.almanac-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--celt-cyan), rgba(92, 196, 239, .25));
}
.almanac:hover .almanac-progress-fill { animation-play-state: paused; }

@keyframes almanac-drain { from { width: 100%; } to { width: 0; } }

/* --- category accents ------------------------------------------------------
   Only the badge and the dot change colour; the band stays brand navy so the
   page does not shift character every thirty seconds. */
.almanac-slide.is-milestone { --acc-band: #b8862c; }
.almanac-slide.is-history   { --acc-band: #2f6fb3; }
.almanac-slide.is-method    { --acc-band: #1f8a6d; }
.almanac-slide.is-person    { --acc-band: #7a5cb8; }
.almanac-slide.is-fact      { --acc-band: #0f8fb8; }
.almanac-slide.is-news      { --acc-band: #c2543f; }

/* --- adaptive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .almanac { padding: 20px 18px 16px; border-radius: 12px; }
    /* One column, so the desktop row assignments have to be undone as well —
       leaving .almanac-meta on `1 / span 2` stacks it on top of the title. */
    .almanac-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 4px;
    }
    .almanac-meta {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 10px;
        padding-right: 0;
        border-right: 0;
        min-height: 0;
        margin-bottom: 10px;
    }
    .almanac-year { font-size: 1.05rem; }
    .almanac-title, .almanac-text { grid-column: 1; }
    .almanac-title { grid-row: 2; font-size: 1.1rem; }
    .almanac-text  { grid-row: 3; font-size: .95rem; }
    .almanac-foot  { grid-row: 4; }
    .almanac-glyph { font-size: 78px; opacity: .045; }
}

@media (prefers-reduced-motion: reduce) {
    .almanac-progress { display: none; }
}