/* GR Studio worked-examples page. Loaded after site.css. */

.hero-compact{
  padding-block:clamp(3rem,7vh,4.5rem);
  border-bottom:1px solid var(--border);
}

/* ---------- demo shell ---------- */
.demo{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1.75rem;
  align-items:start;
  margin-top:1.9rem;
}
.demo-figure{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.1rem;
}
.demo-figure svg{display:block;width:100%;height:auto;}

.control{margin-top:1.35rem;}
.control-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);
}
.control-head output{
  font-size:.95rem;letter-spacing:.04em;color:var(--accent);
  text-transform:none;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;margin-top:.7rem;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:var(--border-strong);border-radius:2px;
}
input[type=range]::-moz-range-track{
  height:2px;background:var(--border-strong);border-radius:2px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;
  background:var(--accent);border:0;margin-top:-6.5px;
}
input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;
  background:var(--accent);border:0;
}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:6px;}

/* ---------- readout ---------- */
.readout{margin:0;}
.readout .spec-row dd{font-variant-numeric:tabular-nums;}
.swatch{
  display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
  margin-right:.5rem;vertical-align:middle;transform:translateY(-1px);
}
.sw-horizon{background:var(--accent);}
.sw-inner{background:rgba(228,162,74,.45);}
.sw-ergo{background:#7A98C0;}
.sw-isco{background:var(--cyan);}
.sw-photon{background:var(--violet);}

.formula{
  font-family:var(--mono);font-size:.86rem;color:var(--muted);
  background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius);padding:.85rem 1.05rem;margin-top:1.35rem;
  overflow-x:auto;white-space:nowrap;
}
.formula b{color:var(--ink);font-weight:400;}

/* ---------- symbolic block ---------- */
.symbolic{
  background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius);padding:clamp(1.3rem,3vw,1.9rem);margin-top:1.9rem;
}
.symbolic h3{
  font-family:var(--mono);text-transform:uppercase;font-size:.7rem;
  letter-spacing:.16em;color:var(--faint);margin:0 0 1rem;font-weight:400;
}
.symbolic dl{margin:0;}
.symbolic .spec-row dd{font-size:.86rem;}

/* ---------- svg strokes ---------- */
.orb{fill:none;vector-effect:non-scaling-stroke;}
.orb-ergo{stroke:#7A98C0;stroke-width:1.2;opacity:.55;}
.orb-horizon{fill:rgba(5,6,9,.92);stroke:var(--accent);stroke-width:1.4;}
.orb-inner{stroke:rgba(228,162,74,.45);stroke-width:1;stroke-dasharray:3 5;}
.orb-isco{stroke:var(--cyan);stroke-width:1.2;}
.orb-isco-ret{stroke:var(--cyan);stroke-width:1;stroke-dasharray:4 5;opacity:.7;}
.orb-photon{stroke:var(--violet);stroke-width:1.1;}
.orb-photon-ret{stroke:var(--violet);stroke-width:1;stroke-dasharray:4 5;opacity:.7;}
.orb-axis{stroke:var(--border);stroke-width:1;}
.orb-label{
  font-family:var(--mono);font-size:9px;fill:var(--faint);
  text-transform:uppercase;letter-spacing:.1em;
}

@media (max-width:820px){
  .demo{grid-template-columns:1fr;}
}

/* ---------- CK-0 equivalence viewer ---------- */
.cases{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.9rem;}
.case-btn{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  background:var(--bg-elev);border:1px solid var(--border);
  border-radius:999px;padding:.5rem 1rem;cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.case-btn:hover{color:var(--ink);border-color:var(--border-strong);}
.case-btn[aria-selected="true"]{color:var(--accent);border-color:rgba(228,162,74,.5);}

.ck-panel{
  background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius);padding:clamp(1.3rem,3vw,2rem);margin-top:1.1rem;
}
.ck-blurb{color:var(--muted);margin:0 0 1.5rem;max-width:62ch;}

.ck-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.ck-metric{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:1rem 1.1rem;background:var(--bg);
}
.ck-metric p.n{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin:0 0 .55rem;
}
.ck-metric p.m{
  font-family:var(--mono);font-size:.88rem;color:var(--ink);margin:0;
  overflow-x:auto;white-space:nowrap;
}

.verdict-row{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:1.5rem;padding-top:1.35rem;border-top:1px solid var(--border);
}
.verdict-badge{
  font-family:var(--mono);font-size:.86rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.45rem 1.1rem;border-radius:999px;
  border:1px solid var(--border);color:var(--muted);
}
.verdict-badge.v-same{color:var(--success);border-color:rgba(131,226,183,.45);}
.verdict-badge.v-different{color:var(--danger);border-color:rgba(255,134,123,.45);}
.verdict-badge.v-indeterminate{color:var(--accent);border-color:rgba(228,162,74,.45);}
.verdict-witness{
  font-family:var(--mono);font-size:.74rem;color:var(--faint);letter-spacing:.05em;
}

.ck-detail{margin-top:1.35rem;}
.ck-detail .spec-row dd{font-size:.78rem;}
.hashline{
  font-family:var(--mono);font-size:.72rem;color:var(--faint);
  margin-top:1.1rem;word-break:break-all;
}
.hashline b{color:var(--success);font-weight:400;}

@media (max-width:700px){ .ck-pair{grid-template-columns:1fr;} }