/* ШХП · Полевой код — components.css v1.2.0. Требует tokens.css. Префикс .shp- , без зависимостей. */
.shp-root{font-family:var(--font-base);color:var(--c-text);background:var(--c-bg);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;text-wrap:pretty;hyphens:auto}
.shp-root,.shp-root *,.shp-root *::before,.shp-root *::after{box-sizing:border-box}
.shp-root :focus{outline:none}
.shp-root :focus-visible{outline:var(--bw-strong) solid var(--c-focus);outline-offset:4px;box-shadow:0 0 0 10px var(--c-focus-halo)}

/* ── экран ── */
.shp-screen{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--sp-5);padding:var(--safe);overflow:hidden;background:var(--c-bg)}
.shp-main{min-height:0;display:flex;flex-direction:column;gap:var(--sp-5)}
.shp-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5)}
.shp-row{display:flex;gap:var(--sp-5);align-items:center;flex-wrap:wrap}
.shp-stack{display:flex;flex-direction:column;gap:var(--sp-4)}

/* ── шапка ── */
.shp-header{display:flex;align-items:center;gap:var(--sp-5);min-height:calc(var(--fs-h2) * 1.6);padding-bottom:var(--sp-3);border-bottom:var(--bw-strong) solid var(--c-brand)}
.shp-logo{flex:none;display:grid;place-items:center;height:calc(var(--fs-h2) * 1.4);aspect-ratio:2.6/1;padding:calc(var(--fs-h2)*.2);border:var(--bw-hair) dashed var(--c-line);font-size:max(11px,calc(var(--fs-caption)*.75));color:var(--c-text-muted);text-align:center;line-height:1.1;hyphens:none;white-space:nowrap}
.shp-logo::after{content:"";}
.shp-cobrand{flex:none;display:flex;align-items:center;gap:var(--sp-4);padding-left:var(--sp-5);border-left:var(--bw-base) solid var(--c-line)}
.shp-zone{display:flex;flex-direction:column;gap:2px;min-width:0}
.shp-zone b{font-size:var(--fs-label);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-caps);line-height:1.1}
.shp-zone span{font-size:var(--fs-caption);color:var(--c-text-muted);line-height:1.2}
.shp-header .shp-spacer{flex:1}
/* метка трека — тихая: служебная информация не спорит с главным действием. Трек различается формой знака, не цветом */
.shp-track{display:inline-flex;align-items:center;gap:.5em;padding:.25em .65em;border:var(--bw-base) solid var(--c-line);border-radius:var(--r-s);font-size:var(--fs-caption);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--c-text-muted);white-space:nowrap}
.shp-track::before{content:"";flex:none;width:.6em;height:.6em;background:currentColor}
.shp-track[data-track="kids"]::before{border-radius:50%}
.shp-track[data-track="adult"]::before{border-radius:1px}

/* ── заголовки ── */
.shp-display,.shp-title,.shp-h2{hyphens:manual}
.shp-display{font-size:var(--fs-display);font-weight:var(--fw-bold);font-stretch:var(--fst-condensed);line-height:var(--lh-tight);letter-spacing:-.01em;margin:0;text-wrap:balance}
.shp-title{font-size:var(--fs-h1);font-weight:var(--fw-bold);line-height:var(--lh-heading);margin:0;text-wrap:balance}
.shp-h2{font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-heading);margin:0}
.shp-hint{display:flex;align-items:center;gap:.6em;font-size:var(--fs-label);color:var(--c-text-muted);margin:0}
.shp-hint .shp-kbd{flex:none}
.shp-eyebrow{font-size:var(--fs-caption);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--c-brand)}
.shp-kbd{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding:0 .4em;border:var(--bw-base) solid currentColor;border-radius:var(--r-s);font-weight:var(--fw-bold);font-size:.85em;line-height:1}

/* ── кнопки: «клавиша» с жёсткой тенью ── */
.shp-btn{--_bg:var(--c-surface);--_fg:var(--c-text);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:var(--target);min-width:var(--target);padding:0 1.1em;font:inherit;font-size:var(--fs-label);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-caps);line-height:1.1;color:var(--_fg);background:var(--_bg);border:var(--bw-strong) solid var(--c-line-strong);border-radius:var(--r-m);box-shadow:var(--sh-key);transform:translateY(0);transition:transform var(--dur-instant) var(--ease-out),box-shadow var(--dur-instant) var(--ease-out),background var(--dur-fast);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.shp-btn--primary{--_bg:var(--c-accent);--_fg:var(--c-on-accent)}
.shp-btn--start{--_bg:var(--c-accent);--_fg:var(--c-on-accent);font-size:var(--fs-h2);min-height:calc(var(--target)*1.35);padding:0 1.4em}
.shp-btn--ghost{box-shadow:none;border-color:transparent;--_bg:transparent;text-decoration:underline;text-underline-offset:.25em}
.shp-btn--back::before{content:"←";font-size:1.2em}
.shp-btn--next::after{content:"→";font-size:1.2em}
.shp-btn:active,.shp-btn.is-pressed{transform:translateY(var(--key-depth));box-shadow:0 0 0 0 var(--c-line-strong)}
@media (hover:hover){.shp-btn:hover{filter:brightness(1.04)}}
.shp-btn:disabled,.shp-btn.is-disabled{--_bg:var(--c-disabled-bg);--_fg:var(--c-disabled-text);border-color:var(--c-disabled-line);border-style:dashed;box-shadow:none;cursor:not-allowed;transform:none}
.shp-btn.is-loading{pointer-events:none}
.shp-btn.is-loading::after{content:"";width:1em;height:1em;border:3px solid currentColor;border-right-color:transparent;border-radius:50%;animation:shp-spin 900ms linear infinite}

/* ── «Тропа»: панель следующего шага ──
   Одна на экран, всегда внизу. Слева — назад и второстепенное, справа — главное действие .shp-go.
   Зона .shp-go никогда не пустует: в ней либо действие, либо причина, почему пока нельзя, либо «наступит само». */
.shp-next{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"back say go";align-items:center;gap:var(--sp-5);min-height:var(--target)}
.shp-next__back{grid-area:back;display:flex;align-items:center;gap:var(--sp-4);min-width:0}
.shp-next__say{grid-area:say;justify-self:end;margin:0;font-size:var(--fs-label);font-weight:var(--fw-medium);line-height:var(--lh-heading);color:var(--c-text-muted);text-align:right;text-wrap:balance;hyphens:manual}
.shp-next__go{grid-area:go;display:flex;justify-content:flex-end}
.shp-next.is-blocked .shp-next__say{color:var(--c-text);font-weight:var(--fw-bold)}
/* вертикальные экраны: подсказка над кнопкой, кнопка во всю ширину — в нижней трети, где достаёт ребёнок */
[data-device="kiosk-p"] .shp-next,[data-device="mobile"] .shp-next{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"say say" "back go"}
[data-device="kiosk-p"] .shp-next__say,[data-device="mobile"] .shp-next__say{justify-self:center;text-align:center}
[data-device="kiosk-p"] .shp-next__go .shp-go,[data-device="mobile"] .shp-next__go .shp-go{width:100%}
/* поверх сцены: подсказка на тёмной плашке, сцена не закрывается */
.shp-next--scene .shp-next__say{padding:.35em .7em;border-radius:var(--r-s);background:var(--ov-plate-dark);color:#F4F6F2}
/* главное действие: та же клавиша, постоянная ширина и место */
.shp-go{min-width:var(--go-min-w)}
.shp-go.shp-btn--start{min-width:calc(var(--go-min-w) * 1.2)}
/* «железо»: экран не сенсорный — нажимать нужно на контроллер. Без тени-клавиши, со знаком устройства */
.shp-go.is-cue{box-shadow:none;cursor:default;border-width:var(--bw-strong)}
/* «само»: следующий шаг наступит без участия посетителя */
.shp-go.is-auto{--_bg:transparent;--_fg:var(--c-text);border-style:dashed;border-color:var(--c-line);box-shadow:none;cursor:default;text-transform:none;letter-spacing:0;font-weight:var(--fw-medium)}
.shp-go.is-auto::before{content:"";flex:none;width:1em;height:1em;border:3px solid currentColor;border-right-color:transparent;border-radius:50%;animation:shp-spin 900ms linear infinite}
/* отсчёт автоперехода внутри действия: «Следующий участник · 20 с» */
.shp-go__count{display:inline-grid;place-items:center;min-width:2.6em;padding:.15em .45em;border:var(--bw-base) solid currentColor;border-radius:var(--r-pill);font-size:.8em;letter-spacing:0;text-transform:none}
/* знак устройства: крутилка, круглый модуль, кликер, номер кнопки */
.shp-hw{position:relative;flex:none;display:inline-grid;place-items:center;width:1.75em;height:1.75em;border:var(--bw-strong) solid currentColor;border-radius:50%;font-size:1em;font-weight:var(--fw-heavy);font-stretch:var(--fst-condensed);letter-spacing:0;line-height:1}
.shp-hw--dial::after{content:"";position:absolute;left:50%;top:12%;width:var(--bw-strong);height:40%;margin-left:calc(var(--bw-strong)/-2);background:currentColor;border-radius:2px;transform-origin:50% 100%;transform:rotate(35deg)}
.shp-hw--pad{border:0;background:radial-gradient(circle closest-side,currentColor 72%,transparent 78%) 0 0/50% 50%}
.shp-hw--key{border-radius:var(--r-s)}

/* ── карточка ответа («бирка») ── */
.shp-answers{display:grid;gap:var(--sp-5);grid-template-columns:repeat(2,minmax(0,1fr))}
.shp-answers--4col{grid-template-columns:repeat(4,minmax(0,1fr))}
.shp-answers--list{grid-template-columns:minmax(0,1fr)}
.shp-answer{--_bg:var(--c-surface);--_bd:var(--c-line-strong);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;min-height:var(--target);background:var(--_bg);color:var(--c-text);border:var(--bw-strong) solid var(--_bd);border-radius:var(--r-m);box-shadow:var(--sh-key);text-align:left;font:inherit;padding:0;cursor:pointer;transition:transform var(--dur-instant) var(--ease-out),box-shadow var(--dur-instant),background var(--dur-fast);overflow:visible}
.shp-answer__no{display:grid;place-items:center;min-width:calc(var(--target)*.9);padding:0 .3em;font-size:var(--fs-h2);font-weight:var(--fw-heavy);font-stretch:var(--fst-condensed);border-right:var(--bw-strong) solid var(--_bd);background:var(--c-surface-sunk);border-radius:calc(var(--r-m) - 3px) 0 0 calc(var(--r-m) - 3px)}
.shp-answer__body{display:flex;flex-direction:column;justify-content:center;gap:.2em;padding:.5em .8em;font-size:var(--fs-body);font-weight:var(--fw-medium);line-height:var(--lh-heading);min-width:0;overflow-wrap:break-word;hyphens:manual}
.shp-answer__body small{font-size:var(--fs-caption);font-weight:var(--fw-regular);color:var(--c-text-muted)}
.shp-answer__mark{display:flex;align-items:center;gap:.4em;padding:0 .8em;font-size:var(--fs-caption);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-caps)}
.shp-answer--media{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto}
.shp-answer--media .shp-media{grid-row:1;min-height:calc(var(--target)*1.2);height:100%!important;place-items:end center;padding-bottom:.6em}
.shp-answer--media .shp-answer__no{position:absolute;top:calc(var(--bw-strong)*-1);left:calc(var(--bw-strong)*-1);z-index:2;min-width:calc(var(--target)*.8);height:calc(var(--target)*.8);border:var(--bw-strong) solid var(--_bd);border-radius:var(--r-m) 0 var(--r-m) 0}
.shp-answer--media .shp-media{border-radius:calc(var(--r-m) - 3px) calc(var(--r-m) - 3px) 0 0;border:0;border-bottom:var(--bw-strong) solid var(--_bd)}
.shp-answer:active,.shp-answer.is-pressed{transform:translateY(var(--key-depth));box-shadow:none}
/* курсор крутилки/клавиатуры — «визир» */
.shp-visor::before,.shp-answer.is-cursor::before,.shp-found::before{content:"";position:absolute;pointer-events:none;--_c:var(--visor-color,var(--c-line-strong));--_t:var(--bw-sel);--_l:var(--visor-len,calc(var(--target)*.45));background:linear-gradient(var(--_c) 0 0) top left/var(--_l) var(--_t),linear-gradient(var(--_c) 0 0) top left/var(--_t) var(--_l),linear-gradient(var(--_c) 0 0) top right/var(--_l) var(--_t),linear-gradient(var(--_c) 0 0) top right/var(--_t) var(--_l),linear-gradient(var(--_c) 0 0) bottom left/var(--_l) var(--_t),linear-gradient(var(--_c) 0 0) bottom left/var(--_t) var(--_l),linear-gradient(var(--_c) 0 0) bottom right/var(--_l) var(--_t),linear-gradient(var(--_c) 0 0) bottom right/var(--_t) var(--_l);background-repeat:no-repeat}
.shp-visor{position:relative}
.shp-visor::before{inset:calc(var(--bw-sel)*-2.2)}
.shp-answer.is-cursor{outline:var(--bw-sel) solid var(--c-accent);outline-offset:calc(var(--bw-sel)*.6)}
.shp-answer.is-cursor::before{inset:calc(var(--bw-sel)*-2.6)}
.shp-answer.is-selected{--_bg:var(--c-selected);border-width:var(--bw-sel);box-shadow:none;transform:translateY(var(--key-depth))}
.shp-answer.is-selected .shp-answer__no{background:var(--c-line-strong);color:var(--c-surface)}
.shp-answer.is-selected .shp-answer__mark::before{content:"✓";display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--c-line-strong);color:var(--c-surface);font-size:1.1em}
.shp-answer.is-correct{--_bg:var(--c-success-bg);--_bd:var(--c-success);border-width:var(--bw-sel);box-shadow:none}
.shp-answer.is-correct .shp-answer__no{background:var(--c-success);color:var(--c-on-success)}
.shp-answer.is-correct .shp-answer__mark{color:var(--c-success)}
.shp-answer.is-correct .shp-answer__mark::before{content:"✓";display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--c-success);color:var(--c-on-success);font-size:1.1em}
.shp-answer.is-wrong{--_bg:var(--c-error-bg);--_bd:var(--c-error);border-width:var(--bw-sel);border-style:dashed;box-shadow:none}
.shp-answer.is-wrong .shp-answer__no{background:var(--c-error);color:var(--c-on-error)}
.shp-answer.is-wrong .shp-answer__mark{color:var(--c-error)}
.shp-answer.is-wrong .shp-answer__mark::before{content:"✕";display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:var(--r-s);background:var(--c-error);color:var(--c-on-error);font-size:1em}
.shp-answer.is-dimmed{opacity:.55;box-shadow:none}
.shp-answer:disabled,.shp-answer.is-disabled{--_bg:var(--c-disabled-bg);--_bd:var(--c-disabled-line);color:var(--c-disabled-text);border-style:dashed;box-shadow:none;cursor:not-allowed}

/* ── медиа ── */
.shp-media{position:relative;display:grid;place-items:center;min-height:120px;width:100%;border:var(--bw-base) solid var(--c-line);border-radius:var(--r-m);background:repeating-linear-gradient(135deg,var(--c-surface-sunk) 0 14px,color-mix(in srgb,var(--c-surface-sunk) 70%,var(--c-surface)) 14px 28px);overflow:hidden;color:var(--c-text-muted)}
.shp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shp-media__cap{position:relative;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:max(12px,calc(var(--fs-caption)*.8));background:var(--c-surface);padding:.2em .5em;border-radius:var(--r-s);text-align:center;max-width:90%}
.shp-media.is-missing{background:var(--c-surface-sunk);border-style:dashed}
.shp-media.is-missing .shp-media__cap{font-family:var(--font-base);font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--c-text)}
.shp-plate{background:var(--ov-plate-light);color:#15231D;border-radius:var(--r-m);padding:var(--sp-5)}
.shp-plate--dark{background:var(--ov-plate-dark);color:#F4F6F2}

/* ── индикатор физического выбора ── */
.shp-control{display:inline-flex;align-items:center;gap:var(--sp-4);padding:.5em .9em .5em .5em;border:var(--bw-base) solid var(--c-line-strong);border-radius:var(--r-pill);background:var(--c-surface);font-size:var(--fs-label);font-weight:var(--fw-medium)}
.shp-control__dial{position:relative;flex:none;width:2.2em;height:2.2em;border-radius:50%;border:var(--bw-strong) solid var(--c-line-strong);background:var(--c-surface-sunk)}
.shp-control__dial::after{content:"";position:absolute;left:50%;top:10%;width:var(--bw-strong);height:40%;margin-left:calc(var(--bw-strong)/-2);background:var(--c-line-strong);transform-origin:50% 100%;transform:rotate(var(--angle,0deg));border-radius:2px}
.shp-control.is-pressed .shp-control__dial{background:var(--c-accent)}
.shp-pad{display:grid;grid-template-columns:repeat(2,1.4em);gap:.2em;flex:none}
.shp-pad i{display:grid;place-items:center;height:1.4em;border:var(--bw-base) solid var(--c-line-strong);border-radius:50%;font-style:normal;font-size:.7em;font-weight:var(--fw-bold);width:2em;height:2em}
.shp-pad i.is-on{background:var(--c-line-strong);color:var(--c-surface)}
.shp-dots{display:flex;gap:.35em;align-items:center}
.shp-dots i{width:.55em;height:.55em;border-radius:50%;border:2px solid var(--c-line-strong)}
.shp-dots i.is-on{background:var(--c-line-strong);width:1.4em;border-radius:var(--r-pill)}

/* ── прогресс ── */
.shp-progress{display:flex;flex-direction:column;gap:.4em;min-width:0}
.shp-progress__label{font-size:var(--fs-caption);font-weight:var(--fw-bold);display:flex;justify-content:space-between;gap:1em}
.shp-progress__track{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;height:calc(var(--fs-caption)*.6);min-height:8px}
.shp-progress__track i{background:var(--c-surface);border:2px solid var(--c-line-strong);border-radius:2px}
.shp-progress__track i.is-done{background:var(--c-brand);border-color:var(--c-brand)}
.shp-progress__track i.is-now{background:var(--c-accent)}
.shp-progress__track i.is-skip{background:repeating-linear-gradient(135deg,var(--c-line-strong) 0 2px,transparent 2px 6px)}

/* ── таймер, счётчик ── */
.shp-timer{display:inline-flex;align-items:center;gap:.5em;padding:.25em .6em .25em .3em;border-radius:var(--r-pill);background:var(--c-surface);border:var(--bw-strong) solid var(--c-line-strong);font-size:var(--fs-h2);font-weight:var(--fw-heavy);font-stretch:var(--fst-condensed);line-height:1}
.shp-timer__ring{width:1.1em;height:1.1em;border-radius:50%;background:conic-gradient(var(--c-line-strong) calc(var(--left,1)*360deg),var(--c-surface-sunk) 0);border:2px solid var(--c-line-strong)}
.shp-timer.is-low{background:var(--c-accent);color:var(--c-on-accent)}
.shp-timer.is-low::after{content:"!";display:grid;place-items:center;width:1em;height:1em;font-size:.7em;border-radius:50%;background:var(--c-line-strong);color:var(--c-accent)}
.shp-timer.is-over{background:var(--c-surface-sunk);color:var(--c-text-muted);border-style:dashed}
.shp-counter{display:inline-flex;align-items:baseline;gap:.25em;font-size:var(--fs-h2);font-weight:var(--fw-heavy);font-stretch:var(--fst-condensed);line-height:1}
.shp-counter small{font-size:var(--fs-caption);font-weight:var(--fw-medium);font-stretch:100%;color:var(--c-text-muted)}

/* ── пояснение, итог ── */
.shp-explain{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4) var(--sp-5);align-items:start;padding:var(--sp-5);background:var(--c-surface);border:var(--bw-strong) solid var(--c-line-strong);border-radius:var(--r-m)}
.shp-explain__verdict{display:inline-flex;align-items:center;gap:.4em;font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:1.1}
.shp-explain__verdict::before{display:grid;place-items:center;width:1.3em;height:1.3em;border-radius:50%;font-size:.85em}
.shp-explain.is-correct .shp-explain__verdict{color:var(--c-success)}
.shp-explain.is-correct .shp-explain__verdict::before{content:"✓";background:var(--c-success);color:var(--c-on-success)}
.shp-explain.is-wrong .shp-explain__verdict{color:var(--c-error)}
.shp-explain.is-wrong .shp-explain__verdict::before{content:"✕";background:var(--c-error);color:var(--c-on-error);border-radius:var(--r-s)}
.shp-explain.is-info .shp-explain__verdict::before{content:"i";background:var(--theme-water);color:var(--theme-water-on);font-style:italic}
.shp-explain p{grid-column:1/-1;margin:0;font-size:var(--fs-body);line-height:var(--lh-long);max-width:42em}
.shp-result{display:grid;gap:var(--sp-5);justify-items:start}
.shp-result__big{font-size:calc(var(--fs-display)*1.5);font-weight:var(--fw-heavy);font-stretch:var(--fst-condensed);line-height:.95}
.shp-result__big small{font-size:.4em;font-weight:var(--fw-bold)}

/* ── оверлей, модалка ── */
.shp-scrim{position:absolute;inset:0;z-index:var(--z-modal);display:grid;place-items:center;background:var(--ov-dim);padding:var(--safe)}
.shp-modal{width:min(100%,calc(var(--fs-body)*26));display:grid;gap:var(--sp-5);padding:var(--sp-7);background:var(--c-surface);border:var(--bw-strong) solid var(--c-line-strong);border-radius:var(--r-l);box-shadow:var(--sh-float)}
.shp-modal .shp-row{justify-content:flex-end}

/* ── статус: сохранение / очередь — никогда не перекрывает игру ── */
.shp-save{position:absolute;z-index:var(--z-status);right:var(--sp-4);bottom:var(--sp-3);display:inline-flex;align-items:center;gap:.45em;font-size:max(12px,calc(var(--fs-caption)*.75));color:var(--c-text-muted);pointer-events:none}
.shp-save::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--c-success)}
.shp-save.is-saving::before{background:transparent;border:2px solid currentColor;border-right-color:transparent;animation:shp-spin 900ms linear infinite}
.shp-save.is-queued::before{background:transparent;border:2px dashed currentColor;border-radius:2px}

/* ── QR, камера, аудио, ожидание, ошибка ── */
.shp-qr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-7);align-items:center}
.shp-qr__code{width:calc(var(--target)*3.2);aspect-ratio:1;padding:var(--sp-4);background:#FFFFFF;border:var(--bw-strong) solid var(--c-line-strong);border-radius:var(--r-m);display:grid;place-items:center}
.shp-qr ol{margin:0;padding-left:1.2em;display:grid;gap:.4em;font-size:var(--fs-body)}
.shp-camera{position:relative;border-radius:var(--r-l);overflow:hidden;background:#0E1F18;color:#F4F6F2;display:grid;place-items:center}
.shp-camera__frame{position:absolute;inset:12% 26%;border:var(--bw-sel) solid #F4F6F2;border-radius:45% 45% 40% 40%/50% 50% 40% 40%;opacity:.9}
.shp-camera__count{font-size:calc(var(--fs-display)*1.8);font-weight:var(--fw-heavy);font-stretch:var(--fst-condensed);text-shadow:0 4px 0 #0E1F18}
.shp-camera__bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:var(--sp-5);padding:var(--sp-5);background:var(--ov-plate-dark)}
.shp-audio{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-5);padding:var(--sp-4) var(--sp-5);background:var(--c-surface);border:var(--bw-strong) solid var(--c-line-strong);border-radius:var(--r-pill)}
.shp-audio__btn{width:calc(var(--target)*1.1);height:calc(var(--target)*1.1);border-radius:50%;display:grid;place-items:center;background:var(--c-accent);border:var(--bw-strong) solid var(--c-line-strong);box-shadow:var(--sh-key);font-size:var(--fs-h2);color:var(--c-on-accent);cursor:pointer}
.shp-audio__wave{display:flex;align-items:center;gap:4px;height:calc(var(--target)*.7)}
.shp-audio__wave i{flex:1;background:var(--c-line);border-radius:2px;min-width:3px}
.shp-audio__wave i.is-played{background:var(--c-line-strong)}
.shp-audio.is-rec .shp-audio__btn{background:var(--c-error);color:var(--c-on-error)}
.shp-audio.is-missing{border-style:dashed;background:var(--c-surface-sunk)}
.shp-wait{display:grid;gap:var(--sp-5);justify-items:center;text-align:center}
.shp-wait__bar{width:min(100%,calc(var(--fs-body)*18));height:calc(var(--fs-caption)*.7);border:var(--bw-strong) solid var(--c-line-strong);border-radius:var(--r-pill);overflow:hidden;background:var(--c-surface)}
.shp-wait__bar i{display:block;height:100%;width:35%;background:repeating-linear-gradient(135deg,var(--c-accent) 0 10px,var(--c-apricot,#F6D88A) 10px 20px);animation:shp-slide 1.6s var(--ease-in-out) infinite}
.shp-steps{list-style:none;margin:0;padding:0;display:grid;gap:.5em;font-size:var(--fs-label);text-align:left}
.shp-steps li{display:flex;gap:.6em;align-items:center}
.shp-steps li::before{content:"";flex:none;width:1em;height:1em;border:2px solid var(--c-line-strong);border-radius:50%}
.shp-steps li.is-done::before{content:"✓";display:grid;place-items:center;background:var(--c-brand);border-color:var(--c-brand);color:var(--c-on-brand);font-size:.7em}
.shp-steps li.is-now{font-weight:var(--fw-bold)}
.shp-steps li.is-now::before{border-color:var(--c-accent);border-width:4px}
.shp-error{display:grid;gap:var(--sp-4);justify-items:start;padding:var(--sp-6);border:var(--bw-strong) dashed var(--c-error);border-radius:var(--r-m);background:var(--c-error-bg)}
.shp-error b{display:flex;align-items:center;gap:.5em;font-size:var(--fs-h2)}
.shp-error b::before{content:"!";display:grid;place-items:center;width:1.2em;height:1.2em;border-radius:var(--r-s);background:var(--c-error);color:var(--c-on-error);font-size:.85em}

/* ── дневник: карта и ввод ── */
.shp-map{position:relative;border:var(--bw-strong) solid var(--c-line-strong);border-radius:var(--r-l);background:var(--c-surface-sunk);overflow:hidden}
.shp-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.5em;padding:.35em .7em .35em .35em;background:var(--c-surface);border:var(--bw-strong) solid var(--c-line-strong);border-radius:var(--r-pill);font-size:var(--fs-caption);font-weight:var(--fw-bold);white-space:nowrap;box-shadow:0 3px 0 var(--c-line-strong)}
.shp-node b{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;border:2px solid var(--c-line-strong);font-size:.95em}
.shp-node.is-done b{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-on-brand)}
.shp-node.is-now{background:var(--c-accent);color:var(--c-on-accent)}
.shp-node.is-now b{background:var(--c-surface)}
.shp-node.is-locked{background:var(--c-disabled-bg);color:var(--c-disabled-text);border-style:dashed;box-shadow:none}
/* список заданий дневника: не карточка ответа — это навигация, а не выбор */
.shp-tasks{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.shp-task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-4);min-height:var(--target);padding:.35em .8em .35em .4em;border:var(--bw-base) solid var(--c-line-strong);border-radius:var(--r-m);background:var(--c-surface);font-size:var(--fs-label);line-height:var(--lh-heading)}
.shp-task__no{display:grid;place-items:center;width:1.9em;height:1.9em;border:var(--bw-base) solid var(--c-line-strong);border-radius:50%;font-weight:var(--fw-bold)}
.shp-task b{display:block;font-weight:var(--fw-medium)}
.shp-task small{display:block;font-size:var(--fs-caption);color:var(--c-text-muted)}
.shp-task__state{font-size:var(--fs-caption);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-caps);white-space:nowrap}
.shp-task.is-now{border-width:var(--bw-strong);box-shadow:inset var(--bw-sel) 0 0 var(--c-accent)}
.shp-task.is-done .shp-task__no{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-on-brand)}
.shp-task.is-skip{border-style:dashed}
.shp-task.is-skip .shp-task__no{background:repeating-linear-gradient(135deg,var(--c-line-strong) 0 2px,transparent 2px 6px)}
.shp-field{display:grid;gap:.4em}
.shp-field label{font-size:var(--fs-label);font-weight:var(--fw-bold)}
.shp-input{width:100%;min-height:var(--target);padding:.6em .8em;font:inherit;font-size:var(--fs-body);color:var(--c-text);background:var(--c-surface);border:var(--bw-strong) solid var(--c-line-strong);border-radius:var(--r-m);resize:none}
.shp-input::placeholder{color:var(--c-text-muted)}
.shp-input:focus-visible{outline:var(--bw-sel) solid var(--c-accent);outline-offset:0;box-shadow:none}
.shp-tag{display:inline-flex;align-items:center;gap:.4em;padding:.2em .6em;border-radius:var(--r-s);font-size:var(--fs-caption);font-weight:var(--fw-bold);background:var(--c-surface-sunk);color:var(--c-text)}
.shp-tag[data-theme="forest"]{background:var(--theme-forest);color:var(--theme-forest-on)}
.shp-tag[data-theme="steppe"]{background:var(--theme-steppe);color:var(--theme-steppe-on)}
.shp-tag[data-theme="water"]{background:var(--theme-water);color:var(--theme-water-on)}
.shp-tag[data-theme="air"]{background:var(--theme-air);color:var(--theme-air-on)}

/* ── сцена (поиск видов, ролики) ── */
.shp-scene{position:absolute;inset:0;z-index:var(--z-scene)}
.shp-hud{position:absolute;z-index:var(--z-hud);left:var(--safe);right:var(--safe);display:flex;align-items:center;gap:var(--sp-5)}
.shp-hud--top{top:calc(var(--safe)*.5)}
.shp-hud--bottom{bottom:calc(var(--safe)*.5)}
.shp-found{position:absolute;z-index:var(--z-hud);transform:translate(-50%,-50%);width:var(--w,220px);aspect-ratio:1;pointer-events:none}
.shp-found::before{inset:0;--visor-color:#F4F6F2;--visor-len:32%;filter:drop-shadow(0 0 3px #0E1F18) drop-shadow(0 0 1px #0E1F18)}
.shp-caption{display:inline-block;max-width:28ch;padding:.35em .6em;background:var(--ov-plate-dark);color:#F4F6F2;font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:1.25;border-radius:var(--r-s);box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ── печатная карточка ── */
.shp-card-print{background:#FFFFFF;color:#15231D;border:1pt solid #15231D;display:grid;grid-template-rows:auto 1fr auto;font-family:var(--font-base)}

/* ── плотный режим: реестр, КП, каталог ── */
.shp-doc{font-size:var(--fs-body);line-height:1.45}
.shp-table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.shp-table th{position:sticky;top:0;background:var(--c-bg);text-align:left;font-size:var(--fs-label);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--c-text-muted);padding:8px 10px;border-bottom:var(--bw-base) solid var(--c-line-strong)}
.shp-table td{padding:9px 10px;border-bottom:var(--bw-hair) solid var(--c-line);vertical-align:top}
.shp-table tr:hover td{background:var(--c-surface)}
.shp-status{display:inline-flex;align-items:center;gap:.4em;font-size:var(--fs-label);font-weight:var(--fw-medium);white-space:nowrap}
.shp-status::before{content:"";width:.7em;height:.7em;border:2px solid currentColor;border-radius:50%}
.shp-status.is-ready::before{background:currentColor}
.shp-status.is-work::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.shp-status.is-ready{color:var(--c-success)}

@keyframes shp-spin{to{transform:rotate(360deg)}}
@keyframes shp-slide{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}