/* Strategic Intell chapter wheel (computer) and chapter picker (phone), chapters.js. Site DESIGN.md, section 5. */

/* computer (concept "grid"): the chapters as dots on a thin line at the right edge, inside the frame */
.si-dots {
  position: fixed; z-index: 30; right: calc(var(--frame-side, 36px) + 18px); top: 50%; width: 22px; height: min(360px, 52vh);
  transform: translateY(-50%); opacity: 0; transition: opacity 0.6s ease;
}
.si-dots.is-shown { opacity: 1; }
/* the line the dots sit on, and its filled part up to where the reader is */
.si-dots-rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: rgba(255, 255, 255, 0.22); }
.si-dots-fill { width: 100%; height: 0; background: var(--accent); }
.si-dot { position: absolute; left: 0; width: 22px; height: 22px; margin-top: -11px; display: flex; align-items: center; justify-content: center; }
.si-dot-mark {
  width: 7px; height: 7px; border-radius: 50%; background: #070a12; border: 1.5px solid rgba(255, 255, 255, 0.55);
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.si-dot.is-past .si-dot-mark { background: var(--accent); border-color: var(--accent); }
.si-dot.is-current .si-dot-mark { width: 12px; height: 12px; background: var(--accent); border-color: var(--text-main); }
.si-dot:hover .si-dot-mark, .si-dot:focus-visible .si-dot-mark { border-color: var(--text-main); }
/* number and title beside the dot, on pointing (and for a moment when its chapter becomes the current one) */
.si-dot-label {
  position: absolute; right: 30px; top: 50%; display: flex; align-items: baseline; gap: 8px; padding: 6px 10px;
  transform: translate(6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
  background: rgba(7, 10, 18, 0.92); border: 1px solid var(--frame-line, rgba(255, 255, 255, 0.15));
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.si-dot:hover .si-dot-label, .si-dot:focus-visible .si-dot-label, .si-dot.is-flash .si-dot-label { opacity: 1; transform: translate(0, -50%); }
.si-dot-num { font-family: var(--font-head); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--accent); }
.si-dot-name { font-size: 14px; color: var(--text-main); }
.si-dot:focus-visible { outline: none; }

/* phone: the wheel in a sheet from the bottom */
.si-picker-dim { position: fixed; inset: 0; z-index: 60; background: rgba(4, 8, 22, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.si-picker-dim.is-open { opacity: 1; pointer-events: auto; }
.si-picker {
  position: fixed; z-index: 61; left: 8px; right: 8px; bottom: 8px; padding: 14px 16px 18px;
  transform: translateY(calc(100% + 24px)); transition: transform 0.45s var(--ease-out);
}
.si-picker.is-open { transform: none; }
.si-picker-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 2px solid var(--text-main); }
.si-picker-head span { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--text-main); }
.si-picker-head button { min-width: 44px; min-height: 36px; background: none; border: 0; color: var(--text-detail); font-size: 14px; cursor: pointer; }
.si-picker-list { display: flex; flex-direction: column; margin-top: 4px; max-height: calc(100svh - 120px); overflow-y: auto; }
.si-picker-row { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 4px; border-bottom: 1px solid rgba(200, 225, 255, 0.1); color: var(--text-detail); text-decoration: none; }
.si-picker-row:last-child { border-bottom: 0; }
.si-picker-num { width: 22px; font-size: 14px; font-variant-numeric: tabular-nums; }
.si-picker-name { font-size: 16px; color: var(--text-run, #DCE8F8); }
.si-picker-row.is-current { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
.si-picker-row.is-current .si-picker-num { color: var(--accent); }
.si-picker-row.is-current .si-picker-name { font-weight: 600; color: var(--text-main); }

@media (prefers-reduced-motion: reduce) {
  .si-dots, .si-dot-label, .si-dot-mark, .si-picker, .si-picker-dim { transition: none; }
}