/* Блокнот: детский рисунок в палитре Claude. Светлая тема — карандаш и мелки на бумаге, тёмная — мел на доске. */
@font-face {
  font-family: "Shantell"; font-weight: 300 700; font-display: swap;
  src: url(fonts/shantell-cyrillic.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0301, U+2116;
}
@font-face {
  font-family: "Shantell"; font-weight: 300 700; font-display: swap;
  src: url(fonts/shantell-latin.woff2) format("woff2");
  unicode-range: U+0020-007E, U+00A0-00BF, U+00D7, U+2010-203A, U+20BD, U+2190-2193;
}

:root {
  --paper: #faf9f5;
  --ink: #141413;
  --pencil: #6b6a64;
  --smudge: #e8e6dc;
  --crayon: #d97757;
  --crayon-text: #a8502e;
  --on-crayon: #141413;
  /* Неровные углы: так рамка выглядит нарисованной, а не начерченной. */
  --wobble: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --wobble-alt: 18px 225px 18px 255px / 255px 18px 225px 18px;
  --wobble-soft: 22px 30px 20px 34px / 32px 20px 34px 22px;
  --ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 44 44'%3E%3Cpath d='M10.2 6.9C11.6 6.5 16 4.3 18.9 4.1C21.8 4 25 4.8 27.7 6.1C30.4 7.3 33.3 9.2 35.2 11.6C37 14.1 38.6 17.7 38.6 20.8C38.5 23.9 37 27.7 35 30C32.9 32.4 29.4 33.7 26.5 34.7C23.5 35.6 20.4 36.2 17.4 35.9C14.4 35.7 10.8 34.8 8.3 33C5.8 31.2 3.4 28.1 2.4 25.1C1.5 22.2 1.8 18.4 2.7 15.4C3.7 12.4 5.6 9.4 8 7.2C10.3 5.1 15.3 3.4 16.8 2.7' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  --ring-big: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 44 44'%3E%3Cpath d='M10.2 6.9C11.6 6.5 16 4.3 18.9 4.1C21.8 4 25 4.8 27.7 6.1C30.4 7.3 33.3 9.2 35.2 11.6C37 14.1 38.6 17.7 38.6 20.8C38.5 23.9 37 27.7 35 30C32.9 32.4 29.4 33.7 26.5 34.7C23.5 35.6 20.4 36.2 17.4 35.9C14.4 35.7 10.8 34.8 8.3 33C5.8 31.2 3.4 28.1 2.4 25.1C1.5 22.2 1.8 18.4 2.7 15.4C3.7 12.4 5.6 9.4 8 7.2C10.3 5.1 15.3 3.4 16.8 2.7' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='406' height='8'%3E%3Cpath d='M0 5.1C2.3 5.1 9.3 5.4 14 5.4C18.7 5.4 23.3 5.3 28 5.3C32.7 5.2 37.3 5.1 42 4.9C46.7 4.7 51.3 4.2 56 4C60.7 3.8 65.3 4 70 3.7C74.7 3.4 79.3 2.4 84 2.3C88.7 2.2 93.3 2.7 98 3C102.7 3.3 107.3 3.9 112 4.1C116.7 4.4 121.3 4.2 126 4.4C130.7 4.6 135.3 5.3 140 5.3C144.7 5.3 149.3 4.6 154 4.6C158.7 4.5 163.3 5 168 4.9C172.7 4.9 177.3 4.4 182 4.2C186.7 4 191.3 4.1 196 4C200.7 3.8 205.3 3.7 210 3.4C214.7 3.1 219.3 2.4 224 2.3C228.7 2.2 233.3 2.5 238 2.6C242.7 2.7 247.3 2.8 252 3.1C256.7 3.4 261.3 4.2 266 4.5C270.7 4.9 275.3 5 280 5C284.7 5 289.3 4.5 294 4.6C298.7 4.7 303.3 5.5 308 5.5C312.7 5.4 317.3 4.4 322 4.2C326.7 4 331.3 4.5 336 4.3C340.7 4.1 345.3 3.3 350 3C354.7 2.7 359.3 2.3 364 2.4C368.7 2.4 373.3 3.3 378 3.4C382.7 3.5 387.3 2.8 392 2.8C396.7 2.8 403.7 3.3 406 3.4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9C7.6 11.4 9.6 13.2 12 15.4C14.4 13 16.6 11 19.2 8.6' fill='none' stroke='%23141413' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #262624;
    --ink: #f3f1e9;
    --pencil: #a3a199;
    --smudge: #34342f;
    --crayon-text: #e08a6b;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9C7.6 11.4 9.6 13.2 12 15.4C14.4 13 16.6 11 19.2 8.6' fill='none' stroke='%23f3f1e9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.5 "Shantell", ui-rounded, system-ui, sans-serif;
  font-variation-settings: "INFM" 0, "BNCE" 0;
  padding: env(safe-area-inset-top) 0 calc(92px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
main { max-width: 560px; margin: 0 auto; padding: 20px 20px 8px; }

/* Заголовки пишутся «детской рукой», обычный текст — спокойным почерком, чтобы легко читался. */
h1 { font-size: 36px; line-height: 1.1; font-weight: 650; font-variation-settings: "INFM" 100, "BNCE" 40; margin: 16px 0 20px; }
h2 { font-size: 22px; line-height: 1.25; font-weight: 600; font-variation-settings: "INFM" 80, "BNCE" 20; margin: 36px 0 8px; }
h3 { font-size: 18px; line-height: 1.3; font-weight: 600; font-variation-settings: "INFM" 70, "BNCE" 0; margin: 28px 0 2px; }
h3::first-letter { text-transform: uppercase; }
p { margin: 6px 0; }
b { font-weight: 600; }
.muted { color: var(--pencil); font-size: 15px; }
.center { text-align: center; }
/* Толщина линии отдельным свойством: Safari не понимает её внутри сокращённой записи. */
a { color: inherit; text-decoration: underline wavy var(--crayon); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }

/* ---------- кнопки и поля: рамка = то, что можно нажать или заполнить ---------- */
button, .btn {
  font: inherit; font-weight: 600; font-variation-settings: "INFM" 40, "BNCE" 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 18px; cursor: pointer; text-decoration: none;
  color: var(--ink); background: none; border: 2px solid var(--ink); border-radius: var(--wobble);
  transition: transform 80ms ease-out;
}
button:active, .btn:active { transform: translateY(1px) rotate(-1deg); }
button:focus-visible, .btn:focus-visible, .btn:focus-within { outline: none; box-shadow: 0 0 0 3px var(--crayon); }
button:disabled { opacity: .5; }
button.small, .btn.small { min-height: 36px; padding: 4px 14px; font-size: 15px; }
/* Главное действие закрашено оранжевым мелком чуть мимо контура. */
button.primary { position: relative; isolation: isolate; border-color: transparent; color: var(--on-crayon); }
button.primary::before {
  content: ""; position: absolute; z-index: -1; inset: 4px -4px -4px 3px;
  background: var(--crayon); border-radius: var(--wobble-alt);
}
button.primary::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  border: 2px solid var(--ink); border-radius: var(--wobble);
}
button.ghost, .btn.ghost {
  border-color: transparent; min-height: 36px; padding: 4px 2px; font-weight: 500;
  text-decoration: underline wavy var(--pencil); text-decoration-thickness: 1px; text-underline-offset: 6px;
}
button.danger { color: var(--crayon-text); border-color: var(--crayon-text); }
button.back { border: 0; min-height: 36px; padding: 4px 0; margin: 0 0 2px; color: var(--pencil); font-weight: 500; }
button.icon { border: 0; min-height: 36px; min-width: 36px; padding: 6px; color: var(--pencil); }
button svg, .btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

input, textarea, select {
  font: inherit; font-size: 17px; width: 100%; color: var(--ink); background: transparent;
  border: 2px solid var(--ink); border-radius: var(--wobble); padding: 11px 14px; outline: none;
  -webkit-appearance: none; appearance: none;
}
textarea { min-height: 128px; resize: vertical; }
::placeholder { color: var(--pencil); opacity: 1; }
input:focus, textarea:focus, select:focus { border-color: var(--crayon); box-shadow: 0 0 0 1px var(--crayon); }
select { background: var(--chevron) no-repeat right 12px center / 20px; padding-right: 40px; }
/* Не меньше 16px, иначе iPhone увеличивает страницу при выборе. */
select.small { font-size: 16px; min-height: 36px; padding: 4px 36px 4px 12px; }
select.fit { width: auto; max-width: 100%; }
label { display: block; margin: 16px 0 6px; font-size: 15px; color: var(--pencil); }
label.btn { display: inline-flex; margin: 0; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.actions.centered { justify-content: center; }

/* ---------- списки: вместо коробок — волнистая черта карандашом ---------- */
.card { position: relative; padding: 14px 0; }
.card + .card::before, .fact + .fact::before {
  content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 8px;
  background: var(--pencil); opacity: .55;
  -webkit-mask: var(--wave) repeat-x 0 0 / 406px 8px; mask: var(--wave) repeat-x 0 0 / 406px 8px;
}
.card p { margin: 4px 0 0; }
h3 + .card { padding-top: 0; }
.card > .fact:first-child { padding-top: 6px; }
.card > .fact:last-child { padding-bottom: 2px; }
.list .card { margin: 0 -12px; padding: 14px 12px; border-radius: var(--wobble-soft); cursor: pointer; }
.list .card + .card::before { left: 12px; right: 12px; }
.list .card:active { background: var(--smudge); }
.card.transcript { white-space: pre-wrap; padding: 14px 16px; background: var(--smudge); border-radius: var(--wobble-soft); }
.card.alert { padding: 12px 16px; border: 2px solid var(--crayon); border-radius: var(--wobble-soft); }
.row { display: flex; align-items: center; gap: 14px; }
.row > .grow { flex: 1; min-width: 0; }

/* Кружок с инициалами обведён от руки и каждый чуть повёрнут по-своему. */
.avatar {
  position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  font-size: 16px; font-weight: 600; font-variation-settings: "INFM" 100, "BNCE" 30;
}
.avatar::before {
  content: ""; position: absolute; inset: -3px; background: var(--ink); transform: rotate(var(--tilt, -4deg));
  -webkit-mask: var(--ring) center / 100% 100% no-repeat; mask: var(--ring) center / 100% 100% no-repeat;
}
.avatar.big { width: 76px; height: 76px; font-size: 28px; }
.avatar.big::before { -webkit-mask-image: var(--ring-big); mask-image: var(--ring-big); }
.person-head { margin: 4px 0 8px; }
.person-head h1 { margin: 0 0 4px; }

.fact { position: relative; padding: 10px 0; }
.fact .k { color: var(--pencil); font-size: 15px; }
.fact.old { color: var(--pencil); }
.fact.old > .row { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.quote { margin-top: 4px; color: var(--pencil); font-size: 15px; }
/* Метка обведена, как слово, которое ребёнок обвёл кружком. */
.pill {
  display: inline-block; margin-left: 8px; padding: 0 10px; vertical-align: 1px;
  font-size: 14px; font-weight: 500; color: var(--pencil);
  border: 1.5px solid currentColor; border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
}
.pill.err { color: var(--crayon-text); }
audio { width: 100%; margin: 8px 0; }

/* ---------- кнопка записи ---------- */
#record-btn {
  position: relative; display: block; width: 224px; height: 224px; min-height: 0; margin: 0 auto 6px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink);
}
#record-btn:active { transform: scale(.97) rotate(-1.5deg); }
#record-btn .shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#record-btn .fill { fill: var(--crayon); stroke: none; }
#record-btn .line { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
#record-btn .line + .line { opacity: 0; }
#record-btn .face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: 8px; color: var(--on-crayon);
  font-size: 22px; font-weight: 650; font-variation-settings: "INFM" 100, "BNCE" 40;
}
#record-btn .face svg { width: 52px; height: 52px; stroke-width: 2.2; }
#record-btn .ico-stop { display: none; fill: currentColor; }
#record-btn.on .ico-mic { display: none; }
#record-btn.on .ico-stop { display: block; }
#record-btn.on .l1 { animation: boil1 .36s infinite; }
#record-btn.on .l2 { animation: boil2 .36s infinite; }
#record-btn.on .l3 { animation: boil3 .36s infinite; }
@keyframes boil1 { 0%, 33.3% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
@keyframes boil2 { 0%, 33.3% { opacity: 0; } 33.4%, 66.6% { opacity: 1; } 66.7%, 100% { opacity: 0; } }
@keyframes boil3 { 0%, 66.6% { opacity: 0; } 66.7%, 100% { opacity: 1; } }
#rec-status.live { color: var(--ink); font-size: 20px; font-variation-settings: "INFM" 100, "BNCE" 30; }

/* ---------- экран входа ---------- */
.mark { display: block; width: 104px; height: 104px; margin: 28px 0 0 -12px; overflow: visible; }
.mark .fill { fill: var(--crayon); }
.mark .line { fill: none; stroke: var(--ink); stroke-width: 14; stroke-linecap: round; }

/* ---------- нижние вкладки ---------- */
nav#tabs[hidden] { display: none; }
nav#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: center;
  padding: 10px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--paper);
}
nav#tabs::before {
  content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 8px; background: var(--ink); opacity: .5;
  -webkit-mask: var(--wave) repeat-x 0 0 / 406px 8px; mask: var(--wave) repeat-x 0 0 / 406px 8px;
}
nav#tabs button {
  position: relative; flex: 1; max-width: 112px; flex-direction: column; gap: 2px; min-height: 56px; padding: 2px 0 0;
  border: 0; border-radius: 0; color: var(--pencil); font-size: 12.5px; font-weight: 500; font-variation-settings: "INFM" 30;
}
nav#tabs button:active { transform: none; }
nav#tabs button:focus-visible { box-shadow: none; outline: 2px solid var(--crayon); outline-offset: -2px; }
nav#tabs .i { position: relative; width: 28px; height: 28px; stroke-width: 2; }
nav#tabs .ring {
  position: absolute; top: -4px; left: 50%; width: 46px; height: 40px; margin-left: -23px;
  fill: none; stroke: var(--crayon); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 1 2; opacity: 0;
}
nav#tabs button.active { color: var(--ink); }
/* Активную вкладку обводят кружком: он дорисовывается при нажатии. */
nav#tabs button.active .ring { opacity: 1; animation: draw .35s ease-out; }
@keyframes draw { from { stroke-dashoffset: 1; } }
#review-badge {
  position: absolute; top: -2px; left: calc(50% + 8px); min-width: 20px; height: 20px; padding: 0 5px;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
  color: var(--on-crayon); background: var(--crayon); border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
}
#review-badge[hidden] { display: none; }

/* ---------- подсказка внизу ---------- */
#toast {
  position: fixed; z-index: 6; left: 20px; right: 20px; bottom: calc(96px + env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto; padding: 12px 18px;
  color: var(--paper); background: var(--ink); border-radius: var(--wobble); font-size: 16px;
  animation: pop .18s ease-out;
}
@keyframes pop { from { transform: scale(.96) rotate(-1deg); opacity: 0; } }
.version { margin: 28px 0 0; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}
input + textarea { margin-top: 10px; }