/* ==========================================================================
   OgbonMath — Sidebar Workspace Groups
   --------------------------------------------------------------------------
   Styles for the restructured sidebar:
     .sb-foot                     → container (was a grid of 12 buttons)
     .sb-palette-btn              → prominent "Search anything ⌘K" CTA
     .ws-group                    → collapsible workspace section
       .ws-header                 → section label ("Explore", "Review", …)
       .ws-items                  → button list
       .ws-btn                    → styled sidebar button with icon + label
     .ws-more                     → collapsible <details> variant
     .sb-settings                 → pinned-bottom accent button

   All colors via tokens.css — no hardcoded hex.
   Also provides bottom-nav icon sizing to replace inline styles.
   ========================================================================== */

/* ==========================================================================
   Footer container
   ==========================================================================
*/
.sb-foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--bdr);
}

/* ==========================================================================
   Command palette CTA (top of sb-foot, most prominent action)
   ==========================================================================
*/
.sb-palette-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-md);
  color: var(--tx2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}

.sb-palette-btn:hover {
  border-color: var(--bdr2);
  color: var(--tx);
  background: var(--bg4);
}

.sb-palette-icon {
  font-size: 16px;
  color: var(--tx2);
  flex-shrink: 0;
}

.sb-palette-label {
  flex: 1;
  text-align: left;
}

.sb-palette-kbd {
  background: var(--bg);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx2);
}

/* ==========================================================================
   Workspace group
   ==========================================================================
*/
.ws-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-2);
}

.ws-header {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--tx3);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  user-select: none;
}

.ws-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ws-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--tx1);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.ws-btn:hover {
  background: var(--hover-bg);
  color: var(--tx);
}

.ws-btn:active {
  transform: scale(var(--active-scale));
}

.ws-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tx2);
  font-size: 14px;
  flex-shrink: 0;
  transition: color var(--dur-fast);
}

.ws-btn:hover .ws-icon {
  color: var(--ac);
}

.ws-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   "More" group — collapsible <details>
   ==========================================================================
*/
.ws-more {
  /* <details>/<summary> defaults — strip the marker, let ::before handle it */
}

.ws-more > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.ws-more > summary::-webkit-details-marker {
  display: none;
}

.ws-more > summary::before {
  content: "›";
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--tx3);
  transition: transform var(--dur-fast);
  display: inline-block;
}

.ws-more[open] > summary::before {
  transform: rotate(90deg);
}

/* ==========================================================================
   Settings pinned bottom — accent treatment
   ==========================================================================
*/
.sb-settings {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 10px 12px;
  margin-top: var(--sp-2);
  background: transparent;
  border: 1px solid var(--bdr);
  border-radius: var(--radius-md);
  color: var(--tx);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  text-align: left;
}

.sb-settings:hover {
  background: var(--ac-soft);
  border-color: var(--ac);
  color: var(--tx);
}

.sb-settings .ws-icon {
  color: var(--ac);
}

/* ==========================================================================
   Override the old sb-foot grid layout (styles.css originally set this)
   ==========================================================================
   The old sb-foot used a 2-column CSS grid. Our new layout is vertical flex.
   We force overrides so the new structure renders correctly even though the
   older rules in styles.css still target .sb-foot.
*/
.sb-foot {
  grid-template-columns: none !important;
}

.sb-foot > button,
.sb-foot > .ws-group,
.sb-foot > details {
  grid-column: unset !important;
  margin: 0 !important;
}

/* ==========================================================================
   Bottom-nav icon consistency (was inline font-size:20px on each <span>)
   ==========================================================================
*/
#bottom-nav .bn-icon {
  font-size: 22px;
  font-family: var(--font-sans);
  line-height: 1;
  color: var(--tx2);
  transition: color var(--dur-fast);
}

#bottom-nav button.active .bn-icon,
#bottom-nav button:hover .bn-icon {
  color: var(--ac);
}

/* ==========================================================================
   Topbar cleanups that pair with the new .cmdp-trigger in the header
   ==========================================================================
*/
#topbar .tb-btn {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1;
}

/* Back button — accent-bordered, appears when nav history exists.
   Was a 6-property inline style before Phase 4; now fully themed. */
#topbar .tb-back {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ac);
  background: transparent;
  border: 1px solid var(--ac);
  border-radius: var(--radius-md);
  padding: 4px 12px;
  margin-left: var(--sp-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

#topbar .tb-back:hover {
  background: var(--ac-soft);
}

/* The old #b-search had a 🔍 emoji; now it's a pill-shaped ⌘K trigger
   inheriting .cmdp-trigger styles from command-palette.css. */
#b-search.cmdp-trigger {
  margin-left: auto;
  margin-right: var(--sp-2);
}

/* ==========================================================================
   Phase 6 — Sidebar refactor (2026-04-25)
   --------------------------------------------------------------------------
   Inline styles previously baked into renderSidebar() / renderTextbookSidebar()
   are now expressed as CSS classes. New tokens:

     .sb-streak          → compact streak chip living inside .sb-progress
     .sb-library-cta     → primary action button at top of #map (tutor mode)
     .sb-top-row         → horizontal row holding back/library quick actions
     .sb-tutor-back      → "← Tutor" link in textbook mode
     .sb-library-link    → "Library" link beside it in textbook mode
     .sb-book-header     → book title + author block in textbook mode
   ========================================================================== */

/* --- Streak chip inside the existing .sb-progress strip ----------------- */
.sb-progress {
  /* Make room for the chip without breaking the existing flex layout. */
  flex-wrap: nowrap;
}

.sb-streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  margin-left: 6px;
  background: var(--bg);
  border: 1px solid var(--bdr);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tx2);
  white-space: nowrap;
  flex-shrink: 0;
}

.sb-streak-icon {
  font-size: 11px;
  line-height: 1;
}

.sb-streak-val {
  font-family: var(--font-mono, var(--mono));
  color: var(--ac);
}

.sb-streak.is-zero {
  /* When the streak is 0 we dim it instead of hiding — keeps layout stable. */
  opacity: 0.55;
}

/* --- Primary "Open Textbook Library" CTA at top of #map (tutor mode) ---- */
.sb-library-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: calc(100% - 24px);
  margin: 6px 12px 12px;
  padding: 11px 14px;
  background: linear-gradient(135deg, var(--ac), var(--ac-2, var(--ac)));
  color: var(--ac-tx, #fff);
  border: 1.5px solid var(--ac);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold, 700);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--card-sh-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
}

.sb-library-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: var(--card-sh);
}

.sb-library-cta:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.sb-library-cta-icon {
  font-size: 14px;
  line-height: 1;
}

/* --- Top row in textbook mode: "← Tutor"  +  "Library" ------------------- */
.sb-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 6px 12px 10px;
}

.sb-tutor-back,
.sb-library-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: transparent;
  border: 1.5px solid var(--bdr);
  border-radius: var(--radius-md);
  color: var(--tx2);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-bold, 700);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast),
              background var(--dur-fast);
}

.sb-tutor-back:hover,
.sb-library-link:hover {
  border-color: var(--ac);
  color: var(--ac);
  background: var(--ac-soft);
}

/* "You are here" treatment for the Library link when the user is already
   in the cross-textbook library view (S.tbBook == null). The button
   stays clickable (re-rendering the library is harmless and avoids
   the well-known "disabled button" UX pitfall) but visually signals
   that further clicking won't change anything. */
.sb-library-link.is-active,
.sb-library-link.is-active:hover {
  background: var(--ac-soft);
  border-color: var(--ac);
  color: var(--ac);
  cursor: default;
}

/* --- Book title block (textbook mode, below sb-top-row) ------------------ */
.sb-book-header {
  margin: 0 12px 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--ac);
  background: var(--bg3);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.sb-book-title {
  /* h3 in this context is a sidebar landmark heading, not a content
     heading — neutralize the user-agent default margins so it stays
     visually flush inside .sb-book-header. */
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--fw-bold, 700);
  color: var(--tx);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.sb-book-icon {
  font-size: 16px;
  line-height: 1;
}

.sb-book-author {
  margin-top: 3px;
  font-size: 11px;
  color: var(--tx3);
}

/* --- "Library" section header (textbook mode, no book selected) ---------- */
.sb-library-heading {
  padding: 8px 14px 4px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: var(--fw-bold, 700);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ac);
}

/* --- Tweak palette CTA so it reads as button, not search input ----------- */
/* The label changes to action-orientated wording in HTML; the visual tune
   is a slightly stronger border + accent-tinted hover. */
.sb-palette-btn {
  border-width: 1.5px;
}
.sb-palette-btn:hover {
  border-color: var(--ac);
  color: var(--tx);
  background: var(--ac-soft);
}
.sb-palette-btn:hover .sb-palette-icon {
  color: var(--ac);
}

/* ==========================================================================
   Density fixes for narrow viewports
   ==========================================================================
   On phones the sidebar footer used to swallow the textbook tree above it
   and push "Settings & Profile" off-screen. Three small fixes:

     1. Workspace groups (Explore, Review) are now <details class="ws-collapsible">.
        The same chevron treatment as .ws-more, applied via shared rules
        below so summary clickability and visual indicator stay consistent.
        sidebar-density.js removes [open] on viewports ≤ 768px so they
        start collapsed; users can expand with one tap.

     2. .sb-settings is now sticky-bottom. Always one tap away regardless
        of how far the user has scrolled the workspace area. The opaque
        background prevents content bleed through.

     3. Sidebar book-list entries (.li[data-tb-book]) clamp at 2 lines so
        long titles like "Physics-Informed Neural Networks for Exploration
        Seismology" don't run to four lines and wreck the list rhythm.
   ========================================================================== */

/* --- Apply <ws-more> chevron treatment to all collapsible workspace groups */
.ws-collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.ws-collapsible > summary::-webkit-details-marker {
  display: none;
}

.ws-collapsible > summary::before {
  content: "›";
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--tx3);
  transition: transform var(--dur-fast);
  display: inline-block;
}

.ws-collapsible[open] > summary::before {
  transform: rotate(90deg);
}

/* --- Pin Settings & Profile to the bottom of the sidebar viewport.
   The sidebar (#sidebar) is the scroll container, so sticky positions
   relative to it. On phones the fixed bottom-nav (#bottom-nav, 56px tall,
   z-index 1000) sits over the sidebar's bottom edge, so we both pad the
   footer up by the nav height (covers the no-scroll case) AND offset the
   sticky bottom (covers the scrolling case). env(safe-area-inset-bottom)
   handles notched iPhones and Android gesture-nav devices. */
.sb-settings {
  position: sticky;
  bottom: 0;
  background: var(--bg2);
  z-index: 2;
  margin-bottom: calc(-1 * var(--sp-4));
  padding-bottom: 14px;
  border-top: 1px solid var(--bdr);
  border-radius: 0;
}

.sb-settings:hover {
  border-top-color: var(--ac);
}

@media (max-width: 768px) {
  .sb-foot {
    padding-bottom: calc(var(--sp-4) + 56px + env(safe-area-inset-bottom, 0px));
  }
  .sb-settings {
    /* Sticky bottom needs to clear the fixed bottom-nav, otherwise the
       button gets occluded once the sidebar has any scrollable content. */
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    margin-bottom: calc(-1 * (var(--sp-4) + 56px + env(safe-area-inset-bottom, 0px)));
    padding-bottom: 14px;
  }
}

/* --- Two-line clamp for sidebar book entries. Plain .li elements outside
   the textbook list keep their default single-line behaviour because we
   target the data attribute. */
#map .li[data-tb-book] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

/* ==========================================================================
   Library shelf — series-grouped book list with inline progress bars
   ==========================================================================
   Replaces the flat .li list in the cross-textbook library view. Books
   are grouped by their `series:` field (Mathematics / Machine Learning /
   Seismic Series) so the sidebar reads like a shelf. Each entry shows
   icon + title + percent on one row and a thin progress bar underneath.
   ========================================================================== */

.sb-series-group {
  margin-bottom: 14px;
}

.sb-series-group:last-child {
  margin-bottom: 4px;
}

.sb-series-heading {
  margin: 4px 14px 6px;
  font-size: 10px;
  font-weight: var(--fw-bold, 700);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tx3);
}

.sb-book-li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 12px 2px;
  padding: 8px 10px;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
  cursor: pointer;
  transition: background var(--dur-fast), border-left-color var(--dur-fast);
}

.sb-book-li:hover {
  background: var(--hover-bg);
  border-left-color: var(--ac);
}

.sb-book-li:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: -2px;
}

.sb-book-li-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sb-book-li-icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}

.sb-book-li-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--tx);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sb-book-li-pct {
  flex-shrink: 0;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: var(--fw-semibold, 600);
  color: var(--tx3);
  min-width: 28px;
  text-align: right;
}

.sb-book-li-bar {
  height: 3px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
}

.sb-book-li-bar-fill {
  height: 100%;
  background: var(--ac);
  transition: width var(--dur-slow, 240ms) var(--ease-out, ease-out);
}

.sb-book-li:hover .sb-book-li-pct {
  color: var(--ac);
}