/* "Dive deeper" side panel — full-length case-study copy in a right slide-over.
   Tokens only (--bg/--ink/--muted/--line); --ink2/--ink3 are undefined repo-wide
   and resolve to a theme-blind #888, so they are deliberately not used here. */

/* the source of the panel's copy never renders in the page itself */
.cs-full { display: none; }

/* ── trigger, in the rail ────────────────────────────────────────────────── */
/* matches the site's text-link treatment (.cs-back, .cs-rail-nav a, .cs-site) */
.cs-deeper {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 0; background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); transition: color .2s;
}
.cs-deeper:hover { color: var(--ink); }
.cs-deeper::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.cs-deeper:hover::after { transform: scaleX(1); }
html[data-theme="light"] .cs-deeper:hover { color: var(--accent-light); }
html[data-theme="light"] .cs-deeper::after { background: var(--accent-light); }

/* ── scrim ───────────────────────────────────────────────────────────────── */
/* light by design: the screens behind the panel stay readable */
.cs-panel-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: color-mix(in oklab, var(--bg) 20%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity .24s ease, visibility 0s linear .24s;
}
.cs-panel-scrim.open {
  opacity: 1; visibility: visible;
  transition: opacity .24s ease, visibility 0s;
}

/* ── panel ───────────────────────────────────────────────────────────────── */
/* z-index clears .site-header (50) and .cs-chapterbar (40).
   Left edge on purpose: it lands over the rail, whose copy is the short version
   of what the panel is showing, and leaves the work on the right uncovered. */
.cs-panel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
  width: 520px; max-width: 100vw;
  display: flex; flex-direction: column;
  background: var(--bg); border-right: 1px solid var(--line);
  box-shadow: 0 0 4px rgba(0, 0, 0, .10);
  transform: translateX(-100%); visibility: hidden;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .2s;
}
.cs-panel.open {
  transform: none; visibility: visible;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}

/* header */
.cs-panel-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 32px 16px; border-bottom: 1px solid var(--line);
}
.cs-panel-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.cs-panel-close {
  width: 40px; height: 40px; margin: -8px -10px -8px 0; padding: 0;
  display: grid; place-items: center; border: none; border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer;
  transition: color .2s, background-color .2s;
}
.cs-panel-close:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 8%, transparent); }
.cs-panel-close svg { width: 16px; height: 16px; }

/* keyboard affordance that follows the shapes, not the UA default square */
.cs-panel-close:focus-visible,
.cs-panel-tabs button:focus-visible,
.cs-panel-foot a:focus-visible,
.cs-panel-foot button:focus-visible,
.cs-deeper:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; color: var(--ink);
}
.cs-panel-close:focus-visible { outline-offset: -2px; border-radius: 8px; }
.cs-panel-close:focus:not(:focus-visible) { outline: none; }

/* tab bar — scrolls sideways rather than wrapping */
.cs-panel-tabs {
  flex: none; display: flex; gap: 15px; padding: 14px 32px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.cs-panel-tabs::-webkit-scrollbar { display: none; }
.cs-panel-tabs button {
  position: relative; flex: none; padding: 0 0 12px; border: none; background: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
  cursor: pointer; transition: color .3s;
}
.cs-panel-tabs button:hover:not(:disabled) { color: var(--ink); }
.cs-panel-tabs button[aria-selected="true"] { color: var(--ink); }
.cs-panel-tabs button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.cs-panel-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.cs-panel-tabs button:disabled { opacity: .38; cursor: default; }

/* body — the only scroller; house recipe from .cs-chapter-texts */
.cs-panel-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; padding: 28px 32px 40px;
}
.cs-panel-body::-webkit-scrollbar { display: none; }

/* When the copy outgrows the panel, reveal the scrollbar and fade the bottom
   edge so it reads as "more below" rather than a slice through a line of type.
   The fade lifts once you have scrolled to the end. Same recipe as the rail. */
.cs-panel.body-overflows .cs-panel-body {
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
}
.cs-panel.body-overflows.body-end .cs-panel-body {
  -webkit-mask-image: none; mask-image: none;
}
.cs-panel.body-overflows .cs-panel-body::-webkit-scrollbar { display: block; width: 3px; }
.cs-panel.body-overflows .cs-panel-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.cs-panel.body-overflows .cs-panel-body::-webkit-scrollbar-track { background: transparent; }

.cs-panel-sections > [data-ch] { display: none; }
.cs-panel-sections > [data-ch].active { display: block; animation: cs-panel-fade .1s ease; }
@keyframes cs-panel-fade { from { opacity: 0 } to { opacity: 1 } }

.cs-panel-sections p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink); }
.cs-panel-sections p + p { margin-top: 17px; }

/* bulleted findings — same type as the prose, indented enough that the markers
   sit clear of the text column rather than hanging into the panel padding */
.cs-panel-sections ul { margin: 17px 0 0; padding-left: 20px; }
.cs-panel-sections li { font-size: 17px; line-height: 1.6; color: var(--ink); }
.cs-panel-sections li::marker { color: var(--muted); }
.cs-panel-sections li + li { margin-top: 8px; }
.cs-panel-sections ul + p { margin-top: 17px; }

/* footer — end of content, not sticky */
.cs-panel-foot {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
}
.cs-panel-foot a, .cs-panel-foot button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; border: none; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); transition: color .2s;
}
.cs-panel-foot a:hover, .cs-panel-foot button:hover { color: var(--ink); }

/* ── mobile: full width, matching the .cs-layout collapse at 900px ───────── */
@media (max-width: 900px) {
  .cs-panel { width: 100vw; border-right: none; }
  .cs-panel-head { padding: 18px 24px 14px; }
  .cs-panel-tabs { padding: 14px 24px 0; }
  .cs-panel-body { padding: 24px 24px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-panel, .cs-panel.open, .cs-panel-scrim, .cs-panel-scrim.open { transition: visibility 0s; }
  .cs-panel-sections > [data-ch].active { animation: none; }
}