/* ============================================================
   Calmer long pages (2026-10-24): "What you will learn" stays in view and the rest of a long
   assignment, lab or tutorial sits in tabs (templates/includes/tabbar.html) that stay at the
   top while you scroll, with a quiet line for how far you are. The panel on the right and the
   menu on the left fold away; hub.js keeps the choice on this device. Without JavaScript the
   tabs are links to the parts below and nothing folds. --hb-* tokens only.
   ============================================================ */

/* ---------- tabs ---------- */
.hb-tabs{--tab-top:0px; margin-top:20px}
.hb-tabbar{position:sticky; top:var(--tab-top); z-index:20; max-width:760px; padding:8px 0 10px; background:var(--hb-paper)}
.hb-tablist{display:flex; gap:4px; padding:4px; background:var(--hb-surface); border:1px solid var(--hb-line); border-radius:999px; box-shadow:var(--hb-shadow)}
.hb-view .hb-tab{
  flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 12px;
  border-radius:999px; color:var(--hb-ink-2); font:600 15px/20px var(--hb-font); text-align:center;
  transition:background-color .15s, color .15s;
}
.hb-view .hb-tab, .hb-view .hb-tab:hover{text-decoration:none}
.hb-view .hb-tab:hover{background:var(--hb-paper); color:var(--hb-ink)}
.hb-tab .n{
  flex:0 0 24px; height:24px; display:inline-grid; place-items:center; border-radius:999px;
  border:1.5px solid var(--hb-line-strong); font:700 12px/1 var(--hb-display); font-variant-numeric:tabular-nums;
}
.hb-view .hb-tab[aria-selected="true"]{background:var(--hb-tint); color:var(--hb-ink)}
.hb-tab[aria-selected="true"] .n{background:var(--hb-cyan); border-color:var(--hb-cyan); color:var(--hb-surface)}
/* session pages underline every link in the assignment (exercise.css); not the tabs */
.ex-body .hb-tabs a.hb-tab{color:var(--hb-ink-2); text-decoration:none}
.ex-body .hb-tabs a.hb-tab:hover, .ex-body .hb-tabs a.hb-tab[aria-selected="true"]{color:var(--hb-ink)}
/* the quiet line: how far you are through the page, tab by tab */
.hb-tabprog{display:none; height:3px; margin:8px 20px 0; overflow:hidden; border-radius:999px; background:var(--hb-line)}
.hb-tabprog i{display:block; width:0; height:100%; border-radius:inherit; background:var(--hb-grad); opacity:.6; transition:width .2s ease-out}
.hb-tabs.on .hb-tabprog{display:block}
.hb-tabpanel{padding-top:4px}
.hb-tabpanel > .act:first-child{margin-top:12px}
.hb-tabs:not(.on) .hb-tabpanel + .hb-tabpanel{margin-top:40px; padding-top:24px; border-top:1px solid var(--hb-line)}
/* before hub.js picks a tab, show only the first, so the page does not jump */
:root[data-js] .hb-tabs:not(.on) .hb-tabpanel + .hb-tabpanel{display:none}
.hb-view .hb-tabnext a.hb-btn{color:var(--hb-ink); text-decoration:none}
.hb-tabnext{display:flex; justify-content:flex-end; max-width:760px; margin:28px 0 8px}
.hb-tabs:not(.on) .hb-tabnext{display:none}
/* in-page links land below the tab bar */
.hb-tabs.on .hb-tabpanel [id]{scroll-margin-top:calc(var(--tab-top) + 92px) !important}

@media (max-width:1023px){
  .shell .hb-tabs{--tab-top:60px}  /* under the slim top bar */
}
/* the folding step line on phones gives the top of the screen to the tabs */
.hb-doc:has(.hb-tabs) .hb-stepbar, .ex-page:has(.hb-tabs) .ex-stepbar{position:static}
@media (max-width:640px){
  .hb-view .hb-tab{flex-direction:column; gap:2px; min-height:52px; padding:4px 6px; font-size:13px; line-height:16px; border-radius:18px}
  .hb-tablist{border-radius:22px}
  .hb-tab .n{flex-basis:20px; width:20px; height:20px; font-size:11px}
}

/* ---------- the panel on the right folds away ---------- */
.hb-side-toggle{
  display:none; align-items:center; justify-content:center; width:36px; height:36px; margin:0 0 8px auto;
  border:1px solid var(--hb-line); border-radius:10px; background:var(--hb-surface); color:var(--hb-ink-2); cursor:pointer;
  transition:border-color .15s, color .15s;
}
:root[data-js] .hb-side-toggle{display:flex}
.hb-side-toggle:hover{border-color:var(--hb-line-strong); color:var(--hb-ink)}
.hb-side-toggle svg{width:20px; height:20px}
:root[data-js][data-side="folded"] .hb-side-toggle ~ #side-panel{display:none}
:root[data-js][data-side="folded"] .hb-doc-grid:has(.hb-side-toggle),
:root[data-js][data-side="folded"] .ex-grid:has(.hb-side-toggle){grid-template-columns:minmax(0,1fr) 36px}
:root[data-js][data-side="folded"] .hb-doc-grid:has(.hb-side-toggle) .hb-doc,
:root[data-js][data-side="folded"] .hb-doc-grid:has(.hb-side-toggle) .hb-tabbar{max-width:none}

/* ---------- the menu on the left folds to its icons (laptops) ---------- */
.sb-fold{
  display:none; position:absolute; top:22px; right:12px; align-items:center; justify-content:center; width:36px; height:36px;
  border:0; border-radius:10px; background:none; color:var(--hb-ink-2); cursor:pointer; transition:background-color .15s, color .15s;
}
:root[data-js] .sb-fold{display:flex}
.sb-fold:hover{background:var(--hb-paper); color:var(--hb-ink)}
.sb-fold svg{width:20px; height:20px}
@media (min-width:1024px){
  :root[data-js][data-nav="folded"]{--hb-side:72px}
  :root[data-js][data-nav="folded"] .sidebar{padding:16px 12px; overflow-x:hidden}
  :root[data-js][data-nav="folded"] .sidebar .sb-brand{display:none}
  :root[data-js][data-nav="folded"] .sb-fold{position:static; width:48px; height:42px; margin:0 0 18px}
  :root[data-js][data-nav="folded"] .sb-nav a, :root[data-js][data-nav="folded"] .sb-nav button{justify-content:center; gap:0; padding:0}
  :root[data-js][data-nav="folded"] .sb-nav a > span, :root[data-js][data-nav="folded"] .sb-nav button > span,
  :root[data-js][data-nav="folded"] .sb-who{
    position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  :root[data-js][data-nav="folded"] .sb-me{justify-content:center; padding:14px 0 2px}
}
@media (max-width:1023px){
  .sb-fold{display:none !important}
}