/* Oct 8 evening · "How long do you have?" depth prototype (only active with ?depth, see depth.js) */
.depth-pick{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 26px;font-size:13px;color:var(--muted)}
.depth-pick b{font-weight:500;color:var(--ink);margin-right:4px}
.depth-pick button,.depth-more{font:inherit;font-size:12.5px;color:var(--ink);background:transparent;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:999px;padding:6px 13px;cursor:pointer;transition:background .15s ease-out,border-color .15s ease-out}
.depth-pick button:hover,.depth-more:hover{border-color:currentColor}
.depth-pick button[aria-pressed=true]{background:var(--ink);color:var(--bg,#f4f0e6);border-color:var(--ink)}
.depth-pick small{flex-basis:100%;max-width:60ch;font-size:11.5px;opacity:.8}
.depth-more{display:none;margin:28px auto 0}
html[data-depth=quick] .depth-more{display:block}
html[data-depth=quick] section.depth-open .depth-more{display:none}

/* quick: keep titles, decks, the one big visual or interactive per beat, and outcomes */
html[data-depth=quick] :is(
  .phone-intro>p,
  #scroll-lab .scroll-note, #scroll-lab .download-row,
  #offscreen .offscreen-story>p,
  #argos-companion h3~p+p,
  #argos-concept .argos-story>p:not(.interactive-label), #argos-concept .argos-detail,
  #notebook .nb-why, #notebook .nb-plain, #notebook .nb-yours, #notebook .nb-trio,
  #jlab-mobile .jm-problem .jm-copy>p, #jlab-mobile .r-note, #jlab-mobile .jm-track~.jm-track, #jlab-mobile .r-b, #jlab-mobile .jm-try .jm-copy>p:not(.eyebrow),
  #jlab-desktop .jd-problem-text>p, #jlab-desktop .desktop-process-strip, #jlab-desktop .jd-anatomy, #jlab-desktop .jd-ubox-how,
  #past-work .past-process-heading, #past-work .past-process-grid, #past-work .past-range, #past-work .past-cart-intro p:not(.eyebrow),
  .role-notes
):not(.depth-open *){display:none!important}

/* PTC essay links (not part of the depth prototype; lives here to keep tonight's edits in one place) */
.ptc-writing{margin:18px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted);max-width:52ch}
.ptc-writing a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.os-writing{margin-top:14px}
html[data-depth=quick] .os-writing{display:none}

/* About: the X link sits on its own line but its underline only spans the text */
#about a.about-x{width:fit-content}
/* notebook clips: the whole clip is the play target */
.nb2 video.nb-loop{cursor:pointer}

/* opener: disciplines as one quiet line under "Designer" (replaces the strip under the intro) */
#top.desk-opener .do-ident .disc-line span{white-space:nowrap}
#top.desk-opener .do-ident .disc-line{margin:6px 0 14px;font-size:12px;letter-spacing:.01em;color:var(--muted)}

/* ArgOS: show the lock screen still behind the live phone, so it's never a blank white rectangle while the app loads */
section.argos .argos-device .device-scale{background:#1d1f1e url(../stage-assets/argos-lock-still.webp) center/cover no-repeat!important}

/* QA #2: on phones the Unicode copy landed in the 40px arrow column */
@media(max-width:800px){#jlab-desktop #unicode-story .jd-side-title>.jd-side-copy{grid-column:1/-1!important}}

/* QA C1: notebook clip zoom sits on the notebook's own ground, like the image dialog */
dialog.nb-zoom::backdrop{background:var(--zbg,#000c)}
dialog.nb-zoom,dialog.nb-zoom *{outline:none}
dialog.nb-zoom video{max-height:82vh!important}
dialog.nb-zoom .nb-zoom-cap{color:var(--zink,#eee)!important}
dialog.nb-zoom{background:transparent!important;box-shadow:none!important;border:0!important}
dialog.nb-zoom{width:fit-content!important}dialog.nb-zoom video{width:auto!important;max-width:min(94vw,1500px)}

/* Lab App demo phone fallback */
.demo-still{margin:0}.demo-still img{display:block;width:100%;height:auto;border-radius:10px}.demo-still figcaption{font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:8px;max-width:46ch}

/* Oct 9: hand-drawn sketch in the /full About */
.about-sketch{display:block;width:clamp(88px,9vw,120px);height:auto;margin:0 0 18px -6px}
[data-theme=dark] .about-sketch{filter:invert(1) brightness(.92)}