/* Sprintup — компоненты. Концепция C «Аура» в палитре 9: горизонт, кольца, одна кнопка. Нельзя: стекло над контентом, капсулы, градиентный текст, ореолы и свечения, тени у всего подряд. */ *{box-sizing:border-box} html,body{margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:var(--font);font-size:var(--fs-m);line-height:var(--lh);color:var(--ink);background:var(--ground); -webkit-font-smoothing:antialiased;min-height:100vh;position:relative;overflow-x:hidden;letter-spacing:-.01em; padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px))} body.no-nav{padding-bottom:0} a{color:inherit;text-decoration:none} h1,h2,h3,p,ul,ol{margin:0} h1{font-size:var(--fs-xl);line-height:1.2;font-weight:700;letter-spacing:-.025em} h2{font-size:var(--fs-l);font-weight:700;line-height:1.3;letter-spacing:-.02em} h3{font-size:var(--fs-m);font-weight:600} .muted{color:var(--ink-2)}.small{font-size:var(--fs-s)}.xs{font-size:var(--fs-xs)} .num-t{font-variant-numeric:tabular-nums;letter-spacing:-.03em} /* цифры-табло */ .big-num{font-variant-numeric:tabular-nums;letter-spacing:-.04em;font-weight:700;color:var(--signal-text)} .wrap{padding:0 var(--s-4)} .stack>*+*{margin-top:var(--s-3)} .section{margin-top:var(--s-5)} .section-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-2)} .section-h h2{font-size:var(--fs-l)} .section-h .count{font-size:var(--fs-s);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;flex:none} /* счётчики — чернила */ .count.g{color:var(--signal-text)} /* табло сигналом — одно на экран */ .section-h a{font-size:var(--fs-s);color:var(--ink);font-weight:700;min-height:var(--tap);min-width:var(--tap);display:inline-flex;align-items:center;justify-content:flex-end;flex:none} .split{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2)} /* ---- горизонт: свет клуба лежит полосой от верхнего края до одной прямой и обрывается на ней — под линией вода. Линия лежит В ДОКУМЕНТЕ (absolute от верха страницы, не fixed): при прокрутке полоса и линия уезжают вместе с контентом, карточка 80 % никогда не становится двухцветной, линия не проходит под текстом. Положение — в px под зазор между блоками конкретного экрана: элемент с data-hz-after="N" — линия на N px ниже его нижнего края (ui.js), запас без JS — --horizon inline на . Ночью второй цвет тлеет над панелью (.horizon i) — это свет панели, он закреплён. ---- */ .horizon{position:absolute;left:0;right:0;top:0;height:calc(var(--horizon) + 1px);z-index:-1;pointer-events:none} .horizon::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--horizon); background:linear-gradient(180deg,color-mix(in oklab,var(--club-1-aura) var(--hz-top),transparent), color-mix(in oklab,var(--club-1-aura) var(--hz-mid),transparent))} .horizon::after{content:"";position:absolute;left:0;right:0;top:var(--horizon);height:1px; background:color-mix(in oklab,var(--club-1-ui) var(--hz-line),transparent)} .horizon i{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));height:140px;z-index:-1;pointer-events:none; background:linear-gradient(0deg,color-mix(in oklab,var(--club-2-aura) var(--hz-bottom),transparent),transparent)} body.no-nav .horizon i{bottom:0} /* ---- шапка: логотип клуба слева, Sprintup справа ---- */ .top{position:sticky;top:0;z-index:5;padding:calc(var(--s-3) + env(safe-area-inset-top,0px)) var(--s-4) var(--s-3); display:flex;align-items:center;gap:var(--s-3);min-height:56px;background:transparent;transition:background .2s} body.scrolled .top{background:var(--panel-solid);border-bottom:1px solid var(--rule)} /* наверху шапка прозрачна — небо видно целиком; при прокрутке закрывает контент */ .top .club{display:flex;align-items:center;gap:var(--s-2);min-width:0;flex:1} .top .club-name{font-weight:700;font-size:var(--fs-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--club-1-text)} /* имя клуба — цветом клуба */ .brand{font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-weight:700} .top .back{width:var(--tap);height:var(--tap);margin-left:-10px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink);flex:none} .icon-btn{width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink);flex:none} .top .icon-btn{margin-right:-8px} .top h1.title{font-size:var(--fs-l);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .logo-slot{width:36px;height:36px;border-radius:12px;flex:none;border:1.5px dashed var(--club-1-ui);color:var(--ink-2); display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:700;background:var(--panel);line-height:1.1;text-align:center} .logo-slot.big{width:96px;height:96px;border-radius:28px;font-size:var(--fs-s)} /* ---- кнопки: ≥ 44 px, во всю ширину; сигнал — только у главной ---- */ .btn{display:flex;align-items:center;justify-content:center;gap:var(--s-2);width:100%;min-height:52px;padding:0 var(--s-4); border-radius:var(--r-m);border:0;font:inherit;font-weight:700;font-size:var(--fs-m);cursor:pointer;text-align:center;letter-spacing:-.01em;transition:transform .12s} .btn:active{transform:scale(.98)} .btn-primary{background:var(--signal);color:var(--on-signal)} .btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--ink)} .btn-ghost{background:transparent;color:var(--ink-2);min-height:var(--tap)} .btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none} .btn-row{display:flex;gap:var(--s-3)}.btn-row>.btn{flex:1;padding:0 10px;font-size:15px} .btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .actions{position:sticky;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));z-index:4; background:linear-gradient(to top,var(--ground) 90%,transparent);padding:var(--s-5) calc(2 * var(--s-4)) var(--s-3);margin:var(--s-3) calc(-1 * var(--s-4)) 0} /* фон во всю ширину, кнопка на прежнем месте */ body.no-nav .actions{bottom:0;padding-bottom:calc(var(--s-4) + env(safe-area-inset-bottom,0px))} .hint{font-size:var(--fs-xs);color:var(--ink-3);text-align:center;margin-top:var(--s-2);line-height:1.4} .hint a,.link{color:var(--ink);font-weight:700;display:inline-block;padding:14px 0;margin:-14px 0} /* ---- карточки и списки: плотные, без стекла; кайма вместо тени ---- */ .card{background:var(--panel);border-radius:var(--r-l);padding:var(--s-4);border:1px solid var(--rule)} .list{background:var(--panel);border-radius:var(--r-l);border:1px solid var(--rule);overflow:hidden} .row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);min-height:56px;border-top:1px solid var(--rule)} .row:first-child{border-top:0} .row .grow{flex:1;min-width:0} .row .t{font-weight:600;line-height:1.3} .row .d{font-size:var(--fs-s);color:var(--ink-2);margin-top:2px} .chev{color:var(--ink-3);flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .row-link{display:flex;justify-content:center;color:var(--ink);font-weight:700;min-height:var(--tap)} .badge{display:inline-block;font-size:var(--fs-xs);font-weight:600;padding:2px 8px;border-radius:var(--r-s);background:var(--panel-2);color:var(--ink-2);white-space:nowrap;line-height:1.5} .badge-ok{background:var(--ok-bg);color:var(--ok)}.badge-warn{background:var(--warn-bg);color:var(--warn);font-weight:700} :root[data-blue] .badge-warn{border:1.5px solid var(--ink);padding:1px 7px} /* синий клуб: предупреждение держится формой, не цветом */ .badge-danger{background:var(--danger-bg);color:var(--danger)} .badge-club{background:var(--club-2-ui);color:var(--on-club-2-ui)} .badge-grade{background:var(--panel);color:var(--ink);border:1.5px solid var(--club-1-ui);font-size:var(--fs-s);padding:5px 12px} .chips{display:flex;flex-wrap:wrap;gap:var(--s-2)} .chip{font-size:var(--fs-s);padding:8px 12px;border-radius:var(--r-s);background:var(--panel-2);color:var(--ink);min-height:36px;display:inline-flex;align-items:center;font-weight:500} .chip.on{background:var(--ink);color:var(--ground)} .chip-link{color:var(--ink);font-weight:700;min-height:var(--tap)} .callout{border-radius:var(--r-m);padding:var(--s-3) var(--s-4);font-size:var(--fs-s);line-height:1.4;color:var(--ink);border-left:3px solid var(--ink-2);background:var(--panel)} .callout b{display:block;margin-bottom:2px} .callout-warn{border-left-color:var(--warn);background:var(--warn-bg)} .callout-danger{border-left-color:var(--danger);background:var(--danger-bg)} .callout-ok{border-left-color:var(--ink-2);background:var(--panel)} /* ---- кольца прогресса: язык «Ауры»; обводка — сигнал ---- */ .ring{position:relative;display:grid;place-items:center;flex:none} .ring svg{position:absolute;inset:0;transform:rotate(-90deg);width:100%;height:100%} .ring circle{fill:none;stroke-linecap:round} .ring .tr{stroke:var(--track)} .ring .pr{stroke:var(--signal)} .ring b{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--signal-text);line-height:1} .ring span{font-size:var(--fs-xs);color:var(--ink-2)} .ring-lg{width:84px;height:84px}.ring-lg circle{stroke-width:8}.ring-lg b{font-size:23px} .ring-xl{width:132px;height:132px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px}.ring-xl circle{stroke-width:5}.ring-xl b{font-size:30px} .mini{width:40px;height:40px}.mini circle{stroke-width:4}.mini b{font-size:var(--fs-xs);color:var(--ink-2)} .mini.full .pr{stroke:var(--ink-2)}.mini.full b{color:var(--ink)} /* пройденное — чернила, сигнал только у того, что в работе */ .bar{height:6px;border-radius:3px;background:var(--track);overflow:hidden} .bar>i{display:block;height:100%;background:var(--signal);border-radius:3px} .bar.ink>i{background:var(--ink-2)} /* ---- поля ввода и переключатели: чернила, не сигнал ---- */ .field{display:block} .field>span{display:block;font-size:var(--fs-s);color:var(--ink-2);margin-bottom:6px} .input{width:100%;min-height:48px;padding:0 var(--s-4);border-radius:var(--r-m);border:1.5px solid var(--rule);background:var(--panel);font:inherit;font-size:var(--fs-m);color:var(--ink);caret-color:var(--signal)} .input::placeholder{color:var(--ink-3)} .search{display:flex;align-items:center;gap:var(--s-2);min-height:48px;padding:0 var(--s-4);border-radius:var(--r-m);background:var(--panel);border:1px solid var(--rule);color:var(--ink-3)} .search svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .select{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 var(--s-4);border-radius:var(--r-m);background:var(--panel);border:1.5px solid var(--rule);font-weight:600} .select .muted{font-weight:400} .stepper{display:flex;align-items:center;min-height:48px;border-radius:var(--r-m);background:var(--panel);border:1.5px solid var(--rule)} .stepper a{width:56px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-xl);color:var(--ink)} .stepper b{flex:1;text-align:center;font-size:var(--fs-l);font-variant-numeric:tabular-nums} .seg{display:flex;background:var(--panel-2);border-radius:var(--r-m);padding:3px} .seg>span,.seg>a{flex:1;text-align:center;min-height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;font-size:var(--fs-s);font-weight:600;color:var(--ink-2)} .seg>.on{background:var(--ink);color:var(--ground)} .seg-tap>span,.seg-tap>a{min-height:44px} .toggle{width:50px;height:30px;border-radius:15px;background:var(--panel-2);border:1.5px solid var(--rule);position:relative;flex:none} .toggle::after{content:"";position:absolute;top:2px;left:2px;width:23px;height:23px;border-radius:50%;background:var(--ink-3)} .toggle.on{background:var(--ink);border-color:var(--ink)}.toggle.on::after{left:22px;background:var(--ground)} .check{width:24px;height:24px;border-radius:7px;border:2px solid var(--ink-3);flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--ground)} .check svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .check.on,input:checked+.check{background:var(--ink);border-color:var(--ink)} .radio{width:24px;height:24px;border-radius:50%;border:2px solid var(--ink-3);flex:none} .radio.on{border:7px solid var(--ink)} .opt{min-height:var(--tap);cursor:pointer;padding:14px 16px;align-items:flex-start} .opt .radio{margin-top:1px}.opt>span:last-child{flex:1;line-height:1.35} /* ---- нижняя панель: 5 пунктов, плотная, во всю ширину; активный — чернила ---- */ .nav{position:fixed;left:0;right:0;bottom:0;z-index:10;height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px); background:var(--panel-solid);border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(5,1fr)} .nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);min-height:var(--nav-h);position:relative} .nav a.on{color:var(--ink);font-weight:700} .nav a.on::before{content:"";position:absolute;top:0;left:50%;width:28px;margin-left:-14px;height:2px;background:var(--ink);border-radius:0 0 2px 2px} .nav svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .nav .dot::after{content:"";position:absolute;top:9px;right:calc(50% - 17px);width:8px;height:8px;border-radius:50%;background:var(--club-2-ui);box-shadow:0 0 0 2px var(--panel-solid)} /* ---- грейд «сиянием» без ореола: кольцо из двух цветов клуба, без размытия ---- */ .avatar{width:96px;height:96px;border-radius:50%;background:var(--panel-2);display:inline-flex;align-items:center;justify-content:center; font-size:36px;font-weight:700;color:var(--ink);position:relative;flex:none} .avatar.sm{width:44px;height:44px;font-size:17px} .avatar.grade{box-shadow:0 0 0 3px var(--ground),0 0 0 6px var(--club-1-ui),0 0 0 8px var(--ground),0 0 0 10px var(--club-2-ui)} .avatar.sm.grade{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--club-1-ui)} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)} .stat{background:var(--panel);border-radius:var(--r-l);padding:var(--s-3) 6px;text-align:center;border:1px solid var(--rule)} .stat b{display:block;font-size:28px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em} .stat b.g{color:var(--signal-text)} .stat span{display:block;font-size:var(--fs-xs);color:var(--ink-2);margin-top:5px;font-weight:600} .ach{display:flex;gap:var(--s-3);overflow-x:auto;padding:4px 0 8px;scrollbar-width:none} .ach::-webkit-scrollbar{display:none} .ach div{flex:none;width:76px;text-align:center} .ach .avatar{width:56px;height:56px;background:var(--panel);border:1.5px solid var(--club-1-ui);color:var(--ink)} .ach .avatar svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ach .off .avatar{border-color:var(--rule);color:var(--ink-3)} .ach small{display:block;font-size:var(--fs-xs);color:var(--ink-2);margin-top:4px;line-height:1.2} /* ---- лента, задачи, чат ---- */ .post{background:var(--panel);border-radius:var(--r-l);border:1px solid var(--rule);padding:var(--s-4)} .post .who{display:flex;align-items:center;gap:var(--s-3)} .post .who .n{font-weight:700}.post .who .d{font-size:var(--fs-xs);color:var(--ink-2)} .post p{margin-top:var(--s-3)} .post .media{margin-top:var(--s-3);border-radius:var(--r-m);aspect-ratio:16/9;background:var(--panel-2);display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:var(--fs-s);position:relative} .react{display:flex;gap:var(--s-2);margin-top:var(--s-3)} .react a{min-height:var(--tap);min-width:var(--tap);padding:0 12px;border-radius:var(--r-s);background:var(--panel-2);display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-s);font-weight:600;color:var(--ink)} .react a.on{background:var(--ink);color:var(--ground)} .stories{display:flex;gap:var(--s-3);overflow-x:auto;padding:4px 0 8px;scrollbar-width:none} .stories::-webkit-scrollbar{display:none} .stories div{flex:none;width:64px;text-align:center} .stories small{display:block;font-size:var(--fs-xs);color:var(--ink-2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .task{align-items:flex-start} .task .check{margin-top:2px} .task .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px} .msg{display:flex;gap:var(--s-2);align-items:flex-end;max-width:86%} .msg .b{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-l);padding:10px 14px;line-height:1.4} .msg .b .n{font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);display:block;margin-bottom:2px} .msg .b .t{font-size:var(--fs-xs);color:var(--ink-3);display:block;text-align:right;margin-top:2px;font-variant-numeric:tabular-nums} .msg.me{margin-left:auto;flex-direction:row-reverse} .msg.me .b{background:var(--panel-2);border-color:transparent} .msg .quote{border-left:2px solid var(--ink-3);padding-left:8px;font-size:var(--fs-s);color:var(--ink-2);margin-bottom:6px} .day-sep{text-align:center;font-size:var(--fs-xs);color:var(--ink-3);margin:var(--s-3) 0;font-weight:600} .composer{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));z-index:9;background:var(--panel-solid);border-top:1px solid var(--rule);padding:var(--s-2) var(--s-4);display:flex;gap:var(--s-2);align-items:center} .composer .input{flex:1;min-height:44px} .composer .icon-btn{color:var(--ink)} .send{width:var(--tap);height:var(--tap);border-radius:var(--r-m);background:var(--signal);color:var(--on-signal);display:inline-flex;align-items:center;justify-content:center;flex:none} .send svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tabs{display:flex;gap:var(--s-4);border-bottom:1px solid var(--rule);margin:0 var(--s-4)} .tabs a{min-height:var(--tap);display:inline-flex;align-items:center;font-weight:600;color:var(--ink-2);position:relative;padding:0 2px} .tabs a.on{color:var(--ink);font-weight:700} .tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)} /* ---- точки вопросов (проверка знаний) ---- */ .dots{display:flex;justify-content:space-between;margin:var(--s-2) 0 var(--s-4)} .dots span{flex:1;min-height:28px;display:flex;align-items:center;justify-content:center} .dots i{width:10px;height:10px;border-radius:50%;background:var(--panel-2);border:2px solid var(--rule);display:block} .dots .done i{background:var(--signal);border-color:var(--signal)} .dots .cur i{width:14px;height:14px;background:var(--panel);border:3px solid var(--signal)} /* ---- видео: постер, грузится по нажатию ---- */ .video{display:block;position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/9;background:color-mix(in oklab,var(--club-1-aura) 45%,var(--panel-2))} .video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .video .play span{width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--ground);display:inline-flex;align-items:center;justify-content:center} .video .play svg{width:26px;height:26px;fill:currentColor} .video .cap{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;font-size:var(--fs-xs);color:var(--ink);background:var(--panel);font-weight:600} /* ---- состояния списка: пусто, ошибка, загрузка (одни и те же для ленты, задач, чата, документов) ---- */ .empty{text-align:center;padding:var(--s-6) var(--s-4);display:flex;flex-direction:column;align-items:center;gap:var(--s-2)} .empty .avatar{width:64px;height:64px;background:transparent;border:1.5px solid var(--ink-3);color:var(--ink-2);margin-bottom:var(--s-2)} .empty .avatar svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .empty h2{font-size:var(--fs-l)}.empty p{color:var(--ink-2);font-size:var(--fs-s);max-width:280px} .empty .btn{margin-top:var(--s-3);max-width:280px} .sk{display:block;height:14px;border-radius:7px;background:var(--panel-2)} .sk.w40{width:40%}.sk.w60{width:60%}.sk.w80{width:80%}.sk.round{width:40px;height:40px;border-radius:50%;flex:none} .sk-row{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);min-height:56px;border-top:1px solid var(--rule)} .sk-row:first-child{border-top:0}.sk-row .grow{flex:1;display:grid;gap:8px} @keyframes sk{50%{opacity:.55}} .loading .sk{animation:sk 1.4s ease-in-out infinite} .offline{display:flex;gap:var(--s-2);align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);padding:6px var(--s-4);background:var(--panel-solid);border-bottom:1px solid var(--rule)} /* ---- таблица журналов (только чтение, широкий экран; на телефоне — те же строки списком) ---- */ .table{width:100%;border-collapse:collapse;font-size:var(--fs-s);background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden} .table th,.table td{text-align:left;padding:10px var(--s-3);border-top:1px solid var(--rule);vertical-align:top} .table th{font-size:var(--fs-xs);color:var(--ink-2);font-weight:700;border-top:0;background:var(--panel-2)} .table td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .table-wrap{overflow-x:auto;border-radius:var(--r-l)} /* ---- широкий экран (руководитель, ≥ 900 px): боковая колонка вместо нижней панели, контент ≤ 720 px, горизонт во всю ширину ---- */ .side{display:none} @media (min-width:900px){ body.wide{padding-bottom:0;display:grid;grid-template-columns:240px 1fr} body.wide .nav{display:none} body.wide .side{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5) var(--s-4);border-right:1px solid var(--rule);background:color-mix(in oklab,var(--ground) 82%,transparent);position:sticky;top:0;height:100vh} body.wide .side .club{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-4)} body.wide .side a.item{display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);padding:0 var(--s-3);border-radius:var(--r-m);font-weight:600;color:var(--ink-2)} body.wide .side a.item.on{background:var(--panel-2);color:var(--ink);font-weight:700} body.wide .side svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} body.wide .page{max-width:760px;padding:0 var(--s-5) var(--s-6)} body.wide .top{background:transparent} body.wide .cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);align-items:start} } /* ---- состояния макета через :target (без JS); переключатель — только в макете ---- */ .state{display:none;scroll-margin-top:100vh}.state:target{display:block} body:not(:has(.state:target)) .state.default{display:block} .states{display:flex;gap:4px;padding:4px var(--s-4) 0;font-size:var(--fs-xs);color:var(--ink-3);align-items:center;white-space:nowrap;overflow-x:auto;scrollbar-width:none} .states a{padding:3px 7px;border-radius:var(--r-s);background:var(--panel-2);color:var(--ink-2);min-height:24px;display:inline-flex;align-items:center;flex:none} /* ---- движение: сдержанно; при reduced-motion — всё стоит ---- */ @keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes ring{from{stroke-dashoffset:var(--dash,226)}} .rise{animation:up .5s both} .ring .pr.anim{animation:ring 1s .3s cubic-bezier(.2,.8,.2,1) both} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}} /* ---- ворота: кнопка живёт только после явной галочки / прочтения до конца ---- */ body:not(:has(.gate-in:checked)) .gated{opacity:.45;pointer-events:none} .rules{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3);counter-reset:r} .rules li{display:flex;gap:var(--s-3);align-items:flex-start;line-height:1.4} .rules li::before{counter-increment:r;content:counter(r);width:28px;height:28px;border-radius:50%;flex:none;background:var(--panel-2);color:var(--ink-2);font-size:var(--fs-xs);font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:1px} .top h1.sub{font-size:var(--fs-m);font-weight:600;color:var(--ink-2)}