/* TP-COMPONENTS-V1
   Semantic primitives layered on top of tp.css.
   Components describe meaning; page CSS describes placement.
*/

:root{
  --tp-instrument-bg:rgba(17,21,26,.74);
  --tp-instrument-line:var(--tp-struct);
  --tp-instrument-active:var(--tp-green);
  --tp-instrument-intelligence:var(--tp-violet);
  --tp-instrument-discovery:var(--tp-magenta);
  --tp-overlay-bg:rgba(8,10,13,.97);
}

/* INSTRUMENT ------------------------------------------------------------- */
.tp-instrument{
  position:relative;
  border:1px solid var(--tp-instrument-line);
  border-radius:var(--tp-radius);
  background:var(--tp-instrument-bg);
  box-shadow:inset 0 1px rgba(255,255,255,.018);
}
.tp-instrument--marked::before{
  content:"";
  position:absolute;
  top:-1px;
  left:16px;
  width:30px;
  height:1px;
  background:var(--tp-instrument-active);
  opacity:.72;
}
.tp-instrument--marked[data-tone="intelligence"]::before{background:var(--tp-instrument-intelligence)}
.tp-instrument--marked[data-tone="discovery"]::before{background:var(--tp-instrument-discovery);opacity:.48}
.tp-instrument[data-state="active"]{border-color:rgba(53,255,149,.38)}
.tp-instrument[data-state="focus"]{border-color:rgba(139,92,246,.42)}
.tp-instrument[data-state="unknown"]{border-color:rgba(225,71,255,.30)}
.tp-instrument[data-state="fault"]{border-color:rgba(255,93,103,.48)}

/* RAIL ------------------------------------------------------------------- */
.tp-rail{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:6px 8px;
  border:1px solid var(--tp-struct);
  border-radius:var(--tp-radius);
  background:rgba(17,21,26,.60);
  font-family:"Roboto Mono",ui-monospace,monospace;
}
.tp-rail--vertical{
  align-items:stretch;
  flex-direction:column;
}
.tp-rail__item{
  display:flex;
  align-items:center;
  min-height:30px;
  padding:6px 9px;
  border-radius:3px;
  color:var(--tp-steel);
  font-size:9px;
  letter-spacing:.08em;
  text-decoration:none;
}
.tp-rail__item:hover,.tp-rail__item:focus-visible{color:var(--tp-green);background:rgba(53,255,149,.04)}
.tp-rail__item[aria-current="page"]{color:var(--tp-frost);background:rgba(53,255,149,.055)}

/* SIGNAL ----------------------------------------------------------------- */
.tp-signal{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--tp-steel);
  font:500 9px/1.3 "Roboto Mono",ui-monospace,monospace;
  letter-spacing:.08em;
}
.tp-signal::before{
  content:"";
  width:6px;
  height:6px;
  border:1px solid currentColor;
  border-radius:50%;
}
.tp-signal[data-signal="active"]{color:var(--tp-green)}
.tp-signal[data-signal="analysis"]{color:#bba7ff}
.tp-signal[data-signal="discovery"]{color:#ed91ff}
.tp-signal[data-signal="fault"]{color:var(--tp-danger)}
.tp-signal[data-signal="quiet"]{color:var(--tp-ghost)}
.tp-signal-flow{
  font-family:"Roboto Mono",ui-monospace,monospace;
}
.tp-signal-flow i{color:var(--tp-green)}

/* STATE ------------------------------------------------------------------ */
.tp-state-grid{
  display:grid;
  border:1px solid var(--tp-struct);
  border-radius:var(--tp-radius);
  background:rgba(17,21,26,.72);
  overflow:hidden;
  font-family:"Roboto Mono",ui-monospace,monospace;
}
.tp-state{
  min-width:0;
  padding:12px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.tp-state__label{
  color:var(--tp-ghost);
  font-size:8px;
  letter-spacing:.15em;
}
.tp-state__value{
  color:var(--tp-frost);
  font-size:10px;
  font-weight:500;
  letter-spacing:.06em;
}
.tp-state[data-state="active"] .tp-state__value{color:var(--tp-green)}
.tp-state[data-state="intelligence"] .tp-state__value{color:#bba7ff}
.tp-state[data-state="discovery"] .tp-state__value{color:#ed91ff}
.tp-state[data-state="fault"] .tp-state__value{color:var(--tp-danger)}

/* INSPECTION ------------------------------------------------------------- */
.tp-inspection{
  border:1px solid var(--tp-struct);
  border-radius:var(--tp-radius);
  background:rgba(17,21,26,.64);
  overflow:hidden;
}
.tp-inspection>summary{
  list-style:none;
  cursor:pointer;
  padding:13px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:var(--tp-frost);
  font:600 9px/1.3 "Roboto Mono",ui-monospace,monospace;
  letter-spacing:.09em;
}
.tp-inspection>summary::-webkit-details-marker{display:none}
.tp-inspection>summary::after{
  content:"+";
  color:var(--tp-green);
  font-size:14px;
  font-weight:400;
}
.tp-inspection[open]>summary{border-bottom:1px solid var(--tp-struct)}
.tp-inspection[open]>summary::after{content:"−"}
.tp-inspection__body{padding:16px;color:var(--tp-steel);font-size:13px;line-height:1.7}

/* CONSOLE ---------------------------------------------------------------- */
.tp-console{
  border:1px solid var(--tp-struct);
  border-radius:var(--tp-radius);
  background:#07090b;
  overflow:hidden;
}
.tp-console__bar{
  min-height:34px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--tp-struct);
  color:var(--tp-ghost);
  font:500 8px/1.2 "Roboto Mono",ui-monospace,monospace;
  letter-spacing:.12em;
}
.tp-console__body{
  margin:0;
  padding:16px;
  overflow:auto;
  color:var(--tp-frost);
  font:12px/1.65 "Roboto Mono",ui-monospace,monospace;
  tab-size:2;
}
.tp-console__prompt{color:var(--tp-green)}
.tp-console__analysis{color:#bba7ff}
.tp-console__muted{color:var(--tp-ghost)}

/* OVERLAY ---------------------------------------------------------------- */
.tp-overlay{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(8px);
}
.tp-overlay[hidden]{display:none}
.tp-overlay__panel{
  width:min(720px,100%);
  max-height:min(82vh,840px);
  overflow:auto;
  border:1px solid #39424c;
  border-radius:var(--tp-radius);
  background:var(--tp-overlay-bg);
  box-shadow:0 36px 100px rgba(0,0,0,.58);
}
.tp-overlay__head{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--tp-struct);
  font:600 9px/1.2 "Roboto Mono",ui-monospace,monospace;
  letter-spacing:.1em;
}
.tp-overlay__body{padding:20px;color:var(--tp-steel)}

/* LIVING INSTRUMENT ------------------------------------------------------ */
.tp-living{
  position:relative;
  overflow:hidden;
}
.tp-living::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:var(--tp-live-position,50%);
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(53,255,149,.26),transparent);
}
.tp-living[data-live="true"]::after{
  animation:tp-live-scan 7s linear infinite;
}
@keyframes tp-live-scan{
  0%{transform:translateY(-120px);opacity:0}
  12%{opacity:.7}
  88%{opacity:.45}
  100%{transform:translateY(240px);opacity:0}
}

/* COMPONENT COMPOSITION ------------------------------------------------- */
.tp-cluster{display:grid;gap:8px}
.tp-cluster--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tp-cluster--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tp-cluster--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tp-stack{display:flex;flex-direction:column;gap:8px}
.tp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tp-divider{height:1px;background:var(--tp-struct);border:0}
.tp-label{color:var(--tp-green);font:500 8px/1.3 "Roboto Mono",ui-monospace,monospace;letter-spacing:.14em}
.tp-value{color:var(--tp-frost);font:500 10px/1.4 "Roboto Mono",ui-monospace,monospace}

/* Existing GlassCastle(S) compatibility aliases ------------------------- */
.card,.rule,.ukc-band,.diamond-shape,.diamond-side article,.final{
  --tp-component-kind:"instrument";
}
.operator-strip{--tp-component-kind:"state-grid"}
.signal{--tp-component-kind:"signal-flow"}
nav{--tp-component-kind:"rail"}

/* A11y / responsive ------------------------------------------------------ */
@media(max-width:900px){
  .tp-cluster--4,.tp-cluster--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .tp-cluster--4,.tp-cluster--3,.tp-cluster--2{grid-template-columns:1fr}
  .tp-overlay{padding:10px}
}
@media(prefers-reduced-motion:reduce){
  .tp-living[data-live="true"]::after{animation:none;opacity:.25}
}