/* App base: reset, page ground and the few rules hub.css relied on from the
   prototype. Colours come from the hub.css tokens, plus --hb-error below, defined
   here from the brand Alert colour (#ED1D51), darkened for text contrast on light
   and lightened on dark (pending brand-owner confirmation). */
*,*::before,*::after{box-sizing:border-box}
html:root{--hb-strip:0px}  /* the prototype's demo strip does not exist in the app */
html:root{--hb-error:#C8143C}
html:root[data-theme="dark"]{--hb-error:#FF7A95}
html{-webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--hb-font); font-size:16px; line-height:1.55; color:var(--hb-ink); background:var(--hb-paper); -webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol{margin:0}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--hb-cyan); outline-offset:2px}
.linkbtn{padding:0; border:0; background:none; color:var(--hb-link); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.hb-wrap{max-width:1040px; margin:0 auto; padding:40px 24px}
@media (max-width:640px){ .hb-wrap{padding:28px 16px} }
.lg-error{margin-top:6px; color:var(--hb-error); font-size:14px; font-weight:600}
.lg-sub.lg-note{font-size:13px}
/* Meta lines (times, counts) carry a small icon in front of the text. */
.hb-meta{display:flex; align-items:center; flex-wrap:wrap; gap:6px}
.hb-meta > svg{display:inline-block; width:16px; height:16px; flex:none}

/* ---------- the app shell (templates/app/base.html) ---------- */
/* Both logos and both theme labels are in the page; the theme picks one before paint. */
.hb-when-dark{display:none !important}
:root[data-theme="dark"] .hb-when-light{display:none !important}
:root[data-theme="dark"] .hb-when-dark{display:block !important}
.hb-skip{position:absolute; left:16px; top:-60px; z-index:100; padding:10px 16px; border-radius:10px; background:var(--hb-surface); color:var(--hb-ink); font-weight:600; box-shadow:var(--hb-shadow)}
.hb-skip:focus{top:12px}
/* headings take focus on arrival for screen readers; the ring is for controls */
[tabindex="-1"]:focus{outline:none}
.hb-note h1{font:600 17px/24px var(--hb-display)}
.shell .crumbs{margin-bottom:16px}
.shell .crumbs .sep{color:var(--hb-ink-2); margin:0 2px}
/* the course page's "In this course" rows are links to My Resources */
.hb-sidecard li a{
  width:100%; display:flex; align-items:center; gap:10px; min-height:40px; padding:0 8px;
  border-radius:8px; color:var(--hb-ink-2); font:500 15px var(--hb-font); transition:background-color .15s, color .15s;
}
.hb-view .hb-sidecard li a{color:var(--hb-ink-2)}
.hb-view .hb-sidecard li a:hover{background:var(--hb-paper); color:var(--hb-ink)}
.hb-item.locked{color:var(--hb-ink-2)}
.hb-item.locked svg{color:var(--hb-ink-2)}
/* a way forward that is not open yet: visible, clearly not clickable */
.hb-btn:disabled{opacity:.5; cursor:not-allowed}
.hb-band form.hint{margin-top:12px}

/* ---------- resource pages, My Resources and Search ---------- */
.hb-view a.hb-btn.primary{color:#fff}
/* a step shows its number until it is done, then a tick; the page script flips the class */
.hb-step:not(.done) .hb-step-n .i-done, .hb-toc a:not(.done) .n .i-done{display:none}
.hb-step.done .hb-step-n .i-num, .hb-toc a.done .n .i-num{display:none}
.hb-step .hb-btn[aria-pressed="true"] svg{color:var(--hb-ok)}
.hb-step .hb-btn[aria-busy="true"]{opacity:.6}
.hb-doc > section:first-of-type > .hb-prompt:first-child{margin-top:0}
.hb-filter{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:14px; color:var(--hb-ink-2)}
.hb-snippet{margin-top:8px; font-size:14px; line-height:1.5; color:var(--hb-ink-2); overflow-wrap:anywhere}
.hb-snippet mark{padding:0 2px; border-radius:3px; background:var(--hb-tint); color:var(--hb-ink); font-weight:600}
.hb-qsearch{max-width:560px}
.hb-resultline{margin-top:24px; font-size:14px; color:var(--hb-ink-2)}
.hb-resultline + section .hb-head{margin-top:14px}
.hb-locked{max-width:720px}
.hb-peek{margin-top:24px}
.hb-peek h2{margin-top:8px; font:600 17px/24px var(--hb-display); letter-spacing:-.01em}
.hb-pill{display:inline-flex; align-items:center; gap:6px}
.hb-pill svg{width:14px; height:14px; flex:0 0 14px}
/* the resource head's facts wrap as one line of text, links included */
.hb-res .hb-pagehead .hb-meta{display:block}
.hb-doc .hb-prompt ol.hb-prompt-list:not(.hb-toc){margin:0; padding:0}  /* outweighs the body list rule in hub.css */

/* ---------- Tools, Account, Help, locked and expired, joining from inside the app ---------- */
.hb-tsec[hidden], .hb-tool[hidden]{display:none}
.hb-me form{flex:none}
.hb-later{display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px}
.hb-arow .hb-glyph, .hb-qa .hb-glyph{color:var(--hb-cyan)}
.hb-faq{max-width:720px; margin-top:24px; background:var(--hb-surface); border:1px solid var(--hb-line); border-radius:12px; box-shadow:var(--hb-shadow)}
.hb-qa{display:flex; gap:16px; align-items:flex-start; padding:18px 20px}
.hb-qa + .hb-qa{border-top:1px solid var(--hb-line)}
.hb-qa .hb-glyph svg{width:20px; height:20px}
.hb-qa h2{font:600 17px/24px var(--hb-display); letter-spacing:-.01em}
.hb-qa p{margin-top:4px; max-width:64ch; color:var(--hb-ink-2)}
.hb-view .hb-qa p a{color:var(--hb-link); font-weight:600}
.hb-view .hb-qa p a:hover{text-decoration:underline; text-underline-offset:3px}
.hb-glyph.hb-lockmark{width:48px; height:48px; margin-bottom:16px}
.hb-lockmark svg{width:24px; height:24px}
.hb-lockmark.off{background:rgba(154,91,0,.1); color:#9A5B00}
:root[data-theme="dark"] .hb-lockmark.off{color:#F2B860}
.hb-locked > .hb-acts{padding-top:20px}
.hb-locked .hb-note .hb-acts{padding-top:14px}
.hb-locked .hb-access{max-width:none}
.hb-joincard{max-width:420px; margin-top:24px}
.hb-joincard form{display:flex; flex-direction:column; gap:8px}
.hb-joincard .hb-meta{margin:0 0 6px}
.hb-joincard label{font-weight:600; font-size:14px}
.hb-code{min-height:46px; padding:0 14px; border:1px solid var(--hb-line-strong); border-radius:10px; background:var(--hb-surface); color:var(--hb-ink); font:600 24px var(--hb-font); letter-spacing:.35em; text-align:center}
.hb-joincard .hb-acts{padding-top:10px}
@media (max-width:640px){
  .hb-qa{padding:16px}
  .hb-arow{padding:14px 16px}
  .hb-me{flex-wrap:wrap}
  .hb-card.hb-me > div{flex-basis:calc(100% - 64px)}
}
.hb-meta.hb-when{flex-wrap:nowrap; align-items:flex-start}
.hb-meta.hb-when > svg{margin-top:3px}
.hb-joincard input[type=text]{min-height:46px; padding:0 14px; border:1px solid var(--hb-line-strong); border-radius:10px; background:var(--hb-surface); color:var(--hb-ink); font:400 16px var(--hb-font)}

/* ---------- session pages for guests (templates/live/guest_base.html) ---------- */
/* No library and no menu: a slim bar with the logo, the guest's name and the theme switch. */
.gs{min-height:100vh; background:var(--hb-paper); color:var(--hb-ink)}
.gs-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; padding:8px 40px; background:var(--hb-surface); border-bottom:1px solid var(--hb-line); font-family:var(--hb-font)}
.gs-bar .sb-brand{padding:0; gap:4px}
.gs-bar .sb-brand img{width:118px}
.gs-bar .sb-acad{font-size:10px}
.gs-acts{display:flex; align-items:center; gap:12px; min-width:0}
.gs-me{display:flex; align-items:center; gap:10px; min-width:0}
.gs-me .sb-who b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:28ch}
.gs-btn{width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:10px; border:1px solid var(--hb-line); background:var(--hb-surface); color:var(--hb-ink)}
.gs-btn:hover{border-color:var(--hb-line-strong)}
.gs-btn svg{width:20px; height:20px}
.gs-page{max-width:1192px; margin:0 auto; padding:28px 40px 72px}
.gs .crumbs{margin-bottom:16px; font-size:13px}
.gs .crumbs a{color:var(--hb-ink-2)}
.gs .crumbs a:hover{color:var(--hb-link)}
.gs .crumbs .sep{color:var(--hb-ink-2); margin:0 2px}
.gs .ex-page{--ex-top-h:0px}  /* the bar scrolls away with the page */
@media (max-width:640px){
  .gs-bar{padding:8px 16px}
  .gs-me .sb-av{display:none}
  .gs-me .sb-who b{max-width:14ch}
  .gs-page{padding:20px 16px 56px}
}
.gs-keep{margin-top:32px}
.gs-keepform{display:flex; flex-direction:column; gap:6px; margin-top:14px; max-width:560px}
.gs-keepform label{font-weight:600; font-size:14px}
.gs-keeprow{display:flex; flex-wrap:wrap; gap:8px}
.gs-keeprow input{flex:1 1 220px; min-width:0; min-height:44px; padding:0 14px; border:1px solid var(--hb-line-strong); border-radius:10px; background:var(--hb-surface); color:var(--hb-ink); font:400 16px var(--hb-font)}
.gs-keeprow .hb-btn{min-height:44px}
.hb-note p.gs-fine{margin-top:10px; font-size:14px}