/* Shared sidebar styles — v2 "Otto's Quarter" rebuild (2026-05-14).
   ----------------------------------------------------------------------
   The rail is now: brand → nav → Otto's quarter (Otto + Ask Otto pill) →
   identity → utility footer. The bottom stack (Otto/identity/footer) is
   `position: absolute` anchored to the rail's bottom edge; the nav scrolls
   independently above it with reserved padding-bottom. This sidesteps the
   nested flex+grid pin-to-bottom problem and gives Otto a permanent home.

   Blue Chips Mono: cyan #00ffff is the only accent. Otto retains his
   native cyan-head/purple-tentacle palette — the only color break in
   the rail, intentional, because he's the mascot.

   Typography: Inter everywhere (matches design invariant).

   Compat IDs preserved: #sbName, #sbNiche kept so existing legacy
   bootstrap code that calls document.getElementById('sbName').textContent
   still works without changes. */

/* ===== Tokens — single source of truth for every measurement =====
   Edit a value here and it propagates through every rule below. */
.ck-sidebar{
  /* Geometry */
  --rail-w: 260px;

  /* Vertical rhythm */
  --row-h-toplevel: 42px;
  --row-h-child: 34px;
  --row-pad-v: 11px;
  --row-pad-v-child: 8px;
  --row-pad-h: 20px;
  --row-pad-h-child-text: 50px;
  --group-gap: 22px;

  /* Bottom stack (absolute-positioned). Painted Otto + pill + identity
     + footer. The 120px Otto was briefly retired on 2026-05-19 and
     restored the same day — the rail felt visibly empty without him. */
  --otto-h: 120px;
  --otto-button-h: 34px;
  --otto-button-w: 152px;
  --otto-pad-character-button: 20px;
  --otto-pad-button-identity: 20px;
  --identity-h: 48px;
  --footer-h: 92px;
  --reserved-bottom: 268px;

  /* Color tokens — dual-theme, scoped to .ck-sidebar.
     Single-accent cyan: every glow / rail / hover surface resolves
     to #00ffff at varying alpha. No coral. */
  --ck-sb-bg: rgba(10, 10, 15, 0.75);
  --ck-sb-border: rgba(255, 255, 255, 0.08);
  --ck-sb-text: rgba(255, 255, 255, 0.78);
  --ck-sb-text-active: #ffffff;
  --ck-sb-text-meta: rgba(255, 255, 255, 0.45);
  --ck-sb-hover-bg: rgba(255, 255, 255, 0.04);
  --ck-sb-active-bg: rgba(0, 255, 255, 0.08);
  --ck-sb-active-glow-1: rgba(0, 255, 255, 0.65);
  --ck-sb-active-glow-2: rgba(0, 255, 255, 0.35);
  --ck-sb-active-glow-3: rgba(0, 255, 255, 0.18);
  --ck-sb-divider: rgba(255, 255, 255, 0.06);
  --ck-sb-identity-name: rgba(255, 255, 255, 0.92);
  --ck-sb-identity-meta: rgba(255, 255, 255, 0.55);
}
[data-theme="light"] .ck-sidebar{
  --ck-sb-bg: rgba(245, 250, 252, 0.75);
  --ck-sb-border: rgba(14, 31, 38, 0.10);
  --ck-sb-text: rgba(14, 31, 38, 0.72);
  --ck-sb-text-active: #0E1F26;
  --ck-sb-text-meta: rgba(14, 31, 38, 0.50);
  --ck-sb-hover-bg: rgba(14, 31, 38, 0.04);
  --ck-sb-active-bg: rgba(0, 200, 220, 0.10);
  --ck-sb-active-glow-1: rgba(0, 184, 200, 0.85);
  --ck-sb-active-glow-2: rgba(0, 184, 200, 0.45);
  --ck-sb-active-glow-3: rgba(0, 184, 200, 0.18);
  --ck-sb-divider: rgba(14, 31, 38, 0.08);
  --ck-sb-identity-name: #0E1F26;
  --ck-sb-identity-meta: rgba(14, 31, 38, 0.62);
}

/* ===== Sidebar container =====
   Full viewport height (fixed) OR full parent height (when inside
   .ro-layout-sidebar). The bottom stack uses position: absolute, so
   .ck-sidebar must be a positioning context. */
.ck-sidebar{
  display:none;
  position:fixed; top:0; left:0; bottom:0;
  width: var(--rail-w);
  z-index:110;
  background: var(--ck-sb-bg);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-right: 1px solid var(--ck-sb-border);
  flex-direction: column;
  overflow: hidden;            /* nav handles its own overflow */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Inter stylistic alternates — single-storey g, refined r/l/i. Invisible
     at first glance, premium polish at second. Plus subpixel antialiasing
     for crisper rendering on the dark glass. */
  font-feature-settings: "cv11" 1, "ss03" 1, "ss01" 1, "cv05" 1;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media(min-width:768px){
  .ck-sidebar{ display:flex; }
}
.ck-sidebar.force-show{ display:flex; }

/* When the sidebar lives inside the .ro-layout shell, override the
   default fixed-positioning so it fills the sticky column. Use 100vh
   not 100% — the mount-div (#sidebarMount) between .ro-layout-sidebar
   and .ck-sidebar has no explicit height, so `height: 100%` cascades
   to 0/content-height. 100vh bypasses that and reaches the viewport
   directly. */
.ro-layout-sidebar .ck-sidebar,
.ro-layout-sidebar .sidebar {
  position: relative;
  top: auto; left: auto; bottom: auto;
  width: 100%;
  height: 100vh;
  display: flex;
  z-index: auto;
}

/* ===== Brand row ===== */
.ck-sb-brand{
  flex: 0 0 auto;
  height: 64px;
  padding: 0 var(--row-pad-h);
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--ck-sb-border);
}
.ck-sb-brand-otto{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ck-sb-brand-otto svg{ width:30px; height:30px; }
.ck-sb-brand-name{
  font-size: 18px;
  font-weight: 800;
  color: var(--ck-sb-text-active);
  letter-spacing: -.025em;
  /* Use Inter Display sizing optical adjustments — automatic on
     modern browsers when this size triggers display optical. */
  font-optical-sizing: auto;
}

/* ===== Nav =====
   Flex 1 fills space above the absolute bottom stack. Reserved
   padding-bottom prevents nav content from rendering underneath the
   bottom stack — Otto, identity, and footer always sit visually
   above nav scroll content. */
.ck-sb-nav{
  flex: 1 1 0;
  min-height: 0;
  padding: 16px 0 var(--reserved-bottom) 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* ===== Common row treatment ===== */
.ck-sb-item{
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: var(--row-pad-v) var(--row-pad-h);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.003em;
  color: var(--ck-sb-text);
  text-decoration: none;
  border: none; background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s, letter-spacing .15s;
}
/* Tighten letter-spacing slightly on hover — almost imperceptible
   but feels like the type is "leaning in." */
.ck-sb-item:hover{
  letter-spacing: -.006em;
}
.ck-sb-item:hover{
  background: var(--ck-sb-hover-bg);
  color: var(--ck-sb-text-active);
}
.ck-sb-item:focus-visible{
  outline: 2px solid var(--ck-sb-active-glow-1);
  outline-offset: -2px;
}

.ck-sb-item .ck-sb-icon{
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: currentColor;
  display: inline-flex; align-items: center; justify-content: center;
}
.ck-sb-item .ck-sb-icon svg{
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ck-sb-item .ck-sb-label{
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Active state — 2px cyan rail + cyan-tinted gradient bg. */
.ck-sb-item.is-active{
  color: var(--ck-sb-text-active);
  background: linear-gradient(
    90deg,
    var(--ck-sb-active-bg) 0%,
    transparent 100%
  );
}
.ck-sb-item.is-active::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--cyan);
  /* Outer cyan glow — the rail reads as illuminated, not painted on.
     Brightens slightly on hover-active. */
  box-shadow: 2px 0 14px var(--cyan-glow-soft);
  transition: box-shadow .2s ease;
}
.ck-sb-item.is-active:hover::before{
  box-shadow: 2px 0 18px var(--cyan-glow-strong);
}

/* Cross-document view transitions — the cyan rail glides between
   siblings on navigation. Already wired; preserve the naming. */
@view-transition { navigation: auto; }
.ck-sb-item.is-active::before{
  view-transition-name: ck-sb-active-rail;
}
::view-transition-old(ck-sb-active-rail),
::view-transition-new(ck-sb-active-rail){
  animation-duration: .32s;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}

/* ===== Chapter group ===== */
.ck-sb-group{
  position: relative;
}
.ck-sb-group + .ck-sb-group,
.ck-sb-item + .ck-sb-group{
  margin-top: var(--group-gap);
}

/* Group header — two render modes:
     (1) Toggle-only (Otto group, if it returns): button-as-header
     (2) Hybrid (Content/Reach with .href): wrapper div + link + toggle */
.ck-sb-group-header{
  display: flex; align-items: stretch;
  width: 100%;
}
button.ck-sb-group-header{
  gap: 14px;
  align-items: center;
}
/* Section label typography — uppercase typographic marker, not a nav
   row. The chapter is an organizing label; the children below are
   the primary clickable surface. Linear / Stripe / Vercel pattern. */
.ck-sb-group-header .ck-sb-label{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ck-sb-text-meta);
  /* Reset hover letter-spacing override from .ck-sb-item:hover —
     uppercase tracking should stay constant. */
}
.ck-sb-item.ck-sb-group-header:hover .ck-sb-label,
.ck-sb-group-header:hover .ck-sb-label{
  letter-spacing: .14em;
  color: var(--ck-sb-text-active);
}
/* NOTE: chapter headers stay visually identical regardless of whether
   one of their children is active. The child row's own cyan rail +
   lit tributary do all the active-state signaling; the parent header
   doesn't compete. AI STUDIO and AI INTELLIGENCE look the same in
   every state — uppercase typographic markers, end of story. */

.ck-sb-group-header .ck-sb-caret{
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .5;
  transform: rotate(0deg);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .15s ease;
}
button.ck-sb-group-header .ck-sb-caret{
  margin-left: auto;
}
.ck-sb-group.is-open > .ck-sb-group-header .ck-sb-caret{
  transform: rotate(90deg);
  opacity: .85;
}

/* Chapter headers stay visually identical regardless of whether one of
   their children is active. The child row's own cyan rail + lit
   tributary do all the active-state signaling — the parent doesn't
   compete. AI STUDIO and AI INTELLIGENCE look the same in every state:
   quiet uppercase typographic markers. */

/* Hybrid header link + chevron toggle. */
.ck-sb-group-link{
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.ck-sb-group-toggle{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  padding: 0 16px;
  margin: 0;
  color: var(--ck-sb-text);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ck-sb-group-toggle:hover{
  background: var(--ck-sb-hover-bg);
  color: var(--ck-sb-text-active);
}
.ck-sb-group-toggle:focus-visible{
  outline: 2px solid var(--ck-sb-active-glow-1);
  outline-offset: -2px;
}
/* Toggle stays the same color regardless of has-active-child — parent
   header never brightens (see above). */

/* Children collapse panel — grid-template-rows animation. */
.ck-sb-children{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(.2,.7,.2,1);
}
.ck-sb-group.is-open > .ck-sb-children{
  grid-template-rows: 1fr;
}
.ck-sb-children > *{
  min-height: 0;
}
.ck-sb-children{ overflow: hidden; }

/* ===== Child destination row =====
   Tributary lines: a 1px cyan vertical line runs from the chapter
   header down through all children at left:34px, with a 12px horizontal
   stub branching into each child row at left:34px → 46px. Replaces
   the previous bullet dots. River → branches → leaves. Active child's
   line lights solid; siblings stay quiet. */
.ck-sb-child{
  padding: var(--row-pad-v-child) var(--row-pad-h) var(--row-pad-v-child) var(--row-pad-h-child-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.003em;
  color: var(--ck-sb-text);
  position: relative;
  gap: 10px;
}
/* Vertical tributary segment — one per child row, stacks into a
   continuous river line via the run of rows. */
.ck-sb-child::before{
  content: '';
  position: absolute;
  left: 34px; top: 0; bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--ck-sb-active-glow-1) 18%, transparent);
  transition: background .2s ease, box-shadow .2s ease;
}
/* Last child gets a curved end-cap — the river terminates instead
   of bleeding into the next group. */
.ck-sb-child:last-child::before{
  bottom: 50%;
}
/* Horizontal tributary stub — branches from the river into the row. */
.ck-sb-child .ck-sb-bullet{
  position: absolute;
  left: 34px; top: 50%;
  width: 12px; height: 1px;
  background: color-mix(in srgb, var(--ck-sb-active-glow-1) 28%, transparent);
  border-radius: 0;
  transform: translateY(-0.5px);
  transition: background .2s ease, box-shadow .2s ease, width .2s ease;
}
/* Hover lights the row's stub + the segment above it. */
.ck-sb-child:hover::before,
.ck-sb-child:hover .ck-sb-bullet{
  background: color-mix(in srgb, var(--ck-sb-active-glow-1) 60%, transparent);
}
.ck-sb-child:hover .ck-sb-bullet{
  width: 16px;
}
/* Active row: full cyan tributary + glow. */
.ck-sb-child.is-active::before{
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow-soft);
  display: block;  /* override the .ck-sb-item.is-active::before { display:none } from before */
}
.ck-sb-child.is-active .ck-sb-bullet{
  background: var(--cyan);
  width: 16px;
  box-shadow: 0 0 6px var(--cyan-glow-strong);
}
.ck-sb-child.is-active{
  color: var(--ck-sb-text-active);
}

/* "Soon" pill — quiet, no-action affordance. */
.ck-sb-soon-pill{
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ck-sb-active-glow-1) 14%, transparent);
  color: color-mix(in srgb, var(--ck-sb-active-glow-1) 75%, var(--ck-sb-text));
  border: 1px solid color-mix(in srgb, var(--ck-sb-active-glow-1) 22%, transparent);
  margin-left: auto;
  white-space: nowrap;
}
.ck-sb-child.is-soon{ opacity: .82 }
.ck-sb-child.is-soon:hover{ opacity: 1 }

/* ===== Otto's quarter — Otto silhouette + Ask Otto pill button =====
   Absolute-positioned bottom stack. Sits above identity, which sits
   above the utility footer. Each anchored to its own bottom offset
   so the layout doesn't depend on flex calculations. */
/* Otto's quarter — 120px painted Otto sits above the compact "Ask Otto"
   pill. The pill opens the auto-mounted dock on the right; the painted
   Otto IS Otto on the rail — breathing, eye-tracking, hover-EXCITED.
   Briefly removed 2026-05-19 (PR #591) and restored same-day after the
   rail felt visibly empty. */
.ck-sb-otto-quarter{
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--footer-h) + var(--identity-h) + var(--otto-pad-button-identity));
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;       /* let clicks fall through to buttons */
}
.ck-sb-otto-quarter > *{ pointer-events: auto; position: relative; z-index: 1; }
/* Cyan underglow — soft radial gradient painted beneath Otto. Pulses
   with his breathing so he reads as lit from below, anchored in cyan
   light. */
.ck-sb-otto-quarter::before{
  content: '';
  position: absolute;
  left: 50%;
  top: calc(var(--otto-h) * 0.65);
  width: 200px;
  height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--cyan-bg-soft) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: ck-sb-otto-underglow 4s ease-in-out infinite alternate;
}
@keyframes ck-sb-otto-underglow{
  from { opacity: 0.7; }
  to   { opacity: 1.0; }
}

/* Painted Otto — 120px SVG button, breathing, hover-lift. */
.ck-sb-otto{
  width: var(--otto-h);
  height: var(--otto-h);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  margin-bottom: var(--otto-pad-character-button);
  animation: ck-sb-otto-breathe 4s ease-in-out infinite alternate;
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
}
.ck-sb-otto:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
  border-radius: 8px;
}
.ck-sb-otto svg{ width: 100%; height: 100%; display: block; }
.ck-sb-otto:hover{ transform: translateY(-2px); }
.ck-sb-otto:hover svg .otto-arm{
  filter: drop-shadow(0 0 8px var(--cyan-glow));
}
@keyframes ck-sb-otto-breathe{
  from { transform: scale(1.00); }
  to   { transform: scale(1.02); }
}
/* When the pill is hovered, Otto perks up — breathing speeds 4s → 2s. */
.ck-sb-otto-quarter:has(.ck-sb-otto-cta:hover) .ck-sb-otto{
  animation-duration: 2s;
}
@media (prefers-reduced-motion: reduce){
  .ck-sb-otto,
  .ck-sb-otto-quarter::before { animation: none; }
}

/* Ask Otto pill — Blue Chips Mono cyan border + thin label + a small
   right-pointing arrow that hints at the dock's location on the right
   side of the page. Dot is a 6px cyan circle (analogue to the dock's
   collapsed-strip glow). */
.ck-sb-otto-cta{
  height: var(--otto-button-h);
  min-width: var(--otto-button-w);
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--cyan-border-strong);
  background: transparent;
  color: var(--cyan);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .015em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.ck-sb-otto-cta-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan-border-strong);
  flex-shrink: 0;
}
.ck-sb-otto-cta-label{ line-height: 1; }
.ck-sb-otto-cta-arrow{
  font-size: 14px;
  line-height: 1;
  color: var(--cyan-text-action);
  transition: transform .18s ease;
}
.ck-sb-otto-cta:hover{
  background: var(--cyan-bg-soft);
  border-color: var(--cyan);
  box-shadow: 0 0 14px var(--cyan-glow-soft);
}
.ck-sb-otto-cta:hover .ck-sb-otto-cta-arrow{
  transform: translateX(2px);
}
.ck-sb-otto-cta:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.ck-sb-otto-cta:active{
  transform: translateY(1px);
}

/* ===== Identity block — absolute, above the utility footer ===== */
.ck-sb-identity{
  position: absolute;
  left: 0; right: 0;
  bottom: var(--footer-h);
  height: var(--identity-h);
  padding: 12px var(--row-pad-h);
  border-top: 1px solid var(--ck-sb-border);
  box-sizing: border-box;
}
.ck-sb-identity-name{
  font-size: 14px;
  font-weight: 600;
  color: var(--ck-sb-identity-name);
  letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The niche goes italic — handwritten, personal moment. Signals
   "this is YOU, your store." Single typographic break from the
   otherwise-roman ladder of the rail. */
.ck-sb-identity-meta{
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  color: var(--ck-sb-identity-meta);
  margin-top: 3px;
  letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Collapse the identity block when both fields are empty — kills the
   stray dash + phantom border under Sign Out on pages that don't
   pass name/niche. */
.ck-sb-identity:has(> .ck-sb-identity-name:empty):has(> .ck-sb-identity-meta:empty){
  display: none;
}
/* When identity is collapsed, the Otto quarter slides down to its
   slot — Otto + button anchor 24px above the footer instead. */
.ck-sidebar:has(.ck-sb-identity:has(> .ck-sb-identity-name:empty):has(> .ck-sb-identity-meta:empty)) .ck-sb-otto-quarter{
  bottom: calc(var(--footer-h) + var(--otto-pad-button-identity));
}

/* ===== Utility footer — Settings + Sign Out as icons ===== */
.ck-sb-utility-footer{
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: var(--footer-h);
  padding: 10px 24px;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px;
  border-top: 1px solid var(--ck-sb-border);
  box-sizing: border-box;
}
.ck-sb-foot-icons{
  display: flex; align-items: center; justify-content: space-between;
}
/* Policy links — Privacy / Terms / Support. Uses the same meta/active text
   tokens as the icon row so both themes stay AA-readable. */
.ck-sb-policy{
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 1;
}
.ck-sb-policy-link{
  color: var(--ck-sb-text-meta);
  text-decoration: none;
  transition: color .15s ease;
}
.ck-sb-policy-link:hover{ color: var(--ck-sb-text-active); }
.ck-sb-policy-link:focus-visible{
  outline: 2px solid var(--ck-sb-active-glow-1);
  outline-offset: 2px; border-radius: 4px;
}
.ck-sb-policy-sep{ color: var(--ck-sb-border); font-size: 12px; }
.ck-sb-foot-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--ck-sb-text-meta);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.ck-sb-foot-icon svg{
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ck-sb-foot-icon:hover{
  background: var(--ck-sb-hover-bg);
  color: var(--ck-sb-text-active);
}
.ck-sb-foot-icon:focus-visible{
  outline: 2px solid var(--ck-sb-active-glow-1);
  outline-offset: 2px;
}
/* Tooltip on hover. */
.ck-sb-foot-icon[data-tip]::after{
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 200;
}
.ck-sb-foot-icon:hover[data-tip]::after,
.ck-sb-foot-icon:focus-visible[data-tip]::after{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* Theme toggle — button holds both sun + moon SVGs stacked; CSS shows
   the one that represents the action you can take. Dark mode shows the
   sun (= "switch to light"), light mode shows the moon (= "switch to
   dark"). Default behavior treats "no data-theme attribute" as dark. */
.ck-sb-theme-toggle .ck-sb-theme-sun,
.ck-sb-theme-toggle .ck-sb-theme-moon{ display: none; }
.ck-sb-theme-toggle .ck-sb-theme-sun{ display: inline-block; }
[data-theme="light"] .ck-sb-theme-toggle .ck-sb-theme-sun{ display: none; }
[data-theme="light"] .ck-sb-theme-toggle .ck-sb-theme-moon{ display: inline-block; }

/* ===== Divider (only used inside chapter children, if needed) ===== */
.ck-sb-divider{
  height: 1px;
  background: var(--ck-sb-divider);
  margin: 10px var(--row-pad-h);
}

/* ===== Mobile drawer — slightly larger touch target on the pill ===== */
@media (max-width: 768px) {
  .ck-sidebar{
    --rail-w: 280px;
    --row-h-toplevel: 52px;
    --row-h-child: 44px;
    --row-pad-v: 16px;
    --row-pad-v-child: 12px;
    --otto-h: 80px;
    --otto-button-h: 40px;
    --otto-button-w: 176px;
    --otto-pad-character-button: 16px;
    --otto-pad-button-identity: 16px;
    --identity-h: 56px;
    --footer-h: 104px;
    --reserved-bottom: 224px;
    width: var(--rail-w);
  }
  .ck-sb-brand{ height: 64px; }
  .ck-sb-brand-name{ font-size: 17px; }
  .ck-sb-foot-icon{ width: 40px; height: 40px; }
  .ck-sb-foot-icon svg{ width: 22px; height: 22px; }
}

/* ===== Tablet collapse — 64px icon column =====
   Identity hidden, labels hidden, pill hidden (the dock on the right
   is the entry point at this viewport). Footer stacks vertically. */
.ck-sidebar.tablet-collapse{
  --rail-w: 64px;
  width: 64px;
}
.ck-sidebar.tablet-collapse .ck-sb-label,
.ck-sidebar.tablet-collapse .ck-sb-brand-name,
.ck-sidebar.tablet-collapse .ck-sb-identity,
.ck-sidebar.tablet-collapse .ck-sb-caret,
.ck-sidebar.tablet-collapse .ck-sb-soon-pill,
.ck-sidebar.tablet-collapse .ck-sb-children,
.ck-sidebar.tablet-collapse .ck-sb-otto-quarter{ display: none; }

.ck-sidebar.tablet-collapse .ck-sb-brand{
  padding: 16px 0;
  justify-content: center;
}
.ck-sidebar.tablet-collapse .ck-sb-item{
  justify-content: center;
  padding: 12px 0;
}
.ck-sidebar.tablet-collapse .ck-sb-item .ck-sb-icon{ margin: 0; }
.ck-sidebar.tablet-collapse .ck-sb-child{ padding: 0; }
.ck-sidebar.tablet-collapse .ck-sb-divider{ margin: 10px 12px; }

.ck-sidebar.tablet-collapse .ck-sb-utility-footer{
  flex-direction: column;
  height: auto;
  padding: 10px 0;
  gap: 8px;
  justify-content: center;
}

/* ===== Layout offset compatibility =========================
   Consuming pages set `margin-left: 260px` on content wrappers at
   >=768px. The fixed sidebar width is 260px so layout offsets line up. */