/* ============================================================
   SNEAK PEEK — cinematic playthrough of Counsel's redaction.
   Left quarter: the script. Right three quarters: the app,
   a light Slate panel floating on the dark page, driven by a
   camera that zooms and a simulated cursor.
   Design tokens lifted from the Counsel Slate prototype.
   ============================================================ */

.sneak {
  --s-ground:#FFFFFF; --s-side:#EFF0F2; --s-side2:#E6E7EA;
  --s-sheet:#FFFFFF;  --s-well:#F6F6F7;
  --s-line:#E3E4E7;   --s-line2:#CFD1D6;
  --s-ink:#141416;    --s-ash:#6B6E75;  --s-smoke:#9DA0A7;
  --s-gold:#B08D3A;   --s-goldhi:#D3B15C; --s-golddim:rgba(176,141,58,.10);
  --s-paper:#FFFFFF;  --s-pink:#232326; --s-pash:#5A5B60;
  --s-redact:#0B0B0D;
  --s-ok:#4E7A4B;
  --s-ui:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --s-disp:"Newsreader",Georgia,"Times New Roman",serif;
  --s-ease:cubic-bezier(.16,1,.3,1);

  display:grid;
  grid-template-columns:minmax(190px,1fr) 3fr;
  gap:40px; align-items:center;
}
@media (max-width:900px){
  .sneak{grid-template-columns:1fr; gap:24px}
}

/* ============================================================
   THE SCRIPT — left quarter
   ============================================================ */
.sp-caps{position:relative; min-height:230px; display:flex; align-items:center}
@media (max-width:900px){ .sp-caps{min-height:120px} }

.sp-capline{
  position:absolute; left:0; right:0;
  opacity:0; transition:opacity .45s ease;
}
.sp-capline.on{opacity:1}

/* the rule draws itself in */
.sp-capline .rule{
  display:block; width:54px; height:3px; margin-bottom:22px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold-light,#e8c877),var(--gold,#c9a24a));
  box-shadow:0 0 18px rgba(201,162,74,.45);
  transform:scaleX(0); transform-origin:left;
  transition:transform .85s var(--s-ease) .05s;
}
.sp-capline.on .rule{transform:scaleX(1)}

.sp-capline p{
  margin:0; font-family:var(--serif,Georgia,serif); font-weight:600;
  font-size:clamp(28px,2.7vw,43px); line-height:1.1; letter-spacing:-.025em;
  color:var(--ink,#f2ede3); text-wrap:balance;
}
.sp-capline em{
  font-style:normal; color:var(--gold-light,#e8c877);
  text-shadow:0 0 34px rgba(201,162,74,.45);
}

/* words arrive one after another, blurred then sharp — the site's ink motif */
.sp-capline .cw{
  display:inline-block; opacity:0;
  transform:translateY(18px); filter:blur(5px);
  transition:opacity .6s ease, transform .85s var(--s-ease), filter .75s ease;
}
.sp-capline .cw.on{opacity:1; transform:none; filter:none}

/* ============================================================
   THE STAGE — the lit screen
   ============================================================ */
.sp-stage{
  position:relative; width:100%; aspect-ratio:16/10;
  border-radius:14px; overflow:hidden;
  background:var(--s-ground);
  box-shadow:0 2px 6px rgba(0,0,0,.5), 0 40px 120px rgba(0,0,0,.55),
             0 0 0 1px rgba(201,162,74,.16);
  cursor:pointer;
}
.sp-cam{
  position:absolute; left:0; top:0; width:1200px; height:750px;
  transform-origin:0 0; will-change:transform;
  transition:transform 1.35s var(--s-ease);
}

/* simulated cursor */
.sp-cursor{
  position:absolute; left:0; top:0; z-index:14; width:22px; height:22px;
  pointer-events:none; opacity:0;
  transition:transform .95s var(--s-ease), opacity .4s ease;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));
}
.sp-cursor.on{opacity:1}
.sp-cursor svg{width:100%;height:100%;display:block}
.sp-cursor::after{
  content:""; position:absolute; left:-9px; top:-9px; width:40px; height:40px;
  border-radius:50%; border:2px solid rgba(176,141,58,.9);
  opacity:0; transform:scale(.3);
}
.sp-cursor.tap::after{animation:sp-tap .55s ease-out}
@keyframes sp-tap{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(1)}}

/* play / replay curtain */
.sp-ctl{
  position:absolute; inset:0; z-index:16; display:grid; place-items:center;
  background:rgba(8,9,14,.5); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
.sp-ctl.on{opacity:1; pointer-events:auto}
.sp-ctl button{
  display:inline-flex; align-items:center; gap:11px;
  padding:14px 26px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(201,162,74,.5);
  background:rgba(12,14,20,.75); color:#F5F1E8;
  font-family:var(--sans,system-ui,sans-serif);
  font-size:13.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  transition:border-color .3s, background .3s, transform .2s;
}
.sp-ctl button:hover{border-color:var(--s-goldhi); background:rgba(20,23,31,.9); transform:translateY(-1px)}
.sp-ctl svg{width:15px;height:15px;fill:currentColor}

/* ============================================================
   THE APP  (Slate, light)
   ============================================================ */
.sp-app{
  position:absolute; inset:0; display:grid;
  grid-template-columns:232px 1fr; grid-template-rows:52px 1fr;
  background:var(--s-ground); color:var(--s-ink);
  font:14px/1.5 var(--s-ui); -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
.sp-app *{box-sizing:border-box}
/* the page sets colour on bare elements; inside the panel they must inherit
   from their own container, not from the dark site */
.sp-app h1,.sp-app h2,.sp-app h3,.sp-app h4,.sp-app h5,.sp-app h6,
.sp-app p,.sp-app ul,.sp-app ol,.sp-app li,.sp-app em,.sp-app strong{color:inherit}

/* spine */
.sp-spine{
  grid-row:1/-1; background:var(--s-side); border-right:1px solid var(--s-line);
  display:flex; flex-direction:column; padding:14px 10px 12px;
}
.sp-mark{display:flex;align-items:center;gap:10px;height:34px;padding:0 6px;margin-bottom:22px}
.sp-mark span:first-child{width:24px;height:24px;display:block;flex:none}
.sp-mark span:last-child{font:500 12.5px/1 var(--s-disp);letter-spacing:.24em}
.sp-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sp-nav i{
  display:flex;align-items:center;gap:12px;height:38px;padding:0 10px;
  border-radius:9px;color:var(--s-ash);font-style:normal;font-weight:600;font-size:13px;
}
.sp-nav i.on{background:var(--s-sheet);color:var(--s-ink);box-shadow:0 1px 2px rgba(20,20,22,.05)}
.sp-nav i b{width:17px;height:17px;display:grid;place-items:center;flex:none}
.sp-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sp-me{display:flex;align-items:center;gap:10px;height:44px;padding:0 5px;border-radius:10px;margin-top:12px}
.sp-av{width:31px;height:31px;border-radius:50%;background:var(--s-ink);color:var(--s-ground);
  display:grid;place-items:center;font:500 14px/1 var(--s-disp);flex:none}
.sp-me b{display:block;font-size:12.5px;font-weight:600}
.sp-me small{display:block;font-size:11px;color:var(--s-ash)}

/* bar */
.sp-bar{
  grid-column:2; display:flex; align-items:center; justify-content:space-between;
  padding:0 18px 0 22px; border-bottom:1px solid var(--s-line); background:var(--s-ground);
}
.sp-crumb{font:500 14.5px/1 var(--s-disp)}
.sp-seal{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--s-ash)}
.sp-seal .dot{width:7px;height:7px;border-radius:50%;background:var(--s-gold);
  box-shadow:0 0 0 3px var(--s-golddim);flex:none}
.sp-seal span{transition:opacity .45s ease}

/* views */
.sp-view{grid-column:2;position:relative;overflow:hidden}
.sp-pane{position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .6s ease}
.sp-pane.on{opacity:1}

/* home */
.sp-home{align-items:center;justify-content:center;padding:0 40px}
.sp-home .in{width:660px;display:flex;flex-direction:column;align-items:center}
.sp-quill{width:52px;height:52px;margin-bottom:12px;display:block}
.sp-greet{margin:0 0 28px;font:400 42px/1.05 var(--s-disp);letter-spacing:-.01em;text-align:center}
.sp-greet em{font-style:italic;color:var(--s-gold)}

/* composer */
.sp-comp{width:660px}
.sp-sheet{
  background:var(--s-sheet); border:1px solid var(--s-line); border-radius:16px;
  box-shadow:0 1px 2px rgba(20,20,22,.04),0 12px 36px rgba(20,20,22,.07);
  transition:border-color .5s, box-shadow .5s;
}
.sp-sheet.lit{border-color:var(--s-line2);box-shadow:0 2px 4px rgba(20,20,22,.05),0 30px 80px rgba(20,20,22,.14)}
.sp-sheet.sealed{border-color:rgba(176,141,58,.5)}
.sp-text{
  min-height:54px; padding:16px 18px 4px;
  font:400 16.5px/1.5 var(--s-disp); color:var(--s-ink);
  white-space:pre-wrap; word-break:break-word;
}
.sp-text.empty::before{content:attr(data-ph);color:var(--s-smoke)}
.sp-caret{display:inline-block;width:1.5px;height:1.05em;background:var(--s-ink);
  vertical-align:-3px;margin-left:1px;opacity:0}
.sp-caret.on{animation:sp-blink 1.06s step-end infinite}
@keyframes sp-blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* attachment chip */
.sp-attwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--s-ease)}
.sp-attwrap.show{grid-template-rows:1fr}
.sp-attwrap>div{overflow:hidden;min-height:0}
.sp-att{
  display:flex;align-items:center;gap:10px;margin:12px 12px 0;padding:8px 10px;
  border:1px solid var(--s-line);border-radius:10px;background:var(--s-well);
  opacity:0;transform:translateY(6px);transition:opacity .45s .08s,transform .5s var(--s-ease) .08s;
}
.sp-attwrap.show .sp-att{opacity:1;transform:none}
.sp-fi{width:25px;height:31px;border:1px solid var(--s-line2);border-radius:3px;
  display:grid;place-items:center;font:700 7.5px/1 var(--s-ui);color:var(--s-ash);
  flex:none;background:var(--s-paper)}
.sp-att .nm{font-size:12.5px;font-weight:600}
.sp-att .mt{font-size:11px;color:var(--s-ash)}
.sp-att .tg{margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;color:var(--s-ok);white-space:nowrap}
.sp-att .ck{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* composer bottom row */
.sp-sbar{display:flex;align-items:center;gap:6px;padding:6px 10px 10px 14px}
.sp-ib{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--s-smoke)}
.sp-ib svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.sp-ib.hot{color:var(--s-ink);background:var(--s-well)}
.sp-send{
  margin-left:auto; width:36px; height:36px; border-radius:10px;
  background:var(--s-ink); color:var(--s-ground); display:grid; place-items:center;
  position:relative; transition:background .5s, color .5s, transform .2s;
}
.sp-send svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.sp-send.go{background:var(--s-gold);color:#141006}
.sp-send.press{transform:scale(.93)}

/* ============================================================
   THE PREVIEW WINDOW — where the report is read and sealed
   ============================================================ */
.sp-modal{
  position:absolute; inset:0; z-index:10; display:grid; place-items:center;
  background:rgba(14,15,19,.42); backdrop-filter:blur(2.5px);
  opacity:0; pointer-events:none; transition:opacity .55s ease;
}
.sp-modal.on{opacity:1; pointer-events:auto}
.sp-win{
  width:648px; background:var(--s-sheet); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 30px 90px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.12);
  opacity:0; transform:translateY(22px) scale(.965);
  transition:opacity .5s ease, transform .7s var(--s-ease);
}
.sp-modal.on .sp-win{opacity:1; transform:none}
.sp-win__bar{
  display:flex; align-items:center; gap:10px;
  padding:11px 10px 11px 14px; border-bottom:1px solid var(--s-line);
  background:var(--s-well); flex:none;
}
.sp-win__bar .nm{font-size:12.5px;font-weight:600}
.sp-win__bar .mt{font-size:11px;color:var(--s-ash)}
.sp-badge{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  font:600 10.5px/1 var(--s-ui); letter-spacing:.03em; color:var(--s-ash);
  background:var(--s-sheet); border:1px solid var(--s-line); border-radius:99px;
  padding:6px 11px 6px 8px;
  opacity:0; transform:translateY(-3px);
  transition:opacity .4s, transform .45s var(--s-ease), color .4s;
}
.sp-badge.on{opacity:1; transform:none}
.sp-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--s-gold);
  animation:sp-breathe 1.5s ease-in-out infinite;flex:none}
@keyframes sp-breathe{0%,100%{opacity:.3}50%{opacity:1}}
.sp-badge.done{color:var(--s-ok)}
.sp-badge.done .dot{animation:none;background:var(--s-ok)}
.sp-x{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;
  color:var(--s-smoke);flex:none;transition:background .2s,color .2s}
.sp-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sp-x.hot{background:var(--s-side2);color:var(--s-ink)}

/* the report itself */
.sp-doc{background:var(--s-paper); padding:30px 42px 34px;
  font:12.5px/1.6 var(--s-disp); color:var(--s-pink)}
.sp-doc .ttl{font-weight:600;letter-spacing:.12em;font-size:13px;text-align:center;margin-bottom:3px}
.sp-doc .sub{text-align:center;font-style:italic;color:var(--s-pash);margin-bottom:18px;font-size:12px}
.sp-doc .hh{font:600 10.5px/1 var(--s-ui);letter-spacing:.08em;margin:15px 0 6px;color:var(--s-pash)}
.sp-doc .kv{display:grid;grid-template-columns:150px 1fr;gap:2px 14px;padding:2px 0}
.sp-doc .kv .k{color:var(--s-pash);font-style:italic}
.sp-doc p{margin:0 0 6px;text-align:justify}

/* redaction bars: draw left to right, no scanner, no labels */
.rdx{position:relative;white-space:nowrap}
.rdx::after{
  content:"";position:absolute;left:-2px;right:-2px;top:1px;bottom:0;
  background:var(--s-redact);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--s-ease);
}
.rdx.on::after{transform:scaleX(1)}
.rdx.sel{background:rgba(176,141,58,.26);border-radius:2px;
  box-shadow:0 0 0 1px rgba(176,141,58,.55)}

/* the little Redact control that appears on a selection */
.sp-pick{
  position:absolute;z-index:13;display:flex;align-items:center;gap:7px;
  padding:7px 12px 7px 10px;border-radius:9px;
  background:var(--s-ink);color:#F7F5F0;
  font:600 11.5px/1 var(--s-ui);letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  opacity:0;transform:translate(-50%,3px) scale(.94);transform-origin:50% 100%;
  transition:opacity .3s,transform .35s var(--s-ease);pointer-events:none;
}
.sp-pick.on{opacity:1;transform:translate(-50%,0) scale(1)}
.sp-pick::after{content:"";position:absolute;left:50%;bottom:-5px;width:9px;height:9px;
  background:var(--s-ink);transform:translateX(-50%) rotate(45deg);border-radius:1px}
.sp-pick b{width:13px;height:9px;background:#F7F5F0;border-radius:1.5px;display:block;flex:none}

/* ============================================================
   CHAT
   ============================================================ */
.sp-chat{padding:0}
.sp-msgs{flex:1;padding:26px 40px 16px;overflow:hidden}
.sp-msgs .in{width:660px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.sp-msg{opacity:0;transform:translateY(12px);transition:opacity .65s var(--s-ease),transform .75s var(--s-ease)}
.sp-msg.on{opacity:1;transform:none}
.sp-user{display:flex;justify-content:flex-end}
.sp-bub{
  max-width:84%;background:var(--s-well);border:1px solid var(--s-line);
  border-radius:16px 16px 4px 16px;padding:13px 17px;
  font:400 15px/1.55 var(--s-disp);
}
.sp-bub .sp-att{margin:0 0 9px;background:var(--s-sheet);opacity:1;transform:none}
.sp-resp .hd{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--s-smoke);margin-bottom:11px}
.sp-resp .hd span{width:15px;height:15px;display:block;flex:none}
.sp-resp .hd b{font-weight:600;color:var(--s-ash)}
.sp-read{font:400 15.5px/1.65 var(--s-disp)}
.sp-read p{margin:0 0 11px}
.wd{opacity:0;filter:blur(2.5px);color:var(--s-smoke);
  transition:opacity .4s ease,filter .65s ease,color 1.3s ease}
.wd.on{opacity:1;filter:none;color:inherit}

/* ============================================================
   NOTE BENEATH
   ============================================================ */
.sp-note{
  grid-column:1/-1; margin-top:22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.sp-note p{margin:0;font-size:12.5px;color:var(--faint,#8b8f9a);line-height:1.6;max-width:62ch}
.sp-replay{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:8px;
  border:1px solid rgba(201,162,74,.34);background:transparent;color:var(--gold-light,#e8c877);
  font-family:var(--sans,system-ui,sans-serif);font-size:12px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;cursor:pointer;
  transition:border-color .3s,background .3s;
}
.sp-replay:hover{border-color:rgba(201,162,74,.7);background:rgba(201,162,74,.08)}
.sp-replay svg{width:13px;height:13px;fill:currentColor}

@media (max-width:900px){
  .sp-note{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .sp-cam,.sp-cursor,.rdx::after,.wd,.sp-capline{transition:none!important}
  .sp-cursor{display:none}
}