/* Guides hub — wiki-style index (category tiles with menus, searchable sections) and collapsible sidebar. */
.vg-library{--vg-gold:#e6c883;--vg-glow:rgba(150,217,240,.16)}
.vg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Hero + search ---- */
.vg-home{background:rgba(7,26,39,.55)}
.vg-hero{padding:34px clamp(20px,3vw,44px) 26px;border-bottom:1px solid var(--vg-edge);background:linear-gradient(180deg,#123248 0%,#0e2a3b 100%)}
.vg-hero nav{font-size:13px;color:var(--vg-muted)}
.vg-hero h1{font-family:var(--vg-font);font-size:clamp(30px,3.6vw,46px);line-height:1.15;margin:12px 0 10px;color:#f0f6fa;font-weight:650;letter-spacing:-.025em;text-transform:none}
.vg-hero>p{max-width:70ch;margin:0 0 22px;color:var(--vg-muted)}
.vg-searchbar{position:relative;max-width:760px}
.vg-searchbar svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--vg-ice);pointer-events:none}
.vg-library .vg-searchbar input{min-height:54px;padding:14px 18px 14px 48px;font-size:16px;border-radius:6px;background:#061722;border:1px solid #4d7690}
.vg-library .vg-searchbar input:focus{border-color:var(--vg-ice);box-shadow:0 0 0 3px var(--vg-glow)}
.vg-stats{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;margin:18px 0 0;padding:0;font-size:13px;color:var(--vg-muted)}
.vg-stats strong{color:var(--vg-gold);font-size:15px;margin-right:3px}

/* ---- Category tiles with dropdown menus ---- */
.vg-hubs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:20px clamp(20px,3vw,44px);background:#0a2030;border-bottom:1px solid var(--vg-edge)}
.vg-hub{position:relative;min-width:0}
.vg-hub-btn{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px 12px;cursor:pointer;color:var(--vg-ink);background:linear-gradient(180deg,#143448,#0d2535);border:1px solid var(--vg-edge);border-radius:6px;font:inherit;transition:border-color .15s,background .15s,transform .15s}
.vg-hub-btn:hover,.vg-hub-btn[aria-expanded=true]{border-color:var(--vg-ice);background:linear-gradient(180deg,#194259,#0f2c3f)}
.vg-hub-btn:focus-visible{outline:3px solid #d6edfa;outline-offset:3px}
.vg-hub-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--vg-ice);background:radial-gradient(circle,#1c4a63 0%,#0f2b3c 75%);border:1px solid #3d6a82}
.vg-hub-btn:hover .vg-hub-icon,.vg-hub-btn[aria-expanded=true] .vg-hub-icon{color:var(--vg-gold);border-color:var(--vg-gold)}
.vg-hub-name{font-size:14px;font-weight:650;line-height:1.3;text-align:center}
.vg-hub-count{font-size:12px;color:var(--vg-muted)}
.vg-hub-count i{font-style:normal;margin-left:2px;display:inline-block;transition:transform .15s}
.vg-hub-btn[aria-expanded=true] .vg-hub-count i{transform:rotate(180deg)}
.vg-hub-menu{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:max(100%,280px);max-height:360px;overflow:auto;padding:6px;background:#0b2130;border:1px solid var(--vg-ice);border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.55);scrollbar-width:thin}
.vg-hub:nth-child(6n) .vg-hub-menu,.vg-hub:nth-child(6n-1) .vg-hub-menu{left:auto;right:0}
.vg-hub-menu a{display:block;padding:8px 10px;font-size:14px;line-height:1.4;text-decoration:none;color:var(--vg-ink);border-left:2px solid transparent;border-radius:2px}
.vg-hub-menu a:hover,.vg-hub-menu a:focus-visible{background:#183e53;border-left-color:var(--vg-ice);color:#fff}
.vg-hub-menu .vg-hub-all{margin-top:4px;border-top:1px solid var(--vg-edge);border-radius:0;font-size:12px;color:var(--vg-ice)}

/* ---- Feature + quick paths ---- */
.vg-home-body{padding:28px clamp(20px,3vw,44px) 20px}
.vg-home-intro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;margin-bottom:34px;align-items:stretch}
.vg-home .vg-feature{grid-template-columns:1fr 1fr}
.vg-home .vg-feature>img{min-height:260px}
.vg-home .vg-start-path{display:flex;flex-direction:column;gap:12px;border:0;margin:0}
.vg-home .vg-start-path a{flex:1;display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--vg-edge);border-radius:6px;background:#0d2635;transition:border-color .15s}
.vg-home .vg-start-path a:first-child{padding-left:18px}
.vg-home .vg-start-path a:hover{border-color:var(--vg-ice)}
.vg-home .vg-start-path .vg-path-num{grid-row:1 / 3;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--vg-gold);color:var(--vg-gold);font-weight:700;font-size:14px}

/* ---- Category sections ---- */
.vg-home .vg-index-category{margin:0 0 38px;scroll-margin-top:20px}
.vg-home .vg-index-category>h3{display:flex;align-items:center;justify-content:flex-start;gap:12px;font-size:22px;font-weight:600;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--vg-edge);color:#e7f1f7}
.vg-sec-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:6px;color:var(--vg-ice);background:#143448;border:1px solid #3d6a82}
.vg-home .vg-index-category>h3 .vg-count{margin-left:auto;font-size:12px;color:var(--vg-muted);padding:3px 10px;border:1px solid var(--vg-edge);border-radius:20px}
.vg-home .vg-guide-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vg-home .vg-guide-card{display:block;padding:14px 16px;border-radius:5px;background:#0d2635;position:relative;transition:border-color .15s,background .15s}
.vg-home .vg-guide-card:hover{background:#12304391;border-color:var(--vg-ice)}
.vg-home .vg-guide-card::after{content:"→";position:absolute;right:14px;top:14px;color:var(--vg-muted);transition:transform .15s,color .15s}
.vg-home .vg-guide-card:hover::after{transform:translateX(3px);color:var(--vg-gold)}
.vg-home .vg-guide-card h4{font-size:15px;padding-right:26px;margin:0 0 4px}
.vg-home .vg-guide-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-size:13px}
.vg-home .is-dense .vg-guide-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vg-home .is-dense .vg-guide-card{padding:11px 14px}
.vg-home .is-dense .vg-guide-card h4{margin:0;font-size:14px}
.vg-home .is-dense .vg-guide-card p{display:none}
.vg-home .is-dense .vg-guide-card::after{top:11px}
.vg-empty{padding:20px;border:1px dashed var(--vg-edge);border-radius:6px;color:var(--vg-muted);text-align:center}
.vg-home.is-searching .vg-home-intro{display:none}

/* ---- Collapsible sidebar tree (guide pages) ---- */
.vg-layout{grid-template-columns:270px minmax(0,1fr)}
.vg-sidebar details.vg-nav-group{position:static;max-height:none;overflow:visible;border-top:1px solid #1d4358;padding:0}
.vg-sidebar details.vg-nav-group>summary{display:flex;align-items:center;gap:9px;margin:0;padding:10px 4px;font-size:14px;font-weight:650;color:#d3e8f2;cursor:pointer;list-style:none}
.vg-sidebar details.vg-nav-group>summary::-webkit-details-marker{display:none}
.vg-sidebar details.vg-nav-group>summary::after{content:"▸";margin-left:6px;font-size:11px;color:var(--vg-muted);order:3;transition:transform .15s}
.vg-sidebar details.vg-nav-group[open]>summary::after{transform:rotate(90deg)}
.vg-sidebar details.vg-nav-group>summary em{margin-left:auto;order:2;font-style:normal;font-weight:400;font-size:11px;color:var(--vg-muted)}
.vg-sidebar .vg-nav-group>summary span.vg-nav-icon{display:inline-grid;color:var(--vg-ice);font-size:inherit;margin:0}
.vg-sidebar details.vg-nav-group[open]{padding-bottom:8px}
.vg-sidebar .vg-nav-link{margin-left:8px}

/* ---- Responsive ---- */
@media(max-width:1100px){
  .vg-hubs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vg-hub:nth-child(6n) .vg-hub-menu,.vg-hub:nth-child(6n-1) .vg-hub-menu{left:0;right:auto}
  .vg-hub:nth-child(4n) .vg-hub-menu,.vg-hub:nth-child(4n-1) .vg-hub-menu{left:auto;right:0}
  .vg-home-intro{grid-template-columns:1fr}
  .vg-home .vg-start-path{flex-direction:row}
  .vg-home .vg-start-path a{align-items:start}
  .vg-home .vg-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vg-home .is-dense .vg-guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vg-layout{grid-template-columns:230px minmax(0,1fr)}
}
@media(max-width:760px){
  .vg-hero{padding:24px 16px 20px}
  .vg-hubs{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px;gap:10px}
  .vg-hub{position:static}
  .vg-hub-menu,.vg-hub:nth-child(n) .vg-hub-menu{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:60vh}
  .vg-hub-btn{flex-direction:row;justify-content:flex-start;text-align:left;padding:10px 12px;gap:10px}
  .vg-hub-icon{width:40px;height:40px;flex:none}
  .vg-hub-icon svg{width:22px;height:22px}
  .vg-hub-name{text-align:left;flex:1}
  .vg-hub-count{flex:none}
  .vg-home-body{padding:20px 16px}
  .vg-home .vg-start-path{flex-direction:column}
  .vg-home .vg-feature{grid-template-columns:1fr}
  .vg-home .vg-guide-grid,.vg-home .is-dense .vg-guide-grid{grid-template-columns:1fr}
  .vg-home .is-dense .vg-guide-card h4{font-size:15px}
  .vg-layout{display:block}
}
@media(max-width:420px){.vg-hubs{grid-template-columns:1fr}}

.vg-home .vg-start-path a{align-content:center;row-gap:2px}
.vg-home .vg-feature>div{align-self:center}