/*
 * «Производственный календарь»: theme on top of engine.css (tokens + site components only).
 * Accent: dark burgundy. #8c1d3b on white = 8.9:1, white on #8c1d3b = 8.9:1; calendar cells:
 * weekend #7a1833 on #f9e9ed = 8.9:1, transfer #6b1430 on #efcfd8 = 8.3:1, holiday white on accent = 8.9:1.
 * Dark scheme: accent #e88aa4 on #161d23 = 7.0:1, #2a0812 on accent = 7.5:1, weekend #f2b8c8 on #33202a = 9.0:1,
 * transfer #f7cdd8 on #4d2737 = 8.8:1, links #f0a3b8 = 8.6:1.
 */
:root {
    --c-accent: #8c1d3b;
    --c-link: #8c1d3b;
    --c-focus: #8c1d3b;
    --c-accent-soft: #f7e8ec;
    --c-error: #b00020;

    --cal-off-bg: #f9e9ed;
    --cal-off-text: #7a1833;
    --cal-transfer-bg: #efcfd8;
    --cal-transfer-text: #6b1430;
    --cal-paid-bg: #f1ece0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-accent: #e88aa4;
        --c-link: #f0a3b8;
        --c-focus: #f0a3b8;
        --c-accent-soft: #34202a;
        --c-on-accent: #2a0812;
        --c-error: #ff8a95;

        --cal-off-bg: #33202a;
        --cal-off-text: #f2b8c8;
        --cal-transfer-bg: #4d2737;
        --cal-transfer-text: #f7cdd8;
        --cal-paid-bg: #2a2a22;
    }
}

/* ---------- Header navigation ---------- */
.site-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.site-nav a { display: inline-block; min-height: 44px; padding: 11px 0; font-weight: 600; text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
@media (min-width: 640px) {
    .site-nav { margin-left: auto; }
}

/* ---------- Summary card ---------- */
.summary .lead { margin-bottom: 0; font-size: var(--fs-base); }
.today { margin: var(--s-3) 0 0; }
.day-card__date { white-space: nowrap; }
.result > h2:first-child { margin-top: 0; }

/* ---------- Calendar grid ---------- */
/* <div class="cal cal--sm|lg"><div class="cal__head">Пн…Вс</div><ol class="cal__grid"><li class="cal__day cal__day--{type}">… */
.cal__head, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal__grid { list-style: none; margin: 0; padding: 0; }
.cal__head { margin-bottom: 2px; font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }
.cal__head .cal__we { color: var(--cal-off-text); }
.cal__start-2 { grid-column-start: 2; }
.cal__start-3 { grid-column-start: 3; }
.cal__start-4 { grid-column-start: 4; }
.cal__start-5 { grid-column-start: 5; }
.cal__start-6 { grid-column-start: 6; }
.cal__start-7 { grid-column-start: 7; }

.cal__day {
    position: relative;
    border-radius: var(--radius-sm);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.cal--sm .cal__day { padding: 3px 0; font-size: var(--fs-sm); line-height: 1.5; }

/* Day types: colour plus a non-colour cue (fill, dot, stripes, *, bar), explained in the legend. */
.cal__day--work { background: var(--c-surface); color: var(--c-text); }
.cal__day--off { background: var(--cal-off-bg); color: var(--cal-off-text); }
.cal__day--transfer { background: var(--cal-transfer-bg); color: var(--cal-transfer-text); }
.cal__day--transfer::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cal__day--holiday { background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; }
.cal__day--paid { background: repeating-linear-gradient(135deg, var(--cal-paid-bg) 0 4px, var(--c-surface) 4px 8px); color: var(--c-text); }
.cal__day.is-short .cal__n::after { content: "*"; margin-left: 1px; font-weight: 700; }
.cal__day.is-on { box-shadow: inset 0 -3px 0 var(--c-accent); font-weight: 700; }
.cal__day.is-today { outline: 2px solid var(--c-text); outline-offset: -2px; }

/* Large month grid (month page): every cell is a ≥ 44px link. */
.cal--lg .cal__head, .cal--lg .cal__grid { gap: 4px; }
.cal--lg .cal__head { font-size: var(--fs-sm); }
.cal--lg .cal__day { border: 1px solid var(--c-border); font-size: 1.0625rem; font-weight: 600; }
.cal--lg .cal__day:not(.cal__day--work) { border-color: transparent; }
.cal--lg .cal__day a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
}
.cal--lg .cal__day a:hover { text-decoration: underline; }
.cal--lg .cal__day--transfer::after { top: 5px; right: 5px; width: 6px; height: 6px; }
@media (min-width: 640px) {
    .cal--lg .cal__day a { min-height: 64px; }
}
/* Narrow phones: the month spans the full screen width, so each cell stays ≥ 44px wide (320px → 44.9px). */
@media (max-width: 399px) {
    .cal--lg { margin-inline: calc(-1 * var(--gap)); }
    .cal--lg .cal__head, .cal--lg .cal__grid { gap: 1px; }
    .cal--lg .cal__day { border-radius: 0; }
}

/* Year: months in one column on phones, 2–3 columns on wider screens. */
.cal-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: var(--s-4) var(--s-5); }
.cal-month__title { margin: 0 0 var(--s-1); font-family: var(--font); font-size: var(--fs-base); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-2); }
.cal-month__title a { display: inline-block; padding: 10px 0; }
.cal-month__title .small { font-weight: 400; }

/* Legend */
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; padding: 0; margin: var(--s-3) 0 var(--s-4); font-size: var(--fs-sm); }
.legend li { display: flex; align-items: center; gap: var(--s-2); }
.legend__swatch { position: relative; display: inline-block; min-width: 2em; padding: 2px 4px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); text-align: center; font-variant-numeric: tabular-nums; }
.legend__swatch.is-short::after { content: "*"; font-weight: 700; }

/* ---------- Lists of days ---------- */
.day-list { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.day-list li { padding: 2px 0; border-bottom: 1px solid var(--c-border); }
.day-list a { display: inline-block; padding: 10px 0; }

/* Norms table: quarter / half-year / year rows stand out. */
.norms th[scope="row"] { color: var(--c-text); background: none; font-weight: 400; }
.norms td, .norms thead th:not(:first-child) { text-align: right; }
.norms__sub th[scope="row"], .norms__sub td { background: var(--c-surface-alt); font-weight: 600; }
.norms__total th[scope="row"], .norms__total td { background: var(--c-accent-soft); font-weight: 700; }

.chips a[aria-current] { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); }

/* Neighbour navigation (months, days) */
.month-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0; }
.month-nav .btn { flex: 1 1 auto; text-align: center; }

/* ---------- Home: tools ---------- */
.tools { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--s-3); }
.tool { display: block; height: 100%; padding: var(--s-3) var(--s-4); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); text-decoration: none; }
.tool strong { display: block; color: var(--c-link); }
.tool span { display: block; font-size: var(--fs-sm); color: var(--c-muted); }
.tool:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }

/* ---------- Calculator forms ---------- */
.calc-form { margin-top: var(--s-4); }
.calc-form__row { display: grid; gap: 0 var(--s-4); }
.calc-form input { display: block; width: 100%; min-width: 0; font-size: 1rem; }
.calc-form button { width: 100%; font-size: 1.0625rem; }
.field__error { margin: var(--s-1) 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-error); }
.field--error input { border-color: var(--c-error); }
@media (min-width: 480px) {
    .calc-form__row { grid-template-columns: 1fr 1fr; }
    .calc-form button { width: auto; }
}

/* ---------- Tap targets (≥ 44px) and legend cues ---------- */
.cal-month__title { line-height: 1.5; }
.section-head a.hint { display: inline-block; min-height: 44px; padding: 11px 0; }
.legend__swatch.is-on { box-shadow: inset 0 -3px 0 var(--c-accent); font-weight: 700; }

/* Vacation calculator: excluded days by month in a collapsible block. */
.calc-details { margin: 0 0 var(--s-4); padding: 0 var(--s-4); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.calc-details summary { min-height: 44px; padding: 11px 0; font-weight: 600; cursor: pointer; }
.calc-details > .help { margin: 0 0 var(--s-3); font-size: var(--fs-xs); color: var(--c-muted); }
.calc-form__months { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 0 var(--s-3); }
