/* street.css — the Living Street. Slice-local styles only; the
   house system (css/house.css) carries tokens and primitives.
   House GPU discipline holds here too: glow is layered gradients,
   no CSS blur filters of any kind, no post chains. Fluid type
   throughout so nothing bleeds at enlarged system fonts. */

.ls-state{color:var(--muted); font-size:.98rem}
.ls-state.ok{color:var(--aqua)}
.ls-state.broken{color:var(--gold)}

.ls-stage{
  position:relative; margin-top:1.2rem; padding:.7rem;
  min-height:0;
}
.ls-stage canvas{
  display:block; width:100%; height:auto; border-radius:.6rem;
  background:#07080c; touch-action:manipulation; cursor:pointer;
}
.ls-hole{
  position:absolute; left:1.4rem; right:1.4rem; bottom:1.1rem; margin:0;
  background:rgba(7,8,12,.92); border:1px solid var(--gold);
  border-radius:.7rem; padding:.8rem 1rem; color:var(--gold);
  font-size:clamp(.98rem,2.8vw,1.08rem); text-align:center;
}

.ls-controls{
  display:flex; gap:.7rem; flex-wrap:wrap; align-items:center;
  justify-content:center; margin-top:1.1rem;
}
.ls-speed{color:var(--muted); display:flex; gap:.5rem; align-items:center}
.ls-speed select{
  font:inherit; color:var(--fg); background:var(--panel);
  border:1px solid var(--border); border-radius:.6rem;
  padding:.55rem .7rem; min-height:3.2rem;
}
.ls-clock{
  flex-basis:100%; text-align:center; margin:.2rem 0 0;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.ls-clock strong{color:var(--fg)}

.ls-below{margin-top:1.6rem; align-items:start}

/* the chain list — one row per event, once it has landed */
.ls-chain{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.55rem}
.ls-chain li{margin:0}
.ls-row{
  width:100%; font:inherit; text-align:left; cursor:pointer;
  display:grid; grid-template-columns:auto 1fr; gap:.2rem .8rem;
  align-items:baseline; color:var(--fg);
  background:var(--panel2); border:1px solid var(--border);
  border-radius:.8rem; padding:.65rem .85rem;
}
.ls-row:active{transform:translateY(1px)}
.ls-row[aria-current="true"]{border-color:var(--gold)}
.ls-seq{
  font-family:var(--mono); color:var(--dim); font-size:.92rem;
  grid-row:span 2; padding-top:.15rem;
}
.ls-kind{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase;
}
.ls-kind.light-state{color:var(--gold)}
.ls-kind.structure{color:var(--purple)}
.ls-kind.marker{color:var(--aqua)}
.ls-kind.note{color:var(--blue)}
.ls-ts{color:var(--dim); font-size:.9rem; margin-left:.6rem; letter-spacing:0;
  font-family:var(--mono); text-transform:none}
.ls-note{color:var(--muted); overflow-wrap:anywhere}
.ls-pending{color:var(--dim); text-align:center; padding:.4rem 0}

/* the selected event card — centered, like every house data card */
.ls-event{text-align:center}
.ls-ev-note{color:var(--muted)}
.ls-ev-fields{margin:1rem 0 0; display:grid; gap:.55rem}
.ls-ev-fields div{
  border-top:1px solid var(--border); padding-top:.55rem;
}
.ls-ev-fields dt{
  color:var(--dim); font-size:.88rem; letter-spacing:.14em;
  text-transform:uppercase; font-family:var(--mono);
}
.ls-ev-fields dd{margin:.15rem 0 0; overflow-wrap:anywhere}
.ls-ev-verdict-ok{color:var(--emerald)}

/* learning panel — patterns as centered stat-like cells */
.ls-learn{margin-top:1.6rem}
.ls-patterns{
  display:grid; gap:1rem; margin-top:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(15.5rem,100%),1fr));
}
.ls-pattern{
  text-align:center; border:1px solid var(--border-purple);
  border-radius:1rem; padding:1rem .9rem 1.05rem;
  background:var(--panel2);
}
.ls-pattern .grade{margin-bottom:.55rem}
.ls-pattern p{margin:.2rem 0}
.ls-pattern .ls-derive{color:var(--dim); font-size:.9rem}

/* privacy panel — written for a neighbor */
.ls-privacy{margin-top:1.6rem}
.ls-privacy p{max-width:46rem}
.ls-schema{margin:1rem 0 0; display:grid; gap:.55rem}
.ls-schema div{border-top:1px solid var(--border); padding-top:.55rem}
.ls-schema dt{
  color:var(--dim); font-size:.88rem; letter-spacing:.14em;
  text-transform:uppercase; font-family:var(--mono);
}
.ls-schema dd{margin:.15rem 0 0; color:var(--fg)}
