/* One-screen experiments for the agentic page. Builds on brand.css and the
   article styles in agentic.css (which are scoped to #reader). */
:root{--prose:760px; --hdr:53px}
html,body{height:100%}
html{overflow-y:scroll}  /* same page width as the pages that scroll, so the header does not shift between them */
body.lab{display:flex; flex-direction:column; height:100dvh; overflow:hidden; background:var(--bg-soft)}
body.lab .site-header{position:relative; flex:none}
.lab-main{flex:1; min-height:0; display:flex; flex-direction:column}

/* The article, when shown inside a pane or drawer instead of full screen */
#reader.lab-pane{position:static; inset:auto; opacity:1; visibility:visible; overflow:visible; background:transparent; z-index:auto}
#reader.lab-pane .article{max-width:820px; margin:0 auto; padding:34px 28px 90px}

/* Phase colours on ink: the -light category colours from brand.css */
.p-arch {--ph:var(--cat-teal-light);   --phs:color-mix(in srgb, var(--cat-teal-light) 16%, transparent)}
.p-spec {--ph:var(--cat-slate-light);  --phs:color-mix(in srgb, var(--cat-slate-light) 16%, transparent)}
.p-gen  {--ph:var(--cat-amber-light);  --phs:color-mix(in srgb, var(--cat-amber-light) 16%, transparent)}
.p-val  {--ph:var(--cat-green-light);  --phs:color-mix(in srgb, var(--cat-green-light) 16%, transparent)}
.p-leer {--ph:var(--cat-violet-light); --phs:color-mix(in srgb, var(--cat-violet-light) 16%, transparent)}
.p-human{--ph:var(--cat-grey-light);   --phs:color-mix(in srgb, var(--cat-grey-light) 16%, transparent)}
/* On a light background the pale phase colours need a darker text version */
.on-light.p-arch{--pt:var(--cat-teal)}
.on-light.p-spec{--pt:var(--cat-slate)}
.on-light.p-gen {--pt:var(--cat-amber)}
.on-light.p-val {--pt:var(--cat-green)}
.on-light.p-leer{--pt:var(--cat-violet)}
.on-light.p-human{--pt:var(--cat-grey)}

/* Conviction button: title, the one-line stance, and an always visible "Read" cue */
.cv{display:flex; flex-direction:column; gap:6px; text-align:left; font-family:inherit; cursor:pointer;
    border:1px solid var(--line); border-left:4px solid var(--ph); border-radius:12px; background:#fff;
    padding:12px 14px 11px; box-shadow:0 1px 2px rgba(18,22,29,.05); transition:transform .12s, box-shadow .15s, border-color .15s; color:var(--ink)}
.cv:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(18,22,29,.12); border-color:var(--ph)}
.cv:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.cv .cv-t{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--pt,var(--ph))}
.cv .cv-s{font-size:14.5px; font-weight:700; line-height:1.3; letter-spacing:-.005em; text-wrap:pretty}
.cv .cv-r{margin-top:auto; font-size:12.5px; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:5px}
.cv .cv-r::after{content:"\2192"; transition:transform .15s}
.cv:hover .cv-r::after{transform:translateX(4px)}
.cv.is-on{background:var(--accent-soft); border-color:var(--accent)}

/* Drawer (variants A and C) */
.dw-scrim{position:fixed; inset:0; background:rgba(18,22,29,.35); opacity:0; visibility:hidden; transition:opacity .2s; z-index:60}
.dw{position:fixed; top:0; right:0; bottom:0; width:min(780px,100%); background:var(--bg); z-index:70; display:flex; flex-direction:column;
    transform:translateX(102%); transition:transform .25s ease; box-shadow:-24px 0 60px rgba(18,22,29,.18)}
body.dw-open .dw{transform:none}
body.dw-open .dw-scrim{opacity:1; visibility:visible}
.dw-bar{flex:none; display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); background:#fff}
.dw-bar .dw-t{font-size:13px; color:var(--muted); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lab-btn{background:#fff; border:1px solid var(--line); color:var(--ink); border-radius:9px; padding:7px 12px; cursor:pointer; font-size:13px; font-family:inherit; white-space:nowrap}
.lab-btn:hover{border-color:#c9cfdb; background:var(--bg-soft)}
.lab-btn[disabled]{opacity:.35; cursor:default}
.lab-btn.close{font-weight:700}
.dw-scroll{flex:1; overflow-y:auto; overscroll-behavior:contain}

@media (max-width:700px){
  #reader.lab-pane .article{padding:22px 16px 80px}
}