/* ==========================================================================
   transit — схема линий: вертикальный маршрут, цветные ветки, станции-кружки
   namespace .tr-*  ·  геометрия рельса через --rail-x / --node-d
   Палитра и ветки подставляются в :root на сборке (build_transit_poster.py).
   ========================================================================== */

:root{
  --tr-bg:#0a0f0d;
  --tr-surf:#131b18;
  --tr-acc:#ffcf56;
  --tr-acc2:#5c9ead;
  --tr-text:#e9f0ec;
  --tr-mute:#88a096;
  --tr-ink:#0a0f0d;
  --tr-line:rgba(233,240,236,0.21);
  --tr-hair:rgba(233,240,236,0.1);
  --tr-br1:#ffcf56;
  --tr-br2:#5c9ead;
  --tr-br3:#80ff56;
  --tr-br4:#56a8ff;
  --tr-head:"Russo One";
  --tr-body:"Literata";
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--tr-bg);
  color:var(--tr-text);
  font-family:var(--tr-body),-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.66;
  overflow-x:hidden;
}
a{color:inherit}
img,svg{max-width:100%}
table{border-collapse:collapse}
h1,h2,h3,h4{font-family:var(--tr-head),"Segoe UI",Arial,sans-serif;font-weight:700;
  line-height:1.18;margin:0;overflow-wrap:break-word}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--tr-acc2);outline-offset:2px}
::selection{background:var(--tr-acc);color:var(--tr-ink)}

.tr-shell{width:100%;max-width:1140px;margin:0 auto;padding:0 15px}
.tr-skip{position:absolute;left:-9999px;top:0}
.tr-skip:focus{left:10px;top:10px;z-index:9;background:var(--tr-acc);color:var(--tr-ink);
  padding:12px 18px;border-radius:8px;text-decoration:none;font-size:13px}

/* --- шапка со схемой веток ---------------------------------------------- */
.tr-topbar{background:var(--tr-surf);border-bottom:2px solid var(--tr-hair);padding:11px 0 12px}
.tr-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tr-mark{display:inline-flex;align-items:center;gap:9px;font-family:var(--tr-head),sans-serif;
  font-size:17px;letter-spacing:.15em;text-transform:uppercase}
.tr-mark-node{width:19px;height:19px;border-radius:50%;background:var(--tr-surf);
  border:5px solid var(--tr-acc);flex:0 0 auto}
.tr-mark-sub{font-family:var(--tr-body),sans-serif;font-size:10.5px;letter-spacing:.2em;
  color:var(--tr-mute);text-transform:uppercase;display:block;margin-top:2px}
.tr-topcta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 18px;border-radius:999px;background:var(--tr-acc);color:var(--tr-ink);
  text-decoration:none;font-weight:700;font-size:13.5px;letter-spacing:.02em}
.tr-topcta:hover{background:var(--tr-acc2)}

.tr-legend{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.tr-leg{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;
  border-radius:999px;border:1px solid var(--tr-hair);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tr-mute);white-space:nowrap;text-decoration:none}
.tr-leg:hover{color:var(--tr-text);border-color:var(--tr-line)}
.tr-leg i{width:17px;height:5px;border-radius:3px;background:var(--tr-seg,var(--tr-acc));
  flex:0 0 auto}
.tr-legnote{margin:9px 0 0;font-size:12.5px;color:var(--tr-mute)}

/* --- сводное табло (5 ячеек) -------------------------------------------- */
.tr-board{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin:16px 0 6px;
  background:var(--tr-hair);border:2px solid var(--tr-hair);border-radius:14px;overflow:hidden}
.tr-board-cell{background:var(--tr-surf);padding:13px 13px 14px}
.tr-board-cell:last-child{grid-column:1 / -1}
.tr-board-v{display:block;font-family:var(--tr-head),sans-serif;
  font-size:clamp(21px,5.6vw,28px);line-height:1.1;color:var(--tr-acc)}
.tr-board-k{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tr-mute)}

/* --- маршрут ------------------------------------------------------------ */
.tr-route{--rail-x:21px;--node-d:28px;position:relative;padding:4px 0 0}
.tr-stop{position:relative;padding:24px 0 26px calc(var(--rail-x) + 32px)}
.tr-stop::before{content:"";position:absolute;left:calc(var(--rail-x) - 4px);top:0;bottom:0;
  width:8px;background:var(--tr-seg,var(--tr-acc))}
.tr-stop:first-child::before{top:22px;border-radius:8px 8px 0 0}
.tr-stop:last-child::before{bottom:auto;height:56px;border-radius:0 0 8px 8px}
.tr-node{position:absolute;left:calc(var(--rail-x) - var(--node-d) / 2);top:24px;
  width:var(--node-d);height:var(--node-d);border-radius:50%;background:var(--tr-bg);
  border:7px solid var(--tr-seg,var(--tr-acc))}
.tr-stop--xfer .tr-node{box-shadow:0 0 0 4px var(--tr-bg),0 0 0 8px var(--tr-seg2,var(--tr-acc2))}
.tr-stop--term .tr-node{border-radius:6px}

.tr-b1{--tr-seg:var(--tr-br1)}
.tr-b2{--tr-seg:var(--tr-br2)}
.tr-b3{--tr-seg:var(--tr-br3)}
.tr-b4{--tr-seg:var(--tr-br4)}
.tr-x1{--tr-seg2:var(--tr-br1)}
.tr-x2{--tr-seg2:var(--tr-br2)}
.tr-x3{--tr-seg2:var(--tr-br3)}
.tr-x4{--tr-seg2:var(--tr-br4)}

.tr-plate{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 9px}
.tr-plate-num{font-family:var(--tr-head),sans-serif;font-size:12px;letter-spacing:.2em;
  color:var(--tr-seg,var(--tr-acc))}
.tr-plate-branch{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tr-ink);background:var(--tr-seg,var(--tr-acc));padding:4px 10px;border-radius:999px}
.tr-plate-xfer{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tr-mute);border:1px dashed var(--tr-line);padding:3px 9px;border-radius:999px}
.tr-h2{font-size:clamp(20px,5vw,31px);margin:0 0 10px}
.tr-h1{font-size:clamp(25px,6.4vw,44px);line-height:1.1;margin:0 0 14px;letter-spacing:-.01em}
.tr-dek{color:var(--tr-mute);font-size:15px;margin:0 0 16px}
.tr-lead{font-size:16.5px;margin:0 0 18px}
.tr-body p{margin:0 0 14px}
.tr-wide{max-width:820px}

/* --- кнопки, KPI -------------------------------------------------------- */
.tr-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.tr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;
  padding:0 24px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15px}
.tr-btn-solid{background:var(--tr-acc);color:var(--tr-ink);border:2px solid var(--tr-acc)}
.tr-btn-solid:hover{background:var(--tr-acc2);border-color:var(--tr-acc2)}
.tr-btn-ghost{background:transparent;color:var(--tr-acc2);border:2px solid var(--tr-acc2)}
.tr-btn-ghost:hover{background:var(--tr-acc2);color:var(--tr-ink)}
.tr-kpi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:2px;background:var(--tr-hair);border:2px solid var(--tr-hair);border-radius:14px;
  overflow:hidden}
.tr-kpi li{background:var(--tr-surf);padding:13px}
.tr-kpi-v{display:block;font-family:var(--tr-head),sans-serif;font-size:18px;line-height:1.2}
.tr-kpi-k{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tr-mute)}

/* --- билеты (депозиты welcome) ------------------------------------------ */
.tr-tickets{display:grid;gap:12px;margin:0 0 14px}
.tr-ticket{position:relative;background:var(--tr-surf);border:2px solid var(--tr-hair);
  border-radius:12px;padding:16px 16px 15px 20px;overflow:hidden}
.tr-ticket::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:var(--tr-seg,var(--tr-acc))}
.tr-ticket-n{margin:0 0 6px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tr-mute)}
.tr-ticket-v{margin:0 0 8px;font-family:var(--tr-head),sans-serif;font-size:21px;
  color:var(--tr-acc)}
.tr-ticket p{margin:0;font-size:14.5px;color:var(--tr-mute)}
.tr-terms{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--tr-hair);
  border:2px solid var(--tr-hair);border-radius:12px;overflow:hidden;margin:0 0 16px}
.tr-terms div{background:var(--tr-bg);padding:11px 13px;font-size:14px}
.tr-terms span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tr-mute);margin-bottom:3px}

/* --- шаги --------------------------------------------------------------- */
.tr-steps{display:grid;gap:14px;margin:0 0 16px}
.tr-step{display:flex;gap:14px;align-items:flex-start}
.tr-step-n{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-family:var(--tr-head),sans-serif;
  font-size:15px;border:3px solid var(--tr-seg,var(--tr-acc))}
.tr-step h3{margin:0 0 5px;font-size:17px}
.tr-step p{margin:0;font-size:14.5px;color:var(--tr-mute)}

/* --- таблицы-расписания ------------------------------------------------- */
.tr-sched{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:2px solid var(--tr-hair);border-radius:12px}
.tr-tbl{width:100%;min-width:600px;font-size:14px}
.tr-tbl th{padding:11px 12px;text-align:left;background:var(--tr-surf);
  font-family:var(--tr-head),sans-serif;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tr-mute);white-space:nowrap}
.tr-tbl td{padding:11px 12px;border-top:1px solid var(--tr-hair);vertical-align:top}
.tr-tbl tbody tr:hover td{background:var(--tr-surf)}
.tr-tbl .tr-c-key{color:var(--tr-text);white-space:nowrap}
.tr-tbl .tr-c-mute{color:var(--tr-mute)}
.tr-tbl .tr-c-acc{color:var(--tr-acc2);white-space:nowrap}
.tr-swipe{margin:8px 0 16px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tr-mute)}

/* --- плитки акций ------------------------------------------------------- */
.tr-tiles{display:grid;gap:12px;margin:0 0 16px}
.tr-tile{background:var(--tr-surf);border-radius:12px;padding:15px 16px;
  border-top:5px solid var(--tr-seg,var(--tr-acc))}
.tr-tile h3{margin:0 0 6px;font-size:16.5px}
.tr-tile p{margin:0;font-size:14.5px;color:var(--tr-mute)}

/* --- разбор: подстанции ------------------------------------------------- */
.tr-subs{display:grid;gap:20px;margin:0 0 6px}
.tr-sub{position:relative;padding-left:18px}
.tr-sub::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:50%;border:3px solid var(--tr-seg,var(--tr-acc))}
.tr-sub h3{margin:0 0 7px;font-size:17.5px}
.tr-sub p{margin:0 0 10px;font-size:15px;color:var(--tr-mute)}

/* --- отзывы ------------------------------------------------------------- */
.tr-voices{display:grid;gap:12px}
.tr-voice{background:var(--tr-surf);border-radius:12px;padding:16px;
  border-left:6px solid var(--tr-seg,var(--tr-acc))}
.tr-stars{margin:0 0 8px;color:var(--tr-acc2);letter-spacing:.22em;font-size:13px}
.tr-voice p{margin:0 0 10px;font-size:14.5px;color:var(--tr-mute)}
.tr-who{font-family:var(--tr-head),sans-serif;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tr-text)}

/* --- конечная: призыв --------------------------------------------------- */
.tr-final{background:var(--tr-surf);border-radius:16px;padding:24px 18px}
.tr-final p{color:var(--tr-mute)}

/* --- FAQ ---------------------------------------------------------------- */
.tr-faq{border-top:1px solid var(--tr-hair)}
.tr-q{border-bottom:1px solid var(--tr-hair)}
.tr-q summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:54px;padding:11px 0;cursor:pointer;list-style:none;
  font-family:var(--tr-head),sans-serif;font-size:15.5px;line-height:1.35}
.tr-q summary::-webkit-details-marker{display:none}
.tr-q summary::after{content:"";flex:0 0 auto;width:14px;height:14px;border-radius:50%;
  border:3px solid var(--tr-acc)}
.tr-q[open] summary::after{background:var(--tr-acc)}
.tr-a{padding:0 0 16px;color:var(--tr-mute);font-size:15px}

/* --- заметка редакции --------------------------------------------------- */
.tr-note{background:var(--tr-surf);border-radius:14px;padding:18px 17px}
.tr-note p{font-size:15px;color:var(--tr-mute)}
.tr-sign{margin-top:12px;font-family:var(--tr-head),sans-serif;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tr-text)}

/* --- депо (подвал) ------------------------------------------------------ */
.tr-depot{margin-top:22px;background:var(--tr-surf);border-top:6px solid var(--tr-acc);
  padding:28px 0 44px;font-size:13.5px;color:var(--tr-mute)}
.tr-depot-grid{display:grid;gap:22px}
.tr-depot h4{margin:0 0 8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tr-text)}
.tr-depot p{margin:0 0 6px}
.tr-age{display:inline-flex;align-items:center;justify-content:center;min-width:48px;
  min-height:48px;margin-bottom:10px;border-radius:50%;border:3px solid var(--tr-acc2);
  color:var(--tr-acc2);font-family:var(--tr-head),sans-serif;font-size:15px}
.tr-depot-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--tr-hair);
  font-size:12.5px}

/* --- широкие экраны ----------------------------------------------------- */
@media (min-width:700px){
  .tr-shell{padding:0 26px}
  .tr-route{--rail-x:44px;--node-d:36px}
  .tr-stop{padding-left:calc(var(--rail-x) + 52px)}
  .tr-board{grid-template-columns:repeat(5,1fr)}
  .tr-board-cell:last-child{grid-column:auto}
  .tr-kpi{grid-template-columns:repeat(4,1fr)}
  .tr-tickets{grid-template-columns:repeat(3,1fr)}
  .tr-terms{grid-template-columns:repeat(5,1fr)}
  .tr-steps{grid-template-columns:repeat(3,1fr);gap:22px}
  .tr-tiles{grid-template-columns:repeat(2,1fr)}
  .tr-voices{grid-template-columns:repeat(3,1fr)}
  .tr-depot-grid{grid-template-columns:repeat(3,1fr)}
  .tr-swipe{display:none}
  .tr-final{padding:34px 32px}
  .tr-note{padding:26px 28px}
}
@media (min-width:1040px){
  .tr-route{--rail-x:58px;--node-d:40px}
  .tr-stop{padding-left:calc(var(--rail-x) + 66px);padding-top:30px;padding-bottom:32px}
  .tr-tiles{grid-template-columns:repeat(4,1fr)}
  .tr-subs{grid-template-columns:repeat(2,1fr);gap:24px 34px}
}