/* =====================================================================
   BrightValley Link — layout.css
   Transit control-bar nav, route-explorer panel, search overlay,
   mobile panel, network footer, containers, section system.
   ===================================================================== */

/* ---------- containers ---------- */
.wrap { width: min(100% - 2*var(--gutter), var(--maxw)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2*var(--gutter), var(--wide)); margin-inline: auto; }
.wrap--read { width: min(100% - 2*var(--gutter), 760px); margin-inline: auto; }

/* ---------- section system (transit "segments") ---------- */
.seg { padding-block: clamp(60px, 8vw, 132px); }
.seg--sm { padding-block: clamp(42px, 5vw, 80px); }
.seg-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; margin-bottom: clamp(1.8rem,4vw,3rem); }
.seg-head__main { max-width: 62ch; }
.seg-tick { display:flex; align-items:center; gap:.7rem; font-family: var(--ff-display); font-weight:700; font-size:.8rem; letter-spacing:.06em; color: var(--muted); }
.seg-tick .pip { width:11px; height:11px; border-radius:50%; background: var(--red); box-shadow: 0 0 0 4px rgba(255,59,48,.16); }
.surface-paper { background: var(--paper); }
.surface-white { background: var(--white); }
.surface-concrete { background: var(--concrete); }
.surface-asphalt { background: var(--g-night); }
.surface-steel { background: linear-gradient(160deg, #25303d, #16181d); }
.relative { position:relative; } .overflow-hidden { overflow:hidden; }

/* =====================================================================
   CONTROL BAR (transit-line navigation)
   ===================================================================== */
.railbar { position: sticky; top:0; z-index:140; background: rgba(243,245,248,.86); backdrop-filter: saturate(160%) blur(14px); border-bottom:1px solid var(--line); transition: background var(--t), border-color var(--t); }
.railbar.is-dark { background: rgba(22,24,29,.9); border-color: rgba(255,255,255,.1); }
.railbar.is-dark .rb__brand, .railbar.is-dark .rb__nav a, .railbar.is-dark .rb__nav button { color: var(--paper); }
.railbar.is-dark .rb-ic { background: rgba(255,255,255,.1); color: var(--paper); }
.rb { display:flex; align-items:center; gap:1.2rem; height: clamp(60px,7vw,74px); }
.rb__brand { display:inline-flex; align-items:center; gap:.6em; font-family: var(--ff-display); font-weight:700; font-size:1.18rem; letter-spacing:-.02em; color: var(--ink); }
.rb__brand .mk { width:34px; height:34px; flex:none; }
.rb__brand b { color: var(--red); }
/* the "line": nav items sit on a horizontal rule like stations */
.rb__nav { display:flex; align-items:center; gap: clamp(.4rem,1.4vw,1.5rem); margin-left:auto; position:relative; }
.rb__nav::before { content:""; position:absolute; left:0; right:0; top:50%; height:2px; background: var(--line); z-index:-1; }
.rb__nav a, .rb__nav button { position:relative; font-family: var(--ff-display); font-weight:600; font-size:.86rem; color: var(--ink); padding:.45em .2em; display:inline-flex; align-items:center; gap:.4em; }
.rb__nav a::after { content:""; position:absolute; left:50%; bottom:-2px; width:0; height:0; border-radius:50%; background: var(--red); transition: width var(--t-fast), height var(--t-fast), left var(--t-fast); }
.rb__nav a:hover::after, .rb__nav a[aria-current="page"]::after { width:8px; height:8px; left:calc(50% - 4px); }
.rb__nav .dot { width:8px; height:8px; border-radius:50%; background: var(--steel); }
.rb__exp .chev { width:13px; transition: transform var(--t-fast); }
.railbar.explorer-open .rb__exp .chev { transform: rotate(180deg); }
.rb__tools { display:flex; align-items:center; gap:.4rem; }
.rb-ic { width:42px; height:42px; border-radius: var(--r-pill); display:grid; place-items:center; background: var(--white); border:1px solid var(--line); color: var(--ink); transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.rb-ic:hover { background: var(--red); color:#fff; border-color: var(--red); transform: translateY(-1px); }
.rb-ic svg { width:19px; }
.rb-burger { display:none; }
@media (max-width:1080px){ .rb__nav { display:none; } .rb-burger { display:grid; } }

/* ---------- route explorer dropdown (network diagram) ---------- */
.explorer { position:absolute; left:0; right:0; top:100%; background: var(--white); border-bottom:1px solid var(--line); box-shadow: var(--sh-2); opacity:0; visibility:hidden; transform: translateY(-10px); transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast); z-index:139; }
.railbar.explorer-open .explorer { opacity:1; visibility:visible; transform:none; }
.explorer__grid { display:grid; grid-template-columns: repeat(3,1fr) 1.2fr; gap: clamp(20px,3vw,44px); padding-block: clamp(24px,3vw,40px); }
.exline h5 { display:flex; align-items:center; gap:.5em; font-family: var(--ff-display); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); margin-bottom:1rem; }
.exline h5 .ln { width:22px; height:3px; border-radius:2px; }
.exline.red h5 .ln { background: var(--red); } .exline.yellow h5 .ln { background: var(--yellow); } .exline.steel h5 .ln { background: var(--steel); }
.exline a { display:flex; align-items:center; gap:.7em; padding:.5rem 0; font-family: var(--ff-display); font-weight:600; color: var(--ink); transition: color var(--t-fast), padding-left var(--t-fast); }
.exline a::before { content:""; width:9px; height:9px; border-radius:50%; border:2px solid currentColor; flex:none; }
.exline.red a:hover { color: var(--red); padding-left:6px; } .exline.yellow a:hover { color: var(--yellow-deep); padding-left:6px; } .exline.steel a:hover { color: var(--steel-deep); padding-left:6px; }
.exfeature { background: var(--g-night); color: var(--paper); border-radius: var(--r-md); padding:22px; display:flex; flex-direction:column; justify-content:space-between; }
.exfeature h4 { color:#fff; } .exfeature p { color: rgba(243,245,248,.74); font-size:.88rem; }
@media (max-width:920px){ .explorer__grid { grid-template-columns:1fr 1fr; } .exfeature { grid-column:1 / -1; } }

/* ---------- mobile panel ---------- */
.mpanel { position:fixed; inset:0; z-index:200; visibility:hidden; }
.mpanel__scrim { position:absolute; inset:0; background: rgba(22,24,29,.55); opacity:0; transition: opacity var(--t); }
.mpanel__sheet { position:absolute; top:0; bottom:0; left:0; width:min(90vw,400px); background: var(--g-night); color: var(--paper); padding:24px; overflow-y:auto; transform: translateX(-101%); transition: transform var(--t); }
.mpanel.is-open { visibility:visible; }
.mpanel.is-open .mpanel__scrim { opacity:1; }
.mpanel.is-open .mpanel__sheet { transform:none; }
.mpanel__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.mpanel__top .rb__brand { color:#fff; }
.mpanel nav a { display:flex; align-items:center; gap:.8rem; font-family: var(--ff-display); font-weight:600; font-size:1.2rem; color:#fff; padding:.7rem 0; border-bottom:1px solid var(--line-dim); }
.mpanel nav a .num { font-size:.72rem; color: var(--steel); width:2ch; }
.mpanel__foot { margin-top:1.2rem; }

/* ---------- search overlay ---------- */
.seek { position:fixed; inset:0; z-index:210; display:flex; justify-content:center; align-items:flex-start; padding-top:12vh; visibility:hidden; }
.seek__scrim { position:absolute; inset:0; background: rgba(22,24,29,.66); backdrop-filter: blur(5px); opacity:0; transition: opacity var(--t); }
.seek__box { position:relative; width:min(92vw,680px); background: var(--white); border-radius: var(--r-md); padding:26px; box-shadow: var(--sh-2); transform: translateY(-16px); opacity:0; transition: transform var(--t), opacity var(--t); }
.seek.is-open { visibility:visible; }
.seek.is-open .seek__scrim { opacity:1; }
.seek.is-open .seek__box { transform:none; opacity:1; }
.seek__field { display:flex; align-items:center; gap:.8rem; border-bottom:3px solid var(--steel); padding-bottom:.7rem; }
.seek__field svg { width:24px; color: var(--steel-deep); flex:none; }
.seek__field input { flex:1; border:none; background:none; font-family: var(--ff-display); font-weight:600; font-size:1.4rem; color: var(--ink); }
.seek__field input:focus { outline:none; box-shadow:none; }
.seek__hint { font-size:.8rem; color: var(--muted); margin-top:.8rem; }
.seek__sugg { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.seek__sugg button { font-family: var(--ff-display); font-weight:600; font-size:.8rem; padding:.4em .9em; border:1px solid var(--line); border-radius: var(--r-pill); color: var(--ink); }
.seek__sugg button:hover { background: var(--steel); color:#fff; border-color: var(--steel); }
.seek__results { margin-top:1.2rem; display:grid; gap:.2rem; max-height:46vh; overflow:auto; }
.seek__results a { display:flex; justify-content:space-between; align-items:center; padding:.7rem .8rem; border-radius: var(--r-sm); transition: background var(--t-fast); }
.seek__results a:hover, .seek__results a.is-active { background: var(--paper); }
.seek__results .tag { color: var(--steel-deep); font-family: var(--ff-display); font-weight:600; font-size:.78rem; }

/* =====================================================================
   NETWORK FOOTER (legend style — distinct from header)
   ===================================================================== */
.netfoot { background: var(--g-night); color: rgba(243,245,248,.74); position:relative; overflow:hidden; }
.netfoot__rule { height:4px; background: var(--g-motion); }
.netfoot__in { padding-block: clamp(56px,7vw,96px) 0; }
.netfoot__head { display:grid; grid-template-columns: 1.3fr 1fr; gap:2.4rem; align-items:end; padding-bottom:2.6rem; border-bottom:1px solid var(--line-dim); }
.netfoot h2 { color:#fff; max-width:18ch; }
.netfoot__news label { font-family: var(--ff-display); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.74rem; color: var(--steel); }
.netfoot__news .row { display:flex; gap:.6rem; margin-top:.8rem; }
.netfoot__news input { flex:1; padding:.95em 1.2em; border-radius: var(--r-pill); border:1px solid var(--line-dim); background: rgba(255,255,255,.07); color:#fff; }
.netfoot__news input::placeholder { color: rgba(255,255,255,.5); }
.netfoot__legend { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2rem; padding-block:2.8rem; }
.netfoot__brandcol .rb__brand { color:#fff; } .netfoot__brandcol .rb__brand b { color: var(--yellow); }
.netfoot__brandcol p { color: rgba(243,245,248,.6); max-width:32ch; margin-top:1rem; }
.netfoot__col h4 { display:flex; align-items:center; gap:.5em; color:#fff; font-family: var(--ff-display); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; }
.netfoot__col h4 .ln { width:18px; height:3px; border-radius:2px; }
.netfoot__col a { display:flex; align-items:center; gap:.6em; padding:.32rem 0; color: rgba(243,245,248,.7); font-size:.93rem; transition: color var(--t-fast), padding-left var(--t-fast); }
.netfoot__col a::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; opacity:.5; }
.netfoot__col a:hover { color:#fff; padding-left:4px; }
.netfoot__social { display:flex; gap:.55rem; margin-top:1.2rem; }
.netfoot__social a { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,.08); transition: background var(--t-fast); }
.netfoot__social a:hover { background: var(--red); }
.netfoot__social svg { width:18px; }
.netfoot__disc { font-size:.82rem; color: rgba(243,245,248,.42); max-width:80ch; padding:1.4rem 0 2rem; }
.netfoot__base { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding-block:24px; border-top:1px solid var(--line-dim); font-size:.84rem; color: rgba(243,245,248,.5); }
.netfoot__base nav { display:flex; gap:1.2rem; flex-wrap:wrap; }
@media (max-width:900px){ .netfoot__head { grid-template-columns:1fr; } .netfoot__legend { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .netfoot__legend { grid-template-columns:1fr; } }

/* ---------- back to top ---------- */
.totop { position:fixed; right:20px; bottom:20px; z-index:120; width:52px; height:52px; border-radius:50%; background: var(--g-motion); color:#fff; display:grid; place-items:center; box-shadow: var(--sh-red); opacity:0; transform: translateY(14px); pointer-events:none; transition: opacity var(--t), transform var(--t); }
.totop.show { opacity:1; transform:none; pointer-events:auto; }
.totop svg { width:22px; }

/* ---------- page header band ---------- */
.pagehead { position:relative; overflow:hidden; padding-block: clamp(56px,8vw,110px); }
.pagehead--dark { color: var(--paper); }
.pagehead__bg { position:absolute; inset:0; z-index:-2; }
.pagehead__bg img, .pagehead__bg svg { width:100%; height:100%; object-fit:cover; }
.pagehead--dark::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(115deg, rgba(22,24,29,.86), rgba(47,111,181,.42)); }
.pagehead--dark h1 { color:#fff; }
.trail { display:flex; gap:.5rem; align-items:center; font-family: var(--ff-display); font-weight:600; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); margin-bottom:1.3rem; flex-wrap:wrap; }
.pagehead--dark .trail { color: rgba(243,245,248,.72); }
.trail a:hover { color: var(--red); }
.pagehead--dark .trail a:hover { color: var(--yellow); }
.trail svg { width:.7em; opacity:.6; }