/* Porado — «схема метро». Жёлтый и чёрный общие с блогом Ach so!. */
:root{
  --bg:#F6F5F1; --surface:#FFFFFF; --ink:#141414; --muted:#55555C; --rule:#DDDCD6;
  --yellow:#FFD23F; --on-yellow:#141414; --kids:#1F5FBF; --work:#00894A; --ahead:#CFCDC6; --stitch:#B3261E;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Manrope","Segoe UI",system-ui,sans-serif;
  --radius:12px;
  --l-yellow:var(--yellow); --l-blue:var(--kids); --l-green:var(--work);
  --l-red:#C8372D; --l-purple:#7A4FBF; --l-orange:#C9650A; --l-teal:#00838F;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#141414; --surface:#262626; --ink:#E6E6E6; --muted:#BDBDBD; --rule:#3A3A3A;
  --kids:#5B9BF0; --work:#2FB36F; --ahead:#4A4A4A; --stitch:#E2574C; --l-red:#E2574C; --l-purple:#A68BE0; --l-orange:#F0A04B; --l-teal:#3BB8C4; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#141414; --surface:#262626; --ink:#E6E6E6; --muted:#BDBDBD; --rule:#3A3A3A;
  --kids:#5B9BF0; --work:#2FB36F; --ahead:#4A4A4A; --stitch:#E2574C; --l-red:#E2574C; --l-purple:#A68BE0; --l-orange:#F0A04B; --l-teal:#3BB8C4; color-scheme:dark }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--ink); font:400 16px/1.6 var(--body); margin:0; overflow-x:hidden}
img{max-width:100%; height:auto}
a{color:inherit; text-decoration-color:var(--yellow); text-decoration-thickness:3px; text-underline-offset:4px}
a:hover{text-decoration-color:var(--ink)}
button,select,input{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--kids); outline-offset:2px; border-radius:6px}
.wrap{max-width:1080px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.muted{color:var(--muted)} .small{font-size:14px}
.skip{position:absolute; left:-999px; top:8px; background:var(--yellow); color:var(--on-yellow); padding:8px 12px; z-index:10}
.skip:focus{left:8px}
.btn{display:inline-block; border:2px solid var(--on-yellow); background:var(--yellow); color:var(--on-yellow); border-radius:8px; padding:7px 14px; font-weight:600; text-decoration:none}

/* шапка */
.site-header{background:var(--yellow); color:var(--on-yellow)}
.site-header .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding-block:12px}
.mark{display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0; text-decoration:none}
.mark svg{flex:none}
.mark b{display:block; font:700 22px/1 var(--display); letter-spacing:.01em}
.mark small{display:block; font-size:13px; line-height:1.3; opacity:.8}
.primary ul{display:flex; flex-wrap:wrap; gap:4px 16px; list-style:none; margin:0; padding:0}
.primary a{text-decoration:none; font-weight:600}
.primary a:hover{text-decoration:underline; text-decoration-color:var(--on-yellow)}
.langs{display:flex; border:2px solid var(--on-yellow); border-radius:999px; padding:3px}
.langs a{padding:4px 12px; border-radius:999px; font-weight:600; font-size:14px; text-decoration:none}
.langs a[aria-current]{background:var(--on-yellow); color:var(--yellow)}
.motion{border:2px solid var(--on-yellow); background:none; color:var(--on-yellow); border-radius:999px; padding:5px 14px; font-size:14px; cursor:pointer}

/* первый экран */
.hero{padding-block:36px 8px}
.eyebrow{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}
h1{font:700 clamp(28px,5vw,46px)/1.12 var(--display); margin:8px 0 12px; text-wrap:balance; hyphens:auto; overflow-wrap:break-word}
.h2{font:700 clamp(20px,3vw,24px)/1.25 var(--display); margin:0 0 14px}
.lead{max-width:62ch; color:var(--muted); margin:0 0 18px; font-size:17px}
.block{padding-block:28px 8px}

/* выбор региона */
.region-form{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:6px 0 4px}
.region-form label{font-weight:600}
.region-form select{min-width:0; max-width:100%; padding:8px 10px; border:2px solid var(--ink); border-radius:8px; background:var(--surface)}

/* схема маршрута */
.map{margin-top:22px; background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:16px 18px 10px}
.map-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; align-items:baseline}
.map-head h2{font:600 15px/1.3 var(--body); margin:0}
.replay{border:0; background:none; text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:3px; text-underline-offset:4px; font-weight:600; font-size:14px; padding:4px 0; cursor:pointer}
.map-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:-6px; padding-inline:6px}
.map svg{display:block; width:100%; height:auto; margin-top:6px}
.ln{fill:none; stroke-width:12; stroke-linecap:round; stroke-linejoin:round}
.case{stroke-linejoin:round}
.term{stroke:var(--ink); stroke-width:4}
.ov-label.strong{fill:var(--ink); font-weight:700}
.ov-label.side{fill:var(--ink)}
.map [data-line]{transition:opacity .4s}
.map [data-line].off{opacity:.22}
.legend{display:flex; flex-wrap:wrap; gap:6px 20px; margin:8px 0 2px; padding:0; list-style:none; font-size:14px; color:var(--muted)}
.legend li{display:flex; align-items:center; gap:8px}
.legend li.off{opacity:.5}
.legend i{width:26px; height:8px; border-radius:4px; display:inline-block}
/* выбор пути */
.path{background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:14px 18px; margin:0 0 22px; max-width:760px}
.path h2{font:700 18px/1.3 var(--display); margin:0 0 4px}
.path p{margin:0 0 8px}
.path-group{display:flex; flex-wrap:wrap; gap:8px 10px; border:0; margin:8px 0 0; padding:0; min-width:0}
.path-group legend{font-weight:700; padding:0; margin-bottom:6px; width:100%}
.path-opt{display:inline-flex; align-items:center; gap:8px; border:2px solid var(--rule); border-radius:999px; padding:5px 12px 5px 10px; cursor:pointer; font-weight:600; font-size:15px; background:var(--bg)}
.path-opt:has(input:checked){border-color:var(--ink)}
.path-opt input{margin:0; accent-color:var(--ink)}
.path-opt i{width:18px; height:6px; border-radius:3px; display:inline-block}
.line-chip{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--muted); margin-top:2px}
.line-chip i,.xfer i{width:18px; height:6px; border-radius:3px; display:inline-block; background:var(--lc)}
.xfer{font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:6px}
.xfer.off{opacity:.5}
.ln.main{stroke:var(--yellow)}
.case{fill:none; stroke:var(--ink); stroke-width:18; stroke-linecap:round}
.st{fill:var(--surface); stroke:var(--ink); stroke-width:4}
.st.done{fill:var(--ink)}
.ix{fill:var(--surface); stroke:var(--ink); stroke-width:5}
.ix.home{fill:var(--yellow)}
.ov-label{font:600 15px var(--body); fill:var(--muted)}
.train{transition:transform .9s cubic-bezier(.6,0,.2,1)}
.train circle{fill:var(--ink); stroke:var(--yellow); stroke-width:4}
.play .ln,.play .case{stroke-dasharray:1; animation:draw 1.4s cubic-bezier(.5,0,.2,1) backwards}
.play .pop{animation:pop .35s cubic-bezier(.3,1.6,.5,1) backwards; transform-box:fill-box; transform-origin:center}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}

/* станции */
.route{padding-block:30px 20px}
.route-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 16px; margin-bottom:18px}
.route-head h2{font:700 22px/1.25 var(--display); margin:0; text-wrap:balance}
.count{font-variant-numeric:tabular-nums; color:var(--muted); font-size:15px}
ol.steps{list-style:none; margin:0; padding:0; max-width:760px}
.step{position:relative; padding:0 0 22px 58px}
.step::before{content:""; position:absolute; left:20px; top:0; bottom:0; width:8px; background:var(--ahead); transition:background .5s}
.step:first-child::before{top:24px}
.step:last-child::before{bottom:calc(100% - 24px)}
.step.done::before{background:var(--yellow); box-shadow:0 0 0 2px var(--ink)}
.step.current::before{background:linear-gradient(var(--yellow) 24px, var(--ahead) 24px)}
.step:first-child.current::before{background:var(--ahead)}
.steps.compact .step::before{background:var(--yellow); box-shadow:0 0 0 2px var(--ink)}
.stop{position:absolute; left:10px; top:12px; width:28px; height:28px; border-radius:50%; background:var(--surface); border:5px solid var(--ahead); transition:background .4s,border-color .4s}
.steps.compact .stop{border-color:var(--ink)}
.done .stop{border-color:var(--ink); background:var(--yellow); z-index:1}
.done .stop::after{content:""; position:absolute; left:6px; top:3px; width:5px; height:10px; border:solid var(--on-yellow); border-width:0 3px 3px 0; transform:rotate(45deg)}
.current .stop{border-color:var(--yellow); background:var(--ink); animation:breathe 2.4s ease-in-out infinite}
.step.ix .stop{width:34px; height:34px; left:7px; top:9px; border-width:6px; border-color:var(--ink)}
.step.home .stop{background:var(--yellow)}
.step.branch.done .stop{background:var(--lc); border-color:var(--ink)}
.step.branch.done .stop::after{border-color:var(--surface)}
.step.branch .card{box-shadow:inset 4px 0 0 var(--lc)}
.step.branch.current .card{box-shadow:inset 6px 0 0 var(--lc)}
.step[hidden]{display:none}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--yellow) 60%, transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb, var(--yellow) 0%, transparent)}}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:14px 16px; min-width:0}
.current .card{border-color:var(--ink); box-shadow:inset 6px 0 0 var(--yellow)}
.home .card{border-style:dashed}
.num{font-size:14px; color:var(--muted); font-weight:600}
.card h3{font:700 18px/1.3 var(--body); margin:2px 0 4px; hyphens:auto; overflow-wrap:break-word}
.card p{margin:0 0 6px; color:var(--muted); max-width:64ch}
.card h4{font:700 15px/1.3 var(--body); margin:14px 0 6px}
.card details{margin-top:8px}
.card summary{cursor:pointer; font-weight:600; width:max-content; max-width:100%}
.after{color:var(--ink)!important}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px}
.when{display:inline-block; font-size:14px; font-weight:600; padding:3px 10px; border-radius:999px; background:color-mix(in srgb, var(--yellow) 40%, transparent); color:var(--ink)}
.facts{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px}
.mark-btn{margin-left:auto; border:2px solid var(--on-yellow); background:var(--yellow); color:var(--on-yellow); border-radius:8px; padding:5px 12px; font-size:14px; font-weight:600; cursor:pointer}
.done .mark-btn{border-color:var(--rule); background:none; color:var(--muted)}

/* блоки содержимого */
.docs{margin:0; padding-left:20px}
.docs .de{color:var(--muted); font-size:14px}
.local{margin-top:14px; padding:12px 14px; border-radius:10px; background:color-mix(in srgb, var(--yellow) 14%, var(--surface)); border:1px solid var(--rule)}
.local h4{margin-top:0}
.local .office{margin:6px 0}
.verified{margin-top:28px; padding-top:14px; border-top:1px solid var(--rule); color:var(--muted); font-size:15px}
.verified p{margin:4px 0}
.article{max-width:820px}
.article .content{max-width:68ch}
.article > .h2{margin-top:32px}
.docs{margin-bottom:8px}
.article .local{margin-top:28px}
.faq{border-bottom:1px solid var(--rule); padding:8px 0}
.faq summary{cursor:pointer; font-weight:600}
.terms dt{font-weight:700; margin-top:8px}
.terms dd{margin:0 0 4px; color:var(--muted)}
.cards{list-style:none; padding:0; margin:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr))}

/* главная: маршруты-линии, разделы, события */
.lines{list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr))}
.line a{display:grid; gap:6px; height:100%; padding:14px 16px; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); text-decoration:none}
.line a:hover{border-color:var(--ink)}
.line strong{font:700 18px/1.3 var(--body)}
.line-bar{display:flex; align-items:center; height:14px; position:relative; margin-bottom:4px}
.line-bar::before{content:""; position:absolute; left:0; right:0; height:8px; border-radius:4px; background:var(--c)}
.line-main .line-bar::before{box-shadow:0 0 0 2px var(--ink)}
.line-bar i{position:relative; width:14px; height:14px; border-radius:50%; background:var(--surface); border:3px solid var(--ink); margin-right:22%}
.line-main{--c:var(--yellow)} .line-kids{--c:var(--kids)} .line-work{--c:var(--work)}
.tiles{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.tiles a{display:inline-block; padding:8px 14px; border:2px solid var(--ink); border-radius:999px; text-decoration:none; font-weight:600; background:var(--surface)}
.tiles a:hover{background:var(--yellow); color:var(--on-yellow)}
.events{list-style:none; margin:0 0 8px; padding:0; display:grid; gap:8px}
.events li{display:flex; gap:14px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--rule)}
.events time{min-width:92px; color:var(--muted); font-size:14px}
.events time b{font:700 22px var(--display); color:var(--ink)}

/* вышивка и подвал */
.stitch{height:28px; margin-top:32px; background-repeat:repeat-x; background-position:center; opacity:.9}
.site-footer .wrap{padding-block:14px 28px; color:var(--muted); font-size:14px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px}
.site-footer ul{display:flex; flex-wrap:wrap; gap:4px 14px; list-style:none; margin:0; padding:0}

@media (max-width:640px){
  .map{padding:12px 12px 8px} .mark small{display:none}
  .step{padding-left:50px} .mark-btn{margin-left:0}
  .motion{padding:4px 10px; font-size:13px}
}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important; transition:none!important} }
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{animation:none!important; transition:none!important}