/* PHASE_HC_MOBILE_WIDGET — on phones, give the CATEGORY and ARTICLE pages the
 * same compact single-column treatment the widget panel gets. Values mirror
 * #hc-page.hc-widget above so the two surfaces read identically.
 *
 * SCOPE: .view-category and .view-article ONLY. The home page is deliberately
 * left alone (owner: it already reads well small).
 *
 * BREAKPOINT: 820px, the same width at which the site's own nav collapses to a
 * hamburger, so "mobile" means one thing across the page.
 *
 * Emitted LAST (after the design-studio overrides and the $__ats title size, and
 * before custom CSS) so equal-specificity !important rules win on order. */

/* The phone nav bar is rendered server-side on every category/article page — the
   server cannot know the viewport — so it is hidden until the breakpoint. */
#hc-page .hc-w-bar-mobile{display:none}
/* hcInitMobileNav() injects the sheet's × into the rail on every view, at any
   width. Without this it inherited nothing but default button styling and sat in
   the middle of the DESKTOP category card. It is opted back in inside the media
   query, and only once the rail has become the sheet. */
#hc-page .hc-mnav-close{display:none!important}

@media(max-width:820px){
  /* ── Second hamburger: the widget's back bar, on the public page ───────── */
  #hc-page .hc-w-bar-mobile{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;
    min-height:44px;margin:0 0 10px;padding:6px 10px;border-radius:12px;
    background:color-mix(in srgb,var(--body-bg,#fff) 88%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid color-mix(in srgb,var(--text-muted,#94a3b8) 20%,transparent)}
  #hc-page .hc-w-bar-mobile .hc-w-back{flex:1;min-width:0;display:inline-flex;align-items:center;gap:6px;
    padding:7px 10px 7px 6px;border-radius:10px;text-decoration:none;
    font:700 12.5px/1.2 var(--font,inherit);color:var(--text-secondary,#475569);
    transition:background .18s ease,color .18s ease}
  #hc-page .hc-w-bar-mobile .hc-w-back:hover{background:rgba(var(--br),.10);color:var(--brand)}
  #hc-page .hc-w-bar-mobile .hc-w-back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #hc-page .hc-w-bar-mobile .hc-w-menu{flex:0 0 auto;display:grid;gap:3.5px;place-content:center;
    width:36px;height:36px;padding:0;cursor:pointer;border-radius:10px;
    background:transparent;border:1px solid color-mix(in srgb,var(--text-muted,#94a3b8) 26%,transparent);
    transition:background .18s ease,border-color .18s ease}
  #hc-page .hc-w-bar-mobile .hc-w-menu:hover{background:rgba(var(--br),.10);border-color:rgba(var(--br),.35)}
  #hc-page .hc-w-bar-mobile .hc-w-menu span{display:block;width:15px;height:2px;border-radius:2px;
    background:var(--text-secondary,#475569);transition:transform .22s var(--ease,ease),opacity .18s ease}
  #hc-page .hc-w-bar-mobile .hc-w-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  #hc-page .hc-w-bar-mobile .hc-w-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
  #hc-page .hc-w-bar-mobile .hc-w-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  /* The bar IS the back navigation now — the page's own back link and breadcrumb
     would read as a second, competing one right beneath it. */
  #hc-page.view-article .hc-cat-home-link,#hc-page.view-category .hc-cat-home-link,
  #hc-page.view-article .hc-crumb,#hc-page.view-category .hc-crumb{display:none!important}

  /* ── The rail slides in as a sheet. Unlike the widget this NEVER moves the rail
     in the DOM — it is the same node the desktop grid uses, so resizing back up
     restores the normal layout with nothing to undo. ─────────────────────── */
  /* While open the rail is re-parented to #hc-page (see hcInitMobileNav), which is
     what makes position:fixed resolve against the VIEWPORT: inside .hc-page-shell an
     ancestor's backdrop-filter/animation makes that element the containing block, so
     the sheet came out short and page-width instead of full height. #hc-page carries
     only isolation:isolate — a stacking context, not a containing block — and it is
     where --body-bg and the theme vars live, so the colours still inherit. */
  #hc-page>.hc-kb-sidebar.hc-mnav-sheet{
    position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;
    height:100vh!important;height:100dvh!important;max-height:none!important;
    z-index:2147483000!important;width:min(320px,86%)!important;max-width:none!important;
    margin:0!important;padding:46px 14px 16px!important;border:0!important;border-radius:0!important;
    background:var(--body-bg,#fff)!important;box-shadow:-18px 0 60px rgba(15,23,42,.26)!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch;box-sizing:border-box!important;
    transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
  #hc-page>.hc-kb-sidebar.hc-mnav-sheet.is-in{transform:translateX(0)}
  /* The floating variant deliberately becomes position:static in the in-flow
     tablet layout. Its doubled-class selector is more specific than the generic
     sheet rule above, so it also changed the re-parented phone sheet to static.
     Match that specificity here: once it is a sheet it must be viewport-fixed. */
  #hc-page>.hc-kb-sidebar.hc-mnav-sheet.hc-kb-style-floating{
    position:fixed!important;max-height:none!important;overflow-y:auto!important
  }
  /* The rail is normally a transparent card sitting on the page, and the dark theme
     pins that with `html[data-theme=dark] #hc-page .hc-kb-sidebar{background:transparent}`
     — (0,1,1)+(1,1,0) beats a plain #hc-page>.class pair, so a see-through sheet with
     the page showing through it. These two carry the extra class (and the html
     element) needed to out-rank it in each theme. */
  html #hc-page>.hc-kb-sidebar.hc-mnav-sheet.is-collapsible{background:var(--body-bg,#fff)!important;border:0!important;box-shadow:-18px 0 60px rgba(15,23,42,.26)!important}
  html[data-theme="dark"] #hc-page>.hc-kb-sidebar.hc-mnav-sheet.is-collapsible{background:var(--hc-d-bg,#0b1220)!important}
  /* The rail's own nav caps its height for the desktop card; in the sheet it flows. */
  #hc-page>.hc-kb-sidebar.hc-mnav-sheet .hc-kb-nav{max-height:none!important;overflow:visible!important;grid-template-columns:1fr!important}
  #hc-page.hc-mnav-open::after{content:'';position:fixed;inset:0;z-index:2147482999;background:rgba(15,23,42,.42);opacity:0;transition:opacity .28s ease}
  #hc-page.hc-mnav-open.hc-mnav-in::after{opacity:1}
  /* STACKING: #hc-hdr is a sibling of #hc-page at z-index:200, and #hc-page carries
     isolation:isolate — so every z-index inside it, however large, is confined below
     the header. That is why the sheet's title and its × came out tucked underneath
     the nav. The page itself has to out-rank the header for the run of the sheet;
     it reverts the moment hc-w-locked comes off, so the sticky nav is untouched
     everywhere else. The header ends up behind the scrim, which is what the widget
     does too (it hides the nav outright). */
  html.hc-w-locked #hc-page{position:relative!important;z-index:300!important}
  /* The × belongs to the SHEET, never to the rail sitting in the page. It is only
     shown once the rail has been re-parented (.hc-mnav-sheet); the blanket hide
     outside this media query keeps it off the desktop card entirely. */
  #hc-page>.hc-kb-sidebar.hc-mnav-sheet .hc-mnav-close{
    position:absolute!important;top:8px;right:10px;width:30px;height:30px;display:grid!important;place-content:center;
    cursor:pointer;border-radius:9px;border:1px solid color-mix(in srgb,var(--text-muted,#94a3b8) 26%,transparent);
    background:transparent;color:var(--text-secondary,#475569);font-size:19px;line-height:1}
  #hc-page>.hc-kb-sidebar.hc-mnav-sheet .hc-mnav-close:hover{background:rgba(var(--br),.10);color:var(--brand)}

  /* The rail is reached through the hamburger now, so the in-flow copy would be a
     second, redundant category list dumped under the articles. Hidden where the
     server rendered it; the re-parented sheet copy (a direct child of #hc-page, so
     none of these ancestor selectors match it any more) is what shows. */
  #hc-page.view-category .hc-page-shell>.hc-kb-sidebar,
  #hc-page.view-article .hc-page-shell>.hc-kb-sidebar,
  #hc-page.view-article .hc-sidebar .hc-kb-sidebar{display:none!important}
  #hc-page>.hc-kb-sidebar.hc-mnav-sheet{display:block!important}
  html.hc-w-locked{overflow:hidden}

  /* ── Hero: the subpage hero was overflowing sideways ──────────────────────
     .hc-hero-sizer is a white-space:nowrap block holding the LONGEST possible
     heading ("How can we help you?") so the hero keeps one width across pages.
     On a category page the visible title is shorter than that sizer, so the
     sizer — not the title — set the hero's max-content width and pushed the
     whole page wider than the screen. The home page never showed it because
     there the title and the sizer are the same string. */
  #hc-page.view-article .hc-hero-sizer,#hc-page.view-category .hc-hero-sizer{display:none!important}
  #hc-page.view-article .hc-hero,#hc-page.view-category .hc-hero{min-height:0!important;padding:22px 14px 20px!important}
  #hc-page.view-article .hc-hero h1,#hc-page.view-category .hc-hero h1{font-size:22px!important;line-height:1.25!important;margin:0 0 6px!important;max-width:100%!important;overflow-wrap:break-word!important}
  #hc-page.view-article .hc-hero-sub,#hc-page.view-category .hc-hero-sub{font-size:12.5px!important;margin:0 0 13px!important;max-width:100%!important}
  #hc-page.view-article .hc-hero-pill,#hc-page.view-category .hc-hero-pill{font-size:11px!important}
  #hc-page.view-article .hc-hero-inner,#hc-page.view-category .hc-hero-inner,
  #hc-page.view-article .hc-stack-cards,#hc-page.view-category .hc-stack-cards,
  #hc-page.view-article .hc-srch-wrap,#hc-page.view-category .hc-srch-wrap,
  #hc-page.view-article .hc-search-form,#hc-page.view-category .hc-search-form{max-width:100%!important;width:100%!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important}
  #hc-page.view-article .hc-search-form,#hc-page.view-category .hc-search-form{min-height:46px!important}
  #hc-page.view-article .hc-hero-stats,#hc-page.view-category .hc-hero-stats{display:none!important}

  /* ── Shell: one column, panel gutters ─────────────────────────────────── */
  #hc-page.view-article .hc-main,#hc-page.view-category .hc-main{max-width:none!important;padding-left:14px!important;padding-right:14px!important}
  #hc-page.view-article .hc-art-layout,#hc-page.view-article .hc-art-layout.hc-art-rail-left{display:block!important;grid-template-columns:none!important;max-width:none!important;margin:0!important}
  #hc-page.view-category .hc-page-shell{display:block!important;grid-template-columns:none!important}
  #hc-page.view-category .hc-page-content{min-width:0!important}
  #hc-page.view-article .hc-crumb,#hc-page.view-category .hc-crumb{font-size:11.5px!important;margin-bottom:10px!important}

  /* ── Section labels + subhero ─────────────────────────────────────────── */
  #hc-page.view-article .hc-sec,#hc-page.view-category .hc-sec{margin:2px 0 10px!important}
  #hc-page.view-article .hc-sec-label,#hc-page.view-category .hc-sec-label{font-size:11px!important;letter-spacing:.06em!important;text-transform:uppercase!important}
  #hc-page.view-article .hc-subhero,#hc-page.view-category .hc-subhero{padding:16px 14px!important;min-height:0!important}
  #hc-page.view-article .hc-subhero-title,#hc-page.view-category .hc-subhero-title{font-size:17px!important}

  /* ── Article lists (category listing / popular / related) → compact rows ─ */
  #hc-page.view-category .hc-alist,#hc-page.view-category .hc-pop-list,
  #hc-page.view-article .hc-alist,#hc-page.view-article .hc-pop-list{display:flex!important;flex-direction:column!important;gap:8px!important;grid-template-columns:none!important;columns:auto!important}
  #hc-page.view-category .hc-arow,#hc-page.view-category .hc-pop-item,
  #hc-page.view-article .hc-arow,#hc-page.view-article .hc-pop-item{flex-direction:row!important;align-items:center!important;gap:11px!important;padding:11px 12px!important;border-radius:13px!important;min-height:0!important;transform:none!important}
  #hc-page.view-category .hc-arow:hover,#hc-page.view-category .hc-pop-item:hover,
  #hc-page.view-article .hc-arow:hover,#hc-page.view-article .hc-pop-item:hover{transform:translateX(3px)!important}
  #hc-page.view-category .hc-arow-media,#hc-page.view-category .hc-pop-media,
  #hc-page.view-article .hc-arow-media,#hc-page.view-article .hc-pop-media{display:none!important}
  #hc-page.view-category .hc-arow-body,#hc-page.view-category .hc-pop-body,
  #hc-page.view-article .hc-arow-body,#hc-page.view-article .hc-pop-body{padding:0!important;flex:1!important;min-width:0!important}
  #hc-page.view-category .hc-arow-title,#hc-page.view-category .hc-pop-title,
  #hc-page.view-article .hc-arow-title,#hc-page.view-article .hc-pop-title{font-size:13.5px!important;line-height:1.35!important;white-space:normal!important;-webkit-line-clamp:2!important;max-height:none!important}
  #hc-page.view-category .hc-arow-exc,#hc-page.view-category .hc-pop-exc,
  #hc-page.view-article .hc-arow-exc,#hc-page.view-article .hc-pop-exc{font-size:11.5px!important;line-height:1.45!important;-webkit-line-clamp:2!important}
  #hc-page.view-category .hc-arow-meta,#hc-page.view-category .hc-pop-views,
  #hc-page.view-article .hc-arow-meta,#hc-page.view-article .hc-pop-views{display:none!important}
  #hc-page.view-category .hc-pop-num,#hc-page.view-article .hc-pop-num{flex:0 0 auto!important}

  /* ── Subcategory tiles on a category page → the same rows ─────────────── */
  #hc-page.view-category .hc-home-cats{display:flex!important;flex-direction:column!important;gap:8px!important;grid-template-columns:none!important}
  #hc-page.view-category .hc-home-cat{flex-direction:row!important;align-items:center!important;text-align:left!important;gap:12px!important;padding:11px 12px!important;border-radius:13px!important;min-height:0!important;transform:none!important}
  #hc-page.view-category .hc-home-cat-ico,#hc-page.view-category .hc-home-cat-letter{width:38px!important;height:38px!important;min-width:0!important;font-size:18px!important;border-radius:11px!important;flex:0 0 auto!important;padding:0!important}
  #hc-page.view-category .hc-home-cat-ico>svg{width:20px!important;height:20px!important}
  #hc-page.view-category .hc-home-cat-ico>i{font-size:18px!important}
  #hc-page.view-category .hc-home-cat-ico.hc-ico-has-img{width:38px!important;height:38px!important}
  #hc-page.view-category .hc-home-cat-ico.hc-ico-has-img .hc-ico-img{width:100%!important;height:100%!important;max-width:none!important;padding:16%!important}
  #hc-page.view-category .hc-home-cat-body{flex:1!important;min-width:0!important;align-items:flex-start!important;text-align:left!important;margin:0!important;gap:2px!important}
  #hc-page.view-category .hc-home-cat-name{font-size:14px!important;line-height:1.3!important}
  #hc-page.view-category .hc-home-cat-desc{font-size:11.5px!important;line-height:1.45!important;max-width:none!important;display:-webkit-box!important;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #hc-page.view-category .hc-home-cat-count{display:none!important}
  #hc-page.view-category .hc-home-cat-num{display:block!important;position:static!important;margin-left:auto!important;font-size:11.5px!important;font-weight:800!important;color:var(--text-muted)!important;flex:0 0 auto!important}
  #hc-page.view-category .hc-home-cat-arrow{display:block!important;flex:0 0 auto!important;color:var(--text-muted)!important;font-size:16px!important}

  /* ── "Show all" controls span the column ──────────────────────────────── */
  #hc-page.view-category .hc-cats-more-wrap,#hc-page.view-article .hc-cats-more-wrap{margin:14px 0 2px!important}
  #hc-page.view-category .hc-cats-more,#hc-page.view-article .hc-cats-more{width:100%!important;justify-content:center!important;padding:11px 16px!important;font-size:13px!important}

  /* ── Reading an article ───────────────────────────────────────────────── */
  #hc-page.view-article .hc-art-card{padding:16px 14px!important;border-radius:14px!important}
  #hc-page.view-article .hc-art-title{font-size:19px!important;line-height:1.3!important;overflow-wrap:break-word!important;margin-bottom:14px!important}
  #hc-page.view-article .hc-art-div{margin-bottom:18px!important}
  #hc-page.view-article .hc-body{font-size:14px!important;line-height:1.65!important;max-width:none!important;overflow-wrap:break-word!important}
  #hc-page.view-article .hc-body h1,#hc-page.view-article .hc-body h1[style]{font-size:19px!important;line-height:1.3!important;margin:0 0 12px!important}
  #hc-page.view-article .hc-body h2,#hc-page.view-article .hc-body h2[style]{font-size:17px!important;line-height:1.3!important;margin:22px 0 10px!important}
  #hc-page.view-article .hc-body h3,#hc-page.view-article .hc-body h3[style]{font-size:15px!important;line-height:1.35!important;margin:18px 0 8px!important}
  #hc-page.view-article .hc-body img,#hc-page.view-article .hc-body table,#hc-page.view-article .hc-body pre{max-width:100%!important;height:auto!important;overflow-x:auto!important}
  /* The TOC is panel furniture the widget drops; on a phone it just pushes the
     article down. Related articles and the category rail still follow the body,
     which is where the widget puts them. */
  #hc-page.view-article #hc-toc-card,#hc-page.view-article .hc-toc{display:none!important}
  #hc-page.view-article .hc-sidebar{position:relative!important;top:auto!important;order:0!important;width:auto!important;max-width:none!important;margin-top:14px!important}
  #hc-page.view-article .hc-side-card{padding:14px!important;border-radius:14px!important}
  #hc-page.view-article .hc-side-title{margin-bottom:8px!important}
  #hc-page.view-article .hc-rel-list{display:flex!important;flex-direction:column!important;gap:2px!important}
  #hc-page.view-article .hc-rel-link{display:block!important;padding:9px 0!important;font-size:13px!important;line-height:1.4!important}

  /* ── Category rail: one column, behind its own "show all" toggle ───────── */
  /* Box/placement of the rail is owned by the sheet rule above — this only sets
     the list itself. Re-declaring position/width here would override it. */
  #hc-page.view-article .hc-kb-nav,#hc-page.view-category .hc-kb-nav,
  #hc-page.view-article .hc-kb-sidebar.is-collapsible .hc-kb-nav,
  #hc-page.view-category .hc-kb-sidebar.is-collapsible .hc-kb-nav{grid-template-columns:1fr!important;max-height:min(46vh,380px)!important}
  #hc-page.view-article .hc-kb-cat-desc,#hc-page.view-category .hc-kb-cat-desc{display:none!important}
  #hc-page.view-article .hc-empty,#hc-page.view-category .hc-empty{padding:36px 16px!important}
}