/* ═══════════════════════════════════════════
   OBSERVATORY — Demo Page Styles (Dark Theme)
   ═══════════════════════════════════════════ */

/* ── Demo shell ── */
.demo{
  max-width:940px;width:100%;margin:0 auto;
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--bg);
  overflow-x:hidden;
  padding-bottom:80px;
}

/* ── Two-column body ── */
.demo-body{
  display:grid;grid-template-columns:1fr 48px 1fr;
  padding:28px;gap:0;
  min-height:200px;
}
.demo-body .col-label{
  font-family:var(--ff-mono);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-sub);margin-bottom:12px;
}

/* ── Context line ── */
.ctx{
  font-family:var(--ff-body);font-size:15px;font-style:italic;
  color:var(--text-sub);line-height:1.55;text-align:center;
  opacity:0;transition:opacity .8s ease-out;
  margin-bottom:16px;grid-column:1 / -1;
}
.ctx.visible{opacity:1}

/* ── Center divider ── */
.center-mark{
  display:flex;align-items:center;justify-content:center;position:relative;
}
.center-mark::before{
  content:'';position:absolute;top:8%;bottom:8%;left:50%;
  width:1px;background:var(--border);
}
.center-arrow{
  position:relative;z-index:1;font-size:18px;color:var(--text-dim);
  background:var(--bg);padding:6px 0;line-height:1;
}

/* ── Evidence column ── */
/* top:52px accounts for sticky nav height (~42px + padding) */
.evidence{display:flex;flex-direction:column;min-width:0;position:sticky;top:52px;align-self:start}
.evidence-list{display:flex;flex-direction:column;gap:8px;padding-right:8px}

.art{
  background:var(--s2);
  border:1px solid var(--border-hi);border-radius:5px;
  padding:12px 14px;
  font-family:var(--ff-mono);font-size:13px;font-weight:400;
  color:var(--text-sub);line-height:1.6;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s ease-out,transform .5s ease-out,border-color .4s,box-shadow .4s;
  word-break:break-word;
}
.art.visible{opacity:1;transform:translateY(0)}
.art .art-type{font-size:12px;font-weight:500;color:var(--text-dim);display:block;margin-bottom:3px}
.art.hl{border-color:currentColor;box-shadow:0 0 0 1px currentColor}

/* ── Evaluation column ── */
.evaluation{display:flex;flex-direction:column;min-width:0}
.eval-list{display:flex;flex-direction:column;gap:10px;padding-left:8px}

.claim{
  background:var(--s2);
  border:1px solid var(--border-hi);border-radius:5px;
  padding:14px 16px;
  opacity:0;transform:translateY(8px);
  transition:opacity .6s ease-out,transform .6s ease-out;
}
.claim.visible{opacity:1;transform:translateY(0)}
.claim-label{
  font-family:var(--ff-mono);font-size:12px;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px;
}
.claim-text{
  font-family:var(--ff-body);font-size:15px;font-weight:400;font-style:italic;
  color:var(--text);line-height:1.5;
}
.claim-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.claim-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.claim-state{
  font-family:var(--ff-mono);font-size:14px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.claim-evidence{
  font-family:var(--ff-mono);font-size:12px;font-weight:300;
  color:var(--text-sub);line-height:1.5;
}

/* ── Standard practice box ── */
.sp-box{
  background:rgba(82,168,120,0.06);padding:10px 14px;
  border-radius:4px;margin-top:10px;opacity:0.8;
}
.sp-head{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.sp-label{
  font-family:var(--ff-mono);font-size:12px;font-weight:400;
  letter-spacing:.10em;text-transform:uppercase;color:var(--text-dim);
}
.sp-result{font-family:var(--ff-mono);font-size:12px;font-weight:500;color:rgba(82,168,120,0.8)}
.sp-just{font-family:var(--ff-body);font-size:13px;font-style:italic;color:var(--text-sub);line-height:1.5}

/* ── OBSERVATORY reveal section ── */
.obs-section{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s ease-out,opacity .5s ease-out;margin-top:0;
}
.obs-section.revealed{max-height:200px;opacity:1;margin-top:10px}
.obs-label{
  font-family:var(--ff-mono);font-size:12px;font-weight:400;
  letter-spacing:.10em;text-transform:uppercase;color:var(--text-dim);
}
.obs-result{border-radius:5px;padding:12px 14px;border-left:3px solid}

/* ── Value proposition ── */
.vp{
  flex-shrink:0;padding:0 28px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height 1.2s ease-out,padding 1.2s ease-out,opacity 1s ease-out;
}
.vp.visible{max-height:300px;padding:28px;opacity:1}
.vp-box{
  background:var(--s2);border:1px solid var(--border-hi);border-radius:6px;
  padding:20px 24px;
}
.vp-en{
  font-family:var(--ff-body);font-size:16px;font-weight:400;
  color:var(--text);line-height:1.6;font-style:italic;
}
.vp-t5{
  font-family:var(--ff-mono);font-size:12px;letter-spacing:0.06em;
  color:var(--text-dim);text-align:center;margin-top:14px;
}

/* ── Engine metadata ── */
.engine-meta{
  padding:0 28px;margin-top:4px;
  opacity:0;transition:opacity .8s ease-out;
}
.engine-meta.visible{opacity:1}
.engine-meta-inner{
  font-family:var(--ff-mono);font-size:12px;color:var(--text-dim);
  line-height:1.8;text-align:center;letter-spacing:.04em;padding:8px 20px;
}
.engine-meta-hash{word-break:break-all}

/* ── Demo footer status bar ── */
@keyframes ftr-line{from{width:0}to{width:100%}}
@keyframes replay-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.demo-ftr{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 28px;
  background:var(--bg);
  font-family:var(--ff-mono);font-size:12px;letter-spacing:0.06em;
  color:var(--text-dim);
  flex-shrink:0;white-space:nowrap;position:relative;
  opacity:0;transition:opacity .5s ease-out;
}
.demo-ftr::before{
  content:'';position:absolute;top:0;left:0;
  width:0;height:1px;background:rgba(255,255,255,0.06);
}
.demo-ftr.complete{opacity:1}
.demo-ftr.complete::before{animation:ftr-line .8s ease-out forwards}
.demo-ftr-back{
  font-family:var(--ff-mono);font-size:12px;font-weight:400;color:var(--text-sub);
  background:none;border:none;padding:0;
  cursor:pointer;letter-spacing:0.06em;text-decoration:none;
  opacity:0;pointer-events:none;transition:opacity .5s,color .2s;
}
.demo-ftr-back.visible{opacity:1;pointer-events:auto}
.demo-ftr-back:hover{color:var(--text)}
.demo-ftr-stat{letter-spacing:0.06em;flex:1;text-align:center}
.demo-ftr-replay{
  font-family:var(--ff-mono);font-size:12px;font-weight:400;color:var(--st-asserted);
  background:none;border:none;padding:0;
  cursor:pointer;letter-spacing:0.06em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .5s,color .2s;
}
.demo-ftr-replay.visible{opacity:1;pointer-events:auto}
.demo-ftr-replay:hover{color:#6bca98}
.demo-ftr-replay.visible:hover{animation:replay-pulse 2s ease-in-out infinite}

/* ── Responsive ── */
@media(max-width:700px){
  .demo{min-height:auto}
  .demo-body{grid-template-columns:1fr;gap:16px;padding:16px;overflow:visible;flex:none;min-height:auto}
  .center-mark{display:none}
  .evidence{position:static;align-self:auto}
  .evidence-list,.eval-list{padding:0;overflow:visible;flex:none}
  .art{font-size:12px;word-break:break-all}
  .claim{padding:12px}
  .vp.visible{max-height:340px;padding:24px 16px}
}
@media(max-width:500px){
  .demo-body{padding:12px}
  .art{font-size:12px;padding:8px 10px;line-height:1.5}
  .art .art-type{font-size:12px}
  .claim{padding:10px 12px}
  .claim-text{font-size:13px}
  .claim-evidence{font-size:12px}
  .claim-state{font-size:12px}
  .demo-ftr{padding:10px 16px;font-size:12px;white-space:normal}
  .vp-en{font-size:14px}
  .sp-box{padding:8px 10px}
  .sp-just{font-size:12px}
  .obs-label,.sp-label{font-size:12px}
  .ctx{font-size:13px}
  #hdr-reg{display:none}
}