/* Знакомство (docs/roadmap/mockups/e19-onboarding): приветствие, «Как решать», «Настроить под себя», карточка на «Сегодня». */
.onboarding{--onb-paper:#fffef9;--onb-line:#e1e5d7;--onb-ink:#30453b;--onb-head:#253d33;--onb-muted:#5f6b57;--onb-cap:#65715b;--onb-soft:#eef2e4;--onb-green:#295c47;--onb-bg:#f6f5ef;
  padding:0;display:flex;flex-direction:column;overflow:hidden;color:var(--onb-ink)}
.onboarding[hidden]{display:none}
.onb-bar{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 10px;border-bottom:1px solid #e6e6dd;background:#f9f8f3}
.onb-title{flex:1;min-width:0;font-size:14px;font-weight:650;color:var(--onb-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onb-title small{font-weight:500;color:var(--onb-cap);margin-left:6px;font-size:13px}
.onb-gap{width:44px}
.onb-icon{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--onb-ink)}
.onb-icon svg{width:22px;height:22px}
.onb-icon:hover{background:#eeefe5}
.onb-link{min-height:44px;padding:10px 12px;border-radius:10px;font-size:13px;color:var(--onb-muted)}
.onb-link:hover{background:#eeefe5}
.onb-progress{flex:none;display:flex;gap:4px;padding:8px 16px 0}
.onb-progress i{flex:1;height:4px;border-radius:2px;background:#e4e9da}.onb-progress i.done{background:var(--onb-green)}.onb-progress i.now{background:#94a682}
.onb-main{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:10px 16px 0}
.onb-main>.onb-stage{order:-1}
.onb-column{display:flex;flex-direction:column;gap:10px}
.onb-steps{display:none}
.onb-info{display:flex;flex-direction:column;gap:6px}
.onb-info h2:focus{outline:none}
.onb-info h2{margin:2px 0 2px;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:25px;line-height:1.15;color:var(--onb-head)}
.onb-info p{margin:0;font-size:13.5px;line-height:1.5;color:var(--onb-muted)}
.onb-info p b{color:var(--onb-ink)}
.onb-eyebrow{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#5a7151;background:var(--onb-soft);border-radius:999px;padding:3px 8px}
.onb-foot{position:sticky;bottom:0;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:10px 0 calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--onb-bg) 14px)}
.onb-welcome .onb-foot{position:static;background:none}
.onb-foot .onb-link{align-self:center}
.onb-primary{height:52px;border-radius:999px;background:linear-gradient(#367457,#245640);color:#fff;font-size:15px;font-weight:650;box-shadow:0 6px 16px #24564033}
.onb-primary:hover:enabled{filter:brightness(1.06)}

/* пример */
.onb-stage{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:236px;padding:12px 10px 10px;box-sizing:border-box;
  background:rgba(255,254,249,.95);border:1px solid var(--onb-line);border-radius:18px;box-shadow:0 6px 18px #3b4f3012}
.onb-cap{align-self:stretch;min-height:34px;box-sizing:border-box;padding:8px 10px;border-radius:12px;background:var(--onb-soft);font-size:12.5px;line-height:1.35;text-align:center;transition:background .25s,color .25s}
.onb-cap:empty{visibility:hidden}
.onb-cap.warn{background:#fbe9e5;color:#8f3125}.onb-cap.hint{background:#f7f2e5;color:#7a5f22}.onb-cap.app{background:#eaf0f3;color:#2d4c5b}.onb-cap.ok{background:#e2ecd7;color:#245640}
.onb-cap.change{background:var(--onb-head);color:var(--onb-paper);font-weight:600}
.onb-row{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--onb-cap)}
.onb-echo{justify-content:center;min-height:20px}
.onb-lives{display:flex;gap:2px}.onb-lives svg{width:18px;height:18px;fill:#c0563f;transition:transform .3s}
.onb-lives svg.lost{fill:none;stroke:#c9cfbf;stroke-width:2;transform:scale(.85)}
.onb-badge{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff;opacity:0;transform:scale(.6);transition:.2s}
.onb-badge.on{opacity:1;transform:none}.onb-badge.yes{background:var(--onb-green)}.onb-badge.no{background:#c2412f}

/* поле примера — те же цвета, что у поля в игре */
.onb-board{border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:var(--clue);user-select:none}
.onb-board th{padding:0;font-weight:650;color:#5f6d54}
.onb-board th.rc{padding-right:7px;text-align:right;white-space:nowrap;height:var(--cs)}
.onb-board th.cc{vertical-align:bottom;padding-bottom:6px;width:var(--cs)}
.onb-board th.on{color:var(--onb-green)}
.onb-board .cl{display:flex;gap:.45em;justify-content:flex-end;align-items:center}
.onb-board .cc .cl{flex-direction:column;gap:4px}
.onb-n,.onb-chip{transition:opacity .35s}.onb-n.done,.onb-chip.done{opacity:.33}
.onb-chip{position:relative;display:inline-grid;place-items:center;min-width:1.4em;height:1.4em;padding:0 .18em;box-sizing:border-box;border-radius:3px;font-weight:700;line-height:1;background:var(--c);color:#fff}
.onb-chip.dot:after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:#8b9584;right:calc(-.225em - 2px);top:calc(50% - 2px);animation:onb-pop .3s}
.cc .onb-chip.dot:after{right:calc(50% - 2px);top:auto;bottom:-4px}
.onb-board td{position:relative;width:var(--cs);height:var(--cs);min-width:var(--cs);padding:0;box-sizing:border-box;border:1px solid #c8d0be;background:#fffffb;transition:background-color .18s}
.onb-board td.L{border-left:2px solid #7d8f71}.onb-board td.R{border-right:2px solid #7d8f71}.onb-board td.T{border-top:2px solid #7d8f71}.onb-board td.B{border-bottom:2px solid #7d8f71}
.onb-board td.c5{border-right:2px solid #9aa98e}.onb-board td.r5{border-bottom:2px solid #9aa98e}
.onb-board td.f{background:#295c47}
.onb-board td.x:after{content:'×';position:absolute;inset:0;display:grid;place-items:center;color:#a5ae9a;font-size:calc(var(--cs)*.78);line-height:1}
.onb-board td.auto{background:#f9faf5}.onb-board td.auto:after{color:#c7cebd;animation:onb-pop .35s ease-out}
.onb-board td.fix{background:#fbe9e5;box-shadow:inset 0 0 0 2px #d9a093}.onb-board td.fix:after{color:#b4493c}
.onb-board td.bad{box-shadow:inset 0 0 0 2px #c2412f}
.onb-board td.flash{animation:onb-flash .5s}
.onb-board td.hl{box-shadow:inset 0 0 0 999px rgba(148,166,130,.16)}
.onb-board td.ghost{background:#dbe7cf}.onb-board td.ghost2{background:#cfe0ea}.onb-board td.ghost.ghost2{background:#9fcb8e}
.onb-board td.sug{background:#9fcb8e}
.onb-board td.hf{box-shadow:inset 0 0 0 2px #d3ad54}
.onb-board td.pop{animation:onb-pop .25s ease-out}
.onb-try .onb-board td{cursor:pointer}
@keyframes onb-pop{from{transform:scale(.6)}}
@keyframes onb-flash{0%,60%{background:#f3b7aa}}

/* палец */
.onb-finger{position:absolute;left:50%;top:100%;z-index:5;width:30px;height:30px;margin:-15px 0 0 -15px;box-sizing:border-box;border-radius:50%;background:rgba(41,92,71,.16);border:2px solid rgba(41,92,71,.55);
  opacity:0;pointer-events:none;transition:left .45s cubic-bezier(.4,.1,.2,1),top .45s cubic-bezier(.4,.1,.2,1),opacity .2s}
.onb-finger.on{opacity:1}.onb-finger.tap{animation:onb-tap .28s}.onb-finger.hold{animation:onb-hold .65s forwards}
@keyframes onb-tap{50%{transform:scale(.72);background:rgba(41,92,71,.35)}}
@keyframes onb-hold{to{transform:scale(1.35);background:rgba(41,92,71,.32);box-shadow:0 0 0 4px rgba(41,92,71,.18)}}

/* док примера */
.onb-dock{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;background:var(--onb-paper);border:1px solid var(--onb-line);box-shadow:0 6px 16px #3b4f3018}
.onb-tool{display:grid;place-items:center;height:40px;min-width:40px;padding:0 10px;border-radius:999px;font-size:12px;color:#63785a}
.onb-tool.on{background:var(--onb-soft);color:var(--onb-green);font-weight:650}
.onb-tool.check{background:var(--onb-soft);color:var(--onb-green);font-weight:650}
.onb-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--onb-green);color:#fff;font-size:19px;font-weight:700;transition:background .2s}
.onb-mark.x{background:#e9ede1;color:#5f6d54}
.onb-paints{display:flex;gap:6px}
.onb-paint{width:36px;height:36px;border-radius:9px;background:var(--c);box-shadow:inset 0 0 0 2px #fff;border:2px solid transparent}
.onb-paint.cross{background:#fff;color:#8b9584;font-size:18px;border-color:#e1e5d7}
.onb-paint.on{border-color:var(--onb-head)}

/* выбор */
.onb-controls{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.onb-option,.onb-toggle{display:flex;gap:12px;align-items:flex-start;width:100%;min-height:50px;padding:9px 12px;box-sizing:border-box;text-align:left;border:1.5px solid var(--onb-line);border-radius:14px;background:var(--onb-paper);color:inherit;transition:border-color .15s,background .15s}
.onb-option:hover,.onb-toggle:hover{border-color:#c9d3bb}
.onb-option.on{border-color:var(--onb-green);background:#f1f5ea}
.onb-option .radio{flex:none;position:relative;width:20px;height:20px;margin-top:1px;box-sizing:border-box;border-radius:50%;border:2px solid #b9c3ad}
.onb-option.on .radio{border-color:var(--onb-green)}.onb-option.on .radio:after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--onb-green)}
.onb-option b,.onb-toggle b{display:block;font-size:14px;color:var(--onb-ink)}
.onb-option small,.onb-toggle small{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--onb-muted)}
.onb-toggle{align-items:center}
.onb-toggle>i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--onb-soft);color:var(--onb-green);font-style:normal;font-weight:700;font-size:15px}
.onb-toggle .switch{flex:none;position:relative;margin-left:auto;width:44px;height:26px;border-radius:13px;background:#d7dccd;transition:background .2s}
.onb-toggle .switch:after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:left .2s}
.onb-toggle.on .switch{background:var(--onb-green)}.onb-toggle.on .switch:after{left:21px}
.onb-seg{align-self:stretch;display:flex;gap:2px;padding:3px;border-radius:999px;background:#eceee6}
.onb-seg button{flex:1;height:40px;border-radius:999px;font-size:13px;font-weight:600;color:var(--onb-muted)}
.onb-seg button.on{background:var(--onb-paper);color:var(--onb-green);box-shadow:0 1px 4px #3b4f3022}
.onb-where{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--onb-cap)}
@media (max-width:1099px){.onb-where{display:none}}
.onb-where:before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:#94a682}
.onb-try{display:flex;flex-direction:column;align-items:center;gap:10px}
.onb-goal{align-self:stretch;display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:var(--onb-paper);border:1px solid var(--onb-line)}
.onb-goal b{display:block;font-size:15px;color:var(--onb-head)}.onb-goal small{display:block;margin-top:2px;font-size:12px;color:var(--onb-muted)}
.onb-ring circle{fill:none;stroke-width:6}.onb-ring .bg{stroke:#e4e9da}.onb-ring .fg{stroke:var(--onb-green,#295c47);stroke-linecap:round;transition:stroke-dashoffset .6s}
.onb-ring text{font-size:15px;font-weight:700;fill:#253d33;text-anchor:middle;dominant-baseline:central}
.onb-banner{position:absolute;left:10px;right:10px;top:-90px;z-index:7;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(250,250,247,.97);box-shadow:0 10px 26px #0002;font-size:12px;text-align:left;transition:top .45s cubic-bezier(.3,1.3,.5,1)}
.onb-banner.on{top:8px}.onb-banner .icon{flex:none;width:30px;height:30px;border-radius:8px;background:var(--onb-green)}.onb-banner b{display:block;font-size:12.5px}
.onb-stage{overflow:hidden}
.onb-stage.compact{min-height:0;gap:8px;padding:10px 8px 8px}
.onb-stage.compact .onb-cap{min-height:30px;padding:6px 10px}

/* приветствие */
.onb-welcome{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:14px 16px 0}
.onb-intro{display:flex;flex-direction:column;gap:10px;text-align:center}
.onb-intro h1{margin:4px 0 0;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:31px;line-height:1.1;letter-spacing:-.8px;color:var(--onb-head)}
.onb-intro p{margin:0;font-size:13.5px;line-height:1.5;color:var(--onb-muted)}
.onb-hero{display:flex;justify-content:center;padding:6px 0 2px}
.onb-art{display:grid;grid-template-columns:repeat(5,22px);gap:3px;padding:10px;border:1px solid #dae0cd;border-radius:10px;background:#edf0e4;box-shadow:9px 10px 0 #e8ebde;transform:rotate(-6deg)}
.onb-art i{height:22px;box-sizing:border-box;border-radius:3px;border:1px solid #d5dcc8;background:#fffffb;transition:background .25s,border-color .25s}
.onb-art i.on{background:#6f8d61;border-color:transparent}
.onb-parts{display:flex;flex-direction:column;gap:8px}
.onb-part{display:flex;gap:12px;align-items:flex-start;width:100%;padding:14px;box-sizing:border-box;text-align:left;border:1px solid var(--onb-line);border-radius:18px;background:rgba(255,254,249,.95);color:inherit;box-shadow:0 6px 18px #3b4f3010}
.onb-part:hover{border-color:#c9d3bb}
.onb-part .num{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--onb-soft);color:var(--onb-green);font-weight:800;font-size:15px}
.onb-part.done .num{background:var(--onb-green);color:#fff}
.onb-part b{display:block;font-size:15.5px;color:var(--onb-head)}
.onb-part .meta{display:block;margin-top:1px;font-size:11.5px;color:var(--onb-cap)}
.onb-part .desc{display:block;margin-top:5px;font-size:12.5px;line-height:1.4;color:var(--onb-muted)}
.onb-part .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.onb-part .tags span{padding:2px 7px;border-radius:999px;background:#f1f3ea;border:1px solid #e4e8dc;font-size:11px;color:var(--onb-ink)}
.onb-part .go{margin-left:auto;align-self:center;color:#94a682;font-size:20px}

/* сводка */
.onb-summary{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--onb-line);border-radius:18px;background:rgba(255,254,249,.95)}
.onb-summary button{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 12px;text-align:left;border-top:1px solid #eef0e6;color:inherit}
.onb-summary button:first-child{border-top:0}
.onb-summary button:hover{background:#f6f8f1}
.onb-summary i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--onb-soft);color:var(--onb-green);font-style:normal;font-weight:700;font-size:13px}
.onb-summary span{flex:1;font-size:13px;color:var(--onb-muted)}.onb-summary span b{display:block;font-size:13.5px;color:var(--onb-ink)}
.onb-summary em{font-style:normal;font-size:12px;color:#94a682}

/* карточка на «Сегодня» */
.onb-card{display:flex;align-items:center;gap:4px;padding:6px 6px 6px 12px;border:1px solid #cfdcc0;border-radius:16px;background:#f4f7ee}
.onb-card[hidden]{display:none}
.onb-card-open{flex:1;display:flex;align-items:center;gap:12px;min-height:48px;text-align:left;color:inherit}
.onb-card-open b{display:block;font-size:14px;color:#253d33}.onb-card-open small{display:block;margin-top:1px;font-size:12px;color:#5f6b57}
.onb-card .onb-ring circle{stroke-width:5}.onb-card .onb-ring text{font-size:12px}

/* ноутбук: шаги слева, выбор в центре, пример справа */
@media (min-width:1100px){
  .onb-main{flex-direction:row;align-items:flex-start;gap:28px;padding:28px 32px}
  .onb-main>.onb-stage{order:0;flex:0 0 480px;min-height:420px}
  .onb-main>.onb-summary{flex:0 0 480px}
  .onb-column{flex:1;min-width:0}
  .onb-steps{display:flex;flex-direction:column;gap:2px;flex:0 0 240px;font-size:13px}
  .onb-steps .group{margin:12px 0 4px;font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#5a7151}
  .onb-steps .group:first-child{margin-top:0}
  .onb-steps button{display:flex;align-items:center;gap:8px;min-height:34px;padding:7px 8px;border-radius:9px;text-align:left;color:var(--onb-muted)}
  .onb-steps button:hover{background:#eeefe5}
  .onb-steps button.now{background:var(--onb-paper);color:var(--onb-head);font-weight:650;box-shadow:0 1px 6px #3b4f3014}
  .onb-steps button i{flex:none;display:grid;place-items:center;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:1.6px solid #b9c3ad;font-style:normal;font-size:10px;color:#fff}
  .onb-steps button.done i{background:var(--onb-green);border-color:var(--onb-green)}.onb-steps button.now i{border-color:var(--onb-green)}
  .onb-info h2{font-size:34px}.onb-info p{font-size:15px}
  .onb-foot{position:static;flex-direction:row;justify-content:flex-start;gap:12px;padding:4px 0 0;background:none}
  .onb-foot .onb-primary{padding:0 28px}
  .onb-welcome{display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-areas:'intro parts' 'foot parts';align-content:center;column-gap:48px;row-gap:16px;max-width:1040px;width:100%;margin:0 auto;padding:40px 32px;box-sizing:border-box}
  .onb-welcome .onb-intro{grid-area:intro;text-align:left}.onb-welcome .onb-hero{justify-content:flex-start}
  .onb-welcome .onb-parts{grid-area:parts;align-self:center}.onb-welcome .onb-foot{grid-area:foot;align-items:center}
  .onb-intro h1{font-size:44px}
}

/* тёмная тема */
html[data-theme=dark] .onboarding{--onb-paper:#1d2520;--onb-line:#2f3a33;--onb-ink:#dfe6da;--onb-head:#e4ece0;--onb-muted:#b3bdae;--onb-cap:#a7b1a2;--onb-soft:#26312a;--onb-green:#7fc29b;--onb-bg:#151b17}
html[data-theme=dark] .onb-bar{background:#1b221d;border-color:#2a332d}
html[data-theme=dark] .onb-stage,html[data-theme=dark] .onb-part,html[data-theme=dark] .onb-summary{background:#1d2520;box-shadow:none}
html[data-theme=dark] .onb-primary{background:linear-gradient(#3d8562,#2c6a4d)}
html[data-theme=dark] .onb-cap.warn{background:#3a2320;color:#ffb3a6}html[data-theme=dark] .onb-cap.hint{background:#3a3220;color:#ecd08e}
html[data-theme=dark] .onb-cap.app{background:#1f2e36;color:#a9cde0}html[data-theme=dark] .onb-cap.ok{background:#22352a;color:#a9dcbb}
html[data-theme=dark] .onb-board th{color:#c2c9bc}
html[data-theme=dark] .onb-board td{background:#1d2520;border-color:#2f3a33}
html[data-theme=dark] .onb-board td.L,html[data-theme=dark] .onb-board td.R,html[data-theme=dark] .onb-board td.T,html[data-theme=dark] .onb-board td.B,html[data-theme=dark] .onb-board td.c5,html[data-theme=dark] .onb-board td.r5{border-color:#55634d}
html[data-theme=dark] .onb-board td.f{background:#7fc29b}
html[data-theme=dark] .onb-board td.x:after{color:#6c7a70}
html[data-theme=dark] .onb-board td.auto{background:#1b221d}html[data-theme=dark] .onb-board td.auto:after{color:#4c5850}
html[data-theme=dark] .onb-board td.fix{background:#3a2320;box-shadow:inset 0 0 0 2px #7c3a31}html[data-theme=dark] .onb-board td.fix:after{color:#ffa698}
html[data-theme=dark] .onb-board td.ghost{background:#2c3e31}html[data-theme=dark] .onb-board td.ghost2{background:#283a44}html[data-theme=dark] .onb-board td.ghost.ghost2,html[data-theme=dark] .onb-board td.sug{background:#4f7a5c}
html[data-theme=dark] .onb-option.on{background:#22352a}
html[data-theme=dark] .onb-toggle .switch,html[data-theme=dark] .onb-progress i{background:#3a463f}
html[data-theme=dark] .onb-toggle.on .switch{background:var(--onb-green)}
html[data-theme=dark] .onb-progress i.done{background:#7fc29b}html[data-theme=dark] .onb-progress i.now{background:#55634d}
html[data-theme=dark] .onb-seg{background:#26312a}
html[data-theme=dark] .onb-mark{color:#141a17}
html[data-theme=dark] .onb-art{background:#1d2520;border-color:#2f3a33;box-shadow:9px 10px 0 #1b221d}html[data-theme=dark] .onb-art i{background:#141a17;border-color:#2f3a33}html[data-theme=dark] .onb-art i.on{background:#7fc29b}
html[data-theme=dark] .onb-part .tags span{background:#26312a;border-color:#2f3a33}
html[data-theme=dark] .onb-ring .bg{stroke:#2f3a33}html[data-theme=dark] .onb-ring text{fill:#e4ece0}html[data-theme=dark] .onb-ring .fg{stroke:#7fc29b}
html[data-theme=dark] .onb-card{background:#1f2a23;border-color:#2f3a33}
html[data-theme=dark] .onb-card-open b{color:#e4ece0}html[data-theme=dark] .onb-card-open small{color:#b3bdae}
html[data-theme=dark] .onb-icon,html[data-theme=dark] .onb-link{color:#c2cabd}
html[data-theme=dark] .onb-icon:hover,html[data-theme=dark] .onb-link:hover{background:#26312a}
html[data-theme=dark] .onb-banner{background:#26312a;color:#dfe6da}
@media (prefers-reduced-motion:reduce){.onb-finger{display:none}.onboarding *{animation:none!important;transition:none!important}}