/* UniCheatSheet — Course Hub additions. Loaded after style_lecture.css and only uses its tokens: everything not
   styled here (header, menu, search, sliders, cards, hover labels, viewer modal) is the lecture page as it is. */

/* Course title: the page-title treatment, sized for long course names instead of the two-word type name */
.hub-title .lecture-notes-title { font-size: clamp(1.55rem, 5.4vw, 3.1rem); letter-spacing: clamp(1px, .5vw, 4px); line-height: 1.15; max-width: 22ch; margin: 0 auto; text-wrap: balance; padding: 10px 16px 14px; }
.hub-title .lect-sem { font-size: clamp(1.05rem, 3.4vw, 1.6rem); }
.header-wrapper:has(.hub-title) { min-height: 0; padding-top: calc(var(--header-height) + 8px); }

/* One sticky bar: Courses (switch course) + jump between the three resource types. Replaces a separate chip row,
   so the first resources start higher and switching stays one tap away anywhere on the page. */
.hub-bar { position: sticky; top: var(--header-height); z-index: 20; display: flex; align-items: center; gap: 6px; padding: 8px 4px; margin: 6px -4px 0;
  background: rgba(5, 8, 16, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.hub-tabs { display: flex; gap: 6px; flex: 1 1 auto; justify-content: center; min-width: 0; }
.hub-tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--text-primary); text-decoration: none;
  font-weight: 600; font-size: .95rem; white-space: nowrap; border: 1px solid transparent; transition: border-color var(--transition-fast), background var(--transition-fast); }
.hub-tabs a span { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 700; }
.hub-tabs a:hover, .hub-tabs a[aria-current="true"] { border-color: var(--border-hover); background: var(--accent-dim); }
.hub-tabs a.is-empty { color: var(--text-secondary); }
.hub-tabs a.is-empty span { color: inherit; }

/* Courses: the semester's courses in the homepage pill language, in a panel under the bar */
.hub-switch { position: static; flex: 0 0 auto; }
.hub-switch > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.3); background: var(--surface); color: #fff; font-weight: 600; font-size: .92rem;
  -webkit-tap-highlight-color: transparent; transition: border-color var(--transition-fast), background var(--transition-fast); }
.hub-switch > summary::-webkit-details-marker { display: none; }
.hub-switch > summary svg { color: var(--accent); flex: 0 0 auto; }
.hub-switch > summary .hub-chev { color: var(--text-secondary); transition: transform var(--transition-fast); }
.hub-switch[open] > summary .hub-chev { transform: rotate(180deg); }
.hub-switch > summary:hover, .hub-switch[open] > summary { border-color: var(--accent); background: var(--accent-dim); }
.hub-switch-panel { position: absolute; left: 4px; right: 4px; top: calc(100% + 6px); max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  padding: 14px; border-radius: var(--radius-md); background: #080c16; border: 1px solid var(--border-hover); box-shadow: 0 18px 48px rgba(0, 0, 0, .55); }
.hub-switch-h { margin: 0 0 10px; font-size: .78rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-secondary); }
.hub-switch-sub { margin: 12px 0 6px; font-size: .7rem; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-secondary); }   /* paid: a semester line, only when the account has courses in more than one */
.hub-switch-panel ul + .hub-switch-sub { margin-top: 14px; }
.hub-switch-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hub-switch-panel .sem-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; text-decoration: none; }
.hub-chip.is-active { cursor: default; }
.hub-sem { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 4px; color: var(--accent); font-weight: 600; font-size: .9rem; text-decoration: none; }
.hub-sem:hover { text-decoration: underline; }
.hub-tabs a:focus-visible, .hub-switch > summary:focus-visible, .hub-switch-panel a:focus-visible, .hub-continue:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Each type keeps the lecture page's section heading; less air above it than between unrelated courses */
.content-slider.hub .hub-type > h2 { margin-top: 38px; scroll-margin-top: calc(var(--header-height) + 70px); }
.content-slider.hub .hub-type:first-of-type > h2 { margin-top: 26px; }
.hub-type { scroll-margin-top: calc(var(--header-height) + 64px); }
.hub-count { margin-left: 8px; color: var(--accent); font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.hub-sub { margin: 20px 0 10px; padding: 0 4px; font-size: .95rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 1px; text-transform: uppercase; }

/* Empty type: one quiet line, never an empty carousel */
.hub-empty { margin: 0; padding: 16px 20px; border-radius: var(--radius-md); border: 1px dashed var(--border); color: var(--text-secondary); font-size: .95rem; }

/* Course notice: information, not a warning */
.hub-note { margin: 0 0 16px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); }
.hub-note p { margin: 0; color: var(--text-secondary); font-size: .95rem; line-height: 1.55; max-width: 68ch; }
.hub-note .hub-note-t { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--text-primary); font-weight: 600; }
.hub-note svg { flex: 0 0 auto; color: var(--accent); }

/* A card that opens a collection (Drive folder), not one PDF: same card, typed */
.slide--folder::after { content: "Folder"; position: absolute; top: 10px; left: 10px; z-index: 4; padding: 4px 10px 4px 26px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .3px; color: #001018; background: var(--accent) no-repeat 8px 50% / 13px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001018' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }

/* Non-PDF cards the master links directly (a Google Doc, an external tool): same card, same pill, typed */
.slide--doc::after, .slide--link::after { position: absolute; top: 10px; left: 10px; z-index: 4; padding: 4px 10px 4px 26px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .3px; color: #001018; background: var(--accent) no-repeat 8px 50% / 13px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001018' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); }
.slide--doc::after { content: "Google Doc"; }
.slide--link::after { content: "External"; }

/* Paid: continue where you left off in this course */
.hub-continue { display: flex; flex-direction: column; gap: 2px; max-width: 520px; margin: 6px auto 4px; padding: 12px 18px; border-radius: var(--radius-md); text-decoration: none;
  background: var(--accent-dim); border: 1px solid var(--border-hover); color: var(--text-primary); }
.hub-continue-k { font-size: .8rem; color: var(--text-secondary); }
.hub-continue-t { font-weight: 700; }
.hub-continue:hover { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) { .hub-tabs a, .hub-switch > summary, .hub-switch > summary .hub-chev { transition: none; } html { scroll-behavior: auto !important; } }
/* Phones: the bar holds the Courses icon + three tabs at 320px; labels stay real text for screen readers */
@media (max-width: 480px) {
  .hub-bar { gap: 4px; }
  .hub-tabs { justify-content: space-between; gap: 2px; }
  .hub-tabs a { padding: 0 9px; font-size: .9rem; gap: 5px; }
  .hub-switch > summary { padding: 0 12px; }
  .hub-switch > summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .content-slider.hub .hub-type > h2 { margin-top: 30px; }
}
/* The homepage's .sem-pill (style.css), carried here because content pages don't load style.css. Same values. */
.hub-switch .sem-pill { font-family: 'Inter', 'Montserrat', system-ui, sans-serif; font-size: clamp(0.78rem, 1.5vw, 0.88rem); font-weight: 600; letter-spacing: 0.3px;
  color: #fff; background: var(--surface); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-sm); padding: 10px 14px; min-height: 44px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: all var(--transition-fast); }
.hub-switch .sem-pill:hover { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.hub-switch .sem-pill.is-active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); box-shadow: 0 0 18px rgba(0, 229, 255, 0.12); }

/* Laptops and up: the course name on one line where it fits, the semester right under it, and less air around the
   title, so the first row of resources starts well inside a 1366x768 screen. Type sizes stay the page-title scale. */
@media (min-width: 900px) {
  .header-wrapper:has(.hub-title) { padding-top: 10px; }
  .hub-title .lecture-notes-title { max-width: 46ch; font-size: clamp(1.8rem, 2.3vw, 2.35rem); padding: 4px 16px 8px; }
  .hub-title .lect-sem { font-size: 1.25rem; }
  .content-slider.hub { margin-top: 28px; }
  .content-slider.hub .hub-type:first-of-type > h2 { margin-top: 18px; }
  .hub-switch-panel { left: 50%; right: auto; width: min(760px, calc(100vw - 48px)); transform: translateX(-50%); }
}

/* Courses in the header, between Search and Menu: the Menu button's own material (fill, edge, blur, radius, 44px),
   so the three read as one row of global controls. The panel drops under the header, inside the viewport. */
.header-right .hub-switch { position: relative; }
.header-right .hub-switch > summary { min-height: 44px; padding: 0 16px; border-radius: 6px; color: #fff;
  background-color: rgba(0, 10, 20, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); border-top-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
/* the label is the Menu/Search label: same face, size, weight, tracking and padding */
.header-right .hub-switch > summary { gap: 10px; height: 48px; padding: 0 16px; line-height: 1; font-family: 'Inter', 'Montserrat', system-ui, sans-serif; font-size: 18px; font-weight: 500; letter-spacing: 1px; }
.header-right .hub-switch > summary:hover, .header-right .hub-switch[open] > summary { background-color: rgba(0, 229, 255, 0.08); border-color: rgba(0, 229, 255, 0.3); }
.header-right .hub-switch-panel { position: fixed; top: 76px; right: 16px; left: auto; transform: none; width: min(560px, calc(100vw - 32px)); }
@media (min-width: 900px) { .header-right .hub-switch-panel { right: 40px; left: auto; transform: none; width: min(640px, calc(100vw - 80px)); } }
/* the bar now holds only the course-local tabs: they get the full width */
.hub-bar:not(:has(.hub-switch)) .hub-tabs { justify-content: center; }

/* Phones, Course Hub only: the header carries three controls, so it reads "Search · Courses ▾ · Menu" as compact
   controls — Courses keeps its word (the context switch must be legible), Search and Menu are their icons (44px). */
@media (max-width: 480px) {
  .header-right:has(.hub-switch) { gap: 8px; }
  .header-right .hub-switch > summary { height: 44px; padding: 0 12px; gap: 6px; font-size: 16px; letter-spacing: .5px; }
  .header-right .hub-switch > summary > svg:first-child { display: none; }
  .header-right .hub-switch > summary span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
  .header-right:has(.hub-switch) .hamburger { width: 44px; padding: 0; justify-content: center; }
  .header-right:has(.hub-switch) .hamburger .menu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 360px) {
  .header-right:has(.hub-switch) { gap: 6px; }
  .header-right .hub-switch > summary { padding: 0 10px; gap: 4px; font-size: 15px; letter-spacing: .3px; }
}