/* Hover rail (desktop): sidebar collapses to a 60px icon strip, expands over the page on hover/keyboard focus, like Chrome's vertical tabs. Loaded last; beats app.css/look.css by specificity. */
@media (min-width: 600px) {
  :root:not(#x) .app { display: grid; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none; padding-inline-start: 60px; }
  :root:not(#x) .app .side {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; inset-inline-end: auto; width: 60px; height: 100vh; max-height: none; z-index: 60;
    display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
    transition: width .16s ease, box-shadow .16s ease; background: var(--hl-surface, var(--surface)); border: 0; border-inline-end: 1px solid var(--line);
  }
  :root:not(#x) .app .side:hover, :root:not(#x) .app .side:focus-within { width: 240px; box-shadow: 0 0 28px rgba(0,0,0,.35); }
  :root:not(#x) .app .side .cmdslot, :root:not(#x) .app .side .host { display: none; }
  :root:not(#x) .app .side .brand { display: flex; justify-content: flex-start; padding: 2px 14px; height: auto; background: transparent; border: 0; }
  :root:not(#x) .app .side .brand-name { display: inline; white-space: nowrap; opacity: 0; transition: opacity .12s; }
  :root:not(#x) .app .side:hover .brand-name, :root:not(#x) .app .side:focus-within .brand-name { opacity: 1; }
  :root:not(#x) .app .side .nav { display: flex; flex-direction: column; flex: 0 0 auto; gap: 2px; padding: 0 8px; background: transparent; }
  :root:not(#x) .app .side .nav a {
    display: flex !important; flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; min-height: 40px; padding: 8px 12px;
    white-space: nowrap; text-align: start; overflow: hidden;
  }
  :root:not(#x) .app .side .nav a svg { flex: 0 0 22px; width: 22px; height: 22px; }
  :root:not(#x) .app .side .nav a span { opacity: 0; transition: opacity .12s; }
  :root:not(#x) .app .side:hover .nav a span, :root:not(#x) .app .side:focus-within .nav a span { opacity: 1; }
  :root:not(#x) .app .side .nav a.on::before { inset-inline-start: -8px; left: auto; top: 8px; bottom: 8px; height: auto; margin: 0; }
  :root:not(#x) .app .side .nav-badge { position: absolute; top: 2px; inset-inline-end: 2px; margin: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; transition: inset-inline-end .12s; }
  :root:not(#x) .app .side:hover .nav-badge, :root:not(#x) .app .side:focus-within .nav-badge { top: 50%; margin-top: -9px; inset-inline-end: 12px; min-width: 20px; height: 18px; font-size: 11px; line-height: 18px; }
  :root:not(#x) .app .side .nav-more { display: none !important; }
  :root:not(#x) .app .side .side-foot { align-items: flex-start; padding: 0 14px; }
}
/* settings + language + theme icons: stacked while collapsed, in one row when expanded */
@media (min-width: 600px) {
  :root:not(#x) .app .side .side-actions { display: contents !important; }
  :root:not(#x) .app .side .side-actions :is(#pw-open, #logout, #chcol-open) { display: none !important; }
  :root:not(#x) .app .side .side-foot { gap: 8px; flex-direction: column !important; align-items: flex-start; }
  :root:not(#x) .app .side:hover .side-foot, :root:not(#x) .app .side:focus-within .side-foot { flex-direction: row !important; align-items: center; }
  :root:not(#x) .app .side .side-foot .set-btn { order: 1; }
  :root:not(#x) .app .side .side-foot #lang { order: 2; }
  :root:not(#x) .app .side .side-foot #theme { order: 3; }
}