/* Reabilitica v1.2.1 — visual & UX refinement layer
   Safe additive layer on top of site.css. */
:root{
  --motion-fast:160ms;
  --motion-base:260ms;
  --motion-slow:520ms;
  --ease-ui:cubic-bezier(.2,.8,.2,1);
  --surface-soft:#F4F9F8;
  --surface-warm:#FCF7F1;
  --header-h:78px;
}
html{scroll-padding-top:92px}
body{background:#FBFCFB}
.site-header{transition:box-shadow var(--motion-base) var(--ease-ui),background-color var(--motion-base) var(--ease-ui)}
.site-header.is-scrolled{background:rgba(250,251,251,.975);box-shadow:0 8px 28px rgba(37,52,58,.07)}
.site-header .header-inner{transition:height var(--motion-base) var(--ease-ui)}
.site-header.is-scrolled .header-inner{height:66px}
.desktop-nav a,.mobile-bottom a{transition:color var(--motion-fast) ease,background var(--motion-fast) ease,border-color var(--motion-fast) ease}
.desktop-nav a.active,.desktop-nav a[aria-current="page"]{color:var(--deep);font-weight:750}
.desktop-nav a.active:after,.desktop-nav a[aria-current="page"]:after{right:0}
.search-link,.menu-btn,.btn,.ask-btn{transition:transform var(--motion-fast) var(--ease-ui),box-shadow var(--motion-fast) ease,background var(--motion-fast) ease,border-color var(--motion-fast) ease}
.search-link:hover,.menu-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-s)}
.btn:hover,.ask-btn:hover{transform:translateY(-2px)}
.btn:active,.ask-btn:active,.search-link:active,.menu-btn:active{transform:translateY(0) scale(.985)}

/* Thin, non-distracting reading progress under the sticky header. */
.reading-progress{position:fixed;z-index:101;left:0;right:0;top:0;height:3px;pointer-events:none;background:transparent}
.reading-progress>i{display:block;width:0;height:100%;background:var(--teal);transform-origin:left center;transition:width 80ms linear}

/* Calm hero depth: solid surfaces, moving route remains the only decorative motion. */
.hero-visual{background:#EEF8F6;isolation:isolate;box-shadow:0 22px 64px rgba(37,52,58,.09)}
.hero-visual:before,.hero-visual:after{content:"";position:absolute;border-radius:50%;z-index:0;pointer-events:none}
.hero-visual:before{width:280px;height:280px;right:-105px;top:-75px;background:rgba(168,220,214,.28)}
.hero-visual:after{width:210px;height:210px;left:-90px;bottom:-88px;background:rgba(230,210,184,.28)}
.hero-copy h1{text-wrap:balance}
.hero-copy>.lead{text-wrap:pretty}
.trust-row span{transition:transform var(--motion-fast) var(--ease-ui),border-color var(--motion-fast) ease}
.trust-row span:hover{transform:translateY(-2px);border-color:#bddbd7}

/* Stagger container support (assigned by ux-v121.js). */
[data-stagger]>*{--stagger-delay:0ms}
[data-stagger]>.reveal-item{opacity:0;transform:translateY(14px);transition:opacity var(--motion-slow) ease,transform var(--motion-slow) var(--ease-ui);transition-delay:var(--stagger-delay)}
[data-stagger]>.reveal-item.is-visible{opacity:1;transform:none}

/* Cards: quieter idle state, richer interaction without "app-dashboard" feel. */
.direction-card,.quick-card,.problem-card,.doc-card,.material-link,.side-card,.article-card,.route-node,.phase-card,.useful-card,.org-card,.update-card{
  transition:transform var(--motion-base) var(--ease-ui),box-shadow var(--motion-base) ease,border-color var(--motion-base) ease,background-color var(--motion-base) ease;
}
.direction-card:hover,.quick-card:hover,.problem-card:hover,.phase-card:hover,.useful-card:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(37,52,58,.085)}
.route-node:hover,.doc-card:hover,.material-link:hover{transform:translateX(4px)}
.article-card{box-shadow:0 10px 36px rgba(37,52,58,.055)}

/* Route: visually show where the answers to the start wizard suggest beginning. */
.route-context{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--surface-soft);border:1px solid #CFE5E2;border-radius:20px;padding:15px 17px;margin-bottom:18px}
.route-context-icon{width:42px;height:42px;border-radius:14px;background:var(--deep);color:white;display:grid;place-items:center;font-weight:900;flex:none}
.route-context p{margin:2px 0 0;color:var(--muted);font-size:14px}
.route-context .chip{white-space:nowrap}
.route-node.recommended{border-color:#9BCFC8;background:#F5FBFA;box-shadow:0 8px 26px rgba(47,145,136,.08)}
.route-node.recommended .route-dot{background:var(--deep);color:white;border-color:var(--deep)}
.route-node.recommended:after{content:"Начать здесь";position:absolute;right:16px;top:14px;font-size:11px;font-weight:850;color:var(--deep);background:#E3F3F1;border-radius:999px;padding:4px 8px}
.route-node.recommended .route-arrow{margin-top:30px}
.route-progress-line{height:5px;background:#E6EEEE;border-radius:99px;overflow:hidden;margin:14px 0 0}
.route-progress-line>i{display:block;height:100%;width:0;background:var(--teal);border-radius:99px;transition:width 700ms var(--ease-ui)}

/* Step pages: answer-first and next-step become the visual anchors. */
.answer-box{position:relative;padding-left:52px;background:#EAF6F4}
.answer-box:before{content:"→";position:absolute;left:17px;top:16px;width:24px;height:24px;border-radius:50%;background:var(--deep);color:white;display:grid;place-items:center;font-size:14px}
.next-step{background:#F3F9F8;border:1px solid #CFE5E2;border-radius:18px;padding:18px;margin-top:24px}
.next-step .btn{flex:none}
.verification{position:relative;overflow:hidden}
.verification:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-70px;top:-76px;background:rgba(168,220,214,.18)}

/* Better mobile navigation: clearer active destination and thumb reach. */
.mobile-bottom{box-shadow:0 12px 36px rgba(37,52,58,.16);border:1px solid rgba(207,229,226,.95)}
.mobile-bottom a{position:relative;border-radius:12px;padding:9px 4px 8px}
.mobile-bottom a:before{display:block;font-size:17px;line-height:18px;margin-bottom:3px;color:var(--teal)}
.mobile-bottom a[href="/"]:before{content:"⌂"}
.mobile-bottom a[href^="/route"]:before{content:"↝"}
.mobile-bottom a[href="/problems"]:before{content:"!"}
.mobile-bottom a[href="/assistant"]:before{content:"✦"}
.mobile-bottom a.active,.mobile-bottom a[aria-current="page"]{background:#EAF6F4;color:var(--deep);font-weight:800}

/* Mobile menu behaves like a calm sheet rather than a raw list. */
.mobile-menu{max-height:calc(100vh - 70px);overflow:auto;box-shadow:0 22px 50px rgba(37,52,58,.12)}
.mobile-menu a{border-bottom:0;border-radius:12px;padding:11px 12px;margin:2px 10px}
.mobile-menu a:hover,.mobile-menu a.active{background:#EEF8F6}
body.menu-open{overflow:hidden}

/* Long-page quality of life. */
.article-card h2{scroll-margin-top:92px}
.page-intro h1,.article-card h1{text-wrap:balance}
.page-intro p,.article-card p{text-wrap:pretty}
.section,.direction-card,.quick-card,.problem-card,.doc-card,.phase-card{content-visibility:auto;contain-intrinsic-size:auto 260px}

/* Small feedback utility used after clicks / local tools. */
.ui-toast{position:fixed;z-index:150;right:22px;bottom:22px;max-width:360px;background:#17383C;color:white;border-radius:15px;padding:12px 15px;box-shadow:0 18px 44px rgba(37,52,58,.22);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity var(--motion-base) ease,transform var(--motion-base) var(--ease-ui)}
.ui-toast.show{opacity:1;transform:none}

@media(max-width:1050px){
  .route-context{grid-template-columns:auto 1fr}.route-context>.chip{grid-column:2}
}
@media(max-width:720px){
  :root{--header-h:70px}
  .site-header.is-scrolled .header-inner{height:62px}
  .hero-copy h1{font-size:clamp(38px,11vw,48px)}
  .hero-visual{min-height:330px}
  .route-context{grid-template-columns:auto 1fr;padding:13px}.route-context>.chip{grid-column:1/-1;width:max-content;margin-left:56px}
  .route-node.recommended:after{position:static;display:inline-flex;margin-top:7px;width:max-content}
  .route-node.recommended .route-arrow{margin-top:0}
  .answer-box{padding-left:46px}
  .next-step{display:grid;grid-template-columns:1fr}.next-step .btn{width:100%}
  .ui-toast{left:14px;right:14px;bottom:88px;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .site-header,.site-header .header-inner,.direction-card,.quick-card,.problem-card,.doc-card,.material-link,.side-card,.article-card,.route-node,.phase-card,.useful-card,.org-card,.update-card,.btn,.ask-btn,.search-link,.menu-btn,.trust-row span,[data-stagger]>.reveal-item,.route-progress-line>i,.ui-toast{transition:none!important}
  [data-stagger]>.reveal-item{opacity:1!important;transform:none!important}
}
@media print{
  .reading-progress,.ui-toast{display:none!important}
}
.article-tools{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}.article-tools button{min-height:38px;border:1px solid var(--border);border-radius:11px;background:white;color:var(--deep);padding:7px 10px;cursor:pointer;font-size:13px;font-weight:700;transition:transform var(--motion-fast) var(--ease-ui),border-color var(--motion-fast) ease}.article-tools button:hover{transform:translateY(-1px);border-color:var(--teal)}
.breadcrumb-with-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.breadcrumb-with-tools .breadcrumb{margin-bottom:0}.article-card>.breadcrumb-with-tools{margin-bottom:16px}
@media(max-width:720px){.article-tools{width:100%;margin-left:0}.article-tools button{flex:1}}
@media print{.section,.direction-card,.quick-card,.problem-card,.doc-card,.phase-card{content-visibility:visible!important;contain-intrinsic-size:auto!important}.article-tools{display:none!important}}