/* ============================================================================
   Collapsible sidebar (desktop only, >1180px).

   Collapsed = a 76px icon rail: brand mark + one icon per section, with a light
   accent bar marking the section you're currently in. Hovering the rail (or
   tabbing into it) slides the full 270px nav back out OVER the page — the main
   content keeps its 76px offset, so nothing reflows and you can reach any item
   without un-collapsing. State lives in html[data-nav="collapsed"], set before
   paint from localStorage (see the head script in index.html).

   Mobile (<=1180px) is untouched: it has its own off-canvas drawer + bottom tab
   bar, so the toggle is hidden and none of these rules apply.
   ========================================================================== */

/* ── Topbar toggle ────────────────────────────────────────────────────────── */
/* Hidden by default; only the desktop shell has a sidebar to collapse. */
.topbar-nav-toggle{ display:none; }

@media (min-width:1181px){
  /* Matches .topbar-back / .acct-trigger (topbar.css) so the header row reads
     as one family: same 40px height, border, radius and shadow. */
  .topbar-nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; flex:0 0 auto; box-sizing:border-box;
    padding:0; margin:0;
    border:1px solid #e2e8f0; background:#fff; border-radius:12px;
    box-shadow:0 4px 12px rgba(15,23,42,.05);
    color:#5b7183; cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .topbar-nav-toggle:hover{
    background:#eff6ff; border-color:#cfe0f5; color:#075985;
    transform:none;                       /* cancel the global button:hover lift */
  }
  .topbar-nav-toggle:focus-visible{ outline:2px solid #0588b6; outline-offset:2px; }
  .topbar-nav-toggle svg{ display:block; }
  /* The panel's "open leaf" fills in once collapsed, so the icon itself shows
     which way the toggle goes. */
  html[data-nav="collapsed"] .topbar-nav-toggle .tnt-leaf{ fill:currentColor; opacity:.9; }
}

/* ── The rail ─────────────────────────────────────────────────────────────── */
@media (min-width:1181px){
  .sidebar{
    overflow-x:hidden;                    /* labels clip instead of wrapping mid-slide */
    transition:width .2s cubic-bezier(.4,0,.2,1);
  }
  .main{
    transition:margin-left .2s cubic-bezier(.4,0,.2,1),
               width .2s cubic-bezier(.4,0,.2,1);
  }

  /* Content sits against the rail and stays there — the hover-expanded nav
     floats over it rather than pushing it. */
  html[data-nav="collapsed"] .main{
    margin-left:76px;
    width:calc(100% - 76px);
  }

  /* Expanding waits ~90ms so a mouse crossing the left edge doesn't fling the
     nav open. Collapsing back is instant (delay:0 on the rail rule below). */
  html[data-nav="collapsed"] .sidebar{ transition-delay:.09s; }

  /* Rail state = collapsed AND not hovered AND not keyboard-focused. :focus-visible
     (not :focus-within) on purpose: clicking a nav link focuses it, and a plain
     :focus-within would pin the nav open until you clicked elsewhere. */
  html[data-nav="collapsed"] .sidebar:not(:hover):not(:has(:focus-visible)){
    width:76px;
    padding-left:14px; padding-right:14px;
    transition-delay:0s;
  }

  /* Nothing but the section icons survives in the rail. Fading rather than
     hard-hiding: see the transition on these same elements further down.
     a.nav-flat is EXCLUDED: it's a top-level section (Social Media) that sits
     alongside the group titles, not a child item, so it earns an icon chip in
     the rail like the groups do — see the summary.nav-group-title rule below. */
  html[data-nav="collapsed"] .sidebar:not(:hover):not(:has(:focus-visible)) .sublogo,
  html[data-nav="collapsed"] .sidebar:not(:hover):not(:has(:focus-visible)) .sidebar-legal,
  html[data-nav="collapsed"] .sidebar:not(:hover):not(:has(:focus-visible)) .nav button,
  html[data-nav="collapsed"] .sidebar:not(:hover):not(:has(:focus-visible)) .nav a:not(.nav-flat),
  html[data-nav="collapsed"] .sidebar:not(:hover):not(:has(:focus-visible)) summary.nav-subgroup-title{
    opacity:0;
    display:none !important;
  }

  /* REPARK → a single "R" mark. The label is a bare text node inside .logo, so
     font-size:0 is the only way to drop it without touching the markup. */
  html[data-nav="collapsed"] .sidebar:not(:hover):not(:has(:focus-visible)) .logo{
    font-size:0; letter-spacing:0;
    height:44px; margin-bottom:22px;
    display:flex; align-items:center; justify-content:center;
  }
  html[data-nav="collapsed"] .sidebar:not(:hover):not(:has(:focus-visible)) .logo::after{
    content:"R";
    width:42px; height:42px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    font-size:19px; font-weight:900; color:#fff;
    background:rgba(255,255,255,.13);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  }

  /* Section headers → centred icon chips (same font-size:0 reason as above).
     a.nav-flat (Social Media) rides along: it's a top-level section too, so in
     the rail it collapses to just its icon exactly like a group title. */
  html[data-nav="collapsed"] .sidebar:not(:hover):not(:has(:focus-visible)) summary.nav-group-title,
  html[data-nav="collapsed"] .sidebar:not(:hover):not(:has(:focus-visible)) a.nav-flat{
    position:relative;
    font-size:0; letter-spacing:0; gap:0;
    justify-content:center;
    padding:11px 0; margin:0 0 4px;
    background:transparent; border-radius:12px;
  }
  html[data-nav="collapsed"] .sidebar:not(:hover):not(:has(:focus-visible)) summary.nav-group-title::after{
    display:none;                         /* the ▸ caret means nothing in the rail */
  }

  /* The section holding the current page keeps its place marked. */
  html[data-nav="collapsed"] .sidebar:not(:hover):not(:has(:focus-visible)) .nav-group:has(.active) > summary.nav-group-title{
    background:rgba(255,255,255,.15);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  }
  html[data-nav="collapsed"] .sidebar:not(:hover):not(:has(:focus-visible)) .nav-group:has(.active) > summary.nav-group-title::before{
    content:"";
    position:absolute; left:-14px; top:50%; transform:translateY(-50%);
    width:3px; height:22px; border-radius:0 3px 3px 0;
    background:#7dd3fc;
  }

  /* Expanded-on-hover: lift it off the page it's covering. */
  html[data-nav="collapsed"] .sidebar:hover,
  html[data-nav="collapsed"] .sidebar:has(:focus-visible){
    box-shadow:18px 0 50px rgba(2,8,23,.32);
    transition:width .2s cubic-bezier(.4,0,.2,1) .09s, box-shadow .2s ease;
  }

  /* Labels fade instead of popping. transition-behavior:allow-discrete keeps the
     element painted while opacity animates and applies display:none only once
     it's finished, so collapsing reads as ONE motion rather than "everything
     vanishes, then the panel slides". Re-expanding runs it in reverse.
     The background/color/transform entries are the pre-existing hover
     transitions (style.css sets `transition:.2s` = all) — respelled here because
     naming display explicitly means the shorthand replaces that `all`.
     Browsers without allow-discrete just keep the old instant swap. */
  .sidebar .sublogo,
  .sidebar .sidebar-legal,
  .sidebar summary.nav-subgroup-title,
  .sidebar .nav button,
  .sidebar .nav a{
    transition:opacity .15s ease,
               background .2s ease, color .2s ease, transform .2s ease,
               display .15s allow-discrete;
  }
}

/* ── Section dropdowns: animate open/close ────────────────────────────────── */
/* Applies at every width — the drawer's sections should glide too, not just the
   desktop sidebar's.

   <details> normally snaps open because its content has no height to animate
   between. ::details-content gives us that box, and interpolate-size unlocks
   0 -> auto so it can actually be transitioned. content-visibility has to ride
   along with allow-discrete, otherwise the content stays hidden for the whole
   close animation and you'd see it disappear instantly again.

   No wrapper element and no JS, which matters here: several modules inject nav
   items by appending straight onto .nav-group, and anything requiring a wrapper
   would leave those items outside it. Unsupported browsers snap open as before. */
.sidebar .nav{ interpolate-size:allow-keywords; }

.sidebar .nav details.nav-group::details-content,
.sidebar .nav details.nav-subgroup::details-content{
  block-size:0;
  overflow:hidden;
  transition:block-size .26s cubic-bezier(.4,0,.2,1),
             content-visibility .26s allow-discrete;
}
.sidebar .nav details.nav-group[open]::details-content,
.sidebar .nav details.nav-subgroup[open]::details-content{
  block-size:auto;
}

/* ── Dashboard: keep its logo clear of the topbar's left cluster ──────────── */
/* dashboard.css pulls .repark-brand up by -40px to tuck the logo into the topbar
   row. That only worked while the row's left slot was empty — the collapse
   toggle now lives there, and the logo landed on top of it (the Back chip had
   the same latent collision whenever history existed). Dropping the pull costs
   40px of height and puts the logo back on its own line, below the toggle. */
@media (min-width:1181px){
  #dashboard .repark-brand{ margin-top:0; }
}

/* ── Dark mode — topbar only; the desktop sidebar is navy in both themes ───── */
@media (min-width:1181px){
  html[data-theme="dark"] .topbar-nav-toggle{
    background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12);
    color:#8aa0c0; box-shadow:none;
  }
  html[data-theme="dark"] .topbar-nav-toggle:hover{
    background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#7dd3fc;
  }
}

@media (prefers-reduced-motion:reduce){
  .sidebar, .main,
  .sidebar .sublogo, .sidebar .sidebar-legal, .sidebar summary.nav-subgroup-title,
  .sidebar .nav button, .sidebar .nav a,
  .sidebar .nav details.nav-group::details-content,
  .sidebar .nav details.nav-subgroup::details-content{
    transition:none !important;
  }
  html[data-nav="collapsed"] .sidebar{ transition-delay:0s; }
}