@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-cyrillic.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-2199, U+2212, U+2215;
}

/* Светлая тема: холодная бумага графика и синие чернила */
:root {
  --paper: #f2f4f7;
  --sheet: #ffffff;
  --sunk: #e7ebf1;
  --ink: #172133;
  --ink-2: #566277;
  --rule: #d6dce6;
  --holiday: #c62f28;
  --night-hatch: repeating-linear-gradient(135deg, #172133 0 3px, transparent 3px 6px);
  --act: #172133;
  --act-text: #ffffff;
  --ring: #172133;
  --ov: #0e9384;
  --ov-ink: #ffffff;
  color-scheme: light;
}
/* Тёмная тема: ночное небо, а не просто чёрный */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d1424;
    --sheet: #162038;
    --sunk: #1d2945;
    --ink: #e9eef6;
    --ink-2: #9aa6ba;
    --rule: #2a3653;
    --holiday: #ff7b6e;
    --night-hatch: repeating-linear-gradient(135deg, #e9eef6 0 3px, transparent 3px 6px);
    --act: #e9eef6;
    --act-text: #0d1424;
    --ring: #f3b23f;
    --ov: #2dd4bf;
    --ov-ink: #0d1424;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0d1424;
  --sheet: #162038;
  --sunk: #1d2945;
  --ink: #e9eef6;
  --ink-2: #9aa6ba;
  --rule: #2a3653;
  --holiday: #ff7b6e;
  --night-hatch: repeating-linear-gradient(135deg, #e9eef6 0 3px, transparent 3px 6px);
  --act: #e9eef6;
  --act-text: #0d1424;
  --ring: #f3b23f;
  --ov: #2dd4bf;
  --ov-ink: #0d1424;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.45 "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}
main { max-width: 560px; margin: 0 auto; padding: 0 16px 32px; }
h2 { font-size: 1.3rem; line-height: 1.2; font-weight: 700; margin: 28px 0 10px; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; font-weight: 650; margin: 22px 0 8px; }
p { margin: 6px 0; }
.muted { color: var(--ink-2); font-size: .92rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.top {
  max-width: 560px; margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) 16px 0;
}
.top select { width: 100%; font-weight: 650; }

/* ---------- элементы управления ---------- */
button, select, input {
  font: inherit; color: inherit;
  border: 1.5px solid var(--rule);
  background: var(--sheet);
  border-radius: 12px;
  min-height: 48px;
  padding: 10px 14px;
}
select { padding-right: 32px; }
input[type="color"] { padding: 4px; width: 48px; }
button { cursor: pointer; font-weight: 600; touch-action: manipulation; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--act); color: var(--act-text); border-color: var(--act); }
button.danger { color: var(--holiday); }
button.quiet { border-color: transparent; background: none; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* ---------- «Сегодня»: смена как полоса времени ---------- */
.today { padding: 18px 0 8px; }
.today .when { color: var(--ink-2); margin: 0; }
.today .what {
  font-size: clamp(2.4rem, 11vw, 3.2rem);
  font-weight: 800; line-height: 1; letter-spacing: -.03em;
  margin: 6px 0 4px;
}
.today .hours { margin: 0 0 14px; font-size: 1.05rem; }
.today .then { margin: 12px 0 0; color: var(--ink-2); }
.today .then b { color: var(--ink); font-weight: 650; }

.strip { position: relative; height: 34px; border-radius: 10px; background: var(--sunk); overflow: hidden; }
.strip .work { position: absolute; top: 6px; bottom: 6px; border-radius: 6px; }
/* Ночная зона 22–06 — отдельная штрихованная линия под полосой */
.night-rail { position: relative; height: 8px; margin-top: 4px; }
.night-rail .zone { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--night-hatch); }
.strip-scale { position: relative; height: 22px; font-size: .8rem; color: var(--ink-2); }
.strip-scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.strip-scale span.start { transform: none; }
.strip-scale span.end { transform: translateX(-100%); }
.strip-note { font-size: .85rem; color: var(--ink-2); margin: 2px 0 0; }
.strip-note i { display: inline-block; width: 18px; height: 8px; border-radius: 4px; margin-right: 6px; vertical-align: 1px;
  background: var(--night-hatch); }

/* ---------- месяц ---------- */
.month-nav { display: flex; align-items: center; gap: 6px; margin: 24px 0 10px; }
.month-nav h2 { flex: 1; margin: 0; font-size: 1.5rem; }
.month-nav h2 small { font-weight: 500; color: var(--ink-2); font-size: 1rem; margin-left: 6px; }
.month-nav button { width: 52px; height: 52px; padding: 0; font-size: 1.4rem; line-height: 1; }
.month-nav button.today-btn { width: auto; padding: 0 14px; font-size: .95rem; }

.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; touch-action: pan-y; }
.grid .wd { text-align: center; font-size: .8rem; color: var(--ink-2); padding-bottom: 2px; }
.cell {
  position: relative;
  aspect-ratio: 1 / 1.08;
  min-height: 48px; min-width: 0;
  padding: 5px 0 0 7px;
  border-radius: 12px;
  border: 0;
  background: var(--sheet);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  text-align: left; font-weight: 600;
}
.cell.empty { visibility: hidden; }
.cell .num { font-size: 1.02rem; line-height: 1.1; }
.cell.holiday .num { color: var(--holiday); }
.cell.holiday:not(.has-shift)::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--holiday); }
.cell.has-shift.holiday .num { text-decoration: underline 2px; text-underline-offset: 3px; color: inherit; }
.cell .tag { font-size: .85rem; font-weight: 800; padding: 0 0 6px; opacity: .9; }
.cell.today { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--ring); z-index: 1; }
.cell .ot { position: absolute; right: 5px; bottom: 5px; font-size: .68rem; font-weight: 800; line-height: 1;
  padding: 3px 4px; border-radius: 6px; background: var(--act); color: var(--act-text); }
.cell .mark { position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-top: 12px solid currentColor; border-left: 12px solid transparent; border-top-right-radius: 12px; opacity: .55; }

.grid.slide-next { animation: slide-next .22s ease-out; }
.grid.slide-prev { animation: slide-prev .22s ease-out; }
@keyframes slide-next { from { transform: translateX(24px); opacity: .3; } }
@keyframes slide-prev { from { transform: translateX(-24px); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .grid.slide-next, .grid.slide-prev, dialog[open] { animation: none; } }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; color: var(--ink-2); margin: 12px 0 0; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 5px; }

/* Итоги месяца — строки, как в табеле */
.tally { margin: 18px 0 0; border-top: 1.5px solid var(--ink); }
.tally > * { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--rule); }
.tally dt { color: var(--ink-2); }
.tally dd { margin: 0; font-weight: 650; text-align: right; }
.tally dd small { font-weight: 500; color: var(--ink-2); }
.tally button.row-link { width: 100%; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none;
  padding: 11px 0; min-height: 0; display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
.tally button.row-link span:first-child { color: var(--ink-2); font-weight: 400; }
.tally button.row-link span:last-child { font-size: 1.2rem; font-weight: 750; }

/* ---------- деньги ---------- */
.net { margin: 6px 0 14px; }
.net p { margin: 0; color: var(--ink-2); }
.net strong { display: block; font-size: clamp(2.4rem, 11vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.facts { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); font-size: .92rem; margin: 0 0 6px; }
.facts b { color: var(--ink); font-weight: 650; }

.slip { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--ink); }
.slip td { padding: 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.slip td:last-child { text-align: right; white-space: nowrap; padding-left: 10px; font-weight: 600; }
.slip .hint { display: block; font-size: .84rem; color: var(--ink-2); margin-top: 1px; }
.slip tr.total td { font-weight: 750; border-bottom: 1.5px solid var(--ink); }
.slip tr.net-row td { font-weight: 800; font-size: 1.2rem; border-bottom: 0; }

.panel { background: var(--sheet); border-radius: 18px; padding: 4px 16px 14px; margin: 18px 0; }
.panel > summary { list-style: none; cursor: pointer; font-weight: 700; min-height: 56px; display: flex; align-items: center; justify-content: space-between; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--ink-2); }
.panel[open] > summary::after { content: "−"; }

/* ---------- формы ---------- */
label.field { display: block; margin: 12px 0; }
label.field > span { display: block; font-size: .92rem; margin-bottom: 5px; font-weight: 600; }
label.field input, label.field select { width: 100%; }
label.field small { display: block; color: var(--ink-2); font-size: .84rem; margin-top: 4px; line-height: 1.35; }
.fields2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.fields2 label.field { display: flex; flex-direction: column; }
.fields2 label.field > span { min-height: 2.6em; display: flex; align-items: flex-end; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 44px; padding: 8px 14px; border-radius: 22px; font-weight: 600; font-size: .95rem; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--sunk); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: none; min-height: 44px; border-radius: 10px; font-size: .95rem; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--act); color: var(--act-text); }

.stepper { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 6px; }
.stepper button { padding: 0; font-size: 1.4rem; height: 52px; }
.stepper output { text-align: center; font-weight: 700; font-size: 1.15rem; }

.cycle-preview { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 12px; }
.cycle-preview span { width: 26px; height: 30px; border-radius: 6px; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: var(--sunk); color: var(--ink-2); }

.block-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 48px; gap: 8px; align-items: center; margin: 8px 0; }
.block-row .stepper { grid-template-columns: 44px 1fr 44px; }
.block-row .stepper button { height: 48px; font-size: 1.2rem; }
.block-row .stepper output { font-size: 1rem; }

.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 6px 0 14px; }
.week .wd { text-align: center; font-size: .8rem; color: var(--ink-2); }
.week button { min-height: 52px; padding: 0; border-radius: 10px; font-weight: 800; font-size: .9rem; }

.shift-card { border-top: 1px solid var(--rule); padding: 14px 0 6px; }
.shift-card:first-child { border-top: 0; }
.shift-card .head { display: grid; grid-template-columns: 48px minmax(0, 1fr) 72px; gap: 8px; }
.shift-card .times { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.shift-card .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---------- нижние вкладки ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--sheet); border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs button {
  position: relative;
  border: 0; border-radius: 0; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: .8rem; font-weight: 600; color: var(--ink-2); min-height: 64px; padding: 6px 0;
}
.tabs svg { width: 26px; height: 26px; }
.tabs button[aria-current="page"] { color: var(--ink); }
.tabs button[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--ink); }

/* ---------- окно дня: лист снизу ---------- */
dialog {
  border: 0; border-radius: 22px 22px 0 0;
  background: var(--sheet); color: var(--ink);
  width: 100%; max-width: 560px; max-height: 92vh;
  margin: auto auto 0; padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
}
dialog[open] { animation: sheet-up .2s ease-out; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } }
dialog::backdrop { background: rgb(8 12 24 / .55); }
dialog .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--rule); margin: 0 auto 8px; }
dialog h2 { margin: 4px 0 2px; }
.choice { display: grid; gap: 8px; margin: 14px 0; }
.choice button { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; text-align: left; min-height: 56px; }
.choice button i { width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid var(--rule); }
.choice button small { color: var(--ink-2); font-weight: 500; }
.choice button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.sheet-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 16px; }

.callout { border-left: 4px solid var(--ink); padding: 4px 0 4px 14px; margin: 12px 0; }
.callout.warn { border-color: var(--holiday); }
.stack { display: grid; gap: 10px; }

/* ---------- v2: типы дня, подсказки, предупреждения ---------- */
.cell.sick { background: var(--sunk); color: var(--ink-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--rule) 5px 7px); }
.cell.ov { background: var(--ov); color: var(--ov-ink); }
.cell.before { opacity: .38; }
.legend .lg-sick, .choice i.lg-sick { background: var(--sunk); background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--ink-2) 3px 4px); }
.legend .lg-ov, .choice i.lg-ov { background: var(--ov); border-color: var(--ov); }

.tally > .sub { padding: 6px 0 6px 14px; }
.tally > .sub dt, .tally > .sub dd { font-size: .92rem; }

div.field { margin: 14px 0; }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.field-head label, .field-head > span { font-size: .92rem; font-weight: 600; }
div.field > input, div.field > select, .row-input input { width: 100%; }
div.field > small { display: block; color: var(--ink-2); font-size: .84rem; margin-top: 4px; line-height: 1.35; }
.help-btn { min-height: 32px; width: 32px; padding: 0; border-radius: 50%; font-size: .9rem; flex: none; }
.help-btn[aria-expanded="true"] { background: var(--act); color: var(--act-text); border-color: var(--act); }
.help-text { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--sunk); font-size: .9rem; line-height: 1.4; }
.has-warn input { border-color: var(--holiday); }
.warn-text { color: var(--holiday); font-size: .86rem; font-weight: 600; margin: 4px 0 0; }
.row-input { display: grid; grid-template-columns: 1fr 48px; gap: 8px; }
.row-input:has(> :only-child) { grid-template-columns: 1fr; }

.check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 600; cursor: pointer; }
.check input { width: 24px; height: 24px; min-height: 0; margin: 0; accent-color: var(--act); flex: none; }

.fields3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.fields3 div.field { margin: 6px 0; }

.panel h3.block { margin: 22px 0 4px; padding-top: 14px; border-top: 1.5px solid var(--ink); font-size: 1.1rem; }
.panel h3.block:first-of-type { border-top: 0; padding-top: 0; margin-top: 6px; }

.slip tr.sub td { font-weight: 650; }
.notes { margin: 6px 0 10px; padding-left: 20px; }
.notes li { margin: 4px 0; }
.recon { margin-top: 10px; }
.recon p { margin: 6px 0; }
.recon-bad { color: var(--holiday); }
.recon-ok { color: var(--ink-2); }