/* ==========================================================================
   sidebar-v2.css  -  glass sidebar rail / panel / mobile drawer (PLAN-sidebar.md)
   Ported from sidebar-preview.html. Do not redesign; change tokens only.

   SCOPING
   - Every class starts with "hs-". Nothing here targets bare elements.
   - Colours come from the site-wide home theme (--hv-* on <body data-home-theme>),
     defined in home-v2.css. Missing theme = Gold. Only the radii are local.
   - Ids kept from the old sidebar (plan rule 5): #hfeSidebar, #hfeSidebarBackdrop, #hfeSidebarToggleMobile.
   - The open state uses its own body class, body.hs-body-open. The old body.hfe-sidebar-open rule in
     site.css pins the whole page (position: fixed), which would break the floating desktop panel,
     so the new code never sets that class.

   STATES
   - Desktop (>= 901px): rail (78px, always visible) / panel (.hs-open, 296px, floats over the page).
   - Mobile (<= 900px): slide-in drawer, open while body.hs-body-open.

   Z-INDEX: nav/footer 40, mobile menu button 44, backdrop 45, rail/drawer 50, tooltip 80.
   ========================================================================== */

/* ---- 1. TOKENS ----------------------------------------------------------- */
.hs {
  --hs-ink: var(--hv-ink, #efe3d0);
  --hs-mut: var(--hv-mut, #a39a8a);
  --hs-acc: var(--hv-acc, #d9b98a);
  --hs-line: var(--hv-line, rgba(217,185,138,.32));
  --hs-card: var(--hv-card, rgba(217,185,138,.06));
  --hs-bg: var(--hv-bg, #0c0b0a);
  --hs-bg2: var(--hv-bg2, #14110e);
  --hs-r: 22px;          /* panel / rail corner radius (preview value, not in --hv-*) */
  --hs-ri: 12px;         /* item corner radius */
  --hs-round: 50%;       /* round buttons and avatar */
  --hs-pill: 30px;       /* filter input */
  --hs-body: var(--hv-body, 'DM Sans', system-ui, sans-serif);
  --hs-disp: var(--hv-disp, 'Anton', 'Impact', sans-serif);
}
body[data-home-theme="glitch"] .hs {
  --hs-r: 0px; --hs-ri: 0px; --hs-round: 0px; --hs-pill: 0px;
}

/* ---- 2. SHELL ------------------------------------------------------------ */
.hs {
  position: fixed; left: 14px; top: calc(14px + env(safe-area-inset-top, 0px)); bottom: 14px;
  width: 78px; z-index: 50;
  display: flex; flex-direction: column;
  box-sizing: border-box;
  border: 1px solid var(--hs-line); border-radius: var(--hs-r);
  color: var(--hs-ink); font: 400 14px/1.5 var(--hs-body);
  /* Fallback first: solid dark panel for browsers without backdrop-filter. */
  background: var(--hs-bg2);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  transition: width .25s ease, transform .25s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hs {
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)), rgba(14,12,10,.62);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  }
}
.hs *, .hs *::before, .hs *::after { box-sizing: border-box; }
.hs.hs-open { width: 296px; }
.hs i.bi { font-size: 20px; line-height: 1; width: 20px; height: 20px; flex: none; display: inline-block; text-align: center; }
/* :where() keeps this at zero specificity, so .hs-lk / .hs-gt / .hs-nm can set their own colour and font. */
:where(.hs) a, :where(.hs) button { font: inherit; color: inherit; }
.hs a:focus-visible, .hs button:focus-visible, .hs input:focus-visible { outline: 2px solid var(--hs-acc); outline-offset: 2px; }

/* ---- 3. HEADER (logo chip, name, bell, collapse arrow) ------------------- */
.hs-hd { display: flex; align-items: center; gap: 10px; padding: 16px 14px 12px; border-bottom: 1px solid var(--hs-line); min-height: 70px; }
.hs-chip { width: 46px; height: 50px; background: none; display: grid; place-content: center; flex: none; text-decoration: none; }
.hs-chip img { height: 46px; width: auto; object-fit: contain; display: block; }
.hs-nm { font: 400 20px var(--hs-disp); letter-spacing: .04em; flex: 1; white-space: nowrap; color: var(--hs-ink); text-decoration: none; }
.hs-ib { width: 36px; height: 36px; border-radius: var(--hs-round); border: 1px solid var(--hs-line); background: transparent; cursor: pointer; display: grid; place-content: center; position: relative; flex: none; padding: 0; transition: .2s; }
.hs-ib:hover { border-color: var(--hs-acc); color: var(--hs-acc); }
.hs-bdg { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--hs-acc); color: var(--hs-bg); font: 700 10px/17px var(--hs-body); text-align: center; }
#hsCollapse i { transition: transform .25s; }
.hs.hs-open #hsCollapse i { transform: rotate(180deg); }
/* Slot for the existing _NotificationBell partial (wired in Step 5). */
.hs-bell { position: relative; flex: none; }

/* ---- 4. PROFILE BLOCK ---------------------------------------------------- */
.hs-me { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--hs-line); color: inherit; text-decoration: none; border-radius: 0; transition: background .2s; }
.hs-me:hover { background: var(--hs-card); }
.hs-me.hs-on { background: var(--hs-card); box-shadow: inset 3px 0 0 var(--hs-acc); }
.hs-av { width: 42px; height: 42px; border-radius: var(--hs-round); background: var(--hs-card); border: 1px solid var(--hs-acc); display: grid; place-content: center; font: 400 18px var(--hs-disp); color: var(--hs-acc); flex: none; overflow: hidden; }
img.hs-av { object-fit: cover; display: block; }
.hs-tx { min-width: 0; }
.hs-tx b { display: block; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-tx small { color: var(--hs-mut); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 5. FILTER BOX (panel only; markup arrives in Step 4) ---------------- */
.hs-find { display: block; margin: 12px 14px 0; position: relative; }
.hs-find input { width: 100%; background: var(--hs-card); border: 1px solid var(--hs-line); border-radius: var(--hs-pill); padding: 8px 14px; font-size: 13px; color: var(--hs-ink); }
.hs-find input::placeholder { color: var(--hs-mut); }

/* ---- 6. MENU (groups and items) ------------------------------------------ */
.hs-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 12px; scrollbar-width: thin; scrollbar-color: var(--hs-line) transparent; }
.hs-gt { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: 0; padding: 12px 8px 6px; color: var(--hs-mut); font: 700 11px var(--hs-body); letter-spacing: .16em; text-transform: uppercase; text-align: left; }
button.hs-gt { cursor: pointer; }
.hs-gt i.bi { width: 14px; height: 14px; font-size: 14px; transition: transform .2s; }
.hs-g.hs-shut .hs-gt i.bi { transform: rotate(-90deg); }
.hs-g.hs-shut .hs-gl { display: none; }
.hs-lk { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; margin: 2px 0; border-radius: var(--hs-ri); color: var(--hs-mut); text-decoration: none; white-space: nowrap; border: 0; background: none; cursor: pointer; text-align: left; transition: background .2s, color .2s; }
.hs-lk:hover { background: var(--hs-card); color: var(--hs-ink); }
.hs-lk.hs-on, .hs-lk[aria-current="page"] { background: var(--hs-acc); color: var(--hs-bg); font-weight: 700; }

/* ---- 7. FOOTER (Logout) -------------------------------------------------- */
.hs-ft { padding: 12px; border-top: 1px solid var(--hs-line); }
.hs-ft form { margin: 0; }
.hs-ft .hs-lk:hover { background: rgba(255,90,90,.12); color: #ff8a80; }

/* ---- 8. TOOLTIP (rail only; positioned by sidebar-v2.js) ----------------- */
.hs-tip { position: fixed; z-index: 80; pointer-events: none; background: #111; color: #eee; border: 1px solid var(--hv-line, rgba(217,185,138,.32)); border-radius: 8px; padding: 5px 10px; font: 400 12px/1.5 var(--hv-body, 'DM Sans', system-ui, sans-serif); opacity: 0; transition: opacity .15s; white-space: nowrap; }
body[data-home-theme="glitch"] .hs-tip { border-radius: 0; }
.hs-tip.hs-show { opacity: 1; }

/* ---- 8b. NOTIFICATION BELL (the existing _NotificationBell partial, restyled; dropdown placement: Step 5) */
.hs .hs-bell .hfe-nav-bell { position: relative; display: grid; place-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--hs-line); border-radius: var(--hs-round); background: transparent; color: var(--hs-ink) !important; font-size: 18px; line-height: 1; transition: .2s; }
.hs .hs-bell .hfe-nav-bell:hover, .hs .hs-bell .hfe-nav-bell[aria-expanded="true"] { border-color: var(--hs-acc); color: var(--hs-acc) !important; background: transparent; }
.hs .hs-bell .hfe-nav-bell-badge { top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--hs-acc); color: var(--hs-bg); font: 700 10px/17px var(--hs-body); }
.hs .hs-bell .hfe-nav-dropdown-menu { background: var(--hs-bg2); border-color: var(--hs-line); border-radius: min(var(--hs-r), 14px); }
.hs .hs-bell .hfe-nav-dropdown-item { color: var(--hs-mut); }
.hs .hs-bell .hfe-notif-viewall { text-align: center; }
.hs .hs-bell .hfe-nav-dropdown-item:hover, .hs .hs-bell .hfe-nav-dropdown-item:focus { background: var(--hs-card); color: var(--hs-acc); }
.hs .hs-bell .hfe-notif-item-message { color: var(--hs-ink); }
.hs .hs-bell .hfe-notif-markall-btn { color: var(--hs-acc); }
.hs .hs-bell .hfe-notif-dropdown-header { color: var(--hs-ink); border-color: var(--hs-line); }

/* ---- 9. BACKDROP + MOBILE MENU BUTTON ------------------------------------ */
.hs-bd { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 45; }
body.hs-body-open .hs-bd { opacity: 1; pointer-events: auto; }
.hs-fab { display: none; position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; z-index: 44; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--hv-line, rgba(217,185,138,.32)); background: rgba(14,12,10,.7); color: var(--hv-ink, #efe3d0); cursor: pointer; place-content: center; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hs-fab { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
body[data-home-theme="glitch"] .hs-fab { border-radius: 0; }
.hs-fab:focus-visible { outline: 2px solid var(--hv-acc, #d9b98a); outline-offset: 2px; }
.hs-fab i.bi { font-size: 22px; line-height: 1; }

/* ---- 10. DESKTOP RAIL (collapsed). Text stays for screen readers. -------- */
@media (min-width: 901px) {
  .hs:not(.hs-open) .hs-txt,
  .hs:not(.hs-open) .hs-me .hs-tx {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .hs:not(.hs-open) .hs-find,
  .hs:not(.hs-open) .hs-gt i.bi { display: none; }
  .hs:not(.hs-open) .hs-hd { flex-direction: column; padding: 14px 0 10px; gap: 10px; }
  .hs:not(.hs-open) .hs-me { justify-content: center; padding: 12px 0; }
  /* group title becomes a thin divider line */
  .hs:not(.hs-open) .hs-gt { height: 1px; padding: 0; margin: 10px 12px; background: var(--hs-line); font-size: 0; width: calc(100% - 24px); display: block; overflow: hidden; pointer-events: none; }
  .hs:not(.hs-open) .hs-g.hs-shut .hs-gl { display: block; }   /* collapsed groups still show their icons in the rail */
  .hs:not(.hs-open) .hs-lk { justify-content: center; padding: 11px 0; }
  body.hs-body-open .hs-bd { background: rgba(0,0,0,.45); }
}

/* ---- 11. MOBILE DRAWER (<= 900px) ---------------------------------------- */
@media (max-width: 900px) {
  .hs { width: 296px; max-width: 84vw; transform: translateX(-120%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  body.hs-body-open .hs { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  .hs-fab { display: grid; }
  #hsCollapse { display: none; }
  /* The page behind the drawer must not scroll. Same technique as the old drawer (overflow alone does
     not stop iOS rubber-banding): pin the body; sidebar-v2.js sets/restores the top offset. */
  body.hs-body-open { overflow: hidden; position: fixed; inset: 0; width: 100%; }
}

/* ---- 12. REDUCED MOTION -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hs, .hs *, .hs *::before, .hs *::after, .hs-bd, .hs-fab, .hs-tip { transition: none !important; animation: none !important; }
}

/* ---- 13. INTERIM (Step 2 -> Step 3) -------------------------------------
   The rail replaces the Editorial pages' corner logo chip for signed-in desktop users
   (the rail's own logo chip goes home). Step 3 owns the rest of the layout integration. */
@media (min-width: 901px) {
  body.hfe-authed .hv-chrome-chip { display: none; }
}

/* ---- 14. LAYOUT INTEGRATION (Step 3) ------------------------------------
   The rail is permanent on desktop, so signed-in pages reserve its width: 14px margin + 78px rail
   + 14px gap = 106px, in --hs-rail. Visitors have no body.hfe-authed, so --hs-rail stays 0 and
   nothing changes for them. The panel (296px) floats over the page and reserves nothing. */
body { --hs-rail: 0px; }
@media (min-width: 901px) {
  body.hfe-authed { --hs-rail: 106px; }

  /* 14a. content column (container pages and the home page's .hv-fullbleed wrapper) */
  body.hfe-authed .hfe-main-col { padding-left: var(--hs-rail); }

  /* 14b. site navbar and footer sit outside .hfe-shell, so they get the same inset */
  body.hfe-authed .hv-nav,
  body.hfe-authed .hv-footer { padding-left: var(--hs-rail); }

  /* 14c. pages that break out of .container with the 100vw technique. Centre of the container has
     moved right by rail/2, so the margin gets +rail/2 and the width loses the rail: the page then
     starts at the rail's right edge and ends at the viewport edge (no sideways scroll). */
  body.hfe-authed .hfe-page,
  body.hfe-authed .pf-page,
  body.hfe-authed .pf-ed {
    width: calc(100vw - var(--hs-rail));
    margin-left: calc(50% - 50vw + var(--hs-rail) / 2);
    margin-right: 0;
  }

  /* 14d. Editorial pages (chrome off): the corner chip is hidden here (section 13) and the rail
     does not overlap the top, so the clearance that was reserved for the chip is not needed. */
  body.hfe-authed.hfe-chrome-off .hfe-main-col { padding-top: 0; }
}
/* Signed-in users' site navbar holds only the public links, which are hidden at 960px and below
   (home-v2.css). Hide the bar then instead of leaving it empty. */
@media (max-width: 960px) {
  body.hfe-authed .hv-nav { display: none; }
}
/* Mobile: the round menu button replaced the old toggle, so the Editorial corner chip moves right of it. */
@media (max-width: 900px) {
  body.hfe-authed .hv-chrome-chip { left: 64px; top: calc(14px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 960px) and (min-width: 901px) {
  body.hfe-authed .hv-nav--over ~ .hfe-shell .hv-hero { padding-top: 22px; }
}

/* ---- 15. FILTER + COLLAPSIBLE GROUPS (Step 4) --------------------------- */
.hs .hs-hide { display: none !important; }
.hs.hs-filtering .hs-g.hs-shut .hs-gl { display: block; }   /* a closed group still shows its matches */
.hs-none { margin: 14px 8px; color: var(--hs-mut); font-size: 13px; }
.hs-none[hidden] { display: none; }
.hs-gt:hover { color: var(--hs-ink); }

/* ---- 16. BELL DROPDOWN PLACEMENT (Step 5) --------------------------------
   The partial uses data-bs-display="static" here, so Bootstrap does not position the menu. It is
   placed against the sidebar itself: desktop = to the right of the rail/panel (outward, never over it);
   mobile = inside the drawer, under the header. .hs is position:fixed, so it is the positioning parent. */
.hs .hs-bell, .hs .hs-bell .dropdown { position: static; }
.hs .hs-bell .dropdown-menu[data-bs-popper] {
  position: absolute; margin: 0; top: 0; bottom: auto; right: auto;
  left: calc(100% + 12px); transform: none;
  width: 320px; max-width: calc(100vw - 100% - 36px); max-height: min(70vh, calc(100vh - 28px));
}
@media (max-width: 900px) {
  .hs .hs-bell .dropdown-menu[data-bs-popper] {
    left: 12px; right: 12px; top: 70px; width: auto; max-width: none;
    max-height: calc(100vh - 100px);
  }
}

/* ---- 17. HOME PAGE: full width behind the rail ---------------------------
   The home page (.hv-fullbleed) has its own background and artwork, so a reserved strip beside the rail
   showed the site's default blue and pushed the page right. Here nothing is reserved: the hero, strip
   and footer run edge to edge and the glass rail floats over them. Only the text column is kept clear
   of the rail, with equal padding on both sides so centred titles stay centred on the screen. */
@media (min-width: 901px) {
  body.hfe-authed .hfe-main-col:has(> .hv-fullbleed) { padding-left: 0; }
  body.hfe-authed:has(.hv-fullbleed) :is(.hv-nav, .hv-footer) { padding-left: 0; }
  /* inset = rail + 16px, minus the space the centred 1200px column already leaves at the screen edge */
  body.hfe-authed:has(.hv-fullbleed) :is(.hv, .hv-nav, .hv-footer) .hv-wrap {
    padding-left: max(24px, calc(var(--hs-rail) + 16px - max(0px, (100vw - 1200px) / 2)));
    padding-right: max(24px, calc(var(--hs-rail) + 16px - max(0px, (100vw - 1200px) / 2)));
  }
}

/* ---- 18. EDIT MODE (customize step 4a) -----------------------------------
   Built by sidebar-v2.js from #hsEditData. While .hs-editing is on, the normal menu and the filter box step aside and the edit
   list (#hsEd) takes the place of the menu. Panel and drawer only: the rail opens the panel before editing starts.
   Buttons are the accessible path; drag handles come in step 4b. Colours are the same --hs-* tokens as everything above. */
.hs.hs-editing .hs-nav,
.hs.hs-editing .hs-find,
.hs.hs-editing #hsEdit { display: none; }
.hs-ft #hsEdit:hover { background: var(--hs-card); color: var(--hs-ink); }   /* the footer's red hover is for Logout only */
.hs-ft #hsEdit { margin: 0 0 2px; }

.hs-ed { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hs-ed[hidden] { display: none; }
.hs-ed-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 4px; }
.hs-ed-title { margin: 0; font: 400 18px var(--hs-disp); letter-spacing: .04em; color: var(--hs-ink); }
.hs-ed-title:focus { outline: none; }
.hs-ed-title:focus-visible { outline: 2px solid var(--hs-acc); outline-offset: 2px; }
.hs-ed-act { display: flex; gap: 6px; flex: none; }
.hs-ed-btn { border: 1px solid var(--hs-line); background: transparent; color: var(--hs-ink); border-radius: var(--hs-pill); padding: 6px 14px; font: 600 12px var(--hs-body); cursor: pointer; transition: background .2s, border-color .2s, color .2s; white-space: nowrap; }
.hs-ed-btn:hover { border-color: var(--hs-acc); color: var(--hs-acc); }
.hs-ed-btn.hs-ed-primary { background: var(--hs-acc); border-color: var(--hs-acc); color: var(--hs-bg); }
.hs-ed-btn.hs-ed-primary:hover { color: var(--hs-bg); filter: brightness(1.08); }
.hs-ed-btn.hs-ed-small { padding: 4px 11px; }
.hs-ed-btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.hs-ed-msg { margin: 0; padding: 2px 14px 0; min-height: 18px; color: var(--hs-mut); font-size: 12px; line-height: 1.4; }
.hs-ed-ask { margin: 6px 12px 0; padding: 10px 12px; border: 1px solid var(--hs-acc); border-radius: var(--hs-ri); background: var(--hs-card); }
.hs-ed-ask[hidden] { display: none; }
.hs-ed-askt { margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
.hs-ed-askb { display: flex; gap: 6px; flex-wrap: wrap; }

.hs-ed-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 12px 10px; scrollbar-width: thin; scrollbar-color: var(--hs-line) transparent; }
.hs-ed-gs, .hs-ed-is, .hs-ed-ts { list-style: none; margin: 0; padding: 0; }
.hs-ed-g { margin: 0 0 10px; }
.hs-ed-gh { display: flex; align-items: center; gap: 2px; padding: 4px 0 4px 8px; }
.hs-ed-gn { flex: 1; min-width: 0; color: var(--hs-mut); font: 700 11px var(--hs-body); letter-spacing: .16em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-ed-i { display: flex; align-items: center; gap: 2px; margin: 2px 0; padding: 3px 2px 3px 10px; border-radius: var(--hs-ri); background: var(--hs-card); }
.hs-ed-i > i.bi { margin-right: 8px; color: var(--hs-mut); font-size: 17px; width: 17px; height: 17px; }
.hs-ed-in { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-ed-ib { width: 30px; height: 30px; flex: none; display: grid; place-content: center; padding: 0; border: 1px solid transparent; border-radius: var(--hs-round); background: transparent; color: var(--hs-mut); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.hs-ed-ib i.bi { font-size: 15px; width: 15px; height: 15px; }
.hs-ed-ib:hover { border-color: var(--hs-line); color: var(--hs-acc); }
.hs-ed-ib[aria-disabled="true"] { opacity: .3; cursor: default; }
.hs-ed-ib[aria-disabled="true"]:hover { border-color: transparent; color: var(--hs-mut); }
.hs-ed-note { margin: 4px 8px 6px; color: var(--hs-mut); font-size: 12px; line-height: 1.4; }

.hs-ed-tray { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--hs-line); }
.hs-ed-th { margin: 0; padding: 4px 8px 6px; color: var(--hs-mut); font: 700 11px var(--hs-body); letter-spacing: .16em; text-transform: uppercase; }
.hs-ed-t { display: flex; align-items: center; gap: 8px; margin: 2px 0; padding: 4px 4px 4px 10px; border-radius: var(--hs-ri); border: 1px dashed var(--hs-line); }
.hs-ed-tn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-ed-tn small { display: block; color: var(--hs-mut); font-size: 11px; line-height: 1.2; }

.hs-ed-foot { padding: 8px 14px 10px; border-top: 1px solid var(--hs-line); }
.hs-ed-foot .hs-ed-btn { width: 100%; }

/* ---- 19. DRAG HANDLES (customize step 4b) -------------------------------- */
.hs-ed-grip { flex: none; width: 22px; height: 30px; display: grid; place-content: center; color: var(--hs-mut); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.hs-ed-grip:hover { color: var(--hs-acc); }
.hs-ed-gh { padding-left: 0; }
.hs-ed-i { padding-left: 0; }
.hs-ed-i > i.bi:not(.bi-grip-vertical) { margin-right: 8px; }
.hs-ed-grip i.bi { margin: 0; font-size: 16px; width: 16px; height: 16px; }
.hs-ed-drag { position: relative; z-index: 1; box-shadow: 0 8px 24px rgba(0,0,0,.45); outline: 1px solid var(--hs-acc); background: var(--hs-bg2); }
.hs-ed-g.hs-ed-drag { border-radius: var(--hs-ri); }
.hs.hs-ed-dragging, .hs.hs-ed-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* ---- 20. QUICK ACCESS BLOCK (customize step 5a) --------------------------
   The first block of the nav, above every category (markup in _Sidebar.cshtml). It re-uses .hs-g / .hs-gl / .hs-lk, so the filter box,
   the active highlight, the rail tooltips and the drawer already work on it. The title is plain text, not a fold button. */
.hs-q { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--hs-line); }
.hs-qt { cursor: default; }
.hs-qt:hover { color: var(--hs-mut); }   /* section 15 brightens .hs-gt on hover; this title is not a control */
@media (min-width: 901px) {
  /* Collapsed rail: the title is not drawn as a divider line (the line under the block does that job) but stays readable
     for screen readers, because it names the group. Same visually-hidden technique as .hs-txt in section 10. */
  .hs:not(.hs-open) .hs-qt {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; background: none;
  }
}

/* ---- 21. QUICK ACCESS IN EDIT MODE (customize step 5b-1) -----------------
   The "Quick access" section above the categories in the edit list (built by sidebar-v2.js from the `quick` part of #hsEditData).
   Rows re-use .hs-ed-i / .hs-ed-ib / .hs-ed-grip from sections 18 and 19; changes here are saved at once. */
.hs-ed-quick { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hs-line); }
.hs-ed-quick .hs-ed-th { padding-bottom: 2px; }
.hs-ed-th:focus { outline: none; }
.hs-ed-th:focus-visible { outline: 2px solid var(--hs-acc); outline-offset: 2px; }
.hs-ed-in small { display: block; color: var(--hs-mut); font-size: 11px; line-height: 1.2; }
.hs-ed-renaming { padding-right: 6px; }
.hs-ed-rn { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding: 2px 0; }
.hs-ed-input { flex: 1 1 100%; min-width: 0; padding: 5px 9px; border: 1px solid var(--hs-line); border-radius: var(--hs-ri); background: var(--hs-bg); color: var(--hs-ink); font: 400 13px var(--hs-body); }
.hs-ed-input:focus { outline: 2px solid var(--hs-acc); outline-offset: 1px; }

/* ---- 22. QUICK ACCESS ADD PICKER (customize step 5b-2a) ------------------
   Inline picker under the Quick access rows in the edit list (built by sidebar-v2.js from the edit data, no pop-up). Search field,
   a live count, then the links grouped by category. Re-uses .hs-ed-btn / .hs-ed-input / .hs-ed-note from section 18 and 21. */
.hs-ed-qa { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 8px 2px; }
.hs-ed-pick { margin: 8px 0 2px; padding: 8px; border: 1px solid var(--hs-line); border-radius: var(--hs-ri); background: var(--hs-card); }
.hs-ed-search { display: block; width: 100%; box-sizing: border-box; }
.hs-ed-pick .hs-ed-note { margin: 4px 2px; }
.hs-ed-full { color: var(--hs-ink); font-size: 12px; }
.hs-ed-res { max-height: 16rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--hs-line) transparent; }
.hs-ed-pgt { margin: 8px 0 2px; padding: 0 2px; color: var(--hs-mut); font: 700 11px var(--hs-body); letter-spacing: .16em; text-transform: uppercase; }
.hs-ed-ps { list-style: none; margin: 0; padding: 0; }
.hs-ed-p { display: flex; align-items: center; gap: 8px; margin: 1px 0; padding: 3px 2px 3px 4px; border-radius: var(--hs-ri); }
.hs-ed-p > i.bi { flex: none; color: var(--hs-mut); font-size: 16px; width: 16px; height: 16px; }
.hs-ed-pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-ed-pn small.hs-ed-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px dashed var(--hs-line); border-radius: var(--hs-pill); color: var(--hs-mut); font-size: 10px; line-height: 16px; vertical-align: middle; }
.hs-ed-added { flex: none; padding: 4px 11px; color: var(--hs-mut); font: 600 12px var(--hs-body); }
.hs-ed-added:focus { outline: none; }
.hs-ed-added:focus-visible { outline: 2px solid var(--hs-acc); outline-offset: 1px; border-radius: var(--hs-pill); }
.hs-ed-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
  /* touch: taller rows and an easier Add button in the picker */
  .hs-ed-p { min-height: 40px; }
  .hs-ed-p .hs-ed-btn { padding: 7px 16px; }
}

/* ---- 23. QUICK ACCESS PIN BUTTON + EMPTY STATE (customize step 5b-2b) ----
   The "Pin this page" button sits in the .hs-ed-qa row from section 22 (no new rule needed there). The empty state is the Quick block
   drawn with no entries (markup in _Sidebar.cshtml): a one-line hint and an Add button. The button is NOT an .hs-lk (the filter box
   treats .hs-lk as links); sidebar-v2.js hides the whole block while the filter has text. The hint has .hs-txt, so the rail rule in
   section 10 already hides it visually and keeps it for screen readers. */
.hs-q-hint { margin: 0; padding: 2px 12px 8px; color: var(--hs-mut); font-size: 13px; line-height: 1.4; white-space: normal; }
.hs-q-add { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; margin: 2px 0; border-radius: var(--hs-ri); border: 1px dashed var(--hs-line); background: none; color: var(--hs-mut); cursor: pointer; text-align: left; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.hs-q-add:hover { background: var(--hs-card); border-color: var(--hs-acc); color: var(--hs-acc); }
@media (min-width: 901px) {
  .hs:not(.hs-open) .hs-q-add { justify-content: center; padding: 11px 0; }
}

/* ---- 15. PAGES WITHOUT THE SIDEBAR (Arcade) -------------------------------
   _Layout adds body.hfe-sidebar-off when a page sets ViewData["HideSidebar"]. home-v2.css reserves 64px above
   chrome-off pages for the corner chip; Arcade has its own top bar, which must sit at the very top (the signed-in
   rule in section 14d does not apply here because the body has no hfe-authed). Same specificity as that rule,
   this file loads later. */
body.hfe-sidebar-off .hfe-main-col { padding-top: 0; }