/* D4 · session switcher on top of D3. Loads after d3.css; only the switcher lives here.
   body[data-switch] = sheet | drawer | strip (see switcher.js). */

/* ---- shared: badge on the header's lead button ---- */
#swLead { position: relative; color: var(--mid); }
.sw-badge { position: absolute; top: 3px; right: -1px; box-shadow: 0 0 0 2px var(--bg); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font: 600 10px/16px var(--sans); text-align: center; background: var(--line-2); color: var(--ink); display: none; }
.sw-badge.on { display: block; }
.sw-badge.unread { background: var(--clay); color: var(--clay-ink); }

/* ---- shared: panel + list ---- */
.sw-scrim { position: absolute; inset: 0; z-index: 44; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }
.sw-open .sw-scrim { opacity: 1; pointer-events: auto; }
.sw-panel { position: absolute; z-index: 45; display: flex; flex-direction: column; min-height: 0; background: var(--card); color: var(--ink); transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.sw-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 6px 20px; min-height: 52px; }
.sw-ttl { font: 600 17px var(--sans); letter-spacing: -.01em; }
.sw-done { height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--clay); font-weight: 600; }
.sw-grab { display: none; width: 36px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 8px auto 0; }

.sw-search { display: flex; align-items: center; gap: 8px; margin: 2px 12px 6px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--dim); }
.sw-search:focus-within { border-color: var(--line-2); }
.sw-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 15px var(--sans); }
.sw-search input::placeholder { color: var(--dimmer); }
kbd { font: 500 11px var(--mono); color: var(--dimmer); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; margin-left: auto; }

.sw-chips { display: flex; gap: 6px; padding: 2px 12px 6px; overflow-x: auto; scrollbar-width: none; }
.sw-chip { position: relative; flex: none; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--dim); font-size: 13px; }
.sw-chip::after { content: ''; position: absolute; inset: -6px -2px; } /* 44pt target */
.sw-chip.on { background: var(--card-2); border-color: var(--line-2); color: var(--ink); }

.sw-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 8px; overscroll-behavior: contain; }
.sw-h { font: 600 11.5px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--dimmer); padding: 14px 12px 6px; }
.sw-h span { color: var(--clay); margin-left: 4px; }
.sw-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 54px; padding: 7px 12px 7px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; }
.sw-row:hover { background: rgba(255,255,255,.035); }
.sw-row.current { background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.sw-lead { display: grid; place-items: center; }
.sw-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.sw-title { font: 500 14.5px/1.35 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mid); }
.sw-row.current .sw-title, .sw-row.unread .sw-title, .sw-row.running .sw-title { color: var(--ink); }
.sw-row.unread .sw-title { font-weight: 600; }
.sw-sub { display: flex; gap: 5px; font-size: 12.5px; color: var(--dimmer); white-space: nowrap; overflow: hidden; }
.sw-step { font: 12px var(--mono); color: var(--clay); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-arg { color: var(--dim); }
.sw-proj-tag { font-size: 11.5px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.sw-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 0 var(--clay-wash); animation: swp 1.6s infinite; flex: none; }
@keyframes swp { 0% { box-shadow: 0 0 0 0 rgba(122,162,255,.45); } 70%, 100% { box-shadow: 0 0 0 6px rgba(122,162,255,0); } }
.sw-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); flex: none; }
.sw-empty { color: var(--dim); text-align: center; padding: 28px 0; font-size: 14px; }

.sw-new { display: flex; align-items: center; gap: 10px; margin: 6px 12px 12px; height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--clay-wash); color: var(--clay); font-weight: 600; font-size: 14.5px; }
.sw-new:hover { background: rgba(122,162,255,.16); }
.sw-new kbd { color: var(--clay); border-color: rgba(122,162,255,.3); }

/* finished-elsewhere toast with an Open action */
.toast.actionable.show { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; }
.sw-toast b { font-weight: 600; }
.sw-toast-open { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--clay); color: var(--clay-ink); font-weight: 600; font-size: 13px; }

/* ================= SHEET: title opens it ================= */
.sw-title-btn { cursor: pointer; border-radius: 10px; padding: 3px 8px; margin-left: -8px; }
.sw-title-btn:hover { background: var(--card); }
.sw-caret { display: inline-flex; margin-left: 4px; color: var(--dim); vertical-align: -2px; }
.sw-sheet.vp-phone .sw-panel { left: 0; right: 0; bottom: 0; height: 80%; border-radius: 24px 24px 0 0; box-shadow: 0 -20px 60px -20px rgba(0,0,0,.8); transform: translateY(102%); }
.sw-sheet.vp-phone .sw-grab { display: block; }
.sw-sheet.vp-phone.sw-open .sw-panel { transform: none; }
/* desktop: a command palette, ⌘K from anywhere */
.sw-sheet.vp-desktop .sw-panel { left: 50%; top: 72px; width: min(620px, calc(100% - 32px)); max-height: min(560px, calc(100% - 120px)); border-radius: 18px; border: 1px solid var(--line-2); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); opacity: 0; pointer-events: none; transform: translate(-50%, -8px) scale(.985); }
.sw-sheet.vp-desktop.sw-open .sw-panel { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.sw-sheet.vp-desktop .sw-top { display: none; }
.sw-sheet.vp-desktop .sw-search { margin: 10px 10px 4px; border: 0; background: transparent; height: 48px; font-size: 16px; }
.sw-sheet.vp-desktop .sw-search input { font-size: 16px; }
.sw-sheet.vp-desktop .sw-new { margin: 0; border-radius: 0 0 18px 18px; border-top: 1px solid var(--line); background: transparent; }

/* ================= DRAWER: Claude's sidebar ================= */
.sw-drawer .sw-panel { top: 0; bottom: 0; left: 0; width: 86%; max-width: 340px; background: #0e1014; border-right: 1px solid var(--line); transform: translateX(-102%); }
.sw-drawer.sw-open .sw-panel { transform: none; box-shadow: 30px 0 60px -20px rgba(0,0,0,.7); }
.sw-drawer.vp-phone .sw-panel { padding-top: 50px; }
.sw-side-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 18px; min-height: 56px; }
.sw-brand { display: inline-flex; align-items: center; gap: 9px; font: 600 15px var(--sans); }
.sw-brand .glyph { width: 16px; height: 16px; box-shadow: inset 0 0 0 2px var(--clay); vertical-align: 0; }
.sw-drawer .sw-new { margin: 0 12px 8px; }
.sw-collapse { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--dim); }
.sw-collapse:hover { background: var(--card); color: var(--ink); }
.sw-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 12.5px; }
.sw-foot .conn { padding: 0; color: var(--dim); }
.sw-foot-dim { color: var(--dimmer); }
/* desktop: pinned beside the chat; the header button hides it */
.sw-drawer.vp-desktop .sw-panel { width: 288px; max-width: none; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.sw-drawer.vp-desktop.side-pinned { padding-left: 288px; }
.sw-drawer.vp-desktop.side-pinned .sw-panel { transform: none; }
.sw-drawer.vp-desktop.side-pinned #swLead { display: none; }
.sw-drawer.vp-desktop .sw-scrim { display: none; }
.sw-drawer.vp-desktop .sw-row { min-height: 48px; }

/* ================= STRIP: what is live, one row under the title ================= */
.sw-strip .topbar { flex-wrap: wrap; row-gap: 6px; }
.sw-strip-nav, #swStrip { flex: 1 0 100%; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 2px 54px; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.vp-phone #swStrip { padding-left: 0; margin: 0 -4px; }
.sw-pill { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; max-width: 200px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--dim); font-size: 13px; }
.sw-pill::after { content: ''; position: absolute; inset: -5px -2px; }
.sw-pill span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-pill.running, .sw-pill.unread { color: var(--mid); }
.sw-pill.current { background: var(--card-2); border-color: var(--line-2); color: var(--ink); }
.sw-pill.more { color: var(--dimmer); border-style: dashed; }
.sw-strip.is-empty .title { visibility: visible; }
/* the full list: a sheet on the phone, a palette on desktop, like SHEET */
.sw-strip.vp-phone .sw-panel { left: 0; right: 0; bottom: 0; height: 86%; border-radius: 24px 24px 0 0; transform: translateY(102%); }
.sw-strip.vp-phone .sw-grab { display: block; }
.sw-strip.vp-phone.sw-open .sw-panel { transform: none; }
.sw-strip.vp-desktop .sw-panel { left: 50%; top: 104px; width: min(620px, calc(100% - 32px)); max-height: min(560px, calc(100% - 150px)); border-radius: 18px; border: 1px solid var(--line-2); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); opacity: 0; pointer-events: none; transform: translate(-50%, -8px); }
.sw-strip.vp-desktop.sw-open .sw-panel { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

/* direction links in the mock controls */
.sw-dirs a { color: #ccc; padding: 6px 9px; border-radius: 6px; text-decoration: none; }
.sw-dirs a.on { background: #f2f2f2; color: #111; }
.sw-mom { color: #9fd0ff !important; }