/* /explore in the How it works layout (how-overview.css): the path, the heading with its ruled
   deck, bordered cards with the accent bar, the shared mesh fabric and the footer line.
   One screen, no page scroll: more is a state that takes the same place. The raw observatory
   (explorer-observatory.css, unchanged) replaces the page with a path back. */
#scene .task-page.mesh-explorer-page.explore-page { overflow:hidden; padding:0; }
#scene .explore-page .explore-home.how-triptych { height:100%; overflow:hidden; }
#scene .explore-page .explore-raw { box-sizing:border-box; height:100%; padding:24px 30px 22px; display:grid; grid-template-rows:auto minmax(0,1fr); gap:14px; }
#scene .explore-page .explore-raw > .mesh-explorer-shell { height:100%; min-height:0; padding:0; }
#scene .explore-page .explore-raw .mesh-explorer-header { grid-template-columns:auto minmax(200px,280px); justify-content:space-between; }
#scene .explore-page .content-layer-path > button {
  display:inline-flex; align-items:center; min-height:26px; margin:0; padding:0 11px; border:0; border-radius:3px; cursor:pointer;
  background:hsl(var(--reference-100)); color:var(--signal-reference); font:550 9px/1 var(--mono-font,ui-monospace,monospace); letter-spacing:.075em; text-transform:uppercase;
  transition:color 160ms ease,background-color 160ms ease;
}
#scene .explore-page .content-layer-path > button:is(:hover,:focus-visible) { background:hsl(var(--reference-200)); color:hsl(var(--text-strong)); }
#scene .explore-page .explore-panes { display:none; }

/* The two cards */
#scene .explore-page .explore-cards { position:relative; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:14px; flex:1 1 0; min-height:0; }
#scene .explore-page .explore-cards .how-work-card { cursor:default; }
#scene .explore-page .explore-cards .how-work-card:hover {
  transform:none; border-color:hsl(var(--border-default)); background:linear-gradient(152deg,hsl(var(--surface) / .42),hsl(var(--canvas) / .92));
}
#scene .explore-page .explore-how-card { grid-template-rows:auto auto auto minmax(72px,1fr) auto; }
#scene .explore-page .explore-how-card .how-work-answer { min-height:4.5em; }
#scene .explore-page .explore-live-card { grid-template-rows:auto auto minmax(0,1fr) auto; }
/* While a kind is open its own heading stands in for the card's, and a record hides the source tabs */
#scene .explore-page .explore-live-card:has([data-state="browse"]) { grid-template-rows:auto minmax(0,1fr); }
#scene .explore-page .explore-live-card:has([data-state="browse"]) :is(#explore-live-title,.explore-private) { display:none; }
#scene .explore-page .explore-browse:has([data-view="record"]) .explore-browse-tabs { display:none; }
#scene .explore-page .explore-browse:has([data-view="record"]) { grid-template-rows:auto minmax(0,1fr); }
#scene .explore-page .explore-cards h2 { animation:ex-in .28s cubic-bezier(.2,.65,.2,1); }

/* Steps: numbered stops on one line, as on the home walkthrough */
#scene .explore-page .explore-stepper { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
#scene .explore-page .explore-stepper::before {
  content:""; position:absolute; left:16.66%; right:16.66%; top:14px; height:1px; background:hsl(var(--border-default)); pointer-events:none;
}
#scene .explore-page .explore-stepper button {
  position:relative; min-height:0; margin:0; padding:0; border:0; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:7px; color:hsl(var(--text-muted)); font:500 12px/1.2 var(--font-sans,"Albert Sans",sans-serif);
}
#scene .explore-page .explore-stepper button span {
  display:grid; place-items:center; width:28px; height:28px; border-radius:999px; box-sizing:border-box;
  border:1px solid hsl(var(--border-default)); background:hsl(var(--canvas)); font:500 10px/1 var(--mono-font,ui-monospace,monospace); color:hsl(var(--text-muted));
  transition:border-color 160ms,background-color 160ms,color 160ms;
}
#scene .explore-page .explore-stepper button:hover { color:hsl(var(--text-strong)); }
#scene .explore-page .explore-stepper button[aria-selected="true"] { color:hsl(var(--text-strong)); }
#scene .explore-page .explore-stepper button[aria-selected="true"] span { border-color:hsl(var(--reference-400)); background:hsl(var(--reference-200)); color:hsl(var(--text-strong)); }

/* Live kinds: bordered rows of the about page's small cards */
#scene .explore-page .explore-live-body { min-height:0; overflow:hidden; }
#scene .explore-page .explore-live-body[data-state="browse"] .explore-kinds { display:none; }
#scene .explore-page .explore-kinds { display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); align-content:start; gap:8px; }
#scene .explore-page .explore-kind {
  min-height:0; min-width:0; margin:0; padding:12px 14px; border:1px solid hsl(var(--border-default)); border-radius:6px; background:hsl(var(--surface) / .16);
  color:inherit; text-align:left; cursor:pointer;
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; align-items:center; column-gap:9px; row-gap:8px;
  transition:border-color 180ms,background-color 180ms;
}
#scene .explore-page .explore-kind:is(:hover,:focus-visible) { border-color:hsl(var(--reference-400)); background:hsl(var(--reference-100)); }
#scene .explore-page .explore-kind-icon { display:grid; place-items:center; width:18px; height:18px; }
#scene .explore-page .explore-kind-icon svg { width:17px; height:17px; }
#scene .explore-page .explore-kind-icon svg * { fill:none; stroke:hsl(var(--primary)); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#scene .explore-page .explore-kind strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 15px/1.25 var(--font-sans,"Albert Sans",sans-serif); letter-spacing:-.01em; color:hsl(var(--text-strong)); }
/* The tile is the name and its live figure; what the kind means opens with it */
#scene .explore-page .explore-kind-text { display:none; }
#scene .explore-page .explore-kind small { grid-column:1 / -1; font:500 9.5px/1.3 var(--mono-font,ui-monospace,monospace); letter-spacing:.06em; text-transform:uppercase; color:hsl(var(--text-faint)); }
#scene .explore-page .explore-private { margin:0; font:400 12px/1.45 var(--font-sans,"Albert Sans",sans-serif); color:hsl(var(--text-faint)); }

/* A kind, opened over the list */
#scene .explore-page .explore-browse { height:100%; display:grid; grid-template-rows:auto auto minmax(0,1fr); align-content:start; gap:12px; animation:ex-in .22s cubic-bezier(.2,.65,.2,1); }
#scene .explore-page .explore-browse-head { display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; gap:10px; }
#scene .explore-page .explore-browse-title h3 { margin:0; font:500 17px/1.2 var(--font-sans,"Albert Sans",sans-serif); letter-spacing:-.015em; color:hsl(var(--text-strong)); }
#scene .explore-page .explore-browse-title p { margin:2px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:hsl(var(--text-muted)); }
#scene .explore-page :is(.explore-browse-close,.explore-record-back,.explore-browse-tabs button) {
  min-height:30px; margin:0; padding:6px 10px; border:1px solid hsl(var(--border-subtle)); border-radius:5px; background:transparent; cursor:pointer;
  color:hsl(var(--text-muted)); font:500 11px/1.3 var(--font-sans,"Albert Sans",sans-serif); white-space:nowrap; transition:border-color 160ms,background-color 160ms,color 160ms;
}
#scene .explore-page :is(.explore-browse-close,.explore-record-back,.explore-browse-tabs button):is(:hover,:focus-visible,[aria-pressed="true"]) {
  color:hsl(var(--text-strong)); border-color:hsl(var(--reference-400)); background:hsl(var(--reference-100));
}
#scene .explore-page .explore-browse-tabs { display:flex; gap:6px; overflow:hidden; }
#scene .explore-page .explore-browse-tabs button { flex:none; }

/* Records as a ledger: one ruled row each */
#scene .explore-page .explore-records { min-height:0; display:grid; align-content:start; border-top:1px solid hsl(var(--border-subtle)); }
#scene .explore-page .explore-records[data-view="record"] { border-top:0; gap:10px; }
#scene .explore-page .explore-browse-note { margin:0; padding:10px 0; font-size:12px; color:hsl(var(--text-faint)); }
#scene .explore-page .explore-record {
  min-height:0; min-width:0; margin:0; padding:8px 6px; border:0; border-bottom:1px solid hsl(var(--border-subtle)); border-radius:0; background:transparent;
  color:inherit; text-align:left; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 168px; align-items:center; gap:14px; transition:background-color 160ms;
}
#scene .explore-page .explore-record:is(:hover,:focus-visible) { background:hsl(var(--reference-100)); }
#scene .explore-page .explore-record strong { order:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 14px/1.3 var(--font-sans,"Albert Sans",sans-serif); color:hsl(var(--text-strong)); }
#scene .explore-page .explore-record > .explore-record-id { order:2; }
#scene .explore-page .explore-record > .explore-record-top { order:3; }
#scene .explore-page .explore-record-top { display:flex; align-items:center; justify-content:space-between; gap:12px; font:500 10px/1.3 var(--mono-font,ui-monospace,monospace); color:hsl(var(--text-faint)); }
#scene .explore-page .explore-record-id { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 10.5px/1.3 var(--mono-font,ui-monospace,monospace); color:hsl(var(--text-faint)); }
#scene .explore-page .explore-chip { font:500 9px/1.3 var(--mono-font,ui-monospace,monospace); letter-spacing:.08em; text-transform:uppercase; color:hsl(var(--text-muted)); white-space:nowrap; }
#scene .explore-page .explore-chip::before { content:""; display:inline-block; width:5px; height:5px; margin:0 6px 1px 0; border-radius:1px; transform:rotate(45deg); background:currentColor; opacity:.7; }
#scene .explore-page .explore-chip[data-state="ok"] { color:hsl(var(--success, var(--primary))); }

/* A record, opened over its kind */
#scene .explore-page .explore-record-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#scene .explore-page .explore-browse-raw { min-height:0; margin:0; padding:0; border:0; background:none; cursor:pointer; color:hsl(var(--reference)); font:500 12px/1.4 var(--font-sans,"Albert Sans",sans-serif); }
#scene .explore-page .explore-browse-raw::after { content:" \2192"; }
#scene .explore-page .explore-record-open {
  min-height:0; overflow:hidden; padding:16px; border:1px solid hsl(var(--border-default)); border-radius:6px; background:hsl(var(--surface) / .16);
  display:grid; align-content:start; gap:6px; animation:ex-in .22s cubic-bezier(.2,.65,.2,1);
}
#scene .explore-page .explore-record-open::before { content:""; width:44px; height:2px; margin:-16px 0 6px; background:hsl(var(--primary)); opacity:.82; }
#scene .explore-page .explore-record-open .explore-record-top { justify-content:flex-start; }
#scene .explore-page .explore-record-open .explore-record-top > :last-child { margin-left:auto; }
#scene .explore-page .explore-record-open h4 { margin:0; overflow-wrap:anywhere; font:500 24px/1.1 var(--font-sans,"Albert Sans",sans-serif); letter-spacing:-.03em; color:hsl(var(--text-strong)); }
#scene .explore-page .explore-record-open .explore-record-id { white-space:normal; overflow-wrap:anywhere; }
#scene .explore-page .explore-record-facts { margin:6px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); column-gap:18px; }
#scene .explore-page .explore-record-facts > div { min-width:0; display:grid; gap:3px; padding:9px 0; border-top:1px solid hsl(var(--border-subtle)); }
#scene .explore-page .explore-record-facts dt { font:500 8.5px/1.4 var(--mono-font,ui-monospace,monospace); letter-spacing:.06em; text-transform:uppercase; color:hsl(var(--text-muted)); }
#scene .explore-page .explore-record-facts dd { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 13px/1.4 var(--font-sans,"Albert Sans",sans-serif); color:hsl(var(--text)); }

/* Footer line: where the data comes from, and the ways onward */
#scene .explore-page .explore-status { min-width:0; }
#scene .explore-page .explore-status .how-boundary-label { display:inline-flex; align-items:center; gap:8px; }
#scene .explore-page .explore-status .mesh-explorer-status-dot { width:6px; height:6px; border-radius:1px; transform:rotate(45deg); background:hsl(var(--text-muted)); box-shadow:none; }
#scene .explore-page[data-connection="live"] .explore-status .mesh-explorer-status-dot { background:var(--signal-trust,hsl(var(--success))); }
#scene .explore-page .explore-status [data-explorer-message] { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 12px/1.45 var(--font-sans,"Albert Sans",sans-serif); color:hsl(var(--text-faint)); }
#scene .explore-page[data-connection="live"] .explore-status [data-explorer-message] { display:none; }
#scene .explore-page .explore-footer-actions { display:flex; align-items:center; gap:20px; }
#scene .explore-page .explore-footer-actions a { font:500 12px/1.4 var(--font-sans,"Albert Sans",sans-serif); color:hsl(var(--reference)); text-decoration:none; white-space:nowrap; }
#scene .explore-page .explore-footer-actions a:is(:hover,:focus-visible) { text-decoration:underline; }
#scene .explore-page .explore-footer-actions .how-simple-next { cursor:pointer; }

@keyframes ex-in { from { transform:translateY(4px); } }

/* Short desktop windows keep everything by dropping helper lines first */
@media (min-width:901px) and (max-height:780px) {
  #scene .explore-page .explore-kind { padding:10px 12px; row-gap:6px; }
  #scene .explore-page .explore-kinds { grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); }
  #scene .explore-page .explore-kind strong { font-size:14px; }
  #scene .explore-page .explore-how-card .how-work-answer { min-height:3em; }
  #scene .explore-page .explore-record-open .explore-record-id { display:none; }
  #scene .explore-page .explore-record-open { padding:12px 14px; }
  #scene .explore-page .explore-record-open::before { margin-top:-12px; }
  #scene .explore-page .explore-raw { padding:18px 24px; }
}
@media (min-width:901px) and (max-height:660px) {
  #scene .explore-page .explore-browse-title p { display:none; }
  #scene .explore-page .how-simple-deck { display:none; }
}

/* Phone and tablet: the two cards become panes in the same place */
@media (max-width:900px) {
  #scene .explore-page .explore-home.how-triptych { padding:14px 16px 16px; gap:12px; }
  #scene .explore-page .explore-home .how-triptych-intro { gap:10px; }
  #scene .explore-page .explore-home h1 { font-size:clamp(30px,8.4vw,38px); }
  #scene .explore-page .explore-home .how-simple-deck { font-size:13.5px; padding-left:14px; }
  #scene .explore-page .explore-panes {
    display:grid; grid-template-columns:1fr 1fr; padding:3px; border:1px solid hsl(var(--border-subtle)); border-radius:5px; background:hsl(var(--surface) / .52);
  }
  #scene .explore-page .explore-panes button {
    min-height:30px; margin:0; border:0; border-radius:3px; background:none; cursor:pointer; color:hsl(var(--text-faint));
    font:550 9.5px/1 var(--mono-font,ui-monospace,monospace); letter-spacing:.075em; text-transform:uppercase;
  }
  #scene .explore-page .explore-panes button[aria-pressed="true"] { background:hsl(var(--reference-100)); color:var(--signal-reference); }
  #scene .explore-page .explore-cards { grid-template-columns:1fr; }
  #scene .explore-page .explore-home[data-pane="live"] .how-triptych-intro,
  #scene .explore-page .explore-home[data-pane="live"] .explore-live-card .how-work-card-top { display:none; }
  #scene .explore-page .explore-cards .how-work-card::after { display:none; }
  #scene .explore-page .explore-home[data-pane="how"] .explore-live-card,
  #scene .explore-page .explore-home[data-pane="live"] .explore-how-card { display:none; }
  #scene .explore-page .explore-cards .how-work-card { padding:16px; gap:10px; }
  #scene .explore-page .explore-kinds { grid-template-columns:1fr 1fr; gap:6px; }
  #scene .explore-page .explore-kind { padding:9px 10px; row-gap:4px; }
  #scene .explore-page .explore-kind strong { font-size:14px; }
  #scene .explore-page .explore-live:has([data-state="browse"]) .explore-private,
  #scene .explore-page .explore-live-card:has([data-state="browse"]) :is(.how-work-card-top,h2,.explore-private) { display:none; }
  #scene .explore-page .explore-live-card:has([data-state="browse"]) { grid-template-rows:minmax(0,1fr); }
  #scene .explore-page .explore-browse-head { grid-template-columns:auto minmax(0,1fr); }
  #scene .explore-page .explore-browse-head .explore-kind-icon,
  #scene .explore-page .explore-browse-title p { display:none; }
  #scene .explore-page .explore-browse:has([data-view="record"]) .explore-browse-tabs { display:none; }
  #scene .explore-page .explore-browse-tabs { overflow-x:auto; scrollbar-width:none; }
  #scene .explore-page .explore-record { grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:9px 4px; }
  #scene .explore-page .explore-record > .explore-record-id,
  #scene .explore-page .explore-record .explore-record-top > span:last-child { display:none; }
  #scene .explore-page .explore-record-open { padding:12px; }
  #scene .explore-page .explore-record-open::before { margin-top:-12px; }
  #scene .explore-page .explore-record-open .explore-record-id { display:none; }
  #scene .explore-page .explore-record-facts { grid-template-columns:1fr 1fr; column-gap:12px; }
  #scene .explore-page .explore-record-facts > div:nth-child(n+7) { display:none; }
  #scene .explore-page .how-simple-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding-top:10px; }
  #scene .explore-page .explore-status strong { display:none; }
  #scene .explore-page .explore-footer-actions { gap:12px; }
  #scene .explore-page .explore-footer-actions a { display:none; }
  #scene .explore-page .explore-raw { padding:14px 16px 16px; }
  #scene .explore-page .explore-raw .mesh-explorer-header { grid-template-columns:1fr; }
}
@media (max-width:900px) and (max-height:720px) {
  #scene .explore-page .explore-home .how-simple-deck { display:none; }
  #scene .explore-page .explore-home:is([data-pane="live"]) .how-path,
  #scene .explore-page .explore-home[data-pane="live"] :is(#explore-live-title,.explore-private) { display:none; }
  #scene .explore-page .explore-kind { padding:7px 9px; }
  #scene .explore-page .explore-record-open h4 { font-size:20px; }
  #scene .explore-page .explore-record-facts > div:nth-child(n+5) { display:none; }
  #scene .explore-page .explore-how-card .how-work-answer { min-height:0; }
}
@media (prefers-reduced-motion:reduce) {
  #scene .explore-page :is(.explore-browse,.explore-record-open,.explore-cards h2) { animation:none; }
}