/* ============================================================================
   timetable — прикладной слой поверх системы «Надпечатка».
   Токены и моторика приходят из tokens.css и motion.css без изменений.

   Правило системы: краска ложится на краску, перекрытие видно
   (mix-blend-mode: var(--blend) — multiply на бумаге, screen в тёмной теме).
   Модуль без скругления, управление до капсулы. Теней нет.
   ========================================================================== */

/* ── семантика состояний ──────────────────────────────────────────────────
   Классическое прочтение цвета: зелёный — свободно, красный — занято,
   синий — ваша запись и главное действие, янтарь — сегодня, серая бумага —
   закрыто. Значения живут здесь, а не в tokens.css: палитра системы про
   краску, а эти четыре роли — про смысл. */
:root {
  --free: #539a20;          --on-free: #16130e;
  --busy: #b3261e;          --on-busy: #fffcf3;
  --mine: #2456c8;          --on-mine: #fffcf3;
  --closed: var(--paper-sunk); --on-closed: var(--ink-soft);
  --focus: #2456c8;
  /* надпечатка при наведении — не третий тон, а честное затемнение краской:
     multiply на бумаге темнит, screen на чернилах светлит */
  --wash: color-mix(in srgb, var(--ink) 20%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --free: #35701c;        --on-free: #e4f4d8;
    --busy: #8c1d18;        --on-busy: #ffe7e3;
    --mine: #1f3f94;        --on-mine: #dee7ff;
    --focus: #7d9dff;
  }
}
:root[data-theme="dark"] {
  --free: #35701c;          --on-free: #e4f4d8;
  --busy: #8c1d18;          --on-busy: #ffe7e3;
  --mine: #1f3f94;          --on-mine: #dee7ff;
  --focus: #7d9dff;
}

*, *::before, *::after { box-sizing: border-box; }

/* атрибут hidden должен побеждать любые display-правила ниже */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2 { margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; }
svg { display: block; }

.page {
  max-width: var(--col);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px) var(--gut) calc(48px + env(safe-area-inset-bottom));
}

/* ── служебный голос системы ─────────────────────────────────────────────── */
.eyebrow, .t-label {
  font: 600 11px/1.3 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ═══════════════════════════════════════════════════════════════ шапка ══ */
.head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 26px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: clamp(20px, 3vw, 30px);
  border-bottom: var(--rule-w) solid var(--rule);
  margin-bottom: clamp(24px, 4vw, 40px);
}
h1 {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(34px, 6.4vw, 64px);
  line-height: .92;
  letter-spacing: -.045em;
}
/* инвертированная плашка-выделение (Weltix) */
h1 .band {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 0 .12em .06em;
}
.subtitle {
  margin-top: 14px;
  max-width: 46ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.55;
  color: var(--ink-soft);
}
.head-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font: 600 10.5px/1.3 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
/* знак состояния — квадрат, как модуль */
.dot { width: 11px; height: 11px; display: inline-block; border-radius: 0; }
.dot-free { background: var(--free); }
.dot-busy { background: var(--busy); }
.dot-mine { background: var(--mine); }
.dot-closed { background: var(--ink-faint); }

/* фильтр — капсула, включённая инвертируется */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-chip);
  font: 600 11.5px/1 var(--f-mono);
  letter-spacing: .06em;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.switch:hover { background: var(--paper-sunk); }
.switch:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.switch:has(input:checked) .ico .b { fill: var(--paper); }
.switch input { position: absolute; opacity: 0; pointer-events: none; accent-color: var(--mine); }
.switch .ico { width: 15px; height: 15px; }

/* ── иконки: два слоя с перекрытием, выбивка бумагой ─────────────────────── */
.ico { isolation: isolate; flex: none; }
.ico .a { fill: var(--mine); mix-blend-mode: var(--blend); }
.ico .b { fill: var(--ink); mix-blend-mode: var(--blend); }
.ico .c { fill: var(--paper); }

/* ═════════════════════════════════════════════════════════ ваши записи ══ */
.mine-card {
  border: var(--rule-w) solid var(--rule);
  background: var(--paper-raise);
  padding: 16px;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.mine-card h2 {
  font: 600 11px/1.3 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mine-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--mine);
  color: var(--on-mine);
  padding: 10px 10px 10px 15px;
}
.mine-when {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* ═════════════════════════════════════════════════════════════ доска ══ */
.board { display: grid; gap: clamp(26px, 4vw, 40px); }
.skeleton {
  padding: 56px 0;
  text-align: center;
  font: 600 11.5px/1.3 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.week-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  font: 600 11px/1.3 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.week-title span {
  letter-spacing: .06em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* сетка недели собрана из линеек: фон-линейка проступает в зазорах */
.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--rule-w);
  background: var(--rule);
  border: var(--rule-w) solid var(--rule);
}

.day {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: 104px;
}
.day.is-past { background: var(--paper-sunk); }

.day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px 9px;
  border-bottom: var(--rule-w) solid var(--rule-soft);
}
.day-name {
  font: 600 11px/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.day-date {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
/* сегодня — янтарная надпечатка, положенная прямо на дату */
.day.is-today .day-date { position: relative; isolation: isolate; }
.day.is-today .day-date::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -5px;
  right: -5px;
  bottom: -1px;
  height: 62%;
  background: var(--amber);
  mix-blend-mode: var(--blend);
  transform-origin: right center;
  animation: op-band var(--t-base) var(--e-sharp) both;
}
.day.is-today .day-name { color: var(--ink); }

.slots { display: grid; }
.day-empty {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 16px 10px;
  font: 600 10px/1.3 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ═══════════════════════════════════════════════════════════════ слоты ══ */
.slot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 46px;
  padding: 12px 10px;
  border: 0;
  /* линейка держится и на сплошной заливке, и на бумаге */
  border-top: var(--rule-w) solid color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius: var(--r-module);
  background: var(--paper);
  color: var(--ink-faint);
  font: 600 13px/1.15 var(--f-text);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: default;
  transition: color var(--t-fast) var(--e-out);
}
.slots > .slot:first-child { border-top: 0; }

/* надпечатка при наведении: полоса краски выезжает поверх заливки */
.slot::after {
  content: '';
  position: absolute;
  inset: 0;
  /* краска ложится на заливку, но остаётся под цифрами — время читается */
  z-index: -1;
  background: var(--wash);
  mix-blend-mode: var(--blend);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  transition: transform var(--t-base) var(--e-sharp);
}
.slot .slot-sub {
  display: block;
  margin-top: 3px;
  font: 600 9.5px/1.2 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}

.slot.free {
  background: var(--free);
  color: var(--on-free);
  cursor: pointer;
}
.slot.mine {
  background: var(--mine);
  color: var(--on-mine);
  cursor: pointer;
}
.slot.free:hover::after,
.slot.mine:hover::after,
.slot.free:focus-visible::after,
.slot.mine:focus-visible::after { transform: scaleX(1); }
.slot.free:active, .slot.mine:active { transform: scale(.985); }

/* чужая запись — красный: время занято */
.slot.busy { background: var(--busy); color: var(--on-busy); }
/* закрыто вручную — бумага под наклонной штриховкой линеек */
.slot.blocked {
  background:
    repeating-linear-gradient(135deg,
      transparent 0 5px, var(--rule-soft) 5px 6.5px),
    var(--closed);
  color: var(--on-closed);
}
.slot.past {
  background: var(--closed);
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* ═══════════════════════════════════════════════════════════════ подвал ══ */
.foot {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 16px;
  border-top: var(--rule-w) solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font: 500 11.5px/1.5 var(--f-mono);
  letter-spacing: .04em;
  color: var(--ink-faint);
}
.foot-side { display: flex; align-items: center; gap: 8px; }
.foot .ico { width: 15px; height: 15px; }

.link, .themebtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
  font: 600 11.5px/1 var(--f-mono);
  letter-spacing: .06em;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.link:hover, .themebtn:hover { background: var(--ink); color: var(--paper); }

/* ══════════════════════════════════════════════════════════════ диалог ══ */
.sheet {
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-module);
  padding: 0;
  width: min(460px, calc(100vw - 2 * var(--gut)));
  background: var(--paper-raise);
  color: var(--ink);
}
.sheet::backdrop { background: color-mix(in srgb, var(--ink) 58%, transparent); }
.sheet[open] { animation: op-bloom var(--t-base) var(--e-ink) both; }
.sheet form, .sheet-body { padding: 22px; display: grid; gap: 16px; }

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: var(--rule-w) solid var(--rule);
}
.sheet-kicker {
  font: 600 10.5px/1.3 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sheet-slot {
  margin-top: 7px;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(19px, 2.6vw, 23px);
  line-height: 1.15;
  letter-spacing: -.04em;
}
/* часы — отдельной строкой, табличными цифрами */
.sheet-slot .sheet-time {
  display: block;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.icon-btn {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
  font-size: 13px;
  color: var(--ink);
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.icon-btn:hover { background: var(--ink); color: var(--paper); }

/* поля: модуль с малым радиусом, чернильная рамка */
.field {
  display: grid;
  gap: 7px;
  font: 600 10.5px/1.3 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field .req { color: var(--busy); }
.field input, .field textarea {
  font: 400 15px/1.5 var(--f-text);
  color: var(--ink);
  background: var(--paper);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-field);
  padding: 11px 13px;
  width: 100%;
  resize: vertical;
  text-transform: none;
  letter-spacing: 0;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: inset 0 0 0 1px var(--focus);
}

.dlg-error {
  padding: 11px 14px;
  background: var(--busy);
  color: var(--on-busy);
  font: 500 13.5px/1.45 var(--f-text);
}

.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ══════════════════════════════════════════════════════════════ кнопки ══ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border: var(--rule-w) solid var(--ink);
  border-radius: var(--r-chip);
  background: var(--paper);
  color: var(--ink);
  font: 600 14px/1 var(--f-text);
  cursor: pointer;
  transition:
    transform var(--t-tap) var(--e-press),
    background var(--t-fast) var(--e-out),
    color var(--t-fast) var(--e-out),
    border-color var(--t-fast) var(--e-out);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: scale(.96); }

.btn-primary { background: var(--mine); border-color: var(--mine); color: var(--on-mine); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-primary:disabled { background: var(--paper-sunk); border-color: var(--rule-soft); color: var(--ink-faint); cursor: progress; }
.btn-primary:disabled:hover { background: var(--paper-sunk); color: var(--ink-faint); }

.btn-ghost { background: transparent; }

.btn-danger {
  padding: 8px 14px;
  font-size: 13px;
  background: transparent;
  border-color: var(--on-mine);
  color: var(--on-mine);
}
.btn-danger:hover { background: var(--busy); border-color: var(--busy); color: var(--on-busy); }

/* ═══════════════════════════════════════════════════════════════ лента ══ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  max-width: calc(100vw - 32px);
  padding: 13px 18px;
  background: var(--ink);
  color: var(--paper);
  font: 600 12.5px/1.35 var(--f-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
}
.toast.err { background: var(--busy); color: var(--on-busy); }
.toast b { display: block; animation: op-reveal var(--t-slow) var(--e-out) both; }

/* ══════════════════════════════════════════════════ адаптив: планшет ══ */
@media (max-width: 1000px) {
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═════════════════════════════════════════════════ адаптив: телефон ══ */
@media (max-width: 680px) {
  .page { padding: 18px 14px calc(36px + env(safe-area-inset-bottom)); }
  .head { align-items: flex-start; gap: 16px; }
  .head-side { align-items: flex-start; width: 100%; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }

  .week { grid-template-columns: 1fr; }
  .day { flex-direction: row; align-items: stretch; min-height: 0; }
  .day-head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    min-width: 72px;
    padding: 12px;
    border-bottom: 0;
    border-right: var(--rule-w) solid var(--rule-soft);
  }
  .day-date { font-size: 17px; }

  .slots {
    flex: 1;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: var(--rule-w);
    /* зазоры — просвет бумаги: неполный ряд не превращается в пустую плашку */
    background: var(--paper);
  }
  .slots > .slot { border-top: 0; min-height: 52px; }
  .day-empty { justify-items: start; text-align: left; }

  /* модальное окно уезжает вниз экрана */
  .sheet {
    width: 100vw;
    max-width: 100vw;
    margin: auto auto 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .sheet[open] { animation: op-reveal var(--t-base) var(--e-out) both; }
  .sheet form, .sheet-body { padding: 20px 16px calc(22px + env(safe-area-inset-bottom)); }
  .sheet-actions .btn { flex: 1; padding: 14px 18px; }
}