/* ---------- 🧭 Sidebar layout for computers (v240, src/js/254-side-layout.js) ----------
   html.vc-side (only with html.vc-vd: new look, ≥1024px). The same #vdHeader, laid out differently:
   brand + #vcTopNav → a fixed dark-green sidebar (#vcSideBg draws its background and landscape),
   the header row → a slim top bar with #vdSearch and the existing right-hand buttons. */
#vdHeader .vd-ico, #vdHeader .vd-side-only{ display:none; }

/* Big screens zoom .book (020-main.css: 1.05 / 1.12 / 1.26). The brand and nav live inside .book, so they are drawn
   that much bigger; everything outside it that lines up with them (background, top strip, page offset) uses
   --side-px = --side-w × the same zoom. */
html.vc-side{ --bz:1; }
@media (min-width:1600px) and (hover:hover) and (pointer:fine){ html.vc-side{ --bz:1.05; } }
@media (min-width:1900px) and (hover:hover) and (pointer:fine){ html.vc-side{ --bz:1.12; } }
@media (min-width:2300px) and (hover:hover) and (pointer:fine){ html.vc-side{ --bz:1.26; } }
html.vc-side body.in-type-tutor{ --bz:1; }

@media (min-width:1024px){
  html.vc-side{ --side-w:248px; --side-px:calc(var(--side-w) * var(--bz)); }
  html.vc-side body{ padding-left:var(--side-px) !important; background:#f6f3ec; }
  html.vc-side body.dark-mode{ background:#0b1715; }
  html.vc-side .book{ max-width:1480px; }
  html.vc-side #vdHeader .vd-top-only{ display:none; }

  /* the sidebar background + art (below the brand and nav, which sit in the header's stacking context) */
  #vcSideBg{ display:none; }
  html.vc-side #vcSideBg{ display:block; position:fixed; left:0; top:0; bottom:0; width:var(--side-px); z-index:899; overflow:hidden;
    background:linear-gradient(180deg, #0d4c43 0%, #0b4039 46%, #093631 100%); box-shadow:inset -1px 0 0 rgba(255,255,255,.06), 4px 0 24px rgba(6,40,34,.18); }
  html.vc-side #vcSideBg .vc-side-art{ position:absolute; left:0; right:0; bottom:0; width:100%; height:320px; }
  html.vc-side #vcSideBg .vc-side-motto{ position:absolute; left:22px; right:22px; bottom:76px; font:600 21px/1.1 'Caveat', 'Segoe Script', cursive; color:#d9efe7; opacity:.9; text-shadow:0 1px 6px rgba(0,0,0,.35); }

  /* top bar: the header row, no blur (a backdrop-filter would trap the fixed sidebar inside it) */
  html.vc-side .cover-title{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:transparent !important; border-bottom:0 !important; margin:0 0 26px; padding:0; }
  /* the bar's background is its own fixed strip (#vcSideTop), so it never reaches under the sidebar */
  #vcSideTop{ display:none; }
  html.vc-side #vcSideTop{ display:block; position:fixed; left:var(--side-px); right:0; top:0; height:calc(68px * var(--bz)); z-index:899; background:rgba(246,243,236,.95); border-bottom:1px solid rgba(214,206,186,.6); }
  html.vc-side body.dark-mode #vcSideTop{ background:rgba(11,23,21,.95); border-bottom-color:rgba(255,255,255,.07); }
  html.vc-side #vdHeader{ max-width:none; }
  html.vc-side #vdHeader > div:first-child{ height:68px; gap:14px; }

  /* brand → top of the sidebar */
  html.vc-side #vdHeader [data-vd-go="starthere"]:first-child{ position:fixed; left:0; top:0; width:var(--side-w); height:96px; padding:22px 20px 12px; gap:12px; z-index:2; align-items:center; justify-content:flex-start; }
  html.vc-side #vdHeader [data-vd-go="starthere"]:first-child > span:first-child{ width:40px; height:40px; box-shadow:0 0 0 2px rgba(255,255,255,.18); }   /* the usual teal logo tile */
  html.vc-side #vdHeader .vd-brand-words{ display:block !important; }
  html.vc-side #vdHeader .vd-brand-words > span:first-child{ font-size:19px; white-space:nowrap; color:#fff !important; }
  html.vc-side #vdHeader .vd-brand-words > span:last-child{ color:#9fd3c0; font-size:9px; letter-spacing:.1em; margin-top:5px; white-space:nowrap; }

  /* sections → the sidebar list */
  html.vc-side #vcTopNav{ position:fixed; left:0; top:96px; bottom:120px; width:var(--side-w); z-index:2; display:flex !important; flex-direction:column; align-items:stretch; gap:3px;
    padding:10px 14px 16px; background:transparent !important; border-radius:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
  html.vc-side #vcTopNav button{ display:flex !important; align-items:center; gap:13px; width:100%; text-align:left; padding:10px 14px !important; border-radius:12px; font-size:14.5px !important; font-weight:600;
    color:#cfe7df !important; background:transparent; white-space:nowrap; position:relative; transition:background .15s, color .15s; }
  html.vc-side #vcTopNav button .vd-ico{ display:inline-flex; flex:none; opacity:.9; }
  html.vc-side #vcTopNav button:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
  html.vc-side #vcTopNav button.vd-on{ background:rgba(255,255,255,.15) !important; color:#fff !important; box-shadow:inset 3px 0 0 #f6d27a !important; }
  html.vc-side #vcTopNav button.vd-on::after{ content:'›'; position:absolute; right:14px; font-size:18px; line-height:1; opacity:.85; }
  html.vc-side #vcTopNav button:focus-visible{ outline:2px solid #f6d27a; outline-offset:1px; }
  html.vc-side #vcTopNav .vd-side-only{ display:flex !important; }
  html.vc-side #vcTopNav [data-top="progress"]{ margin-top:10px; }
  html.vc-side #vcTopNav [data-top="progress"]::before{ content:''; position:absolute; left:14px; right:14px; top:-7px; height:1px; background:rgba(255,255,255,.12); }

  /* the search box fills the left of the top bar */
  html.vc-side #vdSearch{ display:flex !important; align-items:center; flex:1 1 auto; max-width:520px; min-width:200px; height:44px; padding:0 16px; gap:10px; border-radius:999px;
    background:#fff; border:1px solid #e3dccb; box-shadow:0 1px 2px rgba(0,0,0,.03); color:#78716c; }
  html.vc-side #vdSearch:focus-within{ border-color:#0f766e; box-shadow:0 0 0 3px rgba(15,118,110,.14); }
  html.vc-side #vdSearch input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:500 14px 'Plus Jakarta Sans', system-ui, sans-serif; color:#1c1917; }
  html.vc-side body.dark-mode #vdSearch{ background:#11231f; border-color:rgba(255,255,255,.12); color:#a8a29e; }
  html.vc-side body.dark-mode #vdSearch input{ color:#e7e5e4; }
  html.vc-side #vcTopExtras{ margin-left:auto; }
  /* the teacher portal button reads like the mockup's "Teacher mode" */
  html.vc-side #vdHdrTeach{ background:#0d4c43 !important; border-color:#0d4c43 !important; color:#fff !important; padding:9px 16px !important; font-size:13px !important; }

  /* page titles: a serif face, a touch larger */
  html.vc-side .vd h1{ font-family:'Fraunces', Georgia, 'Times New Roman', serif !important; font-weight:600 !important; letter-spacing:-.015em !important; }
  html.vc-side .vd h2.text-2xl, html.vc-side .vd h2.text-xl{ font-family:'Fraunces', Georgia, serif; font-weight:600; letter-spacing:-.01em; }
  html.vc-side .section-title{ font-family:'Fraunces', Georgia, serif; font-weight:600; }

  /* the floating ✎ pill and the chat bubble sit clear of the sidebar */
  html.vc-side #vcSuggestModeBtn{ left:calc(var(--side-px) + 16px) !important; }
}

/* narrower computers: an icon rail, labels as tooltips (title) */
@media (min-width:1024px) and (max-width:1279px){
  html.vc-side{ --side-w:76px; }
  html.vc-side #vdHeader [data-vd-go="starthere"]:first-child{ height:84px; padding:20px 17px; justify-content:center; }
  html.vc-side #vdHeader .vd-brand-words{ display:none !important; }
  html.vc-side #vcTopNav{ top:84px; padding:8px 12px; bottom:90px; }
  html.vc-side #vcTopNav button{ justify-content:center; padding:11px 0 !important; gap:0; }
  html.vc-side #vcTopNav .vd-lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  html.vc-side #vcTopNav button.vd-on::after{ display:none; }
  html.vc-side #vcTopNav [data-top="progress"]::before{ left:10px; right:10px; }
  html.vc-side #vcSideBg .vc-side-motto{ display:none; }
  html.vc-side #vcSideBg .vc-side-art{ height:200px; }
}