/* ==========================================================================
   Desktop (1100px and wider): a one-row header, and a side rail on the pages under Tools and My Matric Map.
   The header's second row (Tools: Degrees, Abroad, More tools; My Matric Map: My Map, More) gives way: the Tools tab opens the
   Tools page, and the rail (built by setSideRail in js/app.js) switches between tools, or between My Map's steps, while the page
   scrolls. My Map's steps line stays pinned under the header. Phones and tablets keep the sub-menus.
   ========================================================================== */
.side-rail{display:none} /* phones and tablets: the header's sub-menus instead */
@media (min-width:1100px){
  :root{--head-h:61px;--rail-w:216px}
  .app .site-header #sub-nav,.app .site-header #sub-nav-plan,.app .site-header .header-steps{display:none}

  /* The rail and the page side by side, centred together */
  body.has-rail .app-shell{display:grid;grid-template-columns:var(--rail-w) minmax(0,1180px);justify-content:center;align-items:start;column-gap:18px;padding:0 16px}
  body.has-rail main#view{width:auto;max-width:none;min-width:0;margin-left:0;margin-right:0}
  body.has-rail .side-rail:not([hidden]){display:grid}
  .side-rail{position:sticky;top:calc(var(--head-h) + 18px);gap:14px;max-height:calc(100vh - var(--head-h) - 36px);margin-top:18px;padding:14px 10px 16px;overflow-y:auto;scrollbar-width:thin;border-radius:20px;background:var(--paper);box-shadow:0 24px 60px rgba(0,0,0,.25)}
  .side-rail[data-kind="tools"] .rail-plan,.side-rail[data-kind="plan"] .rail-tools{display:none}
  /* The phone menu's look (css/header.css .nd-*): a section title with its icon, then bold group headings with a count, all open */
  .rail-tools,.rail-plan{display:grid;gap:2px}
  .rail-title{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 4px;padding:0 2px 8px 4px;border-bottom:1px solid var(--line)}
  .rail-h{display:flex;align-items:center;gap:9px;margin:0;padding:0 4px;color:var(--brand);font:800 .98rem/1.2 var(--font)}
  .rail-h .nd-ico{flex:none;width:28px;height:28px}
  .rail-plan>.rail-h{margin:0 0 4px;padding:0 4px 8px;border-bottom:1px solid var(--line)}
  .rail-group{display:grid;gap:1px;padding:4px 0 6px}
  .rail-group+.rail-group{border-top:1px dashed var(--line)}
  .rail-gh{display:flex;align-items:center;gap:8px;min-height:34px;margin:0;padding:0 6px 0 10px;color:var(--ink);font:700 .87rem/1.2 var(--font);white-space:nowrap}
  .rail-gh small{margin-left:auto;min-width:22px;padding:1px 7px;border-radius:999px;background:var(--tint);color:var(--ink-3);font-size:.72rem;font-weight:800;text-align:center}
  .side-rail .rail-group a{margin-left:10px;border-left:2px solid var(--line);border-radius:0 10px 10px 0}
  .side-rail .rail-group a[aria-current="page"],.side-rail .rail-group a.on{border-left-color:var(--brand)}
  .side-rail a{display:flex;align-items:center;gap:9px;min-height:34px;padding:6px 10px;border-radius:10px;color:var(--ink-2);font:600 .88rem/1.25 var(--font);text-decoration:none}
  .side-rail a:hover{background:var(--tint);color:var(--ink)}
  .side-rail a:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
  .side-rail a.on,.side-rail a[aria-current="page"]{background:var(--brand);color:#fff}
  .side-rail a.rail-all{flex:none;min-height:30px;padding:3px 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--brand);font-size:.78rem;font-weight:700}
  .side-rail a.rail-all[aria-current="page"]{border-color:var(--brand)}

  /* My Map: the steps line stays pinned under the header while the step scrolls, and the map sits under it */
  #view .stepper.route:not(.stepper-mini){position:sticky;top:var(--head-h);z-index:6;margin:-28px -20px 18px;padding:14px 28px 10px;border:0;border-bottom:1px solid var(--line);border-radius:24px 24px 0 0;background:var(--paper)}

  /* Sticky bars on the tools sit under the one-row header */
  .uni-find-bar,.b-count{top:var(--head-h)}
  .plan-side{top:calc(var(--head-h) + var(--steps-h,86px) + 14px)}
}
/* Narrower desktops: a narrower rail */
@media (min-width:1100px) and (max-width:1279px){
  :root{--rail-w:188px}
  body.has-rail .app-shell{column-gap:12px;padding:0 12px}
  .side-rail a{font-size:.84rem}
  .rail-gh{white-space:normal;font-size:.84rem}
}
/* Short windows: a tighter rail, so every tool fits without scrolling it */
@media (min-width:1100px) and (max-height:800px){
  .side-rail{gap:10px;padding:10px 8px 12px}
  .rail-group{padding:2px 0 4px}
  .rail-gh{min-height:28px}
  .side-rail a{min-height:29px;padding:4px 10px}
}
@media print{.side-rail{display:none!important}}