/* ═══════════════════════════════════════════════════════════════════════
   Page framework of the «Управління стада» (Herd management) branch (following Roman's «Події ВРХ» (Cattle events) mockup).
   Shared by all pages of the branch: breadcrumbs · title with an action on the right ·
   steps · cards · tables · two columns. Colours come from herd-theme.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── branch menu item number (01, 02, …) ── */
.nav-link .nav-num {
    flex: 0 0 auto; min-width: 17px; font-size: 11px; font-weight: 600;
    color: #c0a57f; font-variant-numeric: tabular-nums;
}
.nav-link.is-active .nav-num { color: #fff7ee; }

.hp { max-width: 1180px; }

/* The hidden attribute must win over display from classes: .hp-acard is flex,
   .hp-fields is grid, so without this rule a hidden animal card stays as an
   empty strip, and «Розширені поля» (Advanced fields) are not hidden at all.
   (The same trap as once with .modal[hidden].) */
.hp [hidden] { display: none !important; }

/* ── page header ── */
.hp-head { margin-bottom: 14px; }
/* header fields stand on one line: label on top, control below, so we
   align to the BOTTOM — otherwise a field with a label («Дата» (Date)) drifts relative
   to its neighbour (Roman 2026-09-16: "align the fields") */
.hp-titlerow { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.hp-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.hp-sel {
    height: 34px; padding: 0 30px 0 12px; border: 1px solid var(--border);
    background: var(--surface); border-radius: 9px; font: inherit; font-size: 14px;
    color: var(--text); cursor: pointer; max-width: 260px;
}
.hp-sel:focus { outline: none; border-color: var(--primary); }
.hp-sp { flex: 1; }
.hp-date { font-size: 12.5px; color: var(--text-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-link {
    border: 0; background: none; color: var(--primary); font: inherit; font-size: 13px;
    cursor: pointer; padding: 0; white-space: nowrap; text-decoration: none;
}
.hp-link:hover { text-decoration: underline; }
.hp-link.del { color: var(--danger, #b3372f); }
/* date field in the header */
.hp-datef { display: flex; flex-direction: column; gap: 3px; }
.hp-datef > span {
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute);
}
/* same height for header controls — the fields must line up at both the bottom and the top */
.hp-titlerow .hp-sel, .hp-titlerow .hp-in { height: 34px; box-sizing: border-box; }
/* the title sits on the same line as the fields */
.hp-titlerow > .hp-title { line-height: 34px; }
.hp-titlerow > .btn, .hp-titlerow > .hp-link { align-self: flex-end; }

/* ── the two parts of the event builder ── */
/* 1) event selection — a separate panel so it doesn't merge with the settings */
.eb-pick {
    display: block; margin: 14px 0 0; padding: 12px 16px 14px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.eb-sect-h {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-mute); font-weight: 600; margin-bottom: 8px;
}
/* 2) settings title — sets it apart from the list */
.eb-editor-h {
    margin: 22px 0 2px; padding-top: 16px; border-top: 2px solid var(--border);
    color: var(--text-soft);
}
.eb-editor-h span { color: var(--primary); }

/* top of the selection panel: list on the left, actions on the right */
.eb-top { display: flex; align-items: flex-start; gap: 16px; }
.eb-top .eb-list { flex: 1 1 auto; min-width: 0; margin: 0; }
.eb-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
/* autosave state instead of a «Зберегти» (Save) button */
.eb-saved { font-size: 12px; color: var(--text-mute); white-space: nowrap; min-width: 92px; text-align: right; }
.eb-saved.ok { color: var(--success, #5b7043); }
.eb-saved.bad { color: var(--danger, #b3372f); font-weight: 600; }
.eb-saved.busy, .eb-saved.wait { color: var(--text-mute); }
@media (max-width: 900px) {
    .eb-top { flex-direction: column; }
    .eb-bar { align-self: flex-end; }
}

/* warning under «Частина події» (Part of event) — the event disappears from the entry panel */
.eb-attach-warn { display: block; margin-top: 3px; font-size: 11.5px; color: var(--warn, #a8741c); }

/* label-button: looks like a field name but opens the controls */
.hp-lblbtn {
    align-self: flex-start; padding: 0; border: 0; background: none; font: inherit;
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-mute); cursor: pointer;
}
.hp-lblbtn:hover { color: var(--primary); text-decoration: underline; }
/* «Категорії подій» (Event categories) window */
.cat-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 9px; }
.cat-row {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px;
    border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.cat-row:last-child { border-bottom: none; }
.cat-row .cat-nm { font-weight: 600; }
.cat-row .cat-n { margin-left: auto; font-size: 12px; color: var(--text-mute); }
.cat-row .cat-lock { font-size: 11px; color: var(--text-mute); }
.cat-row .cat-del {
    width: 24px; height: 24px; padding: 0; border: 1px solid var(--danger, #b3372f);
    border-radius: 50%; background: var(--surface); color: var(--danger, #b3372f);
    font-size: 15px; line-height: 1; cursor: pointer;
}
.cat-row .cat-del:hover { background: var(--danger, #b3372f); color: #fff; }
.cat-add { display: flex; gap: 8px; margin-top: 12px; }
.cat-add .hp-in { flex: 1 1 auto; max-width: none; }
/* event deletion — a visible button, not a tiny link at the edge */
.eb-del-btn { color: var(--danger, #b3372f); border-color: var(--danger, #b3372f); }
.eb-del-btn:hover { background: var(--danger, #b3372f); color: #fff; }

/* list of all events: all visible at once, a click selects */
.eb-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.eb-list .eb-cat {
    width: 100%; margin: 6px 0 2px; font-size: 10px; text-transform: uppercase;
    letter-spacing: .08em; color: var(--text-mute);
}
.eb-list .eb-ev {
    height: 28px; padding: 0 12px; border: 1px solid var(--border); background: var(--surface);
    border-radius: 999px; font: inherit; font-size: 12.5px; color: var(--text-soft);
    cursor: pointer; white-space: nowrap;
}
.eb-list .eb-ev:hover { border-color: var(--primary); color: var(--primary); }
.eb-list .eb-ev.on {
    border-color: var(--primary); background: var(--primary); color: #fff7ee; font-weight: 600;
}
.eb-list .eb-ev.off { opacity: .55; text-decoration: line-through; }

/* ── strip under the title ── */
.hp-strip {
    display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 10px 0 14px;
    border-bottom: 1px solid var(--border); margin-bottom: 14px;
}

/* ── fields ── */
.hp-fl { display: flex; flex-direction: column; gap: 3px; }
.hp-fl > span {
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute);
}
.hp-in {
    height: 32px; padding: 0 10px; border: 1px solid var(--border); background: var(--surface);
    border-radius: 8px; font: inherit; font-size: 13px; box-sizing: border-box; max-width: 230px;
}
.hp-in:focus { outline: none; border-color: var(--primary); }
.hp-wide { width: 100%; max-width: none; }
.hp-req { color: var(--danger, #b3372f); }
.hp-chk {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-soft);
    cursor: pointer; padding-bottom: 6px; white-space: nowrap;
}
.hp-chk > label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
/* form field grid: as many as fit, but not narrower than 220px */
.hp-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.hp-fields > .hp-fl { flex: 0 0 calc(50% - 6px); min-width: 160px; }
.hp-fields .hp-fl { min-width: 0; }
.hp-fields .hp-in, .hp-fields select { width: 100%; max-width: none; }

/* ── step tabs ── */
.hp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: -1px; }
.hp-tab {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px;
    border: 1px solid transparent; border-bottom: 0; background: none; font: inherit;
    font-size: 13.5px; color: var(--text-mute); cursor: pointer; border-radius: 9px 9px 0 0;
}
.hp-tab b { font-weight: 600; color: var(--text-mute); }
.hp-tab:hover { color: var(--text-soft); }
.hp-tab.is-active {
    background: var(--surface); border-color: var(--border); color: var(--text); font-weight: 600;
}
.hp-tab.is-active b { color: var(--primary); }

/* ── content card ── */
.hp-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 0 10px 10px 10px; padding: 18px 20px;
}
/* Panels of the entry pages («Швидке додавання» (Quick add), «Історія тварини» (Animal history),
   «Останні події» (Recent events), and both group entry panels) — a more pronounced
   border and a light shadow, so the block edges are visible at once and the fields inside
   read as its content. */
.lg-layout .hp-card,
.hp-2col .hp-card {
    border-color: var(--border-strong, var(--border));
    box-shadow: 0 1px 2px rgba(46, 32, 21, .06);
}
.lg-layout .hp-card > .hp-sech,
.hp-2col .hp-card > .hp-sech {
    padding-bottom: 9px; margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.hp-card.hp-sub { margin-top: 14px; border-radius: 10px; }
.hp-sech { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.hp-sech h3 { margin: 0; font-size: 14.5px; }
.hp-sech .btn, .hp-sech .hp-link, .hp-sech .hp-note, .hp-sech input[type="search"] { margin-left: auto; }
/* instructions — full page width (Roman 2026-09-24: "make all instructions
   full page width"); before, 80 characters left emptiness on the right */
.hp-hint { font-size: 12.5px; color: var(--text-mute); margin: 2px 0 12px; max-width: none; }
/* «Інструкція 7.1» (Instruction 7.1) — menu page number · tab · step: it can be
   referred to in words ("see instruction 7.2.2") */
.hp-ins { display: inline-block; font-style: normal; margin-right: 8px; padding: 0 8px; border-radius: 999px;
    border: 1px solid var(--border-strong, #cdb28c); background: var(--surface-2);
    color: var(--primary); font-size: 11px; font-weight: 600; line-height: 18px;
    letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap;
    vertical-align: 1px; }
.hp-note { font-size: 12.5px; color: var(--text-mute); }
.hp-empty { padding: 14px; color: var(--text-mute); font-size: 12.5px; text-align: center; }

/* ── two columns (entry + auxiliary panel) ── */
.hp-2col {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .85fr);
    gap: 14px; align-items: start;
}
/* Divider: the user sets the column widths (herd_layout.js).
   ⚠️ The rule must live INSIDE the width media query: `:has()` weighs
   more than a bare `.hp-2col`, so on a narrow screen it overrode the
   switch to one column — the side panel collapsed to zero, and its fields
   spilled out in a column one letter wide (Roman 2026-09-16). */
@media (min-width: 1081px) {
    .hp-2col:has(> .hp-split) {
        grid-template-columns: minmax(0, var(--split-a, 1.5fr)) 0
                               minmax(280px, var(--split-b, .85fr));
    }
}
.hp-split {
    align-self: stretch; width: 7px; margin: 0 -3px; cursor: col-resize;
    border-radius: 4px; position: relative;
}
.hp-split::before {
    content: ''; position: absolute; inset: 8px 3px; border-radius: 2px;
    background: var(--border); transition: background .12s;
}
.hp-split:hover::before, .hp-split.dragging::before { background: var(--primary); }
@media (max-width: 1080px) { .hp-split { display: none; } }
@media (max-width: 1080px) { .hp-2col { grid-template-columns: 1fr; } }
.hp-colmain { display: flex; flex-direction: column; gap: 14px; }
.hp-colside { position: sticky; top: calc(var(--sticky-top, 0px) + 14px); }
/* in two columns the cards are standalone — without the "ear" from the tabs */
.hp-2col .hp-card { border-radius: 10px; }

/* ── people (access to the event) ── */
.hp-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.hp-user {
    display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
    border: 1px solid var(--border); background: var(--surface-2); cursor: pointer;
}
.hp-user.on { border-color: var(--primary); background: var(--primary-soft); }
.hp-user .ini {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2);
    border: 1px solid var(--border); color: var(--text-soft); font-size: 11.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.hp-user.on .ini { background: var(--primary); border-color: var(--primary); color: #fff; }
.hp-user .nm { font-size: 13.5px; line-height: 1.25; }
.hp-user .rl { font-size: 11.5px; color: var(--text-mute); }

/* ── tables ── */
.hp-tblwrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 9px; }
.hp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.hp-tbl th {
    font-size: 10px; text-transform: uppercase; letter-spacing: .05em; text-align: left;
    color: var(--text-mute); padding: 8px 12px; background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.hp-tbl td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.hp-tbl tr:last-child td { border-bottom: none; }
.hp-tbl th.c, .hp-tbl td.c { text-align: center; }
.hp-tbl tr.is-off td .nm { color: var(--text-mute); }
.hp-tbl tr.drag-over td { box-shadow: inset 0 2px 0 var(--primary); }
.hp-tbl .eb-drag { color: var(--text-mute); cursor: grab; user-select: none; width: 22px; opacity: .6; }
.hp-tbl .nm { font-weight: 600; cursor: pointer; }
.hp-tbl .sub { display: block; font-size: 11px; color: var(--text-mute); font-weight: 400; }
.hp-type {
    font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2);
    border: 1px solid var(--border); color: var(--text-soft); white-space: nowrap;
}
.hp-place {
    height: 26px; padding: 0 11px; border: 1px solid var(--border); background: var(--surface);
    border-radius: 999px; font: inherit; font-size: 12px; color: var(--text-soft); cursor: pointer;
    white-space: nowrap;
}
.hp-place.quick { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
/* «Хто вносить» (Who enters): the operator (a question in the form) or the program itself */
.hp-who {
    height: 26px; padding: 0 11px; border: 1px solid var(--border); background: var(--surface);
    border-radius: 999px; font: inherit; font-size: 12px; color: var(--text-mute);
    cursor: pointer; white-space: nowrap;
}
.hp-who.ask { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.eb-auto { font-size: 12.5px; color: var(--text-mute); }
/* operator field: shows what is set by default and how to change it */
.eb-defbtn {
    font: inherit; font-size: 12.5px; text-align: left; color: var(--text-mute);
    background: none; border: 0; border-bottom: 1px dashed var(--border);
    padding: 1px 0; cursor: pointer;
}
.eb-defbtn b { color: var(--text-soft); font-weight: 600; }
.eb-defbtn:hover { color: var(--primary); border-bottom-color: var(--primary); }
.eb-defbtn:hover b { color: var(--primary); }
/* parameter context menu (right click in the «Поля» (Fields) table and in the layout preview) */
.eb-ctx {
    position: fixed; z-index: 200; min-width: 226px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow); font-size: 13px;
}
.eb-ctx-h {
    padding: 4px 8px 6px; font-weight: 600; font-size: 12.5px;
    color: var(--text-soft); border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.eb-ctx-row {
    display: flex; align-items: center; gap: 8px; padding: 4px 8px;
}
.eb-ctx-row span { flex: 1 1 auto; color: var(--text-soft); }
.eb-ctx-row input {
    flex: 0 0 62px; height: 28px; padding: 0 8px; font: inherit;
    border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
    text-align: center; font-variant-numeric: tabular-nums;
}
.eb-ctx-hint { padding: 0 8px 6px; font-size: 11.5px; color: var(--text-mute); }
.eb-ctx-i {
    display: block; width: 100%; text-align: left; padding: 6px 8px;
    font: inherit; font-size: 13px; color: var(--text); background: none;
    border: 0; border-radius: 7px; cursor: pointer;
}
.eb-ctx-i:hover { background: var(--primary-soft); color: var(--primary); }
.eb-ctx-i.danger { color: var(--danger, #b3372f); }
.eb-ctx-i.danger:hover { background: rgba(179,55,47,.1); color: var(--danger, #b3372f); }
.eb-ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }
/* event name in histories — in the colour of its category */
.ev-c-repro { color: #8a4fd0; }
.ev-c-health { color: #1aa86b; }
.ev-c-move { color: #0e9aa7; }
.ev-c-prod { color: #d08700; }
.ev-c-other { color: #5b7083; }
/* the event's own colour from the Builder takes precedence over the category colour; in the dark
   theme — lightened so it reads on a dark background */
.ev-own { color: var(--evc) !important; }
html[data-theme="dark"] .ev-own { color: color-mix(in srgb, var(--evc) 60%, #fff) !important; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .ev-own { color: color-mix(in srgb, var(--evc) 60%, #fff) !important; }
}
/* label with a tooltip in the event details */
/* Explanation of a value — pops up IMMEDIATELY on hover. The browser title
   waits almost a second, so we draw our own tooltip (Roman's call). */
.ev-hint { position: relative; border-bottom: 1px dotted currentColor; }
.ev-hint::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%; bottom: 100%;
    transform: translate(-50%, -4px);
    padding: 3px 8px;
    font-size: 11.5px;
    line-height: 1.35;
    white-space: nowrap;
    /* the text colour of the theme: the glass rule (app.css) makes the background transparent — white text on it
       was invisible (Roman 2026-10-13: "the hints in the animal card are white, nothing is visible") */
    color: var(--text);
    font-weight: 400;
    font-style: normal;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    opacity: 0;
    pointer-events: none;
    z-index: 30;
}
.ev-hint:hover::after, .ev-hint:focus-visible::after { opacity: 1; }
/* a name that isn't among the parameters — visible at once in the example */
.eb-tpl-bad { margin-left: 8px; padding: 0 6px; border-radius: 999px;
    background: #fdecea; border: 1px solid #f2b8b1; color: #a33227;
    font-size: 11px; white-space: nowrap; }
/* «{@бирка}» — the value links to the animal card (Roman's idea) */
.ev-link { color: inherit; text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: rgba(0,0,0,.35); }
.ev-link:hover { color: var(--primary, #2f5fb0); text-decoration-color: currentColor; }
html[data-theme="dark"] .ev-link { text-decoration-color: rgba(255,255,255,.4); }
/* sex — by colour: blue for a bull calf, pink for a heifer calf (Roman's call) */
.sx-m { color: #2f6fd0; font-weight: 700; }
.sx-f { color: #d4547f; font-weight: 700; }
html[data-theme="dark"] .sx-m { color: #6fa8ff; }
html[data-theme="dark"] .sx-f { color: #ff92b4; }
/* containers that hold event details must not clip the tooltip */
.hp-card[data-panel="feed"], .hp-card[data-panel="feed"] .hp-tablewrap { overflow: visible; }
/* Event builder — dense: settings as sentence rows, the rarely used stuff
   in collapsible «Розширені» (Advanced) (Roman: "do the same in the event builder"). */
.eb-line { display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
    margin-bottom: 8px; padding: 5px 8px; background: var(--surface-2);
    border: 1px solid var(--border); border-left: 3px solid var(--primary);
    border-radius: 0 7px 7px 0; font-size: 12px; color: var(--text-soft); }
.eb-line select, .eb-line input[type="text"] { height: 25px; padding: 0 6px; font: inherit;
    font-size: 12px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); color: var(--text); box-sizing: border-box; max-width: 200px; }
.eb-line .eb-grow { flex: 1 1 160px; max-width: none; }
.eb-line .hp-lblbtn { height: 25px; font-size: 12px; }
.eb-chk { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* event name for formulas — monospace, in the colour of events in formulas */
.eb-en { display: inline-flex; align-items: center; gap: 4px; }
.eb-en-l { font: italic 600 13px/1 Georgia, serif; color: var(--text-mute); }
.eb-line input#ebNameEn { width: 150px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; color: #15803d; }
.eb-line input#ebNameEn::placeholder { font-family: var(--font, inherit); color: var(--text-mute); }
.eb-line input#ebNameEn.is-bad { border-color: #c2333a; box-shadow: 0 0 0 2px rgba(194, 51, 58, .15); }
html[data-theme="dark"] .eb-line input#ebNameEn { color: #6ee7a0; }
.eb-line-wrap { align-items: flex-start; }
.eb-tpl-line { align-items: center; }
/* template field — full row width, chips below it */
.eb-tpl-line #ebDetailTpl { flex: 1 1 100%; max-width: none; height: 28px; }
.eb-tpl-hint { color: var(--text-mute); font-size: 11px; }
.eb-tpl-line .eb-rc-chip { cursor: copy; }
/* ready-made expression samples — a click inserts the whole expression */
/* autocomplete in the template field — like formulas in Excel */
.eb-tpl-box { position: relative; flex: 1 1 100%; display: block; }
.eb-tpl-box #ebDetailTpl { width: 100%; }
.eb-ac { position: absolute; z-index: 60; left: 0; top: 100%; min-width: 280px;
    max-width: 460px; max-height: 240px; overflow: auto; margin-top: 2px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 9px; box-shadow: var(--shadow); padding: 4px; }
.eb-ac[hidden] { display: none !important; }
.eb-ac-hint { padding: 4px 8px; font-size: 10.5px; color: var(--text-mute); }
.eb-ac-item { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px;
    border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.eb-ac-item .k { font-weight: 600; white-space: nowrap; }
.eb-ac-item .d { flex: 1 1 auto; font-size: 11px; color: var(--text-mute);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb-ac-item.on, .eb-ac-item:hover { background: var(--primary-soft); color: var(--primary); }
.eb-ac-item.on .d, .eb-ac-item:hover .d { color: var(--primary); }
.eb-tpl-prev { flex: 1 1 100%; margin-top: 2px; font-size: 11px;
    color: var(--text-mute); font-style: italic; }
.eb-tpl-help { flex: 1 1 100%; margin-top: 3px; font-size: 10.5px;
    color: var(--text-mute); line-height: 1.45; }
.eb-tpl-help b { color: var(--text-soft); font-weight: 600; }
.eb-adv { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.eb-adv-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 0;
    border: 0; background: none; cursor: pointer; font: inherit; font-size: 11px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); }
.eb-adv-head:hover { color: var(--primary); }
.eb-adv-chev { display: inline-block; font-size: 10px; transition: transform .15s; }
.eb-adv[data-open="1"] .eb-adv-chev { transform: rotate(90deg); }
.eb-adv-note { margin-left: auto; font-weight: 500; font-size: 10.5px;
    text-transform: none; letter-spacing: 0; color: var(--text-mute); }
.eb-adv-body { padding-top: 6px; }
.eb-adv-body[hidden] { display: none !important; }
/* the «Як це побачить оператор» (How the operator will see it) layout preview — collapsible */
.eb-prev-head { display: flex; align-items: center; gap: 10px; }
.eb-prev-toggle { display: flex; align-items: center; gap: 6px; padding: 0;
    border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.eb-prev-toggle h3 { margin: 0; }
.eb-prev-chev { display: inline-block; font-size: 11px; color: var(--text-mute);
    transition: transform .15s; }
.eb-prev-wrap[data-open="0"] .eb-prev-chev { transform: rotate(-90deg); }
.eb-prev-wrap[data-open="0"] .eb-prev { display: none; }
.eb-prev-toggle:hover h3, .eb-prev-toggle:hover .eb-prev-chev { color: var(--primary); }
/* «Коло відтворення» (Reproduction cycle) and «Перевірка алгоритму» (Algorithm check) collapse the same way */
.hp-card[data-fold="0"] .eb-fold { display: none; }
.hp-card[data-fold="0"] .eb-prev-chev { transform: rotate(-90deg); }
/* error protection: states from which the event can be entered */
.eb-rc { display: inline-flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.eb-rc-chip {
    height: 23px; padding: 0 9px; border: 1px solid var(--border);
    background: var(--surface); border-radius: 999px; font: inherit;
    font-size: 11.5px; color: var(--text-soft); cursor: pointer;
}
/* fields of ONE calf — apply only inside «{приплід:"…"}»; a separate look,
   because the name may coincide with an animal parameter (calf No. ↔ animal No.) */
.eb-rc-chip.is-calf {
    border-style: dashed;
    opacity: .85;
}
.eb-rc-chip.on {
    border-color: var(--primary); background: var(--primary-soft);
    color: var(--primary); font-weight: 600;
}
.eb-x {
    border: 0; background: none; color: var(--text-mute); font-size: 14px; cursor: pointer;
    padding: 0 2px; opacity: .5;
}
.hp-tbl tr:hover .eb-x { opacity: 1; color: var(--danger, #b3372f); }
.eb-det td { background: var(--surface-2); font-size: 12.5px; }
.eb-det .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eb-det .k { color: var(--text-mute); }
.eb-det input, .eb-det select {
    height: 30px; padding: 0 10px; border: 1px solid var(--border); background: var(--surface);
    border-radius: 8px; font: inherit; font-size: 13px;
}
/* natural-width fields: no need to stretch them across the whole page */
.eb-det input { width: 240px; min-width: 0; max-width: 100%; }
.eb-det select { width: auto; min-width: 170px; max-width: 260px; }
.eb-det .row > .k:last-child { flex: 0 1 auto; }
/* action condition: «тільки якщо Днів тільності > 200» (only if Days pregnant > 200) — on a second row under the action */
.eb-det .eb-cond { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
.eb-det .eb-cond select.ec-opsel { min-width: 0; width: auto; max-width: 72px; }
.eb-ifnote { color: var(--text-mute); }
/* reference field in the event form: the value is visible but can't be changed */
.hp-in.lg-show { background: var(--surface-2); border-style: dashed; cursor: default; }
/* FIELD CARD COLOUR in the event form: field groups (money, veterinary,
   reproduction) are visible by eye. The palette is the same as in the page panels. */
.hp-fl[class*="fc-"] { border-left: 3px solid var(--fc);
    background: var(--fcbg); border-radius: 10px; padding: 7px 10px 9px; }
.hp-fl.fc-blue   { --fc:#2f5fb0; --fcbg:#f5f8fd; }
.hp-fl.fc-green  { --fc:#1aa86b; --fcbg:#f4fbf7; }
.hp-fl.fc-violet { --fc:#7c3aed; --fcbg:#f8f6fd; }
.hp-fl.fc-amber  { --fc:#b45309; --fcbg:#fdf9f3; }
.hp-fl.fc-teal   { --fc:#0e7490; --fcbg:#f2f9fb; }
.hp-fl.fc-gray   { --fc:#5b7083; --fcbg:#f7f8fa; }
/* custom colour: background — a light shade of the same colour */
.hp-fl.fc-own { --fcbg: color-mix(in srgb, var(--fc) 8%, var(--surface)); }
/* in the herd theme the background is warm — take a shade of the colour itself, so the card
   doesn't look like a white patch on beige */
body.theme-herd .hp-fl[class*="fc-"] {
    background: color-mix(in srgb, var(--fc) 7%, var(--surface));
    border-color: var(--fc); }
html[data-theme="dark"] .hp-fl[class*="fc-"] {
    background: var(--surface-2); }
.hp-who.show { border-style: dashed; }
/* coloured field tag right in the event builder table */
.eb-col { width: 14px; height: 14px; border-radius: 50%; padding: 0;
    border: 1.5px dashed var(--text-mute); background: transparent;
    margin-right: 7px; vertical-align: middle; cursor: pointer; flex: 0 0 auto; }
.eb-col:hover { box-shadow: 0 0 0 3px rgba(0,0,0,.07); }
/* event name colour in the card — an «A» in its colour next to the name in the Builder */
.eb-evcol { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border-radius: 8px;
    border: 1px dashed var(--border); background: var(--surface); cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1; text-decoration: underline 3px; text-underline-offset: 3px; }
.eb-evcol.is-own { border-style: solid; }
.eb-evcol:hover { border-color: var(--primary); }
.eb-colbox { position: absolute; z-index: 60; background: var(--surface);
    border: 1px solid var(--border); border-radius: 10px; padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.16); display: flex; flex-direction: column;
    gap: 2px; min-width: 168px; }
.eb-colopt, .eb-colown { display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: 0; padding: 5px 8px; border-radius: 7px;
    font-size: 12.5px; color: var(--text); cursor: pointer; text-align: left; }
.eb-colopt:hover, .eb-colown:hover { background: var(--surface-2); }
.eb-colopt.on { background: var(--primary-soft); font-weight: 600; }
.eb-colopt i, .eb-colown input { width: 15px; height: 15px; border-radius: 50%;
    border: 1.5px dashed var(--text-mute); flex: 0 0 auto; }
.eb-colown input { padding: 0; border-style: solid; cursor: pointer; }
/* «також проводить подію … тільки якщо …» (also posts event … only if …) — a sentence row in Advanced */
.eb-also .eb-also-if { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eb-also select.ea-opsel { min-width: 0; width: auto; max-width: 72px; }
.eb-also .k { color: var(--text-mute); }

/* ── summary preview ── */
.hp-review { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.hp-rev { border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; background: var(--surface-2); }
.hp-rev h4 {
    margin: 0 0 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-mute); display: flex; align-items: center; gap: 7px;
}
.hp-rev h4 .n {
    display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
    border-radius: 50%; background: var(--primary); color: #fff; font-size: 10px;
}
.hp-rev .li { display: flex; gap: 8px; padding: 3px 0; font-size: 13px; color: var(--text-soft); line-height: 1.4; }
.hp-rev .li b { color: var(--text); font-weight: 600; }
.hp-rev .li .v { margin-left: auto; color: var(--text); font-weight: 600; white-space: nowrap; }
.hp-rev .none { color: var(--text-mute); font-size: 12.5px; }

/* ── card footer ── */
.hp-foot {
    display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--border); flex-wrap: wrap;
}

/* ── self-check ── */
.hp-check { font-size: 13px; }
.hp-check .row { display: flex; gap: 8px; padding: 3px 0; align-items: baseline; }
.hp-check .row .m { flex: 0 0 auto; font-weight: 700; }
.hp-check .row.ok .m { color: var(--success, #5b7043); }
.hp-check .row.bad .m { color: var(--danger, #b3372f); }
.hp-check .note { color: var(--text-mute); font-size: 12px; }
.hp-verdict { font-weight: 700; padding: 4px 0 8px; }
.hp-verdict.ok { color: var(--success, #5b7043); }
.hp-verdict.bad { color: var(--danger, #b3372f); }

/* ── live layout preview of the entry form (the «Поля» (Fields) step) ── */
.eb-prev-wrap { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.eb-prev { margin-top: 8px; }
.pv-form {
    max-width: 560px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2); padding: 14px 16px;
}
.pv-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.pv-title { font-size: 15px; font-weight: 700; }
.pv-date { font-size: 11.5px; color: var(--text-mute); margin-left: auto; }
.pv-f { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.pv-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.pv-req { color: var(--danger, #b3372f); }
.pv-ctl {
    display: block; padding: 6px 10px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--surface); color: var(--text-mute); font-size: 12.5px;
}
.pv-sel { position: relative; }
.pv-grid { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; }
.pv-field { position: relative; min-width: 120px; }
@media (max-width: 620px) { .pv-grid { grid-template-columns: 1fr; } }
.pv-none { padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px;
    color: var(--text-mute); font-size: 12.5px; margin-bottom: 8px; }
.pv-adv { margin: 8px 0; font-size: 12.5px; color: var(--primary); }
.pv-birth { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--border);
    border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; background: var(--surface); }
.pv-birth .pv-ctl { border: 0; background: none; padding: 2px 0; }
.pv-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px;
    padding-top: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.pv-auto { flex: 1 1 200px; font-size: 11.5px; color: var(--text-mute); }
.pv-btn { padding: 6px 14px; border-radius: 8px; background: var(--primary);
    color: #fff7ee; font-size: 12.5px; font-weight: 600; }

/* ═══ entry page layout: the user moves the panels ═══ */
.lg-layout {
    display: grid;
    grid-template-columns: var(--lg-left, 1.5fr) var(--lg-right, .85fr);
    gap: 14px; align-items: start;
}
.lg-zone { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lg-zone-wide { grid-column: 1 / -1; }
@media (max-width: 1080px) {
    .lg-layout { grid-template-columns: 1fr; }
    .lg-zone-wide { grid-column: auto; }
}
/* column boundary */
/* hidden panels */
.lg-layout [data-panel].is-hidden { display: none; }


/* ── form layout in the builder: the panels are draggable ── */
.pv-layout { display: grid; grid-template-columns: 1.5fr .85fr; gap: 10px; }
.pv-zone {
    display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;
    gap: 10px; min-height: 60px; border-radius: 9px; padding: 4px;
    border: 1px dashed transparent;
}
.pv-zone:hover { border-color: var(--border); }
.pv-zone > .pv-panel { min-width: 200px; box-sizing: border-box; }
.pv-zone[data-zone="wide"] { grid-column: 1 / -1; }
.pv-zone.drop { border-color: var(--primary); background: var(--primary-soft); }
.pv-panel {
    border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
    padding: 8px 10px; cursor: grab;
}
.pv-panel.is-drag { opacity: .5; outline: 2px dashed var(--primary); }
.pv-panel.is-hidden { opacity: .45; }
.pv-panel.is-hidden .pv-pname { text-decoration: line-through; }
.pv-pbar {
    display: flex; align-items: center; gap: 8px; margin: -8px -10px 8px;
    padding: 5px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border);
    border-radius: 8px 8px 0 0; font-size: 11.5px;
}
.pv-grip { color: var(--text-mute); cursor: grab; }
.pv-pname { font-weight: 600; color: var(--text-soft); }
.pv-phide {
    margin-left: auto; width: 20px; height: 20px; padding: 0; border: 1px solid var(--border);
    border-radius: 50%; background: var(--surface); color: var(--text-mute);
    font-size: 11px; line-height: 1; cursor: pointer;
}
.pv-phide:hover { border-color: var(--primary); color: var(--primary); }
.pv-hint { margin-top: 8px; }
.pv-form { max-width: none; }
@media (max-width: 900px) { .pv-layout { grid-template-columns: 1fr; } }

/* column boundary in the layout + panel width */
.pv-split { align-self: stretch; width: 7px; margin: 0 -3px; cursor: col-resize; position: relative; }
.pv-split::before { content: ''; position: absolute; inset: 6px 3px; border-radius: 2px;
    background: var(--border); }
.pv-split:hover::before, .pv-split.dragging::before { background: var(--primary); }
/* width handle on the right edge of the panel */
.pv-panel { position: relative; }
.pv-wgrip {
    position: absolute; top: 0; right: 0; bottom: 0; width: 12px; z-index: 4;
    cursor: col-resize; border-radius: 0 9px 9px 0;
}
.pv-wgrip::before {
    content: ''; position: absolute; top: 10px; bottom: 10px; right: 3px; width: 3px;
    border-radius: 2px; background: var(--border); transition: background .12s;
}
.pv-wgrip:hover::before, .pv-wgrip.dragging::before { background: var(--primary); }
.pv-pbar .pv-phide { margin-left: auto; }
/* tab order number (Enter/Tab) */
.pv-no, .eb-no {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 18px; height: 18px; padding: 0; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary-strong);
    font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* in the layout the number sits in the field's corner, not on a separate row */
/* ── Form grid in the layout ─────────────────────────────────────────────
   Roman 2026-09-16: "the grid isn't visible". Cells are outlined with dashes, the row
   has faint guide columns (quarters) — you can see where a field will go and
   what share of the row it takes. */
.pv-grid.hp-fields {
    background-image: repeating-linear-gradient(to right,
        var(--border) 0 1px, transparent 1px 25%);
    background-position: 0 0; background-size: 100% 100%;
    padding: 6px 0 2px; border-radius: 8px;
}
.pv-field { position: relative; border: 1px dashed var(--border);
    border-radius: 8px; padding: 6px 8px 8px; background: var(--surface); }
.pv-field:hover { border-color: var(--primary-soft, #cfe0f5); }
.pv-fdrag { position: absolute; left: 4px; top: 4px; cursor: grab;
    font-size: 11px; line-height: 1; color: var(--text-mute); opacity: .55; }
.pv-fdrag:hover { opacity: 1; color: var(--primary); }
.pv-fdrag:active { cursor: grabbing; }
.pv-fw { position: absolute; right: 22px; top: 5px; font-size: 10px;
    color: var(--text-mute); font-variant-numeric: tabular-nums; }
.pv-field.is-drag { opacity: .45; }
.pv-field.drag-over { border-color: var(--primary); border-style: solid;
    box-shadow: inset 3px 0 0 var(--primary); }
.pv-field.pv-fixed .pv-fdrag { display: none; }   /* «Тварина» (Animal) is always first */
.pv-field > span:not(.pv-fdrag):not(.pv-fgrip):not(.pv-fw):not(.pv-no) {
    /* room for the handle on the left and for «50% ②» on the right — otherwise a long name
       overlapped the share («ОСТАННІЙ БИК (ОСІМ.), НАЗВА 30%», i.e. LAST BULL (INSEM.), NAME 30%) */
    padding: 0 46px 0 14px;
}
.pv-panel .hp-fl { position: relative; }
.pv-panel .hp-fl > .pv-no { position: absolute; right: 0; top: 0; }
.eb-no { margin-left: 6px; }
.pv-f { position: relative; }


/* panels line up in a row when they are given a width */
.lg-zone { flex-direction: row; flex-wrap: wrap;
    align-items: flex-start; align-content: flex-start; }
.lg-zone > [data-panel] { flex: 1 1 100%; min-width: 260px; box-sizing: border-box; }

/* width handle of an individual field in the layout */
.pv-fgrip {
    position: absolute; top: 0; right: -6px; bottom: 0; width: 10px; z-index: 5;
    cursor: col-resize;
}
.pv-fgrip::before {
    content: ''; position: absolute; top: 6px; bottom: 6px; right: 4px; width: 2px;
    border-radius: 2px; background: var(--border);
}
.pv-fgrip:hover::before, .pv-fgrip.dragging::before { background: var(--primary); }

/* layout = form: the controls are real, just disabled */
.pv-panel .hp-in[disabled] { background: var(--surface); color: var(--text-mute); opacity: 1; }
.pv-panel .hp-fl { gap: 3px; }
.pv-panel .hp-sech h3 { font-size: 13px; }
.pv-panel .hp-birth { margin-top: 10px; padding-top: 10px; }
.pv-panel .lg-calf, .pv-form .lg-calf { gap: 6px; }
.pv-panel .lg-calf > .hp-in, .pv-form .lg-calf > .hp-in { flex: 1 1 110px; min-width: 90px; }
.pv-panel .hp-empty { padding: 10px; }
.pv-field > .pv-no { position: absolute; right: 10px; top: 0; }

    color: var(--text-mute); margin-bottom: 5px; }

/* ═══ entry form: the field fills the allotted width ═══
   Previously .hp-in held max-width:230px, so a set field or panel width
   left emptiness on the right, and the form itself looked scattered. */
.lg-layout .hp-fl > .hp-in,
.lg-layout .hp-fl > select.hp-in,
.pv-panel .hp-fl > .hp-in { width: 100%; max-width: none; box-sizing: border-box; }

/* animal card: the field spans the full width of its panel */
.lg-layout .hp-animal .hp-ac .hp-in { width: 100%; max-width: none; }

/* denser field grid: no extra gaps between rows */
.lg-layout .hp-fields { gap: 10px 12px; }
.lg-layout .hp-fl { gap: 4px; }

/* ═══ each field is a separate cell ═══
   Roman 2026-09-16: "make the visual separation of fields clearer".
   Previously the label and the field sat on the same cream card background, and the row
   read as one continuous strip. Now the field has its own backing with a border, and
   inside it a lighter input line: you can see where one field ends and
   the next begins. */
.lg-layout .hp-fields > .hp-fl,
.lg-layout > .lg-zone .hp-card > .hp-fl {
    padding: 7px 10px 9px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2); box-sizing: border-box;
}
.lg-layout .hp-fields > .hp-fl > span,
.lg-layout > .lg-zone .hp-card > .hp-fl > span { color: var(--text-soft); font-weight: 600; }
.lg-layout .hp-fields > .hp-fl > .hp-in,
.lg-layout .hp-fields > .hp-fl > select.hp-in,
.lg-layout > .lg-zone .hp-card > .hp-fl > .hp-in {
    background: var(--surface); border-color: var(--border);
}
/* the active field is highlighted as a whole cell — you can see where the cursor is */
.lg-layout .hp-fields > .hp-fl:focus-within,
.lg-layout > .lg-zone .hp-card > .hp-fl:focus-within {
    border-color: var(--primary); background: var(--surface);
}
.lg-layout .hp-fields > .hp-fl:focus-within > span { color: var(--primary); }

/* the same for group entry: it has its own field classes (.hg-f/.hg-lbl/.hg-in),
   but the behaviour must be the same — otherwise the two entry pages
   look different. */
.hg-form .hg-f {
    padding: 7px 10px 9px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2); box-sizing: border-box; gap: 2px;
}
.hg-form .hg-f > .hg-lbl { color: var(--text-soft); font-weight: 600; }
.hg-form .hg-f > .hg-in { background: var(--surface); }
.hg-form .hg-f:focus-within { border-color: var(--primary); background: var(--surface); }
.hg-form .hg-f:focus-within > .hg-lbl { color: var(--primary); }

/* the history panel doesn't hang as an empty strip */

.lg-layout [data-panel="history"] .hp-empty { padding: 14px 12px; }

/* the note always spans the full panel width */
.lg-layout .hp-fl.hp-note-row, .lg-layout .hp-wide { width: 100%; max-width: none; }

/* default field widths by data type (overridden by manually set ones) */
.lg-layout .hp-fields > .hp-fl { flex: 0 1 auto; }
.lg-layout .hp-fl.w-xs { flex-basis: 130px; }
.lg-layout .hp-fl.w-sm { flex-basis: 170px; }
.lg-layout .hp-fl.w-md { flex-basis: 230px; }
.lg-layout .hp-fl.w-lg { flex-basis: 300px; }

/* animal — the first form field: info about it stands NEXT TO the field
   (section · lactation · status), not as a separate strip below it: the tag and name
   are already in the field itself, no point duplicating them (Roman 2026-09-20) */
.lg-animal-row { margin-bottom: 10px; align-items: flex-end; }
.lg-animal-row .hp-acard { flex: 1 1 auto; min-width: 0; padding: 0 0 7px;
    background: none; border: 0; gap: 14px; }
.lg-animal-row .hp-acard .meta { margin-left: 0; }
.lg-animal-row .hp-note { flex: 1 1 100%; }

/* offspring row — a flexible row: only this way does the set cell width work.
   (It used to be an auto-fit grid — it ignored flex and the width didn't change.) */
.lg-calf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* offspring row cells: the width is set the same way as for form fields */
/* no flex-grow: a field without a set width keeps its own instead of swallowing the row
   (otherwise the last one in the row — «кличка» (name) — ballooned to half a row) */
.lg-calf .cf-x { display: flex; flex: 0 1 160px; min-width: 90px; position: relative; }
.lg-calf .cf-x > .hp-in, .lg-calf .cf-x > .lg-in { width: 100%; max-width: none; }
.pv-panel .lg-calf .cf-x .hp-in, .pv-form .lg-calf .cf-x .hp-in { flex: 1 1 auto; }


/* ── Central animal search (herd branch header) ──────────────────
   One field for all numbers: tag, name, UIN, transponder. It sits in the
   topbar, so it doesn't eat space on the pages themselves. */
/* ── Herd branch bar: search + animal switcher ──────────────────────
   Roman 2026-09-15: search and paging through animals must be on EVERY page
   of the module, not only in the registry. The bar goes under the app header,
   above the content, and repeats the branch tone. */
.herd-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 12px;
    background: var(--surface, #fff7ee);
    border: 1px solid var(--border, #e2d3bc);
    border-left: 4px solid var(--primary, #a1481e);
    border-radius: 12px;
}
.hsearch { position: relative; }
.hsearch input {
    width: 240px; height: 36px; padding: 0 12px 0 34px; font: inherit;
    font-size: 13.5px; border-radius: 9px;
    border: 1.5px solid var(--primary-soft, var(--border));
    background: #fff; color: var(--text); outline: none; box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(46, 32, 21, .06);
}
.hsearch input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(161, 72, 30, .12);
}
.hsearch input::placeholder { color: var(--text-mute); }
.hsearch-ico {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-size: 13px; opacity: .5; pointer-events: none;
}
.hsearch-list {
    position: absolute; top: 40px; right: 0; min-width: 420px; z-index: 60;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 12px 34px rgba(46, 32, 21, .18);
    overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.hsearch-list[hidden] { display: none; }
.hs-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--surface-2);
}
.hs-row:last-child { border-bottom: 0; }
.hs-row:hover, .hs-row.hot { background: var(--surface-2); }
.hs-tag { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 54px; }
.hs-sex { font-size: 12px; }
.hs-f { color: #d6407f; }
.hs-m { color: #2f6fd0; }
.hs-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-hit {
    font-size: 11.5px; color: var(--primary); background: var(--surface-2);
    border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.hs-grp { font-size: 11.5px; color: var(--text-mute); white-space: nowrap; }
.hs-st {
    font-size: 11px; color: #8a6a4f; background: #f4e9d8;
    border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.hs-empty { padding: 12px; font-size: 12.5px; color: var(--text-mute); text-align: center; }
/* Narrow window: the field SHRINKS rather than disappears — otherwise on a laptop
   there's simply no search, and it's unclear where it went. */
@media (max-width: 1240px) { .hsearch input { width: 168px; } }
@media (max-width: 1000px) { .hsearch input { width: 120px; } }
@media (max-width: 760px) {
    .hsearch input { width: 44px; padding-left: 30px; }
    .hsearch input:focus { width: 200px; }
    .hsearch-list { min-width: 300px; }
}


/* Animal switcher «◄ № 1234 · Зірка ►» (◄ No. 1234 · Zirka ►) — the same cut as the date
   switcher (white arrows with a border, the middle a light-blue field), just an animal
   instead of the date. A click on the middle opens its card. */
/* Search suggestions open to the RIGHT of the field: in the bar it sits on the left,
   and anchoring by the right edge (from the days when search lived in the header corner)
   covered the side menu. */
.herd-bar .hsearch-list { left: 0; right: auto; }

.hnav { display: inline-flex; align-items: center; gap: 8px; }
.hnav-arw {
    width: 30px; height: 30px; line-height: 1; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface, #fff); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.hnav-arw:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.hnav-arw:disabled { opacity: .4; cursor: default; }
/* The width is FIXED: a longer name shifted the arrows, and a second click in a row
   missed the button (Roman 2026-09-16: "the width jumps and it's awkward
   to switch"). A long name is cut with an ellipsis, the arrows stay put. */
.hnav-cur {
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; padding: 0 12px;
    width: 208px; flex: 0 0 208px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; font-weight: 600; text-decoration: none;
    /* The current animal is the main thing in the bar, so it must catch the eye
       (Roman 2026-09-17). Previously the background was almost the same cream as the
       bar, and the field blended in. We don't enlarge the font: clarity comes from the white
       background, the accent border, a light shadow and the number in the accent colour. */
    color: var(--text); background: var(--surface-hi, #fff);
    border: 1.5px solid var(--primary); border-radius: 8px;
    box-shadow: 0 1px 3px rgba(46, 32, 21, .14);
    box-sizing: border-box;
}
.hnav-cur .hnav-tag { color: var(--primary); font-variant-numeric: tabular-nums; }
.hnav-cur:hover { background: var(--primary-soft); }
.hnav-cur.is-empty { font-weight: 400; color: var(--text-mute); cursor: default;
    border: 1px dashed var(--border); box-shadow: none; background: transparent; }
.hnav-scope {
    font-size: 12px; color: var(--text-mute);
    font-variant-numeric: tabular-nums;
    font-family: inherit; background: none; border: 0; padding: 4px 6px;
    border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.hnav-scope:hover { text-decoration: underline; text-underline-offset: 3px; }
.hnav-scope[hidden] { display: none; }
.hnav-scope-ch { margin-left: 5px; font-size: 10px; }
/* The «Живі · Вибулі · Усі» (Alive · Exited · All) selection list under the bar (Roman 2026-10-02) */
/* The bar is sticky on a wide screen (Roman 2026-10-02): search is always at hand, and typing
   a new number at the bottom of the card doesn't scroll the page. Phone — as before: there the bar
   is two rows and would cover half the screen. app.js sets top (under the header and the trail). */
.herd-bar { position: relative; }
@media (min-width: 761px) { .herd-bar { position: sticky; top: 0; z-index: 30; } }
.hroll {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    width: min(780px, calc(100vw - 32px)); max-height: 62vh;
    display: flex; flex-direction: column;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 14px 36px rgba(46, 32, 21, .22);
    overflow: hidden;
}
.hroll[hidden] { display: none; }
.hroll-head {
    display: flex; align-items: center; gap: 6px; padding: 10px 12px 9px 14px;
    font-size: 13px; color: var(--text-soft); border-bottom: 1px solid var(--border);
}
.hroll-head b { color: var(--text); }
.hroll-x {
    margin-left: auto; width: 26px; height: 26px; border: 0; border-radius: 6px;
    background: none; color: var(--text-mute); cursor: pointer; font-size: 13px;
}
.hroll-x:hover { background: var(--surface-2); color: var(--text); }
.hroll-body { overflow-y: auto; }
.hroll-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.hroll-t th {
    position: sticky; top: 0; z-index: 1; background: var(--surface-2);
    padding: 6px 10px; text-align: left; font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute);
}
.hroll-t td { padding: 6px 10px; border-top: 1px solid var(--surface-2); white-space: nowrap; }
.hroll-t td.t { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.hroll-t td.d { font-variant-numeric: tabular-nums; }
.hroll-t tbody tr { cursor: pointer; }
.hroll-t tbody tr:hover { background: var(--primary-soft); }
.hroll-t tbody tr.is-cur { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.hroll-empty { padding: 16px; font-size: 13px; color: var(--text-mute); text-align: center; }
html[data-theme="dark"] .hroll { box-shadow: 0 14px 36px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .hroll { box-shadow: 0 14px 36px rgba(0, 0, 0, .5); } }
/* Hide the bar on this page (Roman 2026-09-29) — a button on the right; to bring it back — the magnifier in the header */
.herd-bar[hidden], .topnav-b.hbar-show[hidden] { display: none; }
/* the magnifier that brings back the hidden search bar slowly "breathes" — inviting a hover and a click
   (Roman 2026-09-30: "slowly blinking, as if it's luring you"); on hover — calm and highlighted */
.topnav-b.hbar-show { position: relative; color: var(--primary);
    animation: hbarPulse 2.6s ease-in-out infinite; }
.topnav-b.hbar-show svg { animation: hbarGlass 2.6s ease-in-out infinite; }
.topnav-b.hbar-show:hover, .topnav-b.hbar-show:focus-visible { animation: none;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent); }
.topnav-b.hbar-show:hover svg, .topnav-b.hbar-show:focus-visible svg { animation: none; }
@keyframes hbarPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent);
        background: transparent; }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 22%, transparent);
        background: color-mix(in srgb, var(--primary) 12%, transparent); }
}
@keyframes hbarGlass { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.14); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .topnav-b.hbar-show, .topnav-b.hbar-show svg { animation: none; }
    .topnav-b.hbar-show { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent); }
}
.hbar-hide {
    margin-left: auto; width: 28px; height: 28px; padding: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 7px; background: none; color: var(--text-mute); cursor: pointer;
}
.hbar-hide svg { width: 16px; height: 16px; }
.hbar-hide:hover { color: var(--primary); background: var(--primary-soft); }

html[data-theme="dark"] .herd-bar {
    background: var(--surface-2, #131c2b);
    border-color: var(--border, #24334d);
    border-left-color: var(--primary, #4f8cff);
}
html[data-theme="dark"] .hsearch input { background: var(--surface-2, #16223c); }
html[data-theme="dark"] .hnav-cur { background: var(--surface-2, #16223c); box-shadow: none; }

@media (max-width: 760px) {
    .herd-bar { padding: 8px 10px; gap: 8px; }
    .hnav-cur { width: 120px; flex-basis: 120px; }
    .hnav-scope { width: 100%; order: 5; text-align: left; }
    .hroll { width: calc(100vw - 32px); }
    .hbar-hide { order: 4; }                  /* «сховати» (hide) — in the first row, not on a separate one */
    /* not sticky here: the top offset set for the sticky stack must not shift the bar onto the formula bar / tabs */
    .herd-bar { top: auto !important; }
    .herd-bar .hsearch { flex: 1 1 140px; min-width: 140px; }
    .herd-bar .hsearch input { width: 100%; }
}


/* ── Offspring tag: number occupancy is visible at once ───────────────────
   A tag is the short tail of a long number, so a clash in the herd is quite
   possible. An extended tail is marked calmly (it's correct), while a
   manually typed occupied tag is marked as an alarm. */
.cf-tag.tag-grown, .c-tag.tag-grown {
    border-color: var(--primary); background: var(--primary-soft, #eef4fd);
}
.cf-tag.tag-busy, .c-tag.tag-busy {
    border-color: #e5484d; background: #fdecec; color: #c2333a;
}
html[data-theme="dark"] .cf-tag.tag-busy,
html[data-theme="dark"] .c-tag.tag-busy { background: #3a1f22; color: #ff9a9e; }


/* Whom to page through: in the herd, exited or all. Sits in the herd bar next to the
   animal switcher and controls the same list (Roman 2026-09-16). */
.hlive { flex: 0 0 auto; }
.hlive .seg-btn { padding: 4px 10px; font-size: 12.5px; }
@media (max-width: 900px) { .hlive .seg-btn { padding: 4px 7px; font-size: 11.5px; } }


/* ── Selection reference list ────────────────────────────────────────────────
   A person lives in ONE list («Ветеринари» (Veterinarians)), while reference lists for a
   specific job only mark who belongs there — and may overlap
   (Roman 2026-09-16). */
.rf-src { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 0 10px; font-size: 12.5px; color: var(--text-soft); }
.rf-src select { height: 30px; width: auto; max-width: 280px; flex: 0 0 auto; }
.rf-srchint { font-size: 12px; color: var(--text-mute); }
.rf-pick { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 10px; }
.rf-p { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); font-size: 13px; }
.rf-p:hover { border-color: var(--primary); }
.rf-p.on { border-color: var(--primary); background: var(--primary-soft, #eef4fd); }
.rf-p input { margin: 0; }
.rf-pnote { font-size: 11.5px; color: var(--text-mute); }

/* The «Ветеринари» (Veterinarians) tab — the shared list of people.
   The list is short (surname + note), so the panel is kept narrower than the
   page and the rows compact — a two-field table stretched across the whole window
   looked empty (Roman's call 2026-09-16). */
.vt-panel { max-width: 860px; }
#vtBox { padding: 4px 14px 14px; }
.vt-tbl { font-size: 12.5px; }
.vt-tbl th { padding: 5px 8px; }
.vt-tbl td { padding: 4px 8px; }
.vt-tbl .rf-in { height: 26px; font-size: 12.5px; }
.vt-tbl .vt-c { width: 78px; }
.vt-tbl .vt-nm { width: 210px; }
.vt-tbl .vt-nt { width: 200px; }
.vt-tbl .vt-onc { width: 62px; }
.vt-tbl .vt-xc { width: 34px; }
.vt-used { white-space: normal; }
.vt-tag { display: inline-block; margin: 1px 4px 1px 0; padding: 1px 8px;
    font-size: 11px; border-radius: 999px;
    background: var(--surface-2); color: var(--text-soft); }
.vt-tbl tr.is-off { opacity: .55; }

/* Add row — fields of their own width, the button next to them and on one row. */
.vt-newrow { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.vt-newrow .vt-ncode { flex: 0 0 78px; }
.vt-newrow .vt-nlabel { flex: 0 1 210px; }
.vt-newrow .btn { flex: 0 0 auto; white-space: nowrap; }


/* ── Herd bar — DARK, matching the side menu ─────────────────────────
   Roman 2026-09-17: "the whole panel, so it catches the eye". On a cream
   page a light bar with a thin border got lost among the panels. A dark background
   (the branch menu colour) immediately separates the animal search and paging tool
   from the page content and ties it to navigation. The fields stay light —
   they're most visible on a dark background. Only the light herd theme: in the app's
   dark theme the bar is contrasting anyway. */
html:not([data-theme="dark"]) body.theme-herd .herd-bar {
    --bar-bg: #3a2a1d;
    --bar-line: rgba(255, 247, 238, .16);
    --bar-text: #f4e9d8;
    --bar-mute: #cdb28c;
    background: var(--bar-bg);
    border: 1px solid #2e2015;
    border-left: 4px solid var(--primary);
    box-shadow: 0 4px 14px rgba(46, 32, 21, .22);
}
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hsearch input {
    border-color: transparent; background: #fff7ee;
}
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hsearch input:focus {
    border-color: #e0915f; box-shadow: 0 0 0 3px rgba(224, 145, 95, .30);
}
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hsearch-ico { opacity: .6; }
/* «Живі · Вибулі · Усі» (Alive · Exited · All) */
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hlive {
    background: rgba(255, 247, 238, .08); border-color: var(--bar-line);
}
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hlive .seg-btn { color: var(--bar-text); }
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hlive .seg-btn:hover:not(.is-active) {
    background: rgba(255, 247, 238, .10);
}
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hlive .seg-btn.is-active {
    background: #fff7ee; border-color: #fff7ee; color: var(--primary);
}
/* arrows */
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hnav-arw {
    background: rgba(255, 247, 238, .08); border-color: var(--bar-line); color: var(--bar-text);
}
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hnav-arw:hover:not(:disabled) {
    background: rgba(255, 247, 238, .16); border-color: #fff7ee; color: #fff;
}
/* current animal — a light field with an accent-coloured number */
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hnav-cur {
    background: #fff7ee; border-color: #fff7ee; box-shadow: none;
}
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hnav-cur:hover { background: #fff; }
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hnav-cur.is-empty {
    background: transparent; border: 1px dashed var(--bar-line); color: var(--bar-mute);
}
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hnav-scope { color: var(--bar-mute); }
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hnav-scope:hover { color: #fff; }
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hbar-hide { color: var(--bar-mute); }
html:not([data-theme="dark"]) body.theme-herd .herd-bar .hbar-hide:hover { color: #fff; background: rgba(255, 247, 238, .12); }


/* ── Branch popup lists: filter values, parameter picker, «⚙ Колонки» (Columns) ──
   Shared by group entry and the animal registry (herd_colpicker.js). */
.hf-pop{position:absolute; z-index:60; min-width:220px; max-width:320px; padding:6px;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    box-shadow:var(--shadow-lg, 0 8px 32px rgba(0,0,0,.18))}
.hf-poplist{max-height:320px; overflow:auto}
.hf-opt{display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px;
    font-size:13px; cursor:pointer}
.hf-opt:hover{background:var(--surface-2)}
.hf-opt .hf-calc{margin-left:auto; font-style:normal; font-size:11px; color:var(--text-mute)}
.hf-popfoot{display:flex; justify-content:flex-end; padding:6px 4px 2px;
    border-top:1px solid var(--border); margin-top:4px}
.hf-q{width:100%; height:30px; box-sizing:border-box; padding:0 9px; margin-bottom:6px;
    border:1px solid var(--border); border-radius:7px; background:var(--surface-2);
    font:inherit; font-size:13px}
.hf-q:focus{outline:none; border-color:var(--primary); background:var(--surface)}
.hf-sec{padding:7px 8px 3px; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-mute); font-weight:600}
.hf-none{padding:10px 8px; color:var(--text-mute); font-size:12.5px}
.hf-poptitle{padding:4px 8px 6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-mute); font-weight:600}
.hg-mini{height:24px; padding:0 10px; border:1px solid var(--border); background:var(--surface);
    border-radius:999px; font:inherit; font-size:12px; color:var(--text-soft); cursor:pointer}
.hg-mini:hover{border-color:var(--primary); color:var(--primary)}
.hg-mini.on{border-color:var(--primary); background:var(--primary-soft); color:var(--primary)}


/* ── Animal filters (herd_filters.js): group entry and calendar ── */
/* filters the person builds themselves: each is a separate cell with the parameter
   name and a ✕ button, the condition under the name */
.hf-bar{display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; margin:4px 0 8px}
.hf-list{display:contents}
.hf{display:flex; flex-direction:column; gap:3px; padding:5px 8px 7px; min-width:130px;
    border:1px solid var(--border); border-radius:10px; background:var(--surface-2);
    box-sizing:border-box}
.hf.is-on{border-color:var(--primary); background:var(--primary-soft)}
.hf-head{display:flex; align-items:center; gap:6px; font-size:10px; text-transform:uppercase;
    letter-spacing:.05em; color:var(--text-soft); font-weight:600}
.hf-head > span{flex:1; white-space:nowrap}
.hf.is-on .hf-head{color:var(--primary)}
.hf-x{border:0; background:none; padding:0 2px; font-size:12px; line-height:1; cursor:pointer;
    color:var(--text-mute); opacity:.55}
.hf:hover .hf-x{opacity:1}
.hf-x:hover{color:var(--danger,#b3372f)}
.hf-pick{height:28px; padding:0 26px 0 9px; border:1px solid var(--border); border-radius:7px;
    background:var(--surface); font:inherit; font-size:12.5px; color:var(--text); cursor:pointer;
    text-align:left; max-width:230px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    position:relative}
.hf-pick::after{content:'▾'; position:absolute; right:8px; top:50%; transform:translateY(-50%);
    color:var(--text-mute); font-size:11px}
.hf-range{display:flex; align-items:center; gap:4px}
.hf-range i{font-style:normal; color:var(--text-mute)}
.hf-op{height:28px; padding:0 4px; border:1px solid var(--border); border-radius:7px;
    background:var(--surface-2); font:inherit; font-size:12.5px; color:var(--text); cursor:pointer;
    flex:0 0 auto; width:auto; max-width:96px}
.hf-range .hf-pick{flex:0 0 auto}
.hf.is-list{align-self:stretch}
.hf-cnt{font-size:11.5px; color:var(--text-mute); align-self:center; white-space:nowrap}
.hf-checks{display:flex; flex-direction:column; gap:0; max-height:132px; overflow:auto; margin-top:3px;
    padding-right:2px}
.hf-ck{display:flex; align-items:center; gap:6px; padding:1px 4px; border-radius:5px; font-size:12.5px;
    cursor:pointer; white-space:nowrap; color:var(--text-soft)}
.hf-ck:hover{background:var(--surface)}
.hf-ck.on{color:var(--text); font-weight:600}
.hf-ck input{margin:0; accent-color:var(--primary)}
.hf-op:focus{outline:none; border-color:var(--primary)}
.hf-in{height:28px; padding:0 7px; border:1px solid var(--border); border-radius:7px;
    background:var(--surface); font:inherit; font-size:12.5px; box-sizing:border-box;
    flex:0 0 70px; width:70px; max-width:70px}
.hf.is-date .hf-in{flex-basis:128px; width:128px; max-width:128px}
.hf-in.hf-text{flex-basis:150px; width:150px; max-width:150px}
.hf-in:focus, .hf-pick:focus{outline:none; border-color:var(--primary)}
.hf-addbtn{align-self:center; height:28px; padding:0 12px; border:1px dashed var(--primary);
    border-radius:999px; background:transparent; color:var(--primary); font:inherit;
    font-size:12.5px; cursor:pointer; white-space:nowrap}
.hf-addbtn:hover{background:var(--primary-soft)}
.hf-add{display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border:0;
    border-radius:6px; background:none; font:inherit; font-size:13px; color:var(--text);
    cursor:pointer; text-align:left}
.hf-add:hover{background:var(--primary-soft); color:var(--primary)}
.hf-add i{margin-left:auto; font-style:normal; font-size:11px; color:var(--text-mute)}

/* ── print preview (herd_print.js: calendar, herd work) ── */
.cl-prev{position:fixed; inset:0; z-index:200; background:rgba(20,14,8,.55); display:flex;
    align-items:center; justify-content:center; padding:16px}
.cl-prev[hidden]{display:none !important}
.cl-prevbox{width:min(1200px,100%); height:100%; display:flex; flex-direction:column;
    background:var(--surface); border-radius:10px; overflow:hidden}
.cl-prevbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px;
    border-bottom:1px solid var(--border)}
.cl-prevwarn{padding:6px 12px; font-size:12.5px; color:#c2333a; background:#fdecec;
    border-bottom:1px solid var(--border)}
.cl-prevwarn[hidden]{display:none !important}
html[data-theme="dark"] .cl-prevwarn{background:#2c1618; color:#f0a2a6}
.cl-prevbar .segmented[hidden]{display:none !important}
.cl-previnfo{font-size:12.5px; color:var(--text-soft); white-space:nowrap}
.cl-previnfo .bad{color:#c2333a; font-weight:600}
.cl-prevframe{flex:1; width:100%; border:0; background:#8a8f98}
.cl-prevf{display:flex; align-items:center; gap:5px; font-size:11px; text-transform:uppercase;
    letter-spacing:.03em; color:var(--text-mute)}
.cl-prevf select{height:26px; padding:0 6px; font:inherit; font-size:12.5px; text-transform:none;
    letter-spacing:0; color:var(--text); background:#e8f1fc; border:1px solid #cfe0f5; border-radius:8px}
.cl-prevpair{display:inline-flex; gap:4px}
.cl-prevpair button{width:26px; height:26px; border:1px solid var(--border); border-radius:8px;
    background:var(--surface); color:var(--text); cursor:pointer; font-size:12.5px}
.cl-prevpair button.on{border-color:var(--primary); color:var(--primary); background:var(--primary-soft)}

/* Parameter formula bar — colours (Builder, animal card).
   The same set as in the Builder formula bar. Roman 2026-09-19. */
.fxc { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-style:normal; }
.fxc .k { color:#101418; font-weight:600; }
.fxc .f { color:#7c3aed; }
.fxc .p { color:#1d4ed8; }
.fxc .e { color:#15803d; }
.fxc .n { color:#0e7490; }
.fxc .s { color:#b45309; }
.fxc .o { color:#c2410c; }
.fxc .b { color:#8a93a0; }
.fxc .x { color:#c2333a; text-decoration:underline wavy #e5484d; }
.fxc .v { color:var(--text-soft); font-style:italic; }
html[data-theme="dark"] .fxc .k { color:var(--text); }
html[data-theme="dark"] .fxc .f { color:#c3a4ff; }
html[data-theme="dark"] .fxc .p { color:#7fa9ff; }
html[data-theme="dark"] .fxc .e { color:#6ee7a0; }
html[data-theme="dark"] .fxc .n { color:#5fcfd8; }
html[data-theme="dark"] .fxc .s { color:#f0b35a; }
html[data-theme="dark"] .fxc .o { color:#f0a868; }
/* «як рахується» (how it's computed) tooltip above a computed value in the animal card */
.fx-tip { position:fixed; z-index:300; max-width:min(560px, 92vw); padding:7px 10px;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 10px 26px rgba(0,0,0,.16); pointer-events:none; font-size:12.5px; }
.fx-tip[hidden] { display:none !important; }
.fx-tip .fx-tip-h { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--text-mute); margin-bottom:3px; }
.fx-tip code.fxc { display:block; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12.5px;
    background:var(--surface-2); border-radius:6px; padding:3px 7px; }
.fx-tip .fx-tip-note { color:var(--text-soft); }

/* «Роботи зі стадом» (Herd work) formula language — colours (Calendar and everywhere outside
   that page): k action · w keyword · p parameter · o condition · n value */
.qfc { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-style:normal; }
.qfc .k { color:#101418; font-weight:600; }
.qfc .p { color:#1d4ed8; }
.qfc .w { color:#7c3aed; }
.qfc .o { color:#b45309; }
.qfc .n { color:#0e7490; }
.qfc .b { color:#8a93a0; }
html[data-theme="dark"] .qfc .k { color:#e9eef8; }
html[data-theme="dark"] .qfc .p { color:#7fa9ff; }
html[data-theme="dark"] .qfc .w { color:#c3a4ff; }
html[data-theme="dark"] .qfc .o { color:#f0a868; }
html[data-theme="dark"] .qfc .n { color:#5fcfd8; }
.fx-tip code.qfc { display:block; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12.5px;
    background:var(--surface-2); border-radius:6px; padding:3px 7px; }
.fx-tip code.qfc + .fx-tip-h { margin-top:6px; }

/* ── formula bar (herd_fxedit.js) — the same look as in «Роботі зі стадом» (Herd work):
   transparent field text over the coloured highlighting ── */
.fxe { position:relative; display:flex; height:36px; min-width:240px;
    background:#eef5fd; border:1px solid #8fb0d4; border-radius:8px;
    box-shadow:inset 0 1px 2px rgba(20,45,80,.07); }
.fxe:focus-within { border-color:var(--primary); background:#fbfdff;
    box-shadow:0 0 0 3px rgba(161,72,30,.14); }
.fxe.is-bad { border-color:#c2333a; }
.fxe-hl { position:absolute; inset:0; padding:0 10px; box-sizing:border-box;
    overflow:hidden; white-space:pre; pointer-events:none; letter-spacing:normal;
    font:inherit; font-size:15px; font-weight:400; line-height:34px; color:#101418; }
.fxe-hl span { font-weight:inherit; letter-spacing:inherit; }
/* error spot — a wavy underline under the same text (a layer above the highlighting) */
.fxe-err { position:absolute; inset:0; padding:0 10px; box-sizing:border-box;
    overflow:hidden; white-space:pre; pointer-events:none; letter-spacing:normal;
    font:inherit; font-size:15px; font-weight:400; line-height:34px; color:transparent; }
.fxe-err u { text-decoration:underline wavy #c2333a; text-decoration-thickness:1.5px;
    text-underline-offset:4px; }
html[data-theme="dark"] .fxe-err u { text-decoration-color:#f08a80; }
.fxe-hl .k { color:#101418; } .fxe-hl .p { color:#1d4ed8; } .fxe-hl .w { color:#7c3aed; }
.fxe-hl .o { color:#b45309; } .fxe-hl .n { color:#0e7490; } .fxe-hl .b { color:#8a93a0; }
.fxe-hl .e, .aw-hl .e, .wl-f .e { color:#15803d; }   /* event name — the same in both formula bars */
input.fxe-in, html:not([data-theme="dark"]) body.theme-herd input.fxe-in,
.fxe-in, html:not([data-theme="dark"]) body.theme-herd textarea.fxe-in {
    flex:1 1 auto; min-width:0; height:34px; padding:0 10px; box-sizing:border-box;
    resize:none; overflow:hidden; white-space:pre; display:block; min-height:0; box-shadow:none;
    background:transparent; color:transparent; caret-color:#101418; border:0;
    border-radius:8px; font:inherit; font-size:15px; font-weight:400; letter-spacing:normal;
    line-height:34px; position:relative; z-index:1; }
/* ✕ in the field — on the right, as in «Роботі зі стадом» (Herd work); leave room for it in the text */
.fxe.has-clr .fxe-hl, .fxe.has-clr .fxe-err { padding-right:32px; }
html body .fxe.has-clr input.fxe-in, html body .fxe.has-clr textarea.fxe-in { padding-right:32px; }
/* ⌄ — expand the bar (Roman 2026-10-13): left of ✕; room for both in the text */
.fxe .fxe-exp { right:29px; font-size:15px; display:inline-flex; align-items:center; justify-content:center; }
.fxe:not(.has-clr) .fxe-exp { right:5px; }
.fxe.has-exp .fxe-hl, .fxe.has-exp .fxe-err { padding-right:56px; }
html body .fxe.has-exp textarea.fxe-in { padding-right:56px; }
/* expanded: each part on a line of its own, the field grows to fit (ids/body raise it above the branch theme) */
html body .fxe.is-big { height:auto; align-items:stretch; }
html body .fxe.is-big textarea.fxe-in, html body .fxe.is-big .fxe-hl, html body .fxe.is-big .fxe-err {
    white-space:pre-wrap; overflow-wrap:anywhere; line-height:23px; padding-top:6px; padding-bottom:6px; }
html body .fxe.is-big textarea.fxe-in { height:auto; min-height:36px; overflow-y:auto; }
html body .fxe.is-big .fxe-clr { top:6px; transform:none; }
.fxe-clr { position:absolute; right:5px; top:50%; transform:translateY(-50%); z-index:3;
    width:22px; height:22px; border:0; background:none; cursor:pointer; font-size:12px;
    color:var(--text-mute); border-radius:999px; line-height:1; padding:0; }
.fxe-clr:hover { background:var(--surface-2); color:var(--text); }
.fxe-clr[hidden] { display:none !important; }
input.fxe-in:focus, html:not([data-theme="dark"]) body.theme-herd input.fxe-in:focus,
.fxe-in:focus, html:not([data-theme="dark"]) body.theme-herd textarea.fxe-in:focus {
    outline:none; background:transparent; color:transparent; box-shadow:none; }
.fxe-in::selection { background:#cfe3fb; color:#101418; }
.fxe-in::placeholder { color:#5b6470; }
.fxe-sug { position:fixed; z-index:200; max-height:320px; min-width:260px; max-width:460px;
    overflow:auto; padding:4px; background:var(--surface); border:1px solid var(--border);
    border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.18); }
.fxe-sug[hidden] { display:none !important; }
.fxe-sug div { display:flex; align-items:baseline; gap:8px; padding:4px 8px; border-radius:6px;
    font-size:12.5px; cursor:pointer; }
.fxe-sug div.on, .fxe-sug div:hover { background:var(--primary-soft, #eef4fd); }
.fxe-sug b { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px;
    font-weight:600; white-space:nowrap; }
.fxe-sug b.a { color:#101418; } .fxe-sug b.p { color:#2f5fb0; }
.fxe-sug b.w { color:#7c3aed; } .fxe-sug b.v { color:#b45309; } .fxe-sug b.e { color:#15803d; }
.fxe-sug span { color:var(--text-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fxe-sug .fxe-ex { font-style:normal; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:11.5px; }
.fxe-sug .fxe-ex .k { color:#101418; } .fxe-sug .fxe-ex .p { color:#1d4ed8; }
.fxe-sug .fxe-ex .w { color:#7c3aed; } .fxe-sug .fxe-ex .o { color:#b45309; }
.fxe-sug .fxe-ex .n { color:#0e7490; } .fxe-sug .fxe-ex .b { color:#8a93a0; }
.fxe-sug .foot { display:block; padding:4px 8px 2px; font-size:11px; color:var(--text-mute);
    cursor:default; background:none !important; }
html[data-theme="dark"] .fxe { background:var(--surface-2); border-color:#41628f; box-shadow:none; }
html[data-theme="dark"] .fxe:focus-within { background:var(--surface-2); }
html[data-theme="dark"] .fxe-hl { color:var(--text); }
html[data-theme="dark"] .fxe-in { caret-color:var(--text); }
html[data-theme="dark"] .fxe-hl .k, html[data-theme="dark"] .fxe-sug .fxe-ex .k { color:#e9eef8; }
html[data-theme="dark"] .fxe-hl .p, html[data-theme="dark"] .fxe-sug .fxe-ex .p { color:#7fa9ff; }
html[data-theme="dark"] .fxe-hl .w, html[data-theme="dark"] .fxe-sug .fxe-ex .w { color:#c3a4ff; }
html[data-theme="dark"] .fxe-hl .o, html[data-theme="dark"] .fxe-sug .fxe-ex .o { color:#f0a868; }
html[data-theme="dark"] .fxe-hl .n, html[data-theme="dark"] .fxe-sug .fxe-ex .n { color:#5fcfd8; }
html[data-theme="dark"] .fxe-hl .b, html[data-theme="dark"] .fxe-sug .fxe-ex .b { color:#8a93a0; }
html[data-theme="dark"] .fxe-hl .e, html[data-theme="dark"] .fxe-sug b.e,
html[data-theme="dark"] .aw-hl .e, html[data-theme="dark"] .wl-f .e { color:#6ee7a0; }
html[data-theme="dark"] .fxe-sug b.a { color:var(--text); }
html[data-theme="dark"] .fxe-sug b.p { color:#8fb4ff; }
html[data-theme="dark"] .fxe-sug b.w { color:#b69cff; }
html[data-theme="dark"] .fxe-sug b.v { color:#f0b35a; }