/* Life Timeline — Каркас и вход: переменные, базовые правила, фон, экран входа и даты рождения, мобильный режим.
   Вынесено без изменений из app/life-timeline.html (строки 9–304 на 31.10.2026).
   Порядок подключения файлов важен: он повторяет исходный порядок правил. */
:root {
  color-scheme: dark;
  --text: #eef3ef;
  --muted: rgba(238, 243, 239, .66);
  --soft: rgba(238, 243, 239, .42);
  --line: rgba(238, 243, 239, .16);
  --line-strong: rgba(238, 243, 239, .30);
  --panel: rgba(18, 22, 25, .46);
  --panel-soft: rgba(26, 30, 33, .30);
  --panel-border: rgba(238, 243, 239, .16);
  --warm: #f0d09a;
  --accent: #9cc8c2;
  --bg-a: #0b1117;
  --bg-b: #121c21;
  --bg-c: #17191f;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg-a);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

body {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

body.dragging { cursor: grabbing; }

body[data-mobile-limited="true"] {
  cursor: default;
  touch-action: manipulation;
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
  border: 0;
  cursor: pointer;
}

.calm-bg,
.map-stage,
.product-ui {
  position: fixed;
  inset: 0;
}

.calm-bg {
  pointer-events: none;
  background:
    radial-gradient(72% 58% at 68% 43%, rgba(65, 104, 105, .20), transparent 62%),
    radial-gradient(58% 46% at 28% 64%, rgba(100, 82, 118, .12), transparent 64%),
    linear-gradient(135deg, var(--bg-a), var(--bg-b) 48%, var(--bg-c));
  isolation: isolate;
}

.calm-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  opacity: .26;
}

.calm-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 7, 10, .42), transparent 28%, transparent 72%, rgba(3, 7, 10, .34)),
    linear-gradient(90deg, rgba(3, 7, 10, .28), transparent 26%, transparent 76%, rgba(3, 7, 10, .28));
}

.map-stage {
  z-index: 4;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(11, 17, 23, .76), rgba(11, 17, 23, .92)),
    rgba(11, 17, 23, .88);
}

.auth-gate[hidden] {
  display: none;
}

.birth-gate {
  position: fixed;
  inset: 0;
  z-index: 68;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(11, 17, 23, .68), rgba(11, 17, 23, .9)),
    rgba(11, 17, 23, .82);
}

.birth-gate[hidden] {
  display: none;
}

.auth-panel {
  width: min(420px, 100%);
  padding: 24px;
  border: 1px solid rgba(238, 243, 239, .16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    rgba(18, 22, 25, .88);
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
}

.auth-panel h1 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: 0;
}

.auth-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.auth-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.auth-action {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 7px;
  border: 1px solid rgba(238, 243, 239, .16);
  background: rgba(255,255,255,.07);
  color: rgba(238, 243, 239, .88);
}

.auth-action.primary {
  background: rgba(156, 200, 194, .18);
  border-color: rgba(156, 200, 194, .34);
  color: var(--text);
}

body[data-auth-blocked="true"] .map-stage,
body[data-auth-blocked="true"] .product-ui {
  pointer-events: none;
  opacity: .18;
  filter: blur(2px);
}

body[data-birth-setup-blocked="true"] .map-stage,
body[data-birth-setup-blocked="true"] .product-ui {
  pointer-events: none;
  opacity: .18;
  filter: blur(2px);
}

.mobile-mode-notice {
  position: fixed;
  z-index: 28;
  top: 76px;
  left: 50%;
  width: min(430px, calc(100vw - 24px));
  padding: 13px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(240, 208, 154, .26);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(240, 208, 154, .16), rgba(156, 200, 194, .075)),
    rgba(18, 22, 25, .88);
  box-shadow: 0 16px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  color: rgba(238, 243, 239, .86);
  pointer-events: auto;
}

.mobile-mode-notice[hidden] {
  display: none;
}

.mobile-mode-title {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 14px;
  font-weight: 620;
  line-height: 1.25;
  letter-spacing: 0;
}

.mobile-mode-copy {
  margin: 0;
  color: rgba(238, 243, 239, .68);
  font-size: 12px;
  line-height: 1.42;
}

.mobile-mode-preview-note {
  display: none;
}

.mobile-mode-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.mobile-mode-action {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(238, 243, 239, .14);
  border-radius: 7px;
  background: rgba(255,255,255,.055);
  color: rgba(238, 243, 239, .82);
  font-size: 12px;
}

.mobile-mode-action.primary {
  border-color: rgba(156, 200, 194, .32);
  background: rgba(156, 200, 194, .14);
  color: var(--text);
}

.birth-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.birth-form label {
  display: grid;
  gap: 8px;
  color: rgba(238, 243, 239, .72);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.birth-form input {
  height: 42px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid rgba(238, 243, 239, .16);
  border-radius: 7px;
  background: rgba(255,255,255,.055);
  color: var(--text);
  color-scheme: dark;
}

.birth-error {
  min-height: 18px;
  color: rgba(240, 111, 106, .92);
  font-size: 12px;
  line-height: 1.4;
}

svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}