/*
 * Cilex Team — the IA rethink (design_handoff_ia_rethink).
 *
 * ONE INK TABLE, EVERY CONSUMER. The prototype exports `window.IA_STATUS` and
 * both the capacity meter and the histogram beneath it read it, indexed by
 * theme. Here that table is these custom properties, and nothing re-declares a
 * status colour. Before this rule existed the meter ran blue / near-black /
 * transparent while the chart ran blue / green / light-grey — «уже одобрено»
 * was two different colours sixty pixels apart, and «работают» had no fill at
 * all, so a real quantity read as "nothing here".
 *
 *   --ia-pend   ждут решения      --ia-book   уже одобрено
 *   --ia-empty  работают          --ia-on-book  ink for text ON the approved fill
 *
 * `--ia-on-book` exists because the palette's on-blue ink, borrowed for the
 * GREEN fill, gives white on #478f68 = 3.89:1 — under the 4.5:1 that small bold
 * text needs. A near-black green clears it at 4.65:1 and still reads as family.
 */
:root {
    --ia-pend: #2077ad;
    --ia-book: #478f68;
    --ia-empty: #f1f4f6;
    /* The pointer hairline. Dark enough to read over the pale empty track,
       soft enough not to compete with the yellow `is-hi` marker. */
    --ia-cur-edge: #64748b;
    --ia-on-book: #0d1f16;

    /* PEAK / overlap red, from CT() in ia-histograms.jsx. */
    --ia-overlap: #b4232a;
    --ia-overlap-soft: #f7d7d9;
    --ia-pale: #cfe4f5;
    /* The weekend/holiday wash inside the chart: an empty track that is not a
       working day, so a short column there is "nobody was expected" rather
       than "nobody came". */
    --ia-we: #eaeef1;

    /* ACTION colours. Deliberately NOT the status inks above.
       Primary action = Cilex Pro blue. Green belongs to «уже одобрено» and to
       nothing else: a green «Одобрить» button and the green state it produces
       would be the same colour by accident, so the button would look like the
       status it is about to create. */
    --ia-primary: #2489c5;
    --ia-on-primary: #ffffff;
    --ia-danger: #b3261e;

    --ia-ink: #16202a;
    --ia-ink-soft: #5b6b7a;
    --ia-line: #e3e9ee;
    --ia-surface: #ffffff;
    --ia-surface-2: #f7f9fb;
    --ia-brand: #2489c5;
}

.dark {
    --ia-pend: #63b4e4;
    --ia-book: #5f9e7a;
    --ia-empty: #1a222a;
    --ia-cur-edge: #94a3b8;
    --ia-on-book: #08131b;

    --ia-overlap: #e8767c;
    --ia-overlap-soft: #45222a;
    --ia-pale: #1c3d55;
    --ia-we: #1b242c;

    --ia-primary: #63b4e4;
    --ia-on-primary: #08131b;
    --ia-danger: #e8767c;

    --ia-ink: #e6edf3;
    --ia-ink-soft: #93a4b3;
    --ia-line: #263039;
    --ia-surface: #131b22;
    --ia-surface-2: #0e151b;
}

.ia-today,
.ia-people,
.ia-settings {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    color: var(--ia-ink);
}

/* ------------------------------------------------------------------ header */

.ia-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ia-head__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.ia-head__dateline {
    margin: 0.15rem 0 0;
    color: var(--ia-ink-soft);
    font-size: 0.875rem;
}

.ia-head__sep { margin: 0 0.35rem; opacity: 0.5; }

.ia-head__actions { display: flex; gap: 0.5rem; }

/* ------------------------------------------------------------- empty state */

.ia-empty {
    border: 1px dashed var(--ia-line);
    border-radius: 0.75rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--ia-surface);
}

.ia-empty__mark {
    font-size: 1.5rem;
    color: var(--ia-book);
    margin-bottom: 0.5rem;
}

.ia-empty__title { margin: 0; font-weight: 600; }

.ia-empty__body { margin: 0.35rem 0 0; color: var(--ia-ink-soft); font-size: 0.875rem; }

/* ------------------------------------------------------------- month panel */

.ia-panel {
    background: var(--ia-surface);
    border: 1px solid var(--ia-line);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* NEVER wraps. `flex-wrap: wrap` was survivable at full width and broke the
   moment a panel became a grid column: the meter grew past the free space and
   pushed the two action glyphs onto a line of their own, so the tick that
   walks the whole month sat orphaned under the header it belongs to. The month
   block and the glyphs are fixed-size; the identity block in the middle is the
   only thing allowed to give, and `min-width: 0` is what lets it. */
.ia-panel__head {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    flex-wrap: nowrap;
}

/* ── month block ────────────────────────────────────────────────────────────
   The window IS the panel's identity — two panels for the same department
   differ only by WHEN they are. So the month is not a caption beside the
   name: it is a calendar block, the largest type in the header, read first.
   The text beside it is the DEPARTMENT, never the month again. */
.ia-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 5px 9px 6px;
    border-radius: 8px;
    background: var(--ia-surface);
    border: 1px solid var(--ia-line);
    text-align: center;
    line-height: 1;
    flex: none;
}

.ia-month--wide { min-width: 88px; }

/* Red border when the peak day costs half the department or more. */
.ia-month.is-heavy { border-color: var(--ia-overlap); }

.ia-month__short {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ia-primary);
    white-space: nowrap;
}

.ia-month.is-heavy .ia-month__short { color: var(--ia-overlap); }

.ia-month__days {
    font-size: 11px;
    font-weight: 650;
    color: var(--ia-ink-soft);
    margin-top: 3px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ia-month__yr { opacity: 0.75; }

/* ── header meter ──────────────────────────────────────────────────────────
   ONE CELL PER HEAD, filled by the PEAK DAY's real split — a different
   graphic from the chart below, not a smaller copy of it. Deriving it from
   cluster totals is wrong by construction: the request list spans the whole
   window, not the people out on the worst day. */
.ia-meter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; min-width: 0; }

/* The meter's cells are the one part allowed to wrap onto a second row inside
   a narrow column — one cell per head means a 16-person department needs
   ~200px, which a half-width panel does not always have. */
.ia-meter__cells { flex-wrap: wrap; row-gap: 2px; }

.ia-meter__cells { display: flex; gap: 2px; flex: 0 0 auto; }

.ia-meter__cell {
    width: 11px;
    height: 9px;
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.ia-meter__cell--pend { background: var(--ia-pend); }
.ia-meter__cell--book { background: var(--ia-book); }
.ia-meter__cell--empty { background: var(--ia-empty); border-color: var(--ia-line); }

.ia-meter__num {
    font-size: 11.5px;
    color: var(--ia-ink-soft);
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ia-meter__num b { font-size: 13.5px; font-weight: 800; }
.ia-meter__num.is-hot { color: var(--ia-overlap); font-weight: 750; }
/* Truncates rather than overflowing: this is the longest string in the meter
   row and the row is fixed-height, so in a narrow column it has to be the part
   that gives. The numbers beside it never shrink. */
.ia-meter__at {
    font-size: 10.5px;
    color: var(--ia-ink-soft);
    opacity: 0.85;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── «Ёмкость» capacity chart ──────────────────────────────────────────────
   One column per day, one cell per person, column height = HEADCOUNT.
   Fixed 50px body + 14px axis so charts line up across panels. */
.ia-chart { margin-top: 10px; }

.ia-chart__body {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 50px;
    cursor: crosshair;
}

.ia-chart__col {
    flex: 1 1 0;
    min-width: 2px;
    display: flex;
    flex-direction: column-reverse;
    gap: 1px;
    height: 100%;
}

.ia-chart__col:hover { background: var(--ia-surface-2); }

.ia-chart__cell { flex: 1 1 0; border-radius: 0.5px; min-height: 2px; }
.ia-chart__cell--pend { background: var(--ia-pend); }
.ia-chart__cell--book { background: var(--ia-book); }
.ia-chart__cell--peak { background: var(--ia-overlap); }
.ia-chart__cell--empty { background: var(--ia-empty); }
.ia-chart__cell--we { background: var(--ia-we); }

.ia-chart__axis {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    height: 14px;
    font-size: 10px;
    color: var(--ia-ink-soft);
    font-variant-numeric: tabular-nums;
}

.ia-chart__mid {
    flex: 1 1 auto;
    text-align: center;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ia-chart__mid.is-hot { color: var(--ia-overlap); }
.ia-chart__edge { flex: 0 0 auto; }
.ia-chart__head {
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    margin-left: 0.25rem;
}

/* An inline SVG arrow, because the UI font has no U+2195 (↕) and rendered it
   as a tofu box in the axis of every panel. */
.ia-chart__headico { width: 0.625rem; height: 0.625rem; flex: none; }

/* ------------------------------------------------------------- region pin */

/* An inline SVG with no width/height attributes and no CSS rule does not fall
   back to "small" — it fills its container. The pin previously WAS the text
   «◉», which needed no sizing, so replacing it with an SVG left it unbounded
   and it grew to the width of the panel header. Any icon this file introduces
   needs an explicit box, which is what the two rules below guarantee. */
.ia-pin {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    flex: 0 0 auto;
    font-size: 0.6875rem;
    color: var(--ia-ink-soft);
    white-space: nowrap;
}

.ia-pin__ico { width: 0.75rem; height: 0.75rem; flex: none; }

/* Belt and braces: every icon this stylesheet owns is bounded even if its own
   rule is ever dropped again. Without this the failure mode is not a slightly
   wrong size — it is a full-width graphic that destroys the layout. */
.ia-today svg { max-width: 100%; max-height: 2rem; }

/* ------------------------------------------------ scope tabs + column count */

/* Past months are a DESTINATION. The counts are readable before anyone commits
   to looking, and choosing «Прошедшие» never lengthens the live list. */
.ia-scope {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin: 0.375rem 0 0.375rem;
}

.ia-scope__tabs { display: inline-flex; gap: 0.125rem; padding: 0.125rem; border-radius: 0.5rem; background: var(--ia-surface-2); }

.ia-scope__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    height: 1.625rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--ia-ink-soft);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ia-scope__tab.is-on { background: var(--ia-surface); color: var(--ia-ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); }
.ia-scope__tab b { font-weight: 750; font-variant-numeric: tabular-nums; }
.ia-scope__tab:disabled { opacity: 0.4; cursor: default; }

.ia-scope__note { font-size: 11.5px; color: var(--ia-ink-soft); margin: 0 0 0.375rem; }

.ia-cols { display: inline-flex; gap: 0.125rem; padding: 0.125rem; border-radius: 0.375rem; background: var(--ia-surface-2); margin-left: auto; }

.ia-cols__btn {
    width: 1.625rem;
    height: 1.25rem;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--ia-ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ia-cols__btn.is-on { background: var(--ia-surface); color: var(--ia-ink); }
.ia-cols__btn svg { width: 0.9375rem; height: 0.75rem; }

/* `repeat(2, minmax(0, 1fr))`, never `auto-fit`: auto-fit collapses to a single
   track at narrow widths, which makes both modes render identically and the
   toggle look broken. `minmax(0, ...)` is what lets a panel's overflowing Gantt
   scroll inside its own column instead of widening the track. */
.ia-clusters { display: grid; gap: 0.625rem; align-items: start; margin-bottom: 1rem; }
.ia-clusters.is-one { grid-template-columns: 1fr; }
.ia-clusters.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .ia-clusters.is-two { grid-template-columns: 1fr; }
}

/* The panel must NOT carry a column span of its own — one did, and it silently
   overrode the template: the grid reported two tracks while every panel
   measured the full row. */
.ia-clusters__cell { min-width: 0; grid-column: auto; }
.ia-clusters__cell.is-past { opacity: 0.82; }

/* --------------------------------------------------------------- glyph acts */

/* The middle block is the ONLY flexible one in the header row: the month block
   and the glyph pair are both fixed-size, so without `min-width: 0` here the
   ident block refuses to shrink below its content and forces a wrap. */
.ia-panel__ident { flex: 1 1 auto; min-width: 0; }
.ia-panel__title { display: flex; align-items: center; gap: 0.4375rem; min-width: 0; flex-wrap: wrap; }

.ia-panel__glyphs { display: flex; gap: 0.375rem; flex: none; }

/* Glyph buttons carry a symbol, never a word: the labels they replaced
   («Развернуть» / «Одобрить группу») wrapped or overflowed at this size in
   Russian, and a wrapped button in a header row breaks the whole line. */
.ia-glyph {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid var(--ia-line);
    background: var(--ia-surface);
    color: var(--ia-ink);
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ia-glyph:hover { background: var(--ia-surface-2); }

/* The pictogram, at a fixed size regardless of the button's font metrics. A
   text «−» rendered at whatever weight the UI font happened to give it, which
   at 2rem square was a hairline nobody could read as "collapse". */
.ia-glyph__ico { width: 0.875rem; height: 0.875rem; display: block; }

.ia-glyph.is-open .ia-glyph__ico { transform: rotate(180deg); }
.ia-glyph__ico { transition: transform 0.16s; }

@media (prefers-reduced-motion: reduce) {
    .ia-glyph__ico { transition: none; }
}

.ia-glyph--primary {
    background: var(--ia-primary);
    border-color: var(--ia-primary);
    color: var(--ia-on-primary);
}

/* `.ia-glyph:hover` is (0,2,0) and `.ia-glyph--primary` is only (0,1,0), so the
   plain hover background won and repainted the primary button surface-2 grey —
   while its tick stayed `--ia-on-primary` white. The most consequential control
   on the screen became an empty box under the pointer, i.e. exactly when it was
   about to be clicked. The hover state must restate the background, not just
   add a filter. */
.ia-glyph--primary:hover {
    background: var(--ia-primary);
    border-color: var(--ia-primary);
    filter: brightness(1.05);
}

/* ------------------------------------------------------------------ avatars */

/* TWO LABELLED GROUPS, not one undifferentiated run in which some chips were
   faint for a reason the tile never stated. Awaiting first — they are why the
   panel exists — then approved-only, dimmed, behind a divider. */
/* FIXED HEIGHT. This is the only variable-height row in the header, so any
   variance in it shifts the chart below — which is what made the charts in two
   adjacent panels sit on different lines. Overflow is hidden rather than
   wrapped: the «+N» counter already says how many did not fit. */
.ia-faces {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: nowrap;
    overflow: hidden;
    height: 1.9375rem;
    margin-top: 0.5rem;
}

.ia-faces__grp { display: inline-flex; align-items: center; gap: 0.3125rem; min-width: 0; }
.ia-faces__row { display: flex; gap: 0.1875rem; }
.ia-faces__more { font-size: 10.5px; color: var(--ia-ink-soft); }

.ia-faces__lbl {
    font-size: 10px;
    color: var(--ia-ink-soft);
    white-space: nowrap;
}

.ia-faces__sep {
    width: 1px;
    height: 1rem;
    background: var(--ia-line);
    flex: none;
}

/* 23px ROUNDED SQUARES in a 3px gap, each individually hit-testable. Circles
   at 28px read as portraits and waste the row; more importantly the chip is a
   CONTROL now — hovering it marks that person in the chart — so it needs a
   pointer and a hover state that says so.

   No negative margin to overlap them, deliberately: an overlap puts each
   chip's left edge UNDER its neighbour, and the neighbour then steals the
   pointer for that strip. Cheaper to avoid by construction than to debug. */
.ia-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4375rem;
    height: 1.4375rem;
    border-radius: 0.375rem;
    background: var(--ia-surface-2);
    border: 1px solid var(--ia-line);
    font-size: 0.625rem;
    font-weight: 650;
    color: var(--ia-ink);
    letter-spacing: 0.02em;
    flex: none;
    position: relative;
}

.ia-av--sm { width: 1.5rem; height: 1.5rem; font-size: 0.5625rem; border-radius: 999px; }

/* Only the chips in the avatar row are controls; the ones in a request row or
   the out-today list are still just initials. */
.ia-faces .ia-av {
    cursor: pointer;
    transition: transform 0.1s, background 0.12s, color 0.12s, box-shadow 0.12s;
}

.ia-faces .ia-av:hover { transform: translateY(-1px); }

/* The chip takes the SAME lemon as the marker it triggers. The point of the
   pair is that you can see they are one object — in the app accent they were
   two blue things changing together, which reads as coincidence. Near-black
   ink because white on lemon is about 1.4:1. */
.ia-faces .ia-av:hover,
.ia-faces .ia-av.is-hi {
    background: var(--ia-hi-line);
    border-color: var(--ia-hi-line);
    color: var(--ia-hi-ink);
    box-shadow: 0 0 0 1px var(--ia-hi-edge);
    opacity: 1;
}

/* Dimmed = this person holds only APPROVED leave in the window. The group
   label beside them says so; the fade alone never could. */
.ia-av.is-dim { opacity: 0.45; }

/* The chip's own fill carries the highlight (above). The earlier version added
   a pulsing ring OUTSIDE the chip as well; with the chart marker now pulsing
   too, two synchronised animations on one hover read as a glitch rather than
   as emphasis. One pulses — the marker — and the chip simply lights up. */

/* ------------------------------------------------------------ overlap strip */

/* FULL WIDTH, directly under the chart. As a 104px widget parked beside the
   avatars it shared no axis with the chart above it, so the day-for-day
   reading the strip exists for — «this red cell is that tall column» — was
   impossible. Same width, same cell count, same left-to-right time axis. */
.ia-overlap { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-top: 0.5rem; }

.ia-strip {
    display: flex;
    gap: 1px;
    align-items: stretch;
    height: 8px;
    width: 100%;
}

.ia-strip__cell {
    flex: 1 1 0;
    border-radius: 1px;
    background: var(--ia-empty);
    min-width: 2px;
}

/* PALE = exactly one person away — not yet an overlap. */
.ia-strip__cell--pale { background: var(--ia-line); }

/* RED = two or more from one department. One state, one colour, in every
   panel: encoding cluster severity here would make the same legend word red
   in a busy panel and grey in a quiet one. */
.ia-strip__cell--solid { background: var(--ia-overlap); }

.ia-strip__readout {
    font-size: 10.5px;
    color: var(--ia-ink-soft);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px dotted var(--ia-line);
    align-self: flex-start;
}

.ia-strip__readout b { color: var(--ia-overlap); font-weight: 750; }

/* --------------------------------------------------------------- request row */

.ia-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }

.ia-req {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--ia-line);
    border-radius: 0.5rem;
    background: var(--ia-surface-2);
    flex-wrap: wrap;
}

.ia-req__who { display: flex; flex-direction: column; min-width: 8rem; }
.ia-req__name { font-size: 0.8125rem; font-weight: 600; }
.ia-req__dept { font-size: 0.6875rem; color: var(--ia-ink-soft); }

.ia-req__what { display: flex; flex-direction: column; min-width: 7rem; }
.ia-req__type { font-size: 0.75rem; }
.ia-req__range { font-size: 0.6875rem; color: var(--ia-ink-soft); }

.ia-req__balance {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--ia-ink-soft);
    min-width: 3.5rem;
}

.ia-req__acts { display: flex; gap: 0.375rem; margin-left: auto; flex-wrap: wrap; }

/* ----------------------------------------------------------------- urgency */

.ia-urg {
    font-size: 0.625rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ia-urg--critical { background: var(--ia-overlap-soft); color: var(--ia-overlap); border-color: var(--ia-overlap); }
.ia-urg--soon { background: transparent; color: var(--ia-ink); border-color: var(--ia-line); }
.ia-urg--normal,
.ia-urg--later { background: transparent; color: var(--ia-ink-soft); border-color: var(--ia-line); }

.ia-chip {
    font-size: 0.625rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--ia-surface-2);
    border: 1px solid var(--ia-line);
    color: var(--ia-ink-soft);
    white-space: nowrap;
}

.ia-chip--now { background: var(--ia-pend); color: #fff; border-color: var(--ia-pend); }
.ia-chip--counter { background: var(--ia-pale); color: var(--ia-pend); border-color: var(--ia-pend); }

/* ----------------------------------------------------------------- buttons */

.ia-btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.65rem;
    border-radius: 0.4rem;
    border: 1px solid var(--ia-line);
    background: var(--ia-surface);
    color: var(--ia-ink);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.ia-btn:hover { background: var(--ia-surface-2); }
.ia-btn[disabled] { opacity: 0.5; cursor: default; }

.ia-btn--ok {
    background: var(--ia-primary);
    border-color: var(--ia-primary);
    color: var(--ia-on-primary);
    font-weight: 600;
}

.ia-btn--ok:hover { filter: brightness(1.06); background: var(--ia-primary); }

/* «Другие даты» is neutral: it is neither the recommended action nor a
   destructive one, and giving it the pending blue made three coloured buttons
   compete in one row. */
.ia-btn--alt { border-color: var(--ia-line); color: var(--ia-ink); }
.ia-btn--alt:hover { background: var(--ia-surface-2); }

.ia-btn--no { border-color: var(--ia-danger); color: var(--ia-danger); background: transparent; }
.ia-btn--no:hover { background: var(--ia-overlap-soft); }

.ia-btn--ghost { color: var(--ia-ink-soft); }

/* ---------------------------------------------------------------- coverage */

.ia-cov { display: flex; flex-direction: column; gap: 0.5rem; }

.ia-cov__title,
.ia-out__title {
    font-size: 0.875rem;
    font-weight: 650;
    margin: 0.25rem 0 0;
}

.ia-cov__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--ia-line);
    border-left: 3px solid var(--ia-overlap);
    border-radius: 0.5rem;
    background: var(--ia-surface);
}

.ia-cov__mark {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--ia-overlap-soft);
    color: var(--ia-overlap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex: none;
}

.ia-cov__body { flex: 1; min-width: 0; }
.ia-cov__head { margin: 0; font-size: 0.8125rem; font-weight: 600; }
.ia-cov__rule { margin: 0.1rem 0 0; font-size: 0.6875rem; color: var(--ia-ink-soft); }
.ia-cov__dates { opacity: 0.8; }

/* -------------------------------------------------------------- out today */

.ia-out__list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.ia-out__item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.ia-out__name { font-weight: 550; }
.ia-out__type { color: var(--ia-ink-soft); font-size: 0.6875rem; }

/* -------------------------------------------------- counter sheet + wizard */

.ia-sheet,
.ia-wiz {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(10, 16, 22, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ia-sheet__panel,
.ia-wiz__panel {
    background: var(--ia-surface);
    border: 1px solid var(--ia-line);
    border-radius: 0.75rem;
    padding: 1.25rem;
    width: min(28rem, 100%);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ia-sheet__title,
.ia-wiz__title { margin: 0; font-size: 1rem; font-weight: 650; }

.ia-sheet__sub,
.ia-wiz__sub { margin: 0; font-size: 0.75rem; color: var(--ia-ink-soft); }

.ia-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; }

.ia-field input,
.ia-field textarea {
    border: 1px solid var(--ia-line);
    border-radius: 0.4rem;
    padding: 0.35rem 0.5rem;
    background: var(--ia-surface-2);
    color: var(--ia-ink);
    font-size: 0.8125rem;
}

.ia-err { color: var(--ia-overlap); font-size: 0.6875rem; margin: 0; }

.ia-sheet__acts,
.ia-wiz__acts { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 0.25rem; }

/* A segmented progress bar, one cell per request, coloured by verdict. */
.ia-wiz__bar { display: flex; gap: 2px; }

.ia-wiz__step {
    flex: 1 1 0;
    height: 0.25rem;
    border-radius: 2px;
    background: var(--ia-empty);
}

.ia-wiz__step.is-ok { background: var(--ia-book); }
.ia-wiz__step.is-no { background: var(--ia-overlap); }
.ia-wiz__step.is-defer { background: var(--ia-pale); }
.ia-wiz__step.is-now { background: var(--ia-pend); }

.ia-wiz__counter { margin: 0; font-size: 0.6875rem; color: var(--ia-ink-soft); }

.ia-wiz__facts { margin: 0.25rem 0 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ia-wiz__facts > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.75rem; }
.ia-wiz__facts dt { color: var(--ia-ink-soft); margin: 0; }
.ia-wiz__facts dd { margin: 0; font-weight: 600; }

.ia-wiz__cal { display: flex; gap: 2px; height: 1.25rem; margin-top: 0.25rem; }

/* The requested days, in place among the month's other days. */
.ia-wiz__cal .is-req { outline: 2px solid var(--ia-pend); outline-offset: -2px; }

.ia-wiz__note { margin: 0.25rem 0 0; font-size: 0.75rem; font-style: italic; color: var(--ia-ink-soft); }
.ia-wiz__sum { margin: 0; font-size: 0.8125rem; }

/* ---------------------------------------------------- build version, sidebar */

/* Reference material, not navigation: it sits at the foot of the rail, well
   below the four destinations, at a contrast that reads when looked for and
   disappears when not. Selectable, because the entire purpose is that someone
   can copy it into a bug report. */
.ia-build {
    padding: 0.5rem 0.75rem 0.625rem;
    font-size: 0.625rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    user-select: text;
}

.ia-build__v {
    color: rgb(255 255 255 / 0.32);
    transition: color 0.12s;
    cursor: default;
    white-space: nowrap;
}

.ia-build__v:hover { color: rgb(255 255 255 / 0.62); }

/* The number identifies the deploy; the SHA disambiguates a branch that
   happens to share a count. The number therefore survives every width. */
.ia-build__num { font-weight: 650; }
.ia-build__sha { opacity: 0.7; }

/* On the collapsed rail there is no room for a SHA, and the number is what
   anyone reads day to day. */
.fi-sidebar-collapsed .ia-build { padding-inline: 0.375rem; text-align: center; }
.fi-sidebar-collapsed .ia-build__sha { display: none; }

/* The rail is dark in both themes, so the ink does NOT flip with the theme —
   a token here would render near-black on near-black in light mode. */

/* ------------------------------------------------------- pointer tooltip */

/* The single floating tooltip. NEVER the native `title` attribute: that gives
   an OS box after ~1s, in a position nobody chose, unstyleable, invisible on
   touch and unusable on a 10px cell. This one follows the pointer and is the
   only tooltip in the IA.

   A CARD on the panel surface, not an inverted dark chip. The chip was fine for
   prose but cannot host a legend: «работают» is drawn in the empty-track colour,
   a near-white, which is invisible on a dark ground. One component, one look —
   a second style for legends would be a second tooltip in all but name. */
.ia-tip {
    position: fixed;
    z-index: 90;
    pointer-events: none;
    max-width: 22rem;
    padding: 0.5rem 0.5625rem;
    border-radius: 0.375rem;
    background: var(--ia-surface);
    color: var(--ia-ink);
    border: 1px solid var(--ia-line-strong, var(--ia-line));
    font-size: 0.6875rem;
    line-height: 1.35;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 0.09s ease-out;
}

.ia-tip.is-on { opacity: 1; }

/* A legend is a table of three quantities; a fixed width keeps the numbers in a
   column across every surface instead of the box breathing with the longest
   label. Prose keeps `max-width` and wraps. */
.ia-tip.is-legend { width: 12.5rem; max-width: 12.5rem; }

.ia-tip__title {
    font-size: 0.71875rem;
    font-weight: 700;
    color: var(--ia-ink);
    font-variant-numeric: tabular-nums;
}

.ia-tip__note-inline { font-weight: 500; color: var(--ia-ink-soft); }

.ia-tip__note {
    font-size: 0.65625rem;
    line-height: 1.45;
    color: var(--ia-ink-soft);
    font-weight: 500;
    margin: 0.125rem 0 0.4375rem;
}

.ia-tip__rule { height: 1px; background: var(--ia-line); margin: 0.375rem 0 0.1875rem; }

.ia-tip__row { display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.1875rem; }

/* NUMERIC zero only. `n ? 1 : .45` dims rows that legitimately carry no count
   (a name-only row passes an empty string) and renders them as disabled. */
.ia-tip__row.is-zero { opacity: 0.45; }

/* The swatch resolves to the SAME custom property the chart cell paints, so the
   legend cannot name one colour while the column draws another. */
.ia-tip__sw {
    width: 0.625rem;
    height: 0.625rem;
    flex: 0 0 auto;
    display: block;
    border-radius: 1px;
    box-sizing: border-box;
}

.ia-tip__sw--pend { background: var(--ia-pend); }
.ia-tip__sw--peak { background: var(--ia-overlap); }
.ia-tip__sw--book { background: var(--ia-book); }

/* The two pale fills get a hairline so they read as a swatch rather than as a
   hole in the card — they are the same tokens the chart uses, but the chart
   draws them against a panel, not against a tooltip. */
.ia-tip__sw--empty { background: var(--ia-empty); border: 1px solid var(--ia-line); }
.ia-tip__sw--we { background: var(--ia-we); border: 1px solid var(--ia-line); }

/* Pending on the Gantt is HOLLOW — transparent with a dashed outline — so its
   swatch is too. A solid blue square here would name a bar that is not solid. */
.ia-tip__sw--pend-ghost { background: transparent; border: 1px dashed var(--ia-pend); }

.ia-tip__label {
    font-size: 0.65625rem;
    color: var(--ia-ink-soft);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ia-tip__n {
    font-size: 0.6875rem;
    font-weight: 750;
    color: var(--ia-ink);
    font-variant-numeric: tabular-nums;
}

.ia-tip__foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.3125rem;
}

.ia-tip__foot-label { font-size: 0.65625rem; color: var(--ia-ink-soft); }

.ia-tip__foot-n {
    font-size: 0.71875rem;
    font-weight: 750;
    color: var(--ia-ink);
    font-variant-numeric: tabular-nums;
}

.ia-tip__foot-n.is-hot { color: var(--ia-overlap); }

.ia-tip__hint { font-size: 0.59375rem; color: var(--ia-ink-soft); margin-top: 0.25rem; line-height: 1.35; }

[x-cloak] { display: none !important; }

/* ------------------------------------------------- «Люди» filters + balance */

.ia-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

.ia-filters__search,
.ia-filters__select {
    border: 1px solid var(--ia-line);
    border-radius: 0.4rem;
    padding: 0.35rem 0.5rem;
    background: var(--ia-surface);
    color: var(--ia-ink);
    font-size: 0.8125rem;
}

.ia-filters__search { min-width: 12rem; }

.ia-filters__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--ia-ink-soft);
    cursor: pointer;
}

/* The balance bar reuses the approved ink: it is the same quantity the meter
   calls «уже одобрено», seen per person instead of per department. */
.ia-bal { display: flex; align-items: center; gap: 0.4rem; min-width: 8rem; }

.ia-bal__track {
    flex: 1;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--ia-empty);
    overflow: hidden;
}

.ia-bal__fill { display: block; height: 100%; background: var(--ia-book); }

.ia-bal__text {
    font-size: 0.6875rem;
    color: var(--ia-ink-soft);
    font-variant-numeric: tabular-nums;
}

.ia-access { min-width: 7rem; }

.ia-chip--on { background: var(--ia-book); color: #fff; border-color: var(--ia-book); }
.ia-chip--muted { opacity: 0.65; }

/* --------------------------------------------------------- «Настройки» tabs */

.ia-tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--ia-line); }

.ia-tabs__tab {
    border: 0;
    background: transparent;
    color: var(--ia-ink-soft);
    font-size: 0.8125rem;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.ia-tabs__tab:hover { color: var(--ia-ink); }
.ia-tabs__tab.is-on { color: var(--ia-brand); border-bottom-color: var(--ia-brand); font-weight: 600; }

.ia-set__lead { margin: 0; font-size: 0.8125rem; color: var(--ia-ink-soft); }
.ia-set__stat { margin: 0; font-size: 0.8125rem; }
.ia-set__sub { margin: 0.5rem 0 0; font-size: 0.8125rem; font-weight: 650; }

.ia-set__rule { margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.3rem; }

.ia-set__rule > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--ia-line);
    border-radius: 0.4rem;
    background: var(--ia-surface-2);
}

.ia-set__rule dt { margin: 0; color: var(--ia-ink-soft); }
.ia-set__rule dd { margin: 0; font-weight: 600; white-space: nowrap; }

/* The honest-limitation block. Amber-free on purpose: this is not a warning
   about danger, it is a statement that a control is missing (item B1). */
.ia-set__warn {
    border: 1px dashed var(--ia-line);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--ia-surface-2);
}

.ia-set__warn-title { margin: 0; font-size: 0.75rem; font-weight: 650; }
.ia-set__warn-body { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--ia-ink-soft); }

.ia-set__list { list-style: none; margin: 0.35rem 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ia-set__list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.8125rem; }

.ia-set__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.35rem; }

/* A same-department clash on THIS request's own days. Red, because red means
   overlap everywhere in this IA and nothing else. */
.ia-clash {
    font-size: 0.625rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    background: var(--ia-overlap-soft);
    color: var(--ia-overlap);
    border: 1px solid var(--ia-overlap);
    white-space: nowrap;
}

.ia-wiz__clash { color: var(--ia-overlap); }

/* ── ClusterGantt ───────────────────────────────────────────────────────────
   The expanded view. Reconstructing an overlap from «15–21 июн» against
   «22 июн – 6 июл» in your head is exactly what this replaces: one lane per
   person on a shared axis, and the collision is a shape rather than a
   calculation. */
/* ONE declared label width, read by the readout, the lane names AND the
   scanline's own `calc()`. The scanline used to take its percentage against
   the full lane row — name column included — so it sat a fixed label-width to
   the LEFT of the column it claimed to mark. Three hard-coded 132px literals
   is how those two coordinate systems drifted apart in the first place. */
.ia-gantt {
    --ia-gantt-label: 132px;
    border-top: 1px solid var(--ia-line);
    overflow-x: auto;
    padding-top: 8px;
}

.ia-gantt__inner { min-width: 460px; position: relative; }

.ia-gantt__head { display: flex; align-items: flex-end; margin-bottom: 2px; }

/* The readout is ABSOLUTE inside a fixed box: in flow it grew wider than the
   label column when filled, so the ruler and every lane shifted right the
   moment the pointer entered the chart. */
.ia-gantt__readout {
    width: var(--ia-gantt-label);
    flex: 0 0 auto;
    position: relative;
    height: 14px;
    font-size: 10px;
    font-weight: 600;
    color: var(--ia-ink-soft);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ia-gantt__readout b { font-weight: 750; color: var(--ia-ink); }
.ia-gantt__readout b.is-hot { color: var(--ia-overlap); }

.ia-gantt__ruler { display: flex; flex: 1 1 auto; }

.ia-gantt__tick {
    flex: 1 1 0;
    text-align: center;
    font-size: 8px;
    color: var(--ia-ink-soft);
    font-variant-numeric: tabular-nums;
    border-bottom: 2px solid transparent;
    cursor: default;
    min-width: 6px;
}

.ia-gantt__tick.is-we { opacity: 0.45; }

/* Today is marked in the RULER, the same grammar «График» uses. */
.ia-gantt__tick.is-today {
    color: var(--ia-primary);
    font-weight: 750;
    border-bottom-color: var(--ia-primary);
}

.ia-gantt__tick.is-sel { background: var(--ia-surface-2); color: var(--ia-ink); font-weight: 750; }

/* The pointer handler lives on THIS box, so the whole grid body is the target
   — a 6px-wide ruler cell over a 90-day window is not something a hand can
   hit. `--ia-gantt-label` is inherited from .ia-gantt and read back out in JS
   to convert a clientX into a day index. */
.ia-gantt__lanes { position: relative; cursor: crosshair; }

.ia-gantt__lane { display: flex; align-items: center; height: 22px; }

.ia-gantt__name {
    width: var(--ia-gantt-label);
    flex: 0 0 auto;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
    box-sizing: border-box;
}

.ia-gantt__track { flex: 1 1 auto; position: relative; height: 22px; }

/* Weekend/holiday wash, drawn behind the bars. */
.ia-gantt__we {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--ia-we);
    pointer-events: none;
}

.ia-gantt__bar {
    position: absolute;
    top: 4px;
    height: 14px;
    border-radius: 3px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
}

.ia-gantt__bar--book { background: var(--ia-book); color: var(--ia-on-book); border: 0; }

/* Pending is HOLLOW — transparent fill plus a dashed outline. Filling it and
   then dashing the border in the same colour made the dash invisible, so
   pending and approved read as two solid blocks. */
.ia-gantt__bar--pend {
    background: transparent;
    border: 1px dashed var(--ia-pend);
    color: var(--ia-pend);
}

/* The scanline: a full-height wash that tracks the pointer, so "who else is
   out on the 12th?" is answered by looking down one column. A wash rather
   than an opaque rail — the bars stay legible straight through it. */
/* ALWAYS MOUNTED, moved by `transform`-free left/width `calc()` on a
   transition — mounting it per hover made it appear from nowhere on the first
   move and jump between cells after. rgba rather than `opacity`, so the edges
   keep their weight while the fill stays a wash and the bars underneath stay
   legible straight through it. */
.ia-gantt__scan {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(36, 137, 197, 0.10);
    box-shadow: inset 1px 0 rgba(36, 137, 197, 0.34), inset -1px 0 rgba(36, 137, 197, 0.34);
    pointer-events: none;
    z-index: 3;
    transition: left 0.07s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .ia-gantt__scan {
    background: rgba(74, 163, 216, 0.14);
    box-shadow: inset 1px 0 rgba(74, 163, 216, 0.42), inset -1px 0 rgba(74, 163, 216, 0.42);
}

@media (prefers-reduced-motion: reduce) {
    .ia-gantt__scan { transition: none; }
}

/* ------------------------------------------- inline decisions on the bars */

/* A pending bar IS the decision. `cursor:pointer` is the affordance — without
   it the chips are something you find by accident. */
.ia-gantt__bar.is-actionable { cursor: pointer; }

/* FIXED, so the chips escape the Gantt's own horizontal scroll box, and placed
   4px to the RIGHT of the bar rather than over it. An earlier padded-card
   version read as a different control from the ✓/✗ used everywhere else. */
.ia-gantt__act {
    position: fixed;
    z-index: 600;
    display: flex;
    gap: 0.1875rem;
}

/* 20x20 inside a 22px lane. 28px dwarfs the row it belongs to. */
.ia-act {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.3125rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.18);
}

.ia-act svg { width: 0.6875rem; height: 0.6875rem; display: block; }

/* Blue fill approve, red OUTLINE decline — the same two kinds the rest of the
   IA uses, so these read as the familiar pair rather than as new controls. */
.ia-act--ok { background: var(--ia-primary); border: 1px solid var(--ia-primary); color: var(--ia-on-primary); }
.ia-act--ok:hover { filter: brightness(1.06); }

.ia-act--no { background: var(--ia-surface); border: 1px solid var(--ia-line); color: var(--ia-overlap); }
.ia-act--no:hover { background: var(--ia-overlap-soft); border-color: var(--ia-overlap); }

/* ------------------------------------------------------- Gantt legend keys */

.ia-gantt__legend {
    display: flex;
    gap: 0.8125rem;
    margin-top: 0.5rem;
    font-size: 10.5px;
    color: var(--ia-ink-soft);
    flex-wrap: wrap;
}

.ia-gantt__key { display: inline-flex; align-items: center; gap: 0.3125rem; }
.ia-gantt__swatch { width: 13px; height: 8px; border-radius: 2px; flex: none; }
.ia-gantt__swatch--book { background: var(--ia-book); }
.ia-gantt__swatch--pend { background: transparent; border: 1px dashed var(--ia-pend); }
.ia-gantt__swatch--we { background: var(--ia-we); border: 1px solid var(--ia-line); }

/* ------------------------------------- cross-highlight: one person, one hue */

/* ── the avatar → histogram highlight ─────────────────────────────────────
   Hovering a chip marks THAT PERSON'S OWN CELLS in the chart. Without it the
   chips are decoration and the histogram is anonymous: you can read that 2 of
   10 are out on the 7th but not WHICH two, which is the question the chips
   exist to answer.

   LEMON, and it is the only yellow in this design. No status claims it — blue
   is «ждут решения», green «уже одобрено», red the peak day — so the marker
   cannot be mistaken for more of the status it sits on. */
:root {
    --ia-hi-line: #ffe600;
    --ia-hi-alt: #fff3a0;
    --ia-hi-edge: rgba(45, 33, 0, 0.55);
    --ia-hi-ink: #2d2100;
}

.dark {
    --ia-hi-line: #fff200;
    --ia-hi-alt: #fffbc7;
    --ia-hi-edge: rgba(0, 0, 0, 0.6);
}

/* The marker is a CHILD box, not a restyle of the cell: the cell keeps its own
   status colour underneath, and the mark can overflow by the half-pixel that
   makes a 3.6px cell legible without changing the column's layout. */
.ia-chart__cell.is-hi::after {
    content: '';
    position: absolute;
    inset: 0 -0.5px;
    box-sizing: border-box;
    border-radius: 2px;
    /* OPAQUE, never a wash. A translucent yellow composites with whatever is
       under it, so one token renders as three colours — over the peak red it
       becomes orange, over the approved green a khaki, over blue a moss. */
    background: var(--ia-hi-line);
    border: 2px solid var(--ia-hi-line);
    /* The hairline sits OUTSIDE the yellow and is what holds the marker's
       shape through the pale phase. Without it the mark dissolves at the top
       of every pulse. */
    box-shadow: 0 0 0 1px var(--ia-hi-edge);
    animation: ia-mark-l 1.9s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
}

.dark .ia-chart__cell.is-hi::after { animation-name: ia-mark-d; }


/* ── Дежурства: the gap-filling form inside the wizard shell ─────────────
 *
 * One row per uncovered date. The date is fixed-width so the pickers form a
 * column the eye can run down — a gap of 18 days is a list to work through,
 * not a paragraph to read. */
.ia-wiz__panel--wide { max-width: 34rem; }

.ia-duty {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.75rem 0;
    /* 18 days is a real case; the list scrolls rather than pushing the
       actions off-screen, because the actions are the point of the modal. */
    max-height: 17rem;
    overflow-y: auto;
}

.ia-duty__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0.35rem;
    border-radius: 0.375rem;
}

.ia-duty__row:hover { background: var(--ia-empty); }

.ia-duty__date {
    flex: 0 0 6.6rem;
    font-variant-numeric: tabular-nums;
    color: var(--ia-muted, #64748b);
    font-size: 0.8125rem;
}

/* The weekday, quieter than the date but on the same line: every gap is a
   non-working day, so «сб» is the fact that makes the choice real. */
.ia-duty__dow { opacity: 0.65; margin-left: 0.2rem; }

.ia-duty__pick {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--ia-line);
    border-radius: 0.375rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
}

/* «Nobody available» is a DIFFERENT answer from an empty picker, and it points
   at leave or at the duty-team flag rather than at the admin's inaction. */
.ia-duty__none {
    flex: 1 1 auto;
    font-size: 0.8125rem;
    color: var(--ia-muted, #64748b);
    font-style: italic;
}

.ia-duty__bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.ia-duty__bulklabel {
    font-size: 0.75rem;
    color: var(--ia-muted, #64748b);
    margin-right: 0.15rem;
}

.ia-btn--sm { padding: 0.15rem 0.45rem; font-size: 0.75rem; }

.ia-chart__cell { position: relative; }

/* THE CELL UNDER THE POINTER.
 *
 * Applied by cellTip(), NOT by :hover. The chart hit-tests on the COLUMN
 * because a cell is ~3.6px tall with a 1px gap between rows — roughly a fifth
 * of the column is gap, so a :hover rule on the cells themselves would drop
 * the marker every time the pointer landed between two of them, which is most
 * of the time. cellTip() already computes the row from the pointer's Y, so the
 * marker rides that same calculation and can never disagree with the tooltip.
 *
 * A HAIRLINE, drawn OUTSIDE the cell (`inset: -1px`) so it does not shrink the
 * 3.6px band it surrounds — an inset border on a cell this small would eat the
 * colour it is meant to point at. No fill, no animation: the yellow `is-hi`
 * marker means «this is the person you picked», and a second filled marker
 * would compete with it. */
.ia-chart__cell.is-cur::before {
    content: '';
    position: absolute;
    inset: -1px;
    border: 1px solid var(--ia-cur-edge);
    border-radius: 2px;
    pointer-events: none;
    z-index: 3;
}

/* Between two TINTS OF THE SAME HUE, not between two hues: a jump across the
   wheel reads as two markers alternating rather than one thing breathing.
   Literal hex, not custom properties — an unregistered custom property cannot
   be interpolated, so the marker would simply sit on its first colour. */
@keyframes ia-mark-l {
    0%, 100% { background-color: #ffe600; border-color: #ffe600; }
    50% { background-color: #fff3a0; border-color: #fff3a0; }
}

@keyframes ia-mark-d {
    0%, 100% { background-color: #fff200; border-color: #fff200; }
    50% { background-color: #fffbc7; border-color: #fffbc7; }
}

@media (prefers-reduced-motion: reduce) {
    .ia-chart__cell.is-hi::after { animation: none; }
}

/* NOTHING IS DIMMED. An earlier version faded every other cell to 0.3 to make
   the marked ones stand out; that redraws the whole chart on a hover and
   destroys the density comparison the chart exists for. The marker is loud
   enough to find on its own. */

.ia-gantt__lane.is-hi { background: var(--ia-surface-2); }
.ia-req.is-hi { background: var(--ia-surface-2); }

@media (prefers-reduced-motion: reduce) {
    .ia-chart__cell { transition: none; }
}

.ia-showall {
    background: none;
    border: 0;
    color: var(--ia-primary);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 0;
    text-align: left;
}

.ia-showall:hover { text-decoration: underline; }

/* The clash chip counts COLLEAGUES. «✕ 7» read as "delete 7" / "times 7";
   the unit has to be in the chip, not only in its tooltip. */
.ia-clash {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.625rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    background: var(--ia-overlap-soft);
    color: var(--ia-overlap);
    border: 1px solid var(--ia-overlap);
    white-space: nowrap;
}

.ia-clash__glyph { width: 10px; height: 10px; flex: none; }