/* Surf — система токенов и общие примитивы (кнопки, поля, листы, иконки, тост) + экраны Boot, Вход и Главная.
   Светлая/тёмная семантическая палитра — surf-theme.css; морской акцент и стабильные оверлеи видео.
   Правило 60/30/10: 60 % ground, 30 % surface/текст, 10 % акцент (только play, активные состояния, прогресс).
   Строка статистики (.stats) — общий примитив: её собирает surfStatsRow() и переиспользуют все три экрана.
   Две темы, системный шрифт (на iPhone — SF Pro), 4 размера (28/17/15/13), 2 веса (600/400), сетка 8, радиусы 12/16/22/999.
   Без сборки: /src/css/surf-app.css?v=$version. «Эфир» — surf-stream.css, «Загрузка»/«Мои видео»/«Видео» — surf-upload.css.
   Каркас: документ не скроллится (html/body 100 %, overflow hidden), #app — fixed на весь экран (100lvh; iOS standalone даёт 100dvh
   короче экрана на ~74 pt — отсюда была чёрная полоса снизу), каждый .screen — absolute inset 0 и скроллит сам (overflow: auto),
   нижний отступ контента calc(var(--sab) + 24px). Сцена эфира чёрная и покрывает всё сама. */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --top: max(var(--sat), 24px);               /* верхний отступ экрана: safe-area, но не меньше 24 px (Safari без PWA даёт 0) */
  --r-12: var(--radius-control);
  --r-16: var(--radius-card);
  --r-22: var(--radius-sheet);
  --r-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --screen-x: 20px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --t-press: 120ms;
  --t-release: 200ms;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; overscroll-behavior: none;
  background: var(--bg); color: var(--text); font: 17px/1.35 var(--font); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
/* iOS standalone + полупрозрачный статус-бар (замер владельца): окно 874, но layout viewport 812 (без статус-бара 62) — по нему
   считаются проценты и режутся фиксированные слои. Документ в обычном потоке высотой 100 % + safe-area-top рисуется до края экрана;
   #app берёт 100 % от body (body позиционирован). Вертикальный скролл документа гасит surf-app-init (scrollTo 0). */
html { height: 100%; }
body { position: relative; height: calc(100% + env(safe-area-inset-top, 0px)); overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
b { font-weight: 600; }
.muted { color: var(--text-2); }
.caption { font-size: var(--type-caption); font-weight: 400; color: var(--text-2); margin: 0; }
.caption.sec { text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.caption[hidden] { display: none; }
.center { text-align: center; }
.glass { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* ---------- иконки: спрайт в index.php, <use href="#i-…">; в JS — svgIcon() ---------- */
.sprite { display: none; }
.i, .i-lg, .i-sm {
  width: 24px; height: 24px; display: block; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.i-lg { width: 30px; height: 30px; stroke-width: 1.7; }
.i-sm { width: 17px; height: 17px; stroke-width: 2; }
svg .f { fill: currentColor; stroke: none; }
/* play: обводка по своему же контуру даёт мягкие углы, размер компенсируем уменьшением треугольника */
svg .pl { stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
svg .dots { stroke-width: 3; }
.snd .off { display: none; }
.snd.muted .on { display: none; }
.snd.muted .off { display: block; }

/* строка статистики «иконка + число» (surfStatsRow в surf-ui-helpers.js): «Мои видео», «Видео», титр эфира.
   13 px, цифры моноширинные, иконка чуть меньше текста; шаг 14 (в эфире переопределён на 10, surf-stream.css). */
.stats { display: flex; align-items: center; gap: 14px; font-size: var(--type-caption); line-height: 18px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.stats-i { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.stats .i-sm { width: 15px; height: 15px; }

/* знак логотипа (public/src/img/mark.svg — кольцо с волной без фона и без букв, для маленьких значков): 64 вход · 56 финал эфира и
   пустые состояния. Логотип целиком (logo.svg: кольцо + «Surf» + слоган) — только на экране загрузки. */
.mark { display: block; width: 72px; height: 72px; -webkit-user-select: none; user-select: none; pointer-events: none; }
.mark-56 { width: 64px; height: 64px; }

/* ---------- экраны ---------- */
/* Без vh/dvh/lvh: iOS standalone занижает dvh на ~74 pt (чёрная полоса), а lvh при fixed сдвигал экран вверх. inset:0 = весь viewport. */
#app { position: absolute; top: 0; left: 0; right: 0; height: 100%; overflow: hidden; background: var(--bg); }
.screen { position: absolute; inset: 0; bottom: var(--kb, 0px); display: none; flex-direction: column; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }   /* --kb — высота клавиатуры (surf-app-init) */
.screen.on { display: flex; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; height: auto; padding: 10px 16px; border-radius: var(--radius-control);
  background: var(--surface-2); color: var(--text); font-size: var(--type-action); font-weight: 600;
  -webkit-user-select: none; user-select: none;
  transition: transform var(--t-release), opacity .2s;
}
.btn:active { transform: scale(.97); transition-duration: var(--t-press); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: none; color: var(--text-2); }
.btn.text { background: none; color: var(--link); font-weight: 400; }
.btn.danger { color: var(--danger); }
.btn.small { min-height: 44px; height: auto; padding: 0 16px; font-size: var(--type-body); }
.btn:disabled { opacity: .4; cursor: default; }
.btn[hidden] { display: none; }
.icon-btn {
  width: 44px; height: 44px; border-radius: var(--radius-control); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: var(--text); transition: transform var(--t-release);
}
.icon-btn:active { transform: scale(.92); transition-duration: var(--t-press); }
/* плавающая круглая кнопка 56 в зоне большого пальца (снизу справа): «+» на Главной и в «Мои видео» — загрузка видео */
.fab {
  position: absolute; right: var(--screen-x); bottom: calc(var(--sab) + 16px); z-index: 5;
  width: 58px; height: 58px; border-radius: 50%; color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-grad); box-shadow: var(--accent-glow);
  transition: transform var(--t-release);
}
.fab:active { transform: scale(.94); transition-duration: var(--t-press); }
.fab .i-lg { width: 32px; height: 32px; stroke-width: 2; }

/* ---------- поля ---------- */
.fields { display: flex; flex-direction: column; gap: 12px; }
.fields input[type=text], .fields input[type=password] {
  width: 100%; height: 48px; padding: 0 16px; border-radius: var(--radius-control);
  background: var(--surface-2); border: 1px solid transparent; outline: 0; font-size: var(--type-action);
  -webkit-appearance: none; appearance: none;
}
.fields input::placeholder { color: var(--text-3); }
.fields input:focus { border-color: rgba(30, 155, 232, .55); }
.fields input:user-invalid { border-color: rgba(255, 107, 107, .5); }
.fields input[hidden] { display: none; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 4px 4px 0; font-size: var(--type-caption); line-height: 1.4; color: var(--text-2); }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.check[hidden] { display: none; }
.error { margin: 0; color: var(--danger); font-size: var(--type-body); }
.error[hidden] { display: none; }

/* ---------- boot: оригинальный логотип целиком (logo.svg: кольцо + «Surf» + слоган) по центру на ground, ширина 62 % экрана,
   мягкое появление 300 мс; #boot-logo — контейнер под будущий анимированный логотип ---------- */
#screen-boot { align-items: center; justify-content: center; background: #0b1014; color-scheme: dark; overflow: hidden; }
.boot { display: flex; align-items: center; justify-content: center; animation: boot-in .3s ease-out both; }
.boot img { display: block; width: 62vw; max-width: 340px; height: auto; -webkit-user-select: none; user-select: none; pointer-events: none; }
@keyframes boot-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- вход: карточка на стекле, знак 64, поля, одна кнопка на акценте. Центр — margin: auto (не justify-content: center):
   при клавиатуре экран становится короче карточки и должен скроллиться к полю, а не обрезать верх ---------- */
#screen-auth { align-items: center; padding: var(--top) var(--screen-x) calc(var(--sab) + 16px); }
.card { width: min(400px, 100%); margin: auto 0; flex: 0 0 auto; border-radius: var(--r-22); padding: 20px; box-shadow: var(--shadow); }
.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 16px; }
.brand .mark { width: 64px; height: 64px; }   /* знак с буквами — заголовок карточки входа; отдельного слова «Surf» рядом нет */
.brand .caption { color: var(--text-3); }
#auth-submit { margin-top: 4px; }

/* ---------- главная: сверху справа круглые кнопки 40 с шагом 8 («Мои видео», аватар → лист «Профиль»), снизу справа FAB «+» (загрузка);
   нижний отступ контента — под FAB (56 + 16 + 16) ---------- */
#screen-home { padding: 0; overflow: hidden; }
/* Главная скроллится внутри .home-scroll, FAB стоит в экране (absolute) — та же позиция, что в «Мои видео»: fixed внутри
   fixed-#app на iOS standalone считался бы от укороченного viewport и висел на ~74 pt выше. */
.home-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 0 calc(var(--sab) + 96px); }
.pill { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: var(--type-body); font-weight: 600; display: inline-flex; align-items: center; transition: transform var(--t-release), background var(--t-release); }
.pill:active { transform: scale(.97); transition-duration: var(--t-press); }
.home-top { display: flex; justify-content: flex-start; align-items: center; gap: 10px; min-height: 48px; margin: var(--top) auto 0; padding-inline: 12px; width: 100%; max-width: 600px; flex: 0 0 auto; }
.home-top .icon-btn { width: 40px; height: 40px; }
.avatar {
  position: relative; overflow: hidden;                            /* фото поверх буквы: avatarPaint() кладёт внутрь <img> */
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text); font-weight: 600; font-size: var(--type-body); text-transform: uppercase;
  transition: transform var(--t-release);
}
.avatar img, .ava-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
button.avatar:active { transform: scale(.92); transition-duration: var(--t-press); }
.home { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 600px; margin-inline: auto; }
.home h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.q {
  display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 6px 0 20px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line);
  margin-top: -8px;
}
.q:focus-within { border-color: rgba(30, 155, 232, .45); }
.q input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: var(--type-nav); }
.q input::placeholder { color: var(--text-3); }
.q button {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--radius-control); color: var(--link);
  background: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center; transition: transform var(--t-release);
}
.q button:active { transform: scale(.92); transition-duration: var(--t-press); }
.q button .i { width: 21px; height: 21px; }
.cont {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px;
  border-radius: var(--r-16); background: var(--surface); text-align: left; transition: transform var(--t-release);
}
.cont:active { transform: scale(.98); transition-duration: var(--t-press); }
.cont[hidden] { display: none; }
.cont-img { width: 48px; height: 64px; border-radius: var(--r-12); background: var(--surface-2); overflow: hidden; flex: 0 0 auto; display: block; }
.cont-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cont-img img[hidden] { display: none; }
.cont-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cont-t b { font-size: var(--type-nav); }
.cont-t span { font-size: var(--type-body); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cont-go { color: var(--text-3); }
#home-topics-cap { margin-bottom: -12px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-22); overflow: hidden; isolation: isolate;
  background: var(--surface); text-align: left;
  transition: transform var(--t-release), opacity .2s;
}
.tile:active { transform: scale(.97); transition-duration: var(--t-press); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.tile img.ready { opacity: 1; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 16, 20, 0) 40%, rgba(11, 16, 20, .78)); }
.tile .t {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1;
  font-size: var(--type-nav); font-weight: 600; line-height: 1.2; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile .soon { position: absolute; left: 16px; bottom: 14px; z-index: 1; font-size: var(--type-caption); font-weight: 400; color: var(--text-3); }   /* второй строкой под названием */
.tile.low { opacity: .6; }
.tile.low .t { bottom: 34px; color: var(--text-2); }
.empty { margin: 0; font-size: var(--type-body); }
.empty[hidden] { display: none; }

/* ---------- листы (профиль, «ещё», «что это») ---------- */
.sheet-back {
  /* --kb (surf-app-init) — высота клавиатуры: лист живёт над ней, иначе поле ввода уходит под клавиатуру (fixed считается от viewport) */
  position: fixed; inset: 0; bottom: var(--kb, 0px); z-index: 40; background: var(--scrim);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.sheet-back.on { opacity: 1; pointer-events: auto; }
.sheet {
  width: min(520px, 100%); max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain;
  background: var(--surface); border-radius: var(--r-22) var(--r-22) 0 0;
  padding: 8px 16px max(16px, calc(var(--sab) + 16px - var(--kb, 0px))); display: flex; flex-direction: column; gap: 12px;
  transform: translateY(24px); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.sheet-back.on .sheet { transform: none; }
.grab { width: 36px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto 2px; flex: 0 0 auto; }
.list { display: flex; flex-direction: column; background: var(--surface-2); border-radius: var(--r-16); overflow: hidden; flex: 0 0 auto; }
.row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; width: 100%; font-size: var(--type-body); line-height: 1.4; text-align: left; }
.row + .row { border-top: 1px solid var(--line); }
.row span { flex: 1; min-width: 0; }
.row .i, .row .tail { color: var(--text-2); }
.row:active { background: var(--hover); }
.row.danger, .row.danger .i { color: var(--danger); }
.row[hidden] { display: none; }
.sheet h3 { margin: 4px 0 0; font-size: 19px; font-weight: 600; }
.sheet .sec { margin-top: 4px; }
.sheet .caption.center { margin-top: 4px; color: var(--text-3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips[hidden], .chips:empty { display: none; }
.list .chips { padding: 12px 16px 16px; }
.chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--type-body); }
.list .chip { background: var(--surface); }
.chip.dim { color: var(--text-2); }

/* ---------- лист «Профиль»: круглый аватар 88 (тап — выбрать фото), @handle подписью, «Имя» и «О себе», «Сохранить»;
   «Выйти» — отдельным блоком ниже через разделитель. Ник не редактируется: он в ссылках и упоминаниях ---------- */
.prof { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.prof input[type=file] { display: none; }
.hint { margin: -4px 0 0; padding: 0 4px; color: var(--text-3); }
.hint b { color: var(--text-2); font-weight: 600; }
.prof-top { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.prof-top b { font-size: var(--type-body); font-weight: 400; color: var(--text-2); }
.prof-top .btn.small { margin-top: -2px; }
.prof-top .caption { margin-top: 6px; color: var(--text-3); }
.prof-top .caption[hidden] { display: none; }
.ava-xl {
  position: relative; width: 88px; height: 88px; border-radius: 50%; flex: 0 0 auto;
  transition: transform var(--t-release), opacity .2s;
}
.ava-xl:active { transform: scale(.97); transition-duration: var(--t-press); }
.ava-xl:disabled { opacity: .5; }
.ava-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text); font-size: 32px; font-weight: 600; text-transform: uppercase;
}
.ava-cam {
  position: absolute; right: 2px; bottom: 2px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-2); border: 2px solid var(--surface);
}
.ta { position: relative; display: block; }
.ta textarea {
  width: 100%; min-height: 92px; padding: 12px 16px 22px; border-radius: var(--r-16);
  background: var(--surface-2); color: var(--text); border: 1px solid transparent; outline: 0;
  font: 16px/1.4 var(--font); resize: none; -webkit-appearance: none; appearance: none;
}
.ta textarea::placeholder { color: var(--text-3); }
.ta textarea:focus { border-color: rgba(30, 155, 232, .55); }
.ta-left {  /* поверх текста, поэтому со своим фоном — иначе цифры теряются на последней строке */
  position: absolute; right: 8px; bottom: 6px; padding: 0 6px; border-radius: var(--r-12);
  background: var(--surface-2); font-size: var(--type-caption); color: var(--text-3); font-variant-numeric: tabular-nums;
}
.ta-left[hidden] { display: none; }
.list.sep { margin-top: 4px; }

/* ---------- кадрирование аватара (#avatar-crop, surf-home.js): полноэкранный слой над листом «Профиль» ----------
   Круглая рамка min(280px, 76vw), внутри canvas в device pixel ratio — рисует surf-home.js (перетаскивание, pinch, ползунок).
   Слой выше .sheet-back (40) и ниже тоста (60); отступы — safe-area сверху и снизу. */
.crop {
  position: fixed; inset: 0; z-index: 50; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: calc(var(--top) + 8px) var(--screen-x) calc(var(--sab) + 24px);
}
.crop[hidden] { display: none; }
.crop-bar { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 520px; flex: 0 0 auto; }
.crop-stage {
  position: relative; margin: auto 0; flex: 0 0 auto;
  width: min(280px, 76vw); height: min(280px, 76vw); border-radius: 50%; overflow: hidden; background: #000;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.crop-stage[hidden] { display: none; }
.crop-stage::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); pointer-events: none; }
.crop-stage canvas { display: block; width: 100%; height: 100%; }
.crop-tools { width: 100%; max-width: 520px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.crop-tools[hidden] { display: none; }
.crop-zoom { display: flex; align-items: center; gap: 12px; color: var(--text-3); }
.crop-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line-strong); flex: 0 0 auto; }   /* края ползунка: меньше — больше */
.crop-dot.sm { width: 8px; height: 8px; }
.crop-zoom input {
  flex: 1; min-width: 0; height: 44px; margin: 0; background: none; -webkit-appearance: none; appearance: none;
}
.crop-zoom input:focus { outline: 0; }
.crop-zoom input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.crop-zoom input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: var(--text); box-shadow: var(--shadow); }
.crop-zoom input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-strong); border: 0; }
.crop-zoom input::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--text); }
.crop .error { flex: 0 0 auto; max-width: 520px; }
.crop.failed .error { margin: auto 0; font-size: var(--type-nav); line-height: 1.35; }   /* фото не открылось: рамки нет, текст по центру слоя */

/* ---------- тост ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--sab) + 24px); transform: translateX(-50%);
  max-width: min(92vw, 420px); padding: 12px 20px; border-radius: var(--r-pill);
  font-size: var(--type-secondary); font-weight: 400; text-align: center; z-index: 60; pointer-events: none; box-shadow: var(--shadow);
}
.toast[hidden] { display: none; }
.toast.error { color: var(--danger); }
.toast.ok { color: var(--text); }
.toast.warn { color: var(--warn); }

@media (min-width: 700px) {
  #screen-home .fab { right: max(var(--screen-x), calc(50% - 300px + var(--screen-x))); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Visual hierarchy and accessible, consistent controls. */
/* App-wide visual policy: modal autofocus must never draw a browser ring.
   Keep actual focus, tab order and focus restoration; component CSS cannot override this. */
:focus, :focus-visible { outline: none !important; }
button:disabled { cursor: default; }
.field-label { display: block; font-size: var(--type-caption); font-weight: 600; color: var(--text-2); }
.fields > .field-label { margin-bottom: -6px; }
.brand h1 { margin: 4px 0 0; font-size: var(--type-title); line-height: 1.2; letter-spacing: -.025em; }
.brand .caption { color: var(--text-2); text-align: center; }
.auth-tabs { display: flex; background: var(--bg); padding: 4px; border-radius: 14px; margin-bottom: 16px; gap: 4px; }
.auth-tabs button { flex: 1; min-height: 44px; font-size: var(--type-secondary); border-radius: 10px; color: var(--text-2); }
.auth-tabs button[aria-pressed=true] { background: var(--surface-2); color: var(--text); font-weight: 600; }
.password-field { position: relative; }
.password-field input { padding-right: 52px !important; }
.password-field button { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-2); }
/* Home: one type hierarchy, content-led covers and a separate action surface. */
#screen-home { background: var(--bg); }
#screen-offline { align-items: center; justify-content: center; padding: 24px; text-align: center; background: var(--bg); }
#screen-offline .offline-card { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 320px; }
#screen-offline h2 { margin: 8px 0 0; font-size: 1.375rem; }
#screen-offline .btn { margin-top: 8px; }
.home-brand { width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; margin-left: -5px; }
.home-top .avatar { margin-left: auto; min-width: 44px; height: 44px; background: var(--surface-2); font-size: .9375rem; }
.home-top .icon-btn, .pill { min-width: 44px; height: 44px; }
.icon-btn.quiet { background: transparent; }
.home-search { margin: 6px 12px 8px; }
.eyebrow { margin: 0; font-size: 11px; letter-spacing: .12em; font-weight: 600; color: var(--link); }
#home-form { margin: 0; min-height: 46px; height: auto; gap: 8px; padding: 0 2px 0 12px; border: 1px solid transparent; border-radius: 12px; background: var(--surface-2); }
#home-form:focus-within { border-color: var(--line-strong); }
#home-form .home-search-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-3); }
#home-q { padding: 10px 0; font-size: 1rem; line-height: 1.25; }
#home-q::placeholder { color: var(--text-3); }
#home-go { width: 44px; height: 44px; flex-basis: 44px; background: none; color: var(--link); box-shadow: none; }
#home-go:disabled { background: none; color: var(--text-3); }
#home-go .i { width: 21px; height: 21px; }
.home-feature { display: flex; flex-direction: column; gap: 11px; width: 100%; padding: 0; text-align: left; background: none; border-radius: 0; color: var(--text); }
.home-feature[hidden] { display: none; }
.feature-art { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; padding: 16px; width: 100%; aspect-ratio: 16 / 10; min-height: 10rem; overflow: hidden; border-radius: 0; background: #071b26; isolation: isolate; }
.wave-loader { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse at 62% 24%, #164857, transparent 70%), #071b26; opacity: 1; }
.wave-loader svg, .wave-loader canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wave-loader canvas { opacity: .95; }
.home-feature.wave-playing .wave-loader { opacity: 0; visibility: hidden; transition: opacity .65s ease, visibility 0s .65s; }
.feature-art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #00141b00 20%, #00141b33 50%, #00141bcc); z-index: -1; }
.feature-play { display: grid; place-items: center; width: 32px; height: 32px; color: #fff; transition: transform .16s; }
.feature-play .i { width: 28px; height: 28px; }
#home-feature-title { color: var(--media-text); font-size: 1.5rem; line-height: 1.15; letter-spacing: -.025em; font-weight: 600; text-shadow: 0 1px 6px #0006; }
.feature-copy { display: grid; gap: 6px; text-align: left; }
.feature-art .feature-play { align-self: end; }
.feature-description { color: var(--media-text); font-size: .8125rem; line-height: 1.35; text-align: left; text-shadow: 0 1px 6px #0009; }
.home-feature:active .feature-play { transform: scale(.94); background: #18242b85; }
@media (hover: hover) { .home-feature:hover .feature-play { background: #18242b85; } }
.section-heading { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.section-heading h2 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.3; margin: 0; }
.section-heading[hidden] { display: none; }
#home-topics-cap { margin-bottom: -10px; }
#home-topics { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(8rem, calc(50% - 1px))), 1fr)); gap: 2px; border-radius: 12px; overflow: hidden; }
#home-topics .tile { width: 100%; min-width: 0; display: grid; grid-template-rows: 1fr auto; align-self: stretch; padding: 8px; min-height: 6.25rem; aspect-ratio: 3 / 2; border-radius: 0; overflow: hidden; background: var(--surface-2); }
#home-topics .tile::after { display: none; }
#home-topics .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.tile-caption { grid-row: 2; justify-self: start; max-width: 100%; min-width: 0; padding: 6px 9px; display: flex; flex-direction: column; gap: 2px; z-index: 1; }
.tile-caption { border: 1px solid #ffffff38; border-top-color: #ffffff59; border-radius: 15px; background: #18232ef5; box-shadow: inset 0 1px 0 #ffffff0a, 0 2px 8px #00000012; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tile-caption { background: linear-gradient(140deg, #ffffff0a, #ffffff00), #0a141ca6; -webkit-backdrop-filter: blur(14px) saturate(135%); backdrop-filter: blur(14px) saturate(135%); }
}
#home-topics .tile .t { position: static; padding: 0; font-size: .875rem; font-weight: 500; line-height: 1.25; color: #fff; text-shadow: none; white-space: normal; overflow-wrap: anywhere; }
#home-topics .tile .soon { position: static; padding: 0; color: #eef2f6; font-size: .6875rem; line-height: 1.25; }
#home-topics .tile .soon[hidden] { display: none; }
#home-topics .tile:disabled { opacity: 1; cursor: default; }
.home .cont { padding: 9px 0; border-radius: 0; background: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home .cont-img { width: 38px; height: 48px; border-radius: 6px; }
.home .cont-t b { font-size: .875rem; font-weight: 500; line-height: 1.4; }
.home .cont-t span { font-size: .8125rem; color: var(--text-3); line-height: 1.4; }
.home .cont-go { width: 17px; height: 17px; }
.home-continue-slot { display: grid; grid-template-rows: 0fr; min-height: 0; margin-top: 0; opacity: 0; transition: grid-template-rows .4s cubic-bezier(.2,.7,.3,1), margin-top .4s cubic-bezier(.2,.7,.3,1), opacity .3s ease; }
.home-continue-slot.open { grid-template-rows: 1fr; margin-top: 0; opacity: 1; }
.home-continue-clip { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .home-continue-slot { transition: none; }
}
.home-toolbar { position: absolute; bottom: calc(var(--sab) + 10px); left: var(--screen-x); right: var(--screen-x); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 5px 4px; border: 1px solid var(--line); border-radius: 22px; background: var(--glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--shadow); }
.home-toolbar button { min-height: 48px; min-width: 44px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 16px; background: none; color: var(--text-2); font-size: .6875rem; font-weight: 500; line-height: 1.2; }
.home-toolbar button span { max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; }
.home-toolbar button .i { width: 1.3125rem; height: 1.3125rem; }
.home-toolbar button:active { background: var(--line); }
.home-scroll { padding-bottom: calc(var(--sab) + 6.5rem); }
.recent-queries { padding-top: 0; }
.recent-queries .chip { min-height: 44px; font-size: var(--type-caption); }
@media (min-width: 600px) { .home-toolbar { max-width: 520px; margin-inline: auto; } }
@media (prefers-reduced-transparency: reduce) { .tile-caption { background: #18232e; backdrop-filter: none; -webkit-backdrop-filter: none; } .home-toolbar { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; } .feature-play { background: #18242be6; backdrop-filter: none; -webkit-backdrop-filter: none; } }
.sheet-header { position: relative; min-height: 42px; flex: 0 0 auto; touch-action: pan-x; }
.sheet-header .grab { margin-top: 2px; }
.sheet-close { position: absolute; right: 0; top: 0; width: 44px; height: 44px; background: none; }
.sheet-close .i { width: 20px; height: 20px; }
.sheet { padding: 8px var(--screen-x) max(16px, calc(var(--sab) + 12px - var(--kb, 0px))); gap: 12px; }
.sheet-back:not(.on) { visibility: hidden; }
.sheet-back.on { visibility: visible; }
.sheet h3 { font-size: var(--type-title); letter-spacing: -.02em; }
.prof-top { padding-top: 0; }
.chip { min-height: 36px; }
button.chip { min-height: 44px; height: auto; padding-block: 8px; }
.toast { bottom: calc(var(--sab) + 88px); border: 1px solid var(--line); }
.library-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 20px calc(var(--sab) + 24px); width: 100%; max-width: 600px; margin: 0 auto; }
.library-body > .muted { font-size: var(--type-body); margin: 0 0 24px; }
.saved-list { display: flex; flex-direction: column; gap: 12px; }
.saved-card { display: flex; align-items: center; gap: 12px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.saved-open { display: flex; align-items: center; gap: 12px; text-align: left; flex: 1; min-width: 0; }
.saved-open img { width: 54px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.saved-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.saved-copy b { font-size: var(--type-body); overflow-wrap: anywhere; }
.saved-copy small { color: var(--text-2); font-size: var(--type-caption); }
.saved-card .icon-btn { background: transparent; }
.library-empty { text-align: center; padding: 28px 12px; display: flex; align-items: center; flex-direction: column; gap: 16px; }
.library-empty h2 { margin: 0; font-size: var(--type-title); }
.library-empty p { margin: 0; color: var(--text-2); font-size: var(--type-body); line-height: 1.5; }
#moment-body .vp { width: 100%; height: 48dvh; border-radius: var(--radius-card); }
#moment-body h2 { font-size: var(--type-title); letter-spacing: -.02em; margin: 16px 0 8px; }
.moment-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.moment-actions .btn { flex: 1; min-width: 0; }
.moment-actions .icon-btn { width: 48px; height: 48px; border-radius: var(--radius-control); }
.offline-card h1 { margin: 16px 0 12px; font-size: var(--type-title); }
.offline-card p { font-size: var(--type-body); line-height: 1.5; }
.offline-card .btn { margin-top: 12px; width: 100%; }
@media (min-width: 700px) { .home-create { right: max(20px, calc(50% - 240px)); } }
@media (max-width: 359px) { .card { padding: 20px 16px; } .home-top .pill { padding: 0 12px; font-size: var(--type-secondary); } .sheet { padding-left: 16px; padding-right: 16px; } }

.field-label[hidden] { display: none; }
.auth-help { text-align: center; line-height: 1.5; margin-top: 8px; }
.skeleton { background: var(--surface-2); animation: skeleton-pulse 1.4s ease-in-out infinite; }
.skeleton::after { display: none; }
@keyframes skeleton-pulse { 50% { opacity: .5; } }
.saved-remove .i { fill: var(--text); }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* Compact sheet header: title and close share a row below the drag handle. */
.compact-header { display: flex; align-items: center; min-height: 52px; padding-top: 8px; gap: 12px; }
.compact-header .grab { position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin: 0; }
.compact-header h3 { flex: 1; margin: 0; font-size: var(--type-title); }
.compact-header .sheet-close { position: static; flex: 0 0 44px; }
/* Profile identity and language control. */
.prof-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-width:0; }
.prof-heading > b { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.language-toggle { position:relative; display:inline-flex; flex:none; align-items:center; padding:3px; border:1px solid var(--line-strong); border-radius:999px; background:var(--hover); color:var(--text-3); cursor:pointer; min-height:36px; isolation:isolate; }
.language-toggle::before { content:""; position:absolute; z-index:-1; top:3px; bottom:3px; left:3px; width:calc((100% - 6px)/2); background:var(--selected); border-radius:999px; transition:transform .18s ease; }
.language-toggle[aria-checked="true"]::before { transform:translateX(100%); }
.language-toggle span { min-width:32px; text-align:center; font-size:11px; font-weight:650; letter-spacing:.06em; line-height:28px; }
.language-toggle[aria-checked="false"] span:first-child,.language-toggle[aria-checked="true"] span:last-child { color:var(--text); }
.language-toggle:focus-visible { outline:2px solid var(--accent,#15a9e4); outline-offset:3px; }
.language-toggle:disabled { opacity:.55; cursor:wait; }
@media (prefers-reduced-motion:reduce) { .language-toggle::before { transition:none; } }

.auth-language-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.auth-language-row .language-toggle { min-height: 44px; }

#auth-registration-policy { min-width: 0; }
#auth-registration-policy input, #auth-registration-policy select { box-sizing: border-box; display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 48px; color-scheme: inherit; font-size: var(--type-action); }

.auth-language-row { align-items: center; justify-content: space-between; gap: 12px; }
.auth-language-row a { color: var(--text-3); font-size: var(--type-small); text-decoration: none; }

.privacy-dialog{color:var(--text,#f4f5f7);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sheet);padding:16px 20px;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 80px);box-sizing:border-box;overflow:auto}.privacy-dialog::backdrop{background:var(--scrim)}.privacy-dialog h3{font-size:var(--type-title);margin:0}.privacy-dialog summary{padding:14px 0;font-size: var(--type-body);cursor:pointer}.privacy-dialog label{display:block;font-size: var(--type-secondary);margin:12px 0}.privacy-dialog input[type=password]{display:block;width:100%;box-sizing:border-box;font-size: var(--type-action);margin-top:8px}.privacy-dialog input[type=checkbox]{width:auto}.privacy-document{white-space:pre-wrap;font-size: var(--type-secondary);line-height:1.5}.privacy-dialog .btn{font-size: var(--type-secondary)}.privacy-dialog .caption{font-size: var(--type-caption);line-height:1.45}

.privacy-dialog input:not([type=checkbox]){display:block;width:100%;box-sizing:border-box;font-size: var(--type-action);min-height:42px;margin-top:8px}

/* Top-layer dialogs do not inherit the screen/sheet keyboard inset. Keep their
   own scrollport inside the visible area, including WKWebView's autofill bar. */
html[data-keyboard] dialog[open] {
  position: fixed;
  top: calc(var(--keyboard-view-top, 0px) + max(12px, var(--sat)));
  bottom: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-height: max(0px, calc(var(--keyboard-view-height) - max(12px, var(--sat)) - 12px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 12px;
}
.screen, .sheet { scroll-padding-block: 12px; }

/* Shared email authentication fields; system controls keep an accessible hit target. */
.fields input[type=email], #auth-registration-policy input, #auth-registration-policy select {
  width: 100%; min-height: 48px; padding: 12px 16px; border-radius: var(--r-16);
  background: var(--surface-2); border: 1px solid transparent; color: var(--text); font: inherit; font-size: var(--type-action);
}
#auth-registration-policy { display: flex; flex-direction: column; gap: 12px; }
.auth-date-field { position: relative; width: 100%; min-width: 0; max-width: 100%; }
#auth-registration-policy .auth-date-field input {
  box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; height: 48px;
  margin: 0; padding: 12px 48px 12px 16px; line-height: 22px;
  -webkit-appearance: none; appearance: none;
}
.auth-date-field input::-webkit-date-and-time-value { min-width: 0; text-align: left; }
.auth-date-field input::-webkit-datetime-edit { padding: 0; }
.auth-date-field input:invalid:not(:focus)::-webkit-datetime-edit,
.auth-date-field input:invalid:not(:focus)::-webkit-date-and-time-value { opacity: 0; }
.auth-date-placeholder { position: absolute; left: 16px; right: 48px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: var(--type-action); pointer-events: none; }
.auth-date-field input:valid ~ .auth-date-placeholder,
.auth-date-field input:focus ~ .auth-date-placeholder { display: none; }
.auth-date-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; color: var(--text-3); pointer-events: none; }
.auth-date-icon .i { width: 20px; height: 20px; }
.auth-date-field input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
#auth-registration-policy[hidden], #auth-form [hidden] { display: none !important; }
#auth-form input:focus-visible, #auth-form select:focus-visible, #auth-form button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.auth-step-title { margin: 0; font-size: var(--type-title); line-height: 1.25; font-weight: 650; }
.auth-text-button { min-height: 44px; color: var(--link); font-size: var(--type-body); text-align: center; }
.auth-text-button:disabled { color: var(--text-3); }
#auth-email-code { letter-spacing: .3em; font-size: 24px; text-align: center; }
#auth-step-description { overflow-wrap: anywhere; }

/* Fixed icon/text columns keep both providers aligned, independently of label length. */
.auth-providers { margin: 16px 0 0; gap: 8px; }
.oauth-button { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; height: auto; padding: 11px 20px; background: #fff; color: #1f1f1f; border: 1px solid #747775; text-align: left; }
.oauth-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.oauth-icon img { display: block; object-fit: contain; }
.oauth-google .oauth-icon img { width: 20px; height: 20px; }
.oauth-apple .oauth-icon img { width: 20px; height: 24px; }
.auth-divider { display: flex; align-items: center; gap: 12px; text-align: center; margin: 0 0 4px; font-size: var(--type-caption); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
#auth-brand[hidden], #auth-tabs[hidden], #auth-confirmed-email[hidden] { display: none; }
.auth-confirmed-email { margin: 0 0 8px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2, #1b242e); color: var(--text-2); font-size: var(--type-secondary); overflow-wrap: anywhere; }
#auth-step-title:focus { outline: none; }
#reauth-providers { margin-top: 16px; }
#methods-list > .fields { padding: 12px 0; border-top: 1px solid var(--line); }

#auth-providers[hidden], #auth-providers [hidden], #methods-dialog [hidden], #reauth-dialog [hidden], #privacy-dialog [hidden] { display: none !important; }

/* Google Sans: Copyright 2022 The Google Sans Flex Project Authors (github.com/googlefonts/googlesans-flex)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

*/
@font-face { font-family: "Surf OAuth"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/google-sans-medium.woff2") format("woff2"); }
.oauth-button { font-family: "Surf OAuth", var(--font); font-size: var(--type-action); font-weight: 500; }

@media (prefers-reduced-motion: reduce) { .tile, .tile img, .home-feature, .feature-play, .cont { transition: none; } }

/* Shared action hierarchy: compact groups, visible names, consistent touch targets. */
.action-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--radius-card); }
.action-panel button { min-width: 0; min-height: 64px; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-control); font-size: var(--type-caption); line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.action-panel .i { width: 22px; height: 22px; }
.action-panel button:active { background: var(--hover); }
.action-panel button[aria-pressed=true] { color: var(--link); background: var(--info-bg); }
.menu-disclosure { flex-shrink: 0; border-radius: var(--radius-card); background: var(--surface-2); }
.menu-disclosure > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; list-style: none; cursor: pointer; font-size: var(--type-body); line-height: 1.4; }
.menu-disclosure > summary::-webkit-details-marker { display: none; }
.menu-disclosure > summary span { flex: 1; min-width: 0; }
.menu-disclosure > summary .i { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
.menu-disclosure > summary .i:last-child { margin-left: auto; transition: transform .15s; }
.menu-disclosure[open] > summary .i:last-child { transform: rotate(90deg); }
.menu-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.menu-disclosure .list { background: none; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.auth-appearance { background: none; padding: 0; margin-top: 12px; }
.auth-appearance > summary { padding-inline: 0; color: var(--text-2); }
.auth-appearance .appearance-options { margin-bottom: 8px; }
.privacy-dialog .compact-header { padding-top: 0; min-height: 44px; margin-bottom: 12px; }
.privacy-dialog .compact-header h3 { line-height: 1.25; }
.privacy-dialog input:not([type=checkbox]) { min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-2); color: var(--text); }
.privacy-dialog details + details { border-top: 1px solid var(--line); }
.privacy-dialog .error:empty, .privacy-dialog .caption:empty { display: none; }
@media (max-width: 359px) { .action-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.privacy-dialog label:has(input[type=checkbox]) { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.privacy-dialog input[type=checkbox] { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
#privacy-delete .btn, #privacy-withdraw { color: var(--danger); background: var(--danger-bg); }

/* Sign-in prioritizes the available methods, without a promotional hero above the form. */
.auth-language-row .brand { margin: 0; }
.auth-language-row .mark { width: 56px; height: 56px; }
.auth-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px; margin-top: 8px; }
.auth-footer .auth-appearance { margin: 0; border: 0; }
.auth-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-3); font-size: var(--type-small); text-decoration: none; }

.password-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.password-label .auth-text-button { font-size: var(--type-caption); text-align: right; }
#auth-password-group { gap: 4px; }
.auth-footer .auth-appearance > summary { gap: 6px; font-size: var(--type-caption); }
.auth-footer:has(.auth-appearance[open]) { grid-template-columns: 1fr; }

.sheet > .sheet-header { position: sticky; top: -8px; background: var(--surface); z-index: 3; flex-shrink: 0; }
.privacy-dialog > .sheet-header { position: sticky; top: -16px; background: var(--surface); z-index: 3; }
#ugc-items section { border-top: 1px solid var(--line); padding: 12px 0; }
#ugc-items p { white-space: pre-wrap; overflow-wrap: anywhere; }
#ugc-items textarea { display: block; width: 100%; min-height: 96px; box-sizing: border-box; resize: vertical; margin: 8px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-2); color: var(--text); font: inherit; }
#ugc-items .btn { max-width: 100%; white-space: normal; }

/* Provider maintenance is a settings row; branded authorization remains a full button. */
#methods-list > .fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
#methods-list > .fields > p { margin: 0; font-size: var(--type-body); }
#methods-list > .fields > .method-note { grid-column: 1 / -1; font-size: var(--type-caption); }
#methods-list > .fields > .oauth-button { grid-column: 1 / -1; }
#methods-list > .caption { margin: 0; }

/* Caveat, local font: https://github.com/googlefonts/caveat
Copyright 2014 The Caveat Project Authors (https://github.com/googlefonts/caveat)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

*/
@font-face { font-family: 'Surf Signature'; src: url('../fonts/caveat-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
.home-signature { display: flex; flex-direction: column; flex: 0 1 auto; font-family: 'Surf Signature', cursive; font-size: 1.4rem; font-weight: 600; line-height: .86; letter-spacing: -.015em; color: var(--text); transform: rotate(-4deg); margin-left: 2px; padding: 3px 0 5px; }
.home-signature span:last-child { margin-left: 14px; }