/* The Spans of one civil day, and the Span the Tenant is reading.
 *
 * The Spans are a card grid above the detail rather than a left rail: a Span
 * is picked by its local clock, and a row of clocks reads faster across than
 * down. The open one carries the accent border, so the detail below it is
 * never ambiguous about which Span it belongs to.
 */

.separation-area {
  margin-top: 3.5rem;
}

.separation-heading {
  margin-bottom: 1.25rem;
}

.separation-guidance {
  max-width: 44rem;
  margin: 0.6rem 0 0;
  color: var(--ink-muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* The UTC date picker is gone — a Span belongs to the civil day on screen —
   so what is left is the lane, beside the heading it qualifies. */
.artifact-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.artifact-controls label {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.artifact-controls select {
  width: auto;
  height: 2.4rem;
  border-color: var(--border-pill);
  border-radius: 999px;
  font-weight: 500;
}

#preview-start {
  height: 2.4rem;
  padding: 0 1.1rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* One compact row per Span, full width: start, duration and Source on the
   line, and no status word. A Recording leads with `Recording · Source`
   behind a Source-coloured edge, its context after. */
.separation-spans {
  /* A grid item sizes to its min-content by default; without this a long
     Recording context would widen the page instead of being clipped. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.separation-span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.75rem;
  width: 100%;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--paper);
  box-shadow: 0 1px 2px var(--shadow-hair);
  text-align: left;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
}

.span-clock {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.span-duration {
  color: var(--ink-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  white-space: nowrap;
}

/* The spoken or Digest opening occupies its own second line. */
.span-snippet {
  flex: 1 1 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-faint);
  font-size: 0.8rem;
}

/* The Where word leads the gist line, a little firmer than the gist behind it.
   `On the way` is a gap between Places, so it stays as faint as the gist; in
   the Span page's title (an h3) it is the one part that dims. */
.span-snippet > .span-where:not(.span-where-way) {
  color: var(--ink-soft);
  font-weight: 600;
}

.span-where-way {
  color: var(--ink-faint);
  font-weight: 400;
}

/* ---------------------------------------------------------- Span detail */

/* One column: every part of a Span runs the pane's full width. */
.separation-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--paper);
  box-shadow: 0 1px 2px var(--shadow-hair), 0 16px 40px var(--shadow-card);
}

.separation-detail:empty {
  display: none;
}

/* One row: the Span on the left; on the right `Recorded` on an authored one,
   then the card's one ellipsis. */
.span-header {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.span-header > h3 {
  min-width: 0;
  margin-right: auto;
}

.span-menu-toggle {
  flex: none;
  align-self: center;
}

.span-recorded {
  flex: none;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  color: var(--signal);
  background: color-mix(in srgb, var(--signal) 10%, transparent);
  font-size: 0.72rem;
  font-weight: 600;
}

.span-audio {
  width: 100%;
  margin: 1.25rem 0 0.5rem;
  border-radius: 999px;
}

/* Where the playhead is, on the Tenant's clock — the same reading the rows
   carry. The native controls count seconds into the file beside it; that
   number is the one thing this view never presents as a time. Empty until
   something plays, and `min-height` keeps the layout from jumping when it
   fills. */
.span-playhead {
  min-height: 1.1rem;
  margin: 0 0 1.25rem;
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  text-align: right;
}

/* The points a person marked while recording, each a clock that seeks. They
   wrap rather than scroll: a long meeting can carry many. */
.span-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin: 0 0 0.5rem;
}

.span-highlights-label {
  color: var(--ink-muted);
  font-size: 0.78rem;
}

/* ---------------------------------------------------------------- Digest */

.digest-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.25rem 1.4rem;
  border-radius: 1rem;
  background: var(--wash);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.section-heading > h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
}

.digest-legend {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.span-scene {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 0.75rem;
}

.span-gist-detail {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.span-gist {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.digest-warning {
  margin: 0;
  padding: 0.5rem 0.8rem;
  border-left: 3px solid var(--warn-edge);
  border-radius: 0 0.5rem 0.5rem 0;
  color: var(--warn-ink);
  background: var(--warn-wash);
  font-size: 0.85rem;
}

.digest-body {
  max-width: none;
  max-height: 24rem;
  overflow: auto;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* ------------------------------------------------------------------ Voices */

/* Who is in this Span sits above the conversation, not inside it: the glyph,
   the name, the server's separate claim and the name box are facts about a
   person, and repeating them on every one of six hundred turns is what made
   the old per-Voice grouping unreadable. */
.voices-detail {
  display: grid;
  /* Explicit for the same reason the transcript is: a grid's default auto
     column is `max-content`, and a Voice row's name box would then push the
     whole list wider than the phone it is being read on. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.voices-detail > h4 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 650;
}

/* ------------------------------------------------------- Voice transcript */

.transcript-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin-top: 1.75rem;
  align-items: baseline;
}

.transcript-copy {
  flex: none;
}

/* A Span runs to hundreds of turns; left to grow, the transcript would push
   the rest of the day several screens down. */
.transcript-scroll {
  display: grid;
  /* The rows measure their position against this box, which is what the
     playhead follow scrolls (`transcript_follow.ts`). Scrolling stays instant:
     a box still gliding when the next turn starts moves under the reader.
     Scroll anchoring is off because the marked row opens and the one before it
     closes on every turn change: the browser would keep re-adjusting scrollTop
     to compensate, and the follow reads any scroll it did not make itself as
     the reader taking the box over. */
  position: relative;
  scroll-behavior: auto;
  overflow-anchor: none;
  /* Explicit, because a grid's default auto column is `max-content`: the one
     long monologue in a Span would size the whole column and every row would
     run past the card instead of clamping. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem;
  max-height: 32rem;
  padding: 0.75rem 1rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--paper);
}

/* One Voice is one line: glyph, who it is, and the box that names it. Six
   Voices are common, and a card each would push the conversation two screens
   down — the transcript is what this view is for. */
.artifact-voice {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  column-gap: 0.8rem;
  row-gap: 0.35rem;
  align-items: center;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--paper);
}

.voice-avatar {
  display: grid;
  grid-area: 1 / 1;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 999px;
  color: var(--signal);
  background: color-mix(in srgb, var(--signal) 9%, transparent);
  font-size: 0.95rem;
  font-weight: 650;
}

.artifact-voice > h5 {
  display: flex;
  grid-area: 1 / 2;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
}

.voice-unnamed {
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 500;
}

/* Which Voice the playhead is inside, so a listener can glance up from the
   audio and find the name box to type in. */
.voice-speaking {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  color: var(--signal);
  background: color-mix(in srgb, var(--signal) 12%, transparent);
  font-size: 0.68rem;
  font-weight: 600;
}

.voice-play {
  height: 1.8rem;
  padding: 0 0.7rem;
  font-size: 0.75rem;
}

/* One turn: when and who on a small line, then what across the whole width,
   as on the phone. The text's clamp lives in styles.css because the Utterance
   table reads the same way. */
.turn-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.05rem;
  padding: 0.3rem 0.4rem;
  border-radius: 0.5rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: var(--transcript-leading);
}

@media (hover: hover) {
  .turn-row:hover {
    background: var(--wash);
  }
}

/* The turn being read. The bubble covers the line, which takes `:hover` off
   the row it belongs to — see the same pairing in styles.css. */
.turn-row.is-revealing {
  background: var(--wash);
}

/* The turn the playhead is inside. One class does the whole mark: the row's
   own ground, a louder time chip, and the text opened to be read — following
   along is reading, and a clamped line is the half of it you cannot see.

   This is the one place a row still opens in flow, and it is deliberate: what
   must never move the page is the *pointer*, and playback is not the pointer —
   the box is already scrolling to follow, and `transcript_follow.ts` reads
   each row's height as it is. A turn opened this way also stops being clipped,
   so hovering it raises no bubble; there is nothing left to reveal. */
.turn-row-current {
  background: color-mix(in srgb, var(--signal) 8%, transparent);
  box-shadow: inset 0.15rem 0 0 var(--signal);
}

.turn-row-current .turn-seek {
  color: var(--on-signal);
  background: var(--signal);
}

.turn-row-current .expandable-text {
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.turn-seek {
  flex: none;
  height: auto;
  padding: 0.1rem 0.5rem;
  border: 0;
  border-radius: 999px;
  color: var(--ink-muted);
  background: var(--chip);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 400;
}

.turn-seek:hover {
  color: var(--ink);
}

/* The small line above the speech: the clock that seeks, who spoke, and the
   row's one ellipsis at the far end. */
.turn-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  line-height: 1.3;
}

/* Who spoke. The glyph is always there — the Digest speaks in glyphs — and
   the name, when the Tenant has typed one, carries the weight. */
.turn-speaker {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
}

/* The row's ellipsis (`popover_menu.ts`): borderless, at the end of the small
   line, and on a pointer that hovers only seen on the row it belongs to, or
   while it carries a copy's tick. */
.turn-menu-toggle {
  flex: none;
  margin-left: auto;
  width: 1.5rem;
  height: 1.5rem;
  border-color: transparent;
  background: transparent;
  font-size: 0.9rem;
}

@media (hover: hover) {
  .turn-row .turn-menu-toggle {
    opacity: 0;
  }

  .turn-row:hover .turn-menu-toggle,
  .turn-row.is-revealing .turn-menu-toggle,
  .turn-row .turn-menu-toggle:focus-visible,
  .turn-row .turn-menu-toggle.is-copied,
  .turn-row:has(:popover-open) .turn-menu-toggle {
    opacity: 1;
  }
}

.turn-glyph {
  flex: none;
  color: var(--signal);
  font-size: 0.8rem;
  font-weight: 650;
}

.turn-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.naming-row {
  display: flex;
  grid-area: 1 / 3;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
}

.naming-row label {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.naming-row input[type="text"] {
  flex: none;
  width: 12rem;
  height: 2.2rem;
  padding: 0 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.85rem;
}

.unnamed-row {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.unnamed-row label {
  font-weight: 500;
}

.naming-submit-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.naming-submit {
  height: 2.6rem;
  padding: 0 1.4rem;
  font-size: 0.88rem;
}

.naming-hint {
  margin: 0;
  color: var(--ink-ghost);
  font-size: 0.78rem;
}

@media (max-width: 46rem) {
  .digest-detail,
  .transcript-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .artifact-voice {
    grid-template-columns: minmax(0, 1fr);
  }

  .naming-row {
    grid-area: auto;
    justify-content: flex-start;
  }

  .voice-avatar,
  .artifact-voice > h5 {
    grid-area: auto;
  }

  .voice-avatar {
    display: none;
  }
}

.separation-span.separation-recording { border-left: 4px solid var(--source-color); }
.span-recording-heading { font-size: .85rem; white-space: nowrap; }

/* Quoted Span evidence is distinct from the roster's input completion. */
.naming-hints { margin-block-start: .5rem; font-size: .875rem; }
.naming-hints p { margin-block: .35rem; }
.hint-name { margin-inline-start: .5rem; border: 1px dashed currentColor; border-radius: 1rem; padding: .15rem .6rem; background: transparent; cursor: pointer; }
.hint-seek { border: 0; padding: 0; background: transparent; text-decoration: underline; cursor: pointer; font: inherit; color: inherit; }