:root {
  color-scheme: light dark;
  --ink: #17201c;
  --muted: #5f6d66;
  --line: #e2e9e5;
  --line-strong: #d2dcd7;
  --surface: #ffffff;
  --canvas: #eef2f0;
  --grain: rgb(23 32 28 / 3%);
  --green: #235f4d;
  --green-dark: #111a17;
  --green-soft: #e7f2ec;
  --lime: #c9f06b;
  --alarm: #a33f3d;
  --alarm-soft: #fbeae9;
  --outage: #a33f3d;
  --repair: #a25c2b;
  --notice: #235f4d;
  --waiting: #8a6a1c;
  --progress: #35648c;
  --screw: #cfd8d3;
  --shadow-sheet: 0 1px 2px rgb(20 35 28 / 5%), 0 10px 26px rgb(20 35 28 / 6%);
  --shadow-press: 0 1px 2px rgb(20 35 28 / 10%);
  --radius: 14px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e7efea;
    --muted: #a3b1aa;
    --line: #2a332e;
    --line-strong: #38433d;
    --surface: #1a201d;
    --canvas: #101512;
    --grain: rgb(255 255 255 / 3%);
    --green: #6cbf9c;
    --green-dark: #0b100e;
    --green-soft: #1c2b24;
    --alarm: #e88f8c;
    --alarm-soft: #2e1d1c;
    --outage: #e88f8c;
    --repair: #d9a271;
    --notice: #6cbf9c;
    --waiting: #d6b866;
    --progress: #8ab6dc;
    --screw: #3b453f;
    --shadow-sheet: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 28px rgb(0 0 0 / 35%);
    --shadow-press: 0 1px 2px rgb(0 0 0 / 45%);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  background-color: var(--canvas);
  background-image: repeating-linear-gradient(96deg, var(--grain) 0 1px, transparent 1px 7px);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.board {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
}

/* Гравированная планка дома над стендом */
.house-plate {
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--green-dark);
  color: #e6efea;
  box-shadow: var(--shadow-sheet);
}
.house-plate__rubric {
  color: var(--lime);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.house-plate h1 {
  margin: 8px 0 2px;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.house-plate p { margin: 0; color: #b6c2bc; font-size: 16px; }
.house-plate .demo-badge {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 10px;
  border: 1px solid rgb(201 240 107 / 45%);
  border-radius: 8px;
  color: var(--lime);
  font-size: 13px;
  font-weight: 650;
}

/* Лист на стенде: винты в верхних углах, рубрикаторная планка, тело */
.sheet {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sheet);
}
.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--screw) 70%);
  box-shadow: inset 0 0 0 1px rgb(23 32 28 / 8%);
}
.sheet::before { left: 10px; }
.sheet::after { right: 10px; }
.sheet--alarm::before, .sheet--alarm::after,
.sheet--ticket::before, .sheet--ticket::after { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%); }

.plate {
  margin: 0;
  padding: 13px 30px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
}
.plate--alarm { background: var(--alarm-soft); border-bottom-color: color-mix(in srgb, var(--alarm) 22%, transparent); color: var(--alarm); }
.plate--dark { background: var(--green-dark); border-bottom-color: var(--green-dark); color: #cfe0d7; }

.sheet__body { padding: 18px; }

/* Аварийный номер — главная цель нажатия на стенде, поэтому это кнопка, а не заголовок. */
.alarm-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 64px;
  padding: 10px 16px;
  border: 2px solid var(--alarm);
  border-radius: 12px;
  background: var(--alarm-soft);
  color: var(--alarm);
  text-decoration: none;
  transition: transform .12s ease-out;
}
.alarm-call:active { transform: translateY(1px); }
.alarm-call:focus-visible { outline: 2px solid var(--alarm); outline-offset: 3px; }
.alarm-call__icon { flex: 0 0 auto; width: 24px; height: 24px; fill: currentColor; }
.alarm-call__number { flex: 1 1 auto; font-size: 27px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.alarm-call__action { flex: 0 0 auto; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.alarm-note { margin: 12px 0 0; color: var(--muted); font-size: 16px; }

.ticket-lead { margin: 0 0 16px; color: var(--muted); font-size: 16px; }

/* Отрывной край талона */
.sheet--ticket { padding-bottom: 16px; }
.perforation {
  position: relative;
  height: 1px;
  margin: 0 16px;
  border-top: 2px dashed var(--line-strong);
}
.perforation::before,
.perforation::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--canvas);
}
.perforation::before { left: -25px; }
.perforation::after { right: -25px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease-out, background-color .15s ease-out;
}
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.button:disabled { opacity: .55; cursor: progress; }
.button--primary { width: 100%; background: var(--green); color: #fff; box-shadow: var(--shadow-press); }
.button--outline { width: 100%; border-color: var(--green); background: var(--surface); color: var(--green); }
.button--ghost { background: transparent; color: var(--muted); }

@media (prefers-color-scheme: dark) {
  .button--primary { color: #0b100e; }
}

/* Талон разворачивается по строке грида: без анимации высоты и без layout thrash. */
.ticket-form {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease-out;
}
.ticket-form.is-open { grid-template-rows: 1fr; opacity: 1; }
.ticket-form__inner { min-height: 0; overflow: hidden; }
.ticket-form.is-open .ticket-form__inner { padding-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .ticket-form { transition: opacity .01s; }
}

.field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; padding: 0; border: 0; }
.field label, .field legend { padding: 0; color: var(--muted); font-size: 15px; font-weight: 650; }
.field input, .field textarea {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  font-size: 16px;
  resize: vertical;
}
.field textarea { line-height: 1.4; }
.field input:focus-visible, .field textarea:focus-visible {
  border-color: var(--green);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.field--chips legend { margin-bottom: 7px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.chip[aria-checked="true"] {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
  font-weight: 700;
}
.chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.ticket-actions { display: flex; flex-direction: column; gap: 8px; }
.form-error {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--alarm) 35%, transparent);
  border-radius: 10px;
  background: var(--alarm-soft);
  color: var(--alarm);
  font-size: 16px;
}

.stubs, .notices, .visits, .docs { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.stubs:empty, .notices:empty, .visits:empty, .docs:empty { display: none; }

/* Корешок талона: линия отрыва слева, как на оторванной части билета. */
.stub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 0 0 14px 14px; border-bottom: 1px dashed var(--line-strong); border-left: 1px dashed var(--line-strong); }
.stub:last-child { padding-bottom: 0; border-bottom: 0; }
.stubs { gap: 16px; }
.stub__meta { color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.stub__text { margin: 4px 0 0; font-size: 16px; }
.stub__note { margin: 8px 0 0; padding: 10px 12px; border-radius: 9px; background: var(--green-soft); color: var(--ink); font-size: 16px; grid-column: 1 / -1; }

/* Штамп статуса: косой оттиск, как на бумажном корешке */
.stamp {
  align-self: start;
  padding: 5px 9px;
  border: 2px solid currentColor;
  border-radius: 7px;
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-5deg);
}
.stamp--in_progress { color: var(--progress); }
.stamp--waiting { color: var(--waiting); }
.stamp--done { color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .stub.is-fresh .stamp { animation: press-stamp .45s cubic-bezier(.16, 1, .3, 1) both; }
}
/* Оттиск бьёт сверху и замирает: резкое торможение, без отскока. */
@keyframes press-stamp {
  from { transform: rotate(-16deg) scale(1.7); opacity: 0; filter: blur(2px); }
  to { transform: rotate(-5deg) scale(1); opacity: 1; filter: none; }
}

.notice { display: flex; flex-direction: column; gap: 5px; padding-bottom: 14px; border-bottom: 1px dashed var(--line-strong); }
.notice:last-child { padding-bottom: 0; border-bottom: 0; }
.notice__kind { color: var(--notice); font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.notice__kind[data-kind="outage"] { color: var(--outage); }
.notice__kind[data-kind="repair"] { color: var(--repair); }
.notice__title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.notice__period { color: var(--muted); font-size: 15px; }
.notice__body { margin: 2px 0 0; font-size: 16px; }

.visit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--green-soft); }
.visit strong { font-size: 16px; }
.visit span { color: var(--muted); font-size: 16px; }
.visit-lead { margin: 0 0 14px; color: var(--muted); font-size: 16px; }
.visits:not(:empty) + #visit-booking { margin-top: 16px; }

.days { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 56px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
}
.day small { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.day strong { font-size: 17px; font-weight: 700; }
.day[aria-selected="true"] { border-color: var(--green); background: var(--green-soft); }
.day[aria-selected="true"] small, .day[aria-selected="true"] strong { color: var(--green); }
.day:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
#visit-times { margin-bottom: 16px; }

.org { display: flex; flex-direction: column; gap: 13px; margin: 0; }
.org div { display: flex; flex-direction: column; gap: 2px; }
.org dt { color: var(--muted); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.org dd { margin: 0; font-size: 16px; }
.org dd a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.org dd.is-empty { color: var(--muted); font-style: italic; }
.org-missing {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--waiting) 45%, transparent);
  border-radius: 10px;
  color: var(--waiting);
  font-size: 16px;
}

/* Документы лежат в кармане: у каждого листа загнут верхний угол */
.doc { position: relative; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.doc::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 16px;
  height: 16px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 10px 0 4px;
  background: var(--canvas);
}
.doc__kind { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.doc__title { margin: 4px 0 0; font-size: 16px; font-weight: 650; }
.doc a.doc__title { color: var(--green); display: inline-block; min-height: 44px; line-height: 44px; }
.doc__title.is-empty { color: var(--muted); font-style: italic; font-weight: 500; }

.empty { margin: 0; color: var(--muted); font-size: 16px; }

.board-footer { padding: 0 4px; color: var(--muted); font-size: 16px; }
.board-footer p { margin: 0 0 8px; }
.board-footer strong { color: var(--ink); }
.board-footer__legal { font-size: 15px; }
.board-footer__legal a { color: var(--muted); }

.curtain {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 28px;
  text-align: center;
}
.curtain__line { margin: 0; max-width: 34ch; color: var(--muted); font-size: 16px; }
.curtain .button { width: auto; }