/* Общая основа веб-панелей Allora: панель дома престарелых (/care), наша
   админка (/admin), страница приглашения (/join) и страница для домов
   (/care-homes). Бумага и чернила, как в приложении и на посадочной:
   токены — те же (constants/colors.ts, docs/brand-guidelines.md).
   CSP панелей запрещает встроенные стили (style-src 'self'): всё оформление
   — здесь и в файлах страниц, в разметке style="" не бывает. */

@font-face { font-family: "Spectral"; src: url("../fonts/Spectral-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/Spectral-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper: #fbfaf7; --paper-warm: #f4f2ec; --paper-deep: #eae7df;
  --ink: #1a1a18; --ink-soft: #4a4945; --ink-muted: #6e6c66;
  --stone: #454869; --stone-light: #5a5e80; --on-stone: #fbfaf7;
  --sage: #ced5cf; --rose: #d6c7c6; --frost: #d7e0e4; --steel: #b1bfc7;
  --accent: #a94e3a; --highlight: #f1e4a8; --pencil: #4f6d7a;
  --success: #5a6b4f; --error: #8c4a3f;

  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-sm: 15px; --text-base: 16px; --text-md: 17px; --text-lg: 21px;
  --text-xl: clamp(26px, 1.6vw + 18px, 32px); --text-hero: clamp(34px, 3.4vw + 16px, 52px);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --touch: 44px;

  --d-fast: 150ms; --d-settle: 400ms; --d-stroke: 1200ms;
  --e-draw: cubic-bezier(.22, .61, .36, 1); --e-settle: cubic-bezier(.33, 1, .68, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--text-base)/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -0.2px; }
h1 { font-size: var(--text-hero); line-height: 1.08; }
h2 { font-size: var(--text-xl); line-height: 1.15; }
h3 { font-size: var(--text-lg); line-height: 1.25; }
p { margin: 0; }
.eyebrow { font: 600 13px/1.2 var(--font-body); letter-spacing: 2.4px; text-transform: uppercase; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }
.num { font-variant-numeric: tabular-nums; }
.lead { font-size: var(--text-md); line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
.fine { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); max-width: 66ch; }

/* Линейка — волосяная линия бумаги; .ink — чернилами. Прорисовывается,
   как всё в бренде: линия появляется на бумаге. */
.rule { display: block; height: 1px; background: linear-gradient(var(--paper-deep), var(--paper-deep)) no-repeat 0 0 / 100% 1px; border: 0; margin: 0; }
.rule.ink { background-image: linear-gradient(var(--ink), var(--ink)); height: 1.5px; background-size: 100% 1.5px; }
@media (prefers-reduced-motion: no-preference) {
  .rule.draw { animation: rule-draw var(--d-stroke) var(--e-draw) both; }
}
@keyframes rule-draw { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* ── кнопки ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5);
  border-radius: var(--radius-md); background: var(--stone); color: var(--on-stone); font: 600 var(--text-sm)/1.15 var(--font-body);
  text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--d-fast) var(--e-settle), transform 120ms ease, border-color var(--d-fast); }
.btn:hover { background: var(--stone-light); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--steel); }
.btn-quiet:hover { background: var(--frost); }
.btn-danger { background: transparent; color: var(--error); border-color: color-mix(in srgb, var(--error) 45%, var(--paper)); }
.btn-danger:hover { background: color-mix(in srgb, var(--error) 8%, var(--paper)); }
.btn-small { min-height: 36px; padding: 0 var(--space-3); font-size: 14px; border-radius: var(--radius-sm); }
.link { background: none; border: 0; padding: 0; font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--ink-soft); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--steel); text-underline-offset: 3px; }
.link:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ── поля ── */
.field { display: grid; gap: 6px; }
.field > span { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--ink-soft); }
.field small { font-size: 13px; color: var(--ink-muted); }
.input, select.input, textarea.input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--steel); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font: 400 var(--text-base)/1.4 var(--font-body); }
.input:focus { outline: 2px solid var(--stone); outline-offset: 0; border-color: var(--stone); }
.input[readonly] { background: var(--paper-warm); color: var(--ink-soft); border-style: dashed; }
.input.code { font: 500 28px/1.2 var(--font-body); letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-soft); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--stone); flex: none; }

/* ── сообщения ── */
.note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--frost); color: var(--ink); font-size: var(--text-sm); }
.note.error { background: color-mix(in srgb, var(--error) 10%, var(--paper)); color: var(--error); }
.note.ok { background: color-mix(in srgb, var(--sage) 70%, var(--paper)); }

/* ── таблицы ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.data th { text-align: left; font: 600 12px/1.2 var(--font-body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-muted);
  padding: var(--space-3) var(--space-3) var(--space-2); border-bottom: 1px solid var(--ink); white-space: nowrap; }
table.data td { padding: var(--space-3); border-bottom: 1px solid var(--paper-deep); vertical-align: middle; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr:last-child td { border-bottom: 0; }

/* ── метки состояния ── */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 500 13px/1.4 var(--font-body); white-space: nowrap; background: var(--paper-warm); color: var(--ink-soft); }
.tag.sage { background: var(--sage); color: var(--ink); }
.tag.rose { background: var(--rose); color: var(--ink); }
.tag.frost { background: var(--frost); color: var(--ink); }
.tag.steel { background: transparent; border: 1px solid var(--steel); color: var(--ink-soft); }

/* ── диалог ── */
dialog.sheet { border: 0; padding: 0; border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); width: min(520px, calc(100vw - 32px));
  box-shadow: 0 24px 64px rgba(26, 26, 24, .18), 0 2px 6px rgba(26, 26, 24, .08); }
dialog.sheet::backdrop { background: rgba(26, 26, 24, .32); }
dialog.sheet form, dialog.sheet .sheet-body { display: grid; gap: var(--space-4); padding: var(--space-6); }
dialog.sheet .actions { display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--space-2); }

.wordmark { display: block; width: 116px; height: auto; }

/* ── рисунок на бумаге ──
   Рисунок лежит прямо на листе: края растворяются, прямоугольника нет.
   Бумага рисунков на 1–5 единиц светлее или темнее страницы; подъём
   яркости на 1,5 % делает её не темнее страницы, а darken берёт из двух
   красок более тёмную — бумага рисунка становится бумагой страницы,
   карандаш остаётся как есть. */
.sketch { position: relative; margin: 0; mix-blend-mode: darken;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
.sketch img, .sketch video { display: block; width: 100%; height: auto; filter: brightness(1.015);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); }

/* Набросок рисует себя (ui/sketch.js): поверх готового рисунка — клип, который
   невидимый карандаш рисует с чистого листа, один раз, когда рисунок
   показался, и остаётся на последнем кадре. Без JS, при Reduce Motion и если
   клип не загрузился — готовый рисунок, как есть. */
.sketch video { display: none; }
.sketch.is-clip video { display: block; position: absolute; inset: 0; height: 100%; object-fit: cover; }
.sketch.is-clip img { opacity: 0; }   /* не visibility: рисунок с alt остаётся для читалки, клип — aria-hidden */