/* Дополнения к style.css (токены DESIGN.md): вход, выбор ребёнка, итог занятия. */
.boot { padding: 40px calc(var(--margin-x) + 24px); color: var(--pencil); }
.main { position: relative; }
.form { max-width: 420px; display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px 28px 24px; }
.form h1 { font: 500 26px/1.2 var(--font-math); margin: 0 0 4px; }
.form label { display: grid; gap: 6px; font-size: var(--small); color: var(--ink-soft); }
.form input, .form select { font: 400 18px/1 var(--font-ui); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-control); height: var(--control); padding: 0 14px; }
.form input:focus, .form select:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus); }
.form .err { color: var(--pen-red); font-size: var(--small); min-height: 20px; margin: 0; }
.form .alt { font-size: var(--small); color: var(--ink-soft); margin: 0; }
.form .alt a, .lead a { color: var(--ink); }
.lead { max-width: 760px; color: var(--ink-soft); margin: 0 0 24px; }
.hello { font: 500 30px/1.2 var(--font-math); margin: 4px 0 8px; }
.children { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; max-width: 980px; }
.child { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 24px 20px; display: grid; gap: 14px; align-content: start; }
.child h2 { font: 500 24px/1.2 var(--font-math); margin: 0; }
.child h2 small { font: 400 var(--small)/1 var(--font-ui); color: var(--ink-soft); margin-left: 8px; }
.child .row { display: flex; flex-wrap: wrap; gap: 10px; }
.child .stat { font-size: var(--small); color: var(--ink-soft); margin: 0; }
.add { margin-top: 28px; max-width: 980px; }
.add summary { cursor: pointer; color: var(--ink-soft); font-size: var(--small); }
.add .form { margin-top: 12px; }
.btn.small { height: 40px; font-size: 15px; padding: 0 16px; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.done-list { list-style: none; margin: 16px 0 8px; padding: 0; display: grid; gap: 8px; }
.done-list li { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--line); padding: 6px 0; }
.done-list b { font-family: var(--font-math); font-weight: 500; white-space: nowrap; }
.task h1 .frac, .topic .frac, .speed .q .frac { font-size: .9em; }
.task h1 sup, .expr sup { font-size: .6em; }
.choose { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; }
.choose button.on { background: var(--ink); color: var(--paper); }
.pending { color: var(--pencil); font-size: var(--small); }
.empty { color: var(--ink-soft); }
.answer .box { display: inline-block; }
@media (max-width: 700px) {
  .form { padding: 22px 18px; }
  .children { grid-template-columns: 1fr; }
  .hello { font-size: 26px; }
}
.expr .br { flex-basis: 100%; height: 0; }
.expr .lbl { font: 500 var(--text)/1 var(--font-ui); color: var(--ink-soft); }
.topic .simpler { display: block; margin-top: 6px; font-size: 22px; line-height: 1.25; }
.topic .simpler:empty { display: none; }
.topic .mini { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.topic .mini:empty { display: none; }
.topic .mini .q { font-weight: 500; }
.topic .mini-inp { font: 500 20px/1 var(--font-math); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-control); height: 44px; width: 110px; padding: 0 10px; text-align: center; }
.topic .mini-inp:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus); }
.topic .mini-note { color: var(--pen-red); font-family: var(--font-hand); font-size: 22px; }
.topic .mini-ok { color: var(--pen-green); font-family: var(--font-math); font-weight: 500; }
.btn:disabled { opacity: .45; cursor: default; }
.kid .topic .mini-inp { height: 56px; width: 130px; font-size: 28px; }
[hidden] { display: none !important; }
.net { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; margin: 0; padding: 12px 18px; border-radius: var(--r-card);
  background: var(--surface); color: var(--pen-red); border: 1.5px solid var(--pen-red); font-size: 16px; max-width: calc(100vw - 32px); }
.more summary { cursor: pointer; color: var(--ink-soft); font-size: var(--small); margin-top: 8px; }
@media (max-width: 700px) { .ruler { margin-right: 22px; } }  /* Н9: метка таймера не у края экрана */
.fc-card .fc-ex { font: 500 28px/1.2 var(--font-math); margin: 0; }
.kid .fc-card .fc-ex { font-size: 36px; }
.fc-big { font-size: 1.4em; }
.fc-sec { font: 500 15px/1 var(--font-ui); color: var(--pencil); margin: 0 0 6px; }
.fc-bar { height: 8px; background: var(--grid); border-radius: 4px; overflow: hidden; margin: 0 0 10px; max-width: 420px; }
.fc-bar i { display: block; height: 100%; width: 0; background: var(--marker); }
.pc { margin: 4px 0 16px; max-width: 600px; }
.pc figcaption { font-size: var(--small); color: var(--ink-soft); margin-bottom: 4px; }
.pc svg { width: 100%; height: auto; display: block; overflow: visible; }
.pc .pc-bar path { fill: var(--ink); }
.pc .pc-bar:hover path, .pc .pc-bar:focus path { fill: var(--pen-green); }
.pc .pc-bar:focus { outline: none; }
.pc .pc-axis { stroke: var(--line); stroke-width: 1; }
.pc .pc-day { font: 400 11px var(--font-ui); fill: var(--pencil); }
.pc .pc-val { font: 500 12px var(--font-ui); fill: var(--ink); }
.pw { white-space: nowrap; display: inline-block; }
.pw sup { font-size: .6em; vertical-align: super; line-height: 0; margin-left: .04em; }
#fc-q { display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 700px) {   /* TEST-8053 Н1: «9 · □ = 90» на iPhone упирался в край карточки — на телефоне не увеличиваем и сужаем поле */
  .fc-big { font-size: 1em; }
  #fc-q { gap: 6px; }
  #fc-q .answer input { min-width: 0; width: 2.6em; padding: 0 6px; }
}

/* ---------- таймер занятия и передышка (#8174), палитра бренда «Уголь и апельсин» (DESIGN.md §0) ---------- */
:root { --brand-coal: #23272E; --brand-orange: #FF7A33; --brand-orange-ink: #B5481A; --brand-mint: #8FE3B8; --brand-mint-soft: #D8F3E4; --brand-peach-soft: #FFE1CC; --brand-ink: #1B1B1B; }
.tm { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.2 var(--font-ui); color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 7px; white-space: nowrap; }
.tm b { color: var(--ink); font-weight: 600; }
.tm svg { width: 20px; height: 20px; flex: none; transform: rotate(-90deg); }
.tm circle { fill: none; stroke: var(--line); stroke-width: 3; }
.tm .tm-f { stroke: var(--brand-orange); stroke-dasharray: 50.3; stroke-linecap: round; }
.tm-line { margin-top: 2px; }
.rest h1 { font-size: 34px; margin-bottom: 10px; }
.kid .rest h1 { font-size: 44px; }
.rest-stage { background: var(--brand-mint-soft); border-radius: var(--r-card); padding: 14px; max-width: 420px; }
.rest-stage svg { display: block; width: 100%; height: auto; }
.rest-stage g { display: none; }
.rest-stage[data-k="eyes"] .r-eyes, .rest-stage[data-k="blink"] .r-blink, .rest-stage[data-k="far"] .r-far, .rest-stage[data-k="stretch"] .r-stretch { display: inline; }
.r-path { fill: none; stroke: var(--brand-coal); stroke-opacity: .22; stroke-width: 3; stroke-dasharray: 6 8; }
.r-dot, .r-sun { fill: var(--brand-orange); }
.r-eye { fill: #FFFFFF; stroke: var(--brand-coal); stroke-width: 3; }
.r-pup { fill: var(--brand-coal); }
.r-lid { fill: var(--brand-mint-soft); transform-box: fill-box; transform-origin: top; transform: scaleY(0); }
.r-hill { fill: var(--brand-mint); }
.r-tree, .r-trunk { fill: var(--brand-coal); }
.r-head { fill: var(--brand-peach-soft); stroke: var(--brand-coal); stroke-width: 3; }
.r-body, .r-arms { fill: none; stroke: var(--brand-coal); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.rest-say { font: 400 24px/1.35 var(--font-ui); margin: 18px 0 14px; max-width: 520px; color: var(--ink); }
.kid .rest-say { font-size: 28px; }
.rest-time { display: flex; align-items: center; gap: 12px; font: 500 16px/1 var(--font-ui); color: var(--ink-soft); }
.rest-bar { flex: 0 1 260px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.rest-bar i { display: block; height: 100%; width: 100%; background: var(--brand-orange); transform-origin: left; animation: rest-fill linear forwards; }
@keyframes rest-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .rest-stage[data-k="blink"] .r-lid { animation: rest-blink 5s ease-in-out infinite; }
  .tm .tm-f { transition: stroke-dashoffset 1s linear; }
}
@keyframes rest-blink { 0%, 30% { transform: scaleY(0); } 45%, 80% { transform: scaleY(1); } 95%, 100% { transform: scaleY(0); } }
.today-done .kicker { color: var(--brand-orange-ink); }
.today-done h1 { font-size: 34px; margin-bottom: 8px; }
.done-sum { margin: 0 0 8px; }
.form label.check { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink); }
.form label.check input { width: 22px; height: 22px; padding: 0; accent-color: var(--brand-orange); }
.tm-set .form { margin: 4px 0 16px; }
@media (prefers-color-scheme: dark) {
  :root { --brand-mint-soft: #1F3A2E; --brand-orange-ink: #FF9A5C; }
  .rest-stage { background: var(--brand-coal); }
  .r-path { stroke: #FFFFFF; }
  .r-eye { fill: #F2F3F5; stroke: #C9CED6; }
  .r-lid { fill: var(--brand-coal); }
  .r-hill { fill: #2E6B4E; }
  .r-tree, .r-trunk, .r-pup { fill: #C9CED6; }
  .r-body, .r-arms, .r-head { stroke: #C9CED6; }
}
@media (max-width: 700px) {
  .tm { font-size: 13px; white-space: normal; }
  .rest-say, .kid .rest-say { font-size: 22px; }
}
#rleft { white-space: nowrap; }
@media (min-width: 701px) { .rest-stage { max-width: 520px; } }