/* view: explore (canvas 2b) ----------------------------------------------
 * The centre and up to six bets on fixed places of a 390 × 600 stage that
 * scales with the page (positions are fractions of it, set by explore.js).
 * The ring's shape is the bet's kind: solid (a cover), dashed (an area),
 * thin (heard). A spoke's disc is a link that makes it the centre; the
 * centre's disc is a link to its page, its quick actions a row of round
 * buttons across its lower edge (the walk, 2026-10-13). Tokens are listen.css's;
 * nothing here defines a colour.
 */

.explore {
  --explore-ring-cover: var(--accent);
  /* muted, not faint: a ring carries the bet's kind, and a graphic that
     carries meaning holds 3:1 against the paper (faint is 2.4:1) */
  --explore-ring-area: var(--fg-muted);
  --explore-ring-familiar: var(--fg-muted);
  padding-bottom: var(--section);
}

/* the way back on the left, "Explore" in the middle */
.explore-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 6px var(--gutter) 0;
}

.explore-back {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: var(--tap);
  font: 600 var(--t-meta) / 1.2 var(--sans);
  color: var(--fg-muted);
}

.explore-h1 {
  font: 600 var(--t-meta) / 1.2 var(--sans);
  color: var(--fg);
}

/* the head's line (where the six come from) and the sentence (what they are,
   what a tap does): centred over the ring, short enough to leave it on the
   first screen */
.explore-from {
  margin: 2px 0 0;
  padding: 0 var(--gutter);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--fg);
  overflow-wrap: anywhere;
}

/* the way to the saves from a centred node (2026-10-26): a pill under the
   head's line, the tap floor tall, so it reads as a button and not as the
   corner's quiet link */
.explore-saves {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: calc(100% - 2 * var(--gutter));
  min-height: var(--tap);
  margin: 10px auto 0;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font: 600 var(--t-meta) / 1.2 var(--sans);
  color: var(--accent);
  text-decoration: none;
}

.explore-saves-n {
  font-weight: 400;
  color: var(--fg-muted);
  white-space: pre;
}

.explore-rule {
  max-width: 60ch; /* two lines at 390, not three */
  margin: 6px auto 0;
  padding: 0 var(--gutter);
  font-size: var(--t-small);
  line-height: 1.4;
  text-align: center;
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* the door to the universe, after the six: its words and the light's line
   under them, one link the tap floor tall */
.explore-door {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: min(100% - 2 * var(--gutter), 440px);
  min-height: 64px;
  margin: 12px auto 0;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--r-card);
  color: var(--accent);
}

.explore-door:hover {
  text-decoration: none;
}

.explore-door-name {
  font-size: 18px;
  line-height: 1.15;
}

.explore-door-line {
  font-size: var(--t-meta);
  line-height: 1.3;
  color: var(--fg-muted);
}

/* the stage: the canvas's proportions at any width up to its own */
.explore-stage {
  position: relative;
  width: min(100%, 440px);
  margin: 4px auto 0;
  aspect-ratio: 390 / 600; /* explore.js STAGE */
}

.explore-spokes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.explore-spoke {
  stroke-width: 1.2;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
}

.explore-spoke--cover {
  stroke: var(--explore-ring-cover);
}

.explore-spoke--area {
  stroke: var(--explore-ring-area);
  stroke-dasharray: 4 4;
}

.explore-spoke--familiar {
  stroke: var(--explore-ring-familiar);
}

/* the centre: up to four stills under a scrim, ringed in ink; the face is
   the link to its page, the actions sit across its lower edge. The card
   holds the face and the scrim as siblings (a name in the scrim is a link of
   its own, never inside the face's), the scrim laid over the face: it lets a
   press through to the face except on a name. */
.explore-centre {
  position: absolute;
  left: 50%;
  top: 50%; /* 300 / 600 */
  width: 38.462%; /* 150 / 390 */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow:
    0 0 0 5px var(--bg),
    0 0 0 6.5px var(--fg),
    0 18px 40px -18px rgba(23, 21, 15, 0.5);
}

.explore-card {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.explore-face {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
}

.explore-face:hover {
  text-decoration: none;
}

/* the quick actions: round buttons straddling the centre's lower edge, the
   verb printed under each; narrow enough to stand between the lower side
   nodes (explore.js SLOTS). Under them, one line said back (where a save
   went), on the paper so a spoke's line does not run through it. */
.explore-tools {
  position: absolute;
  left: 50%;
  top: calc(100% - 22px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.explore-acts {
  display: flex;
  gap: 4px;
}

.explore-said {
  padding: 0 6px;
  background: var(--bg);
  white-space: nowrap;
}

.explore-said[hidden] {
  display: none;
}

/* Several covers as one YouTube playlist: a link line under the acts, on
   the paper as the said line is, the tap floor tall (room.css
   .room-youtube). */
.explore-youtube {
  margin: 0;
  padding: 0 6px;
  background: var(--bg);
  white-space: nowrap;
  font: 600 var(--t-meta) / 1.35 var(--sans);
}

.explore-youtube a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--accent);
}

.explore-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 48px;
  color: var(--fg);
}

.explore-act-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-round);
  height: var(--tap-round);
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--bg);
  font-size: 15px;
  line-height: 1;
}

.explore-act[aria-pressed="true"] .explore-act-glyph {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* nothing left to do (the saves' queue, every cover queued): said, not pressed */
.explore-act:disabled {
  cursor: default;
}

.explore-act:disabled .explore-act-glyph {
  color: var(--fg-muted);
}

.explore-act-verb {
  font: 600 10.5px / 1.2 var(--sans);
  color: var(--fg-muted);
  white-space: nowrap;
}

.explore-tiles {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ink);
}

.explore-tiles > span {
  background: var(--still-bg) center / cover no-repeat;
}

.explore-tiles[data-tiles="1"] > span {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.explore-tiles[data-tiles="2"] > span,
.explore-tiles[data-tiles="3"] > span:first-child {
  grid-row: 1 / -1;
}

.explore-scrim {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 14%;
  border-radius: 50%;
  background: rgba(23, 21, 15, 0.55);
  color: var(--paper-alt);
  text-align: center;
  pointer-events: none;
}

.explore-scrim a.noun {
  pointer-events: auto;
}

.explore-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--eyebrow-on-ink);
}

.explore-count {
  font-size: 18px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.explore-cluster-sub {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--night-muted);
}

/* the bets: the list spans the stage over the centre, so only a node's own
   link and + take a press — the centre's link and actions stay reachable.
   Not the node's box: at 31% of the stage the lower side boxes reach over
   the centre's outer buttons, 4px at 375 wide and 7px at 360 (measured
   2026-10-13), and a press there landed on nothing. */
.explore-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.explore-jump,
.explore-queue,
.explore-title {
  pointer-events: auto;
}

.explore-node {
  position: absolute;
  width: 31%; /* 120 / 390, so a node never leaves a narrow stage */
  max-width: 120px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.explore-disc {
  position: relative;
  width: 77%; /* a cover: 92 of 120 */
  aspect-ratio: 1;
  /* the + reaches 12px below the disc: the kind label starts under it */
  margin-bottom: 14px;
}

.explore-node[data-kind="area"] .explore-disc {
  width: 63%; /* 76 of 120 */
}

.explore-node[data-kind="familiar"] .explore-disc {
  width: 53%; /* 64 of 120 */
}

.explore-jump {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--still-bg) center / cover no-repeat;
}

/* the ring, drawn apart from the link so focus keeps its own outline */
.explore-jump::after {
  content: "";
  position: absolute;
  inset: -4.5px;
  border-radius: 50%;
  border: 1.5px solid var(--explore-ring-cover);
  pointer-events: none;
}

.explore-node[data-kind="area"] .explore-jump::after {
  border: 1.5px dashed var(--explore-ring-area);
}

.explore-node[data-kind="familiar"] .explore-jump::after {
  border: 1px solid var(--explore-ring-familiar);
}

.explore-node[data-playing] .explore-jump::after {
  border-width: 2.5px;
}

/* + : a tap wide, drawn small on the disc's lower right */
.explore-queue {
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: var(--tap-round);
  height: var(--tap-round);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.explore-queue > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg);
  font-size: 14px;
  line-height: 1;
}

.explore-queue[aria-pressed="true"] > span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.explore-kind {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
}

.explore-node[data-kind="cover"] .explore-kind {
  color: var(--explore-ring-cover);
}

/* names wrap, never truncate (cold review 2026-10-09: a phone cut them) */
.explore-title,
.explore-sub {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.explore-title {
  font-size: 13.5px;
  line-height: 1.1;
  color: var(--fg);
  /* the node's one link to its page: a tap tall without moving the node —
     the hit area reaches over the kind label above and the count below,
     neither of which is pressed */
  position: relative;
  padding-block: 15px;
  margin-block: -15px;
}

.explore-sub {
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--fg-muted);
}

.explore-empty {
  padding: 18px var(--gutter) 0;
  font-size: var(--t-small);
  color: var(--fg-muted);
  text-align: center;
}

/* the key: one line on the first screen, above the rings — the shape and
   the word for each kind */
.explore-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  padding: 8px var(--gutter) 0;
  font-size: var(--t-label);
  color: var(--body-ink);
}

.explore-key > li {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.explore-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--explore-ring-cover);
}

.explore-key > li[data-kind="area"] .explore-swatch {
  border: 1.5px dashed var(--explore-ring-area);
}

.explore-key > li[data-kind="familiar"] .explore-swatch {
  border: 1px solid var(--explore-ring-familiar);
}

/* A wide screen (≥ 900px; Claude Design "Desktop" 2b, 2026-10-19): the
   phone's page laid out again, nothing added or moved in the order. A 400px
   column — the head, then the centre as a card (its still beside its three
   lines, its quick actions under them) — beside the six as a 3 × 2 grid of
   stills, the door under them. The stage gives up its box (display:
   contents) so the centre and the six each take their own place; the spokes
   are the ring's drawing and there is no ring. The rows interleave so each
   column stacks without gaps: the card under the head, the door under the
   six, whichever column is longer. */
@media (min-width: 900px) {
  .explore {
    --gutter: 0px;
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "head six"
      "seed six"
      "seed door";
    column-gap: 80px;
    align-items: start;
    padding: 30px 40px 60px;
  }

  .explore-head {
    grid-area: head;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 18px;
  }

  .explore-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0;
  }

  .explore-h1 {
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-muted);
  }

  .explore-from {
    margin: 0;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.03em;
    text-align: left;
  }

  .explore-saves {
    margin: 0;
  }

  .explore-rule {
    max-width: none;
    margin: 0;
    font-size: 13px;
    text-align: left;
  }

  .explore-key {
    justify-content: flex-start;
    padding: 0;
  }

  /* the frame the key shows is a still's at this width */
  .explore-key > li[data-kind] .explore-swatch {
    width: 18px;
    height: 11px;
    border-radius: 3px;
  }

  .explore-stage {
    display: contents;
  }

  .explore-spokes {
    display: none;
  }

  /* the centre: a card, its still and its three lines one link to its page —
     the face holds the still, and its ::after stretches the link over the
     whole card, under the lines (whose names are links of their own) */
  .explore-centre {
    grid-area: seed;
    position: static;
    width: auto;
    aspect-ratio: auto;
    transform: none;
    border-radius: 0;
    box-shadow: none;
  }

  .explore-card {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
  }

  .explore-face {
    position: static;
    border-radius: var(--r-still);
  }

  .explore-face::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: var(--r-card);
  }

  /* the focus ring rings the card, as it did when the card was the link */
  .explore-face:focus-visible {
    outline: none;
  }

  .explore-face:focus-visible::after {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .explore-tiles {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-still);
  }

  /* positioned, so it lies over the face's stretched link */
  .explore-scrim {
    position: relative;
    align-items: flex-start;
    gap: 1px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--fg);
    text-align: left;
  }

  .explore-eyebrow {
    font-size: 10.5px;
    color: var(--fg-muted);
  }

  .explore-cluster-sub {
    font-size: var(--t-meta);
    color: var(--fg-muted);
  }

  .explore-tools {
    position: static;
    transform: none;
    align-items: flex-start;
    margin-top: 12px;
  }

  .explore-acts {
    gap: 8px;
  }

  .explore-said,
  .explore-youtube {
    padding: 0;
    background: none;
    white-space: normal;
  }

  /* the six: a 3 × 2 grid, each a still in its kind's frame, then its kind,
     its name and its song or its count */
  .explore-nodes {
    grid-area: six;
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 20px;
    pointer-events: auto;
  }

  .explore-node {
    position: static;
    width: auto;
    max-width: none;
    transform: none;
    align-items: stretch;
    gap: 3px;
    text-align: left;
  }

  .explore-disc,
  .explore-node[data-kind] .explore-disc {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 8px;
  }

  .explore-jump {
    border-radius: var(--r-tile);
  }

  .explore-jump::after {
    border-radius: calc(var(--r-tile) + 4.5px);
  }

  /* the + inside the still's lower right corner, a tap wide */
  .explore-queue {
    right: 0;
    bottom: 0;
  }

  .explore-kind {
    font-size: 10.5px;
  }

  .explore-title {
    font-size: 20px;
  }

  .explore-sub {
    font-size: var(--t-small);
    line-height: 1.3;
  }

  .explore-empty {
    grid-area: six;
    padding: 0;
    text-align: left;
  }

  .explore-door {
    grid-area: door;
    width: min(100%, 400px);
    margin: 28px 0 0;
  }
}