/* Sidera Labs, Phase 2: terminal player styles (terminals.js, PHASE-2-PROMPT.md §7.8).
   D2's terminal look: dark panel, hairline frame, mono title bar, IBM Plex Mono 13px/1.7. The ember corner dots are
   gone (Jason: the page was too dotty). Reads the page's :root tokens, with D2's values as fallbacks. Everything the
   player animates per frame is opacity, transform or text colour; the sweep is transform and opacity only. */

.p2-term {
   position: relative;
   margin: 0;
   min-width: 0;
   max-width: 100%;
   background: var(--panel, #070707);
   border: 1px solid var(--line-hi, #3d3d3d);
   color: var(--text, #d9d7d2);
}

/* ---------- title bar ---------- */
.p2-term-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   min-height: 34px;
   padding: 2px 5px 2px 16px;
   border-bottom: 1px solid var(--line, #2a2a2a);
   font: 400 12.5px/1 var(--f-mono, "IBM Plex Mono", ui-monospace, monospace);
   color: var(--muted, #9b9890);
}
.p2-term-title {
   min-width: 0;
   line-height: 1.5;   /* room for descenders inside the overflow clip */
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
/* Pause / Play and Replay share one look (.p2-term-btn); .p2-term-pause and .p2-term-replay name each one */
.p2-term-ctrls {
   display: inline-flex;
   flex: none;
   align-items: center;
   gap: 2px;
}
.p2-term-btn {
   display: inline-flex;
   flex: none;
   align-items: center;
   gap: 7px;
   margin: 0;
   padding: 6px 10px;
   border: 1px solid transparent;
   border-radius: 0;
   background: transparent;
   color: var(--muted, #9b9890);
   font: inherit;
   letter-spacing: 0.02em;
   cursor: pointer;
   transition:
      color 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
      border-color 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
      background-color 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.p2-term-btn svg {
   display: block;
   flex: none;
   width: 12px;
   height: 12px;
   color: var(--ember, #e8823f);
}
/* "Pause" and "Play" take the same width, so the toggle doesn't shift when it flips */
.p2-term-pause span {
   min-width: 5ch;
}
.p2-term-btn:hover {
   border-color: var(--line-hi, #3d3d3d);
   color: var(--star, #f2f2ee);
}
.p2-term-btn:active {
   background-color: var(--line, #2a2a2a);
   color: var(--star, #f2f2ee);
}
.p2-term-btn:focus-visible {
   outline: 2px solid var(--ember-hi, #ffb27a);
   outline-offset: 1px;
   color: var(--star, #f2f2ee);
}

/* ---------- the session ---------- */
.p2-term-pre {
   margin: 0;
   padding: 18px 20px 22px;
   overflow-x: auto;
   overflow-y: hidden;
   font: 400 13px/1.7 var(--f-mono, "IBM Plex Mono", ui-monospace, monospace);
   color: var(--text, #d9d7d2);
   white-space: pre;
   tab-size: 3;
   -webkit-user-select: text;
   user-select: text;
   scrollbar-width: thin;
   scrollbar-color: var(--line-hi, #3d3d3d) transparent;
}
.p2-term-pre:focus-visible {
   outline: 2px solid var(--ember-hi, #ffb27a);
   outline-offset: -3px;
}
.p2-term .p2-code {
   display: block;
   width: max-content;
   min-width: 100%;
   padding: 0;
   background: none;
   font: inherit;
   color: inherit;
   white-space: pre; /* survive a page-level `code` rule that collapses whitespace */
}

/* one row per copy-deck line; full width so the sweep crosses the whole row */
.p2-ln {
   position: relative;
   z-index: 0;
   display: inline-block;
   min-width: 100%;
   vertical-align: top;
}
/* an animation-only row (and its line break) in the static copy-deck state */
.p2-term .p2-off {
   display: none;
}

/* colour roles (the player eases between them inline, in OKLCH, and clears the inline value when a run rests on
   its own class colour, so pages can restyle these) */
.p2-term .p2-c-text { color: var(--text, #d9d7d2); }
.p2-term .p2-c-ok { color: var(--ok, #9fd8a6); }
.p2-term .p2-c-warn { color: var(--warn, #e9bc64); }
.p2-term .p2-c-err { color: var(--err, #f2877a); }
.p2-term .p2-c-dim { color: var(--dim, #86837d); }
.p2-term .p2-c-cmd { color: var(--star, #f2f2ee); }
.p2-term .p2-c-acc { color: var(--ember-hi, #ffb27a); }
.p2-term .p2-c-agent { color: var(--star, #f2f2ee); font-weight: 500; }

/* ---------- slots: status words, counts, timers ---------- */
.p2-slot,
.p2-v,
.p2-chg,
.p2-new {
   display: inline-block;
   vertical-align: top;
}
.p2-slot,
.p2-chg {
   position: relative;
}

/* crossfade: the old characters lift out (a pseudo-element, so never in the text or the selection) while the new
   ones settle in from just below */
.p2-new {
   opacity: var(--x, 1);
   transform: translateY(calc((1 - var(--x, 1)) * 0.32em));
}
.p2-chg::before {
   content: attr(data-from);
   content: attr(data-from) / "";
   position: absolute;
   top: 0;
   left: 0;
   white-space: pre;
   opacity: calc(1 - var(--x, 1));
   transform: translateY(calc(var(--x, 1) * -0.32em));
   pointer-events: none;
   -webkit-user-select: none;
   user-select: none;
}

/* spinner: braille frames written by the player into data-spin */
.p2-slot::after {
   content: attr(data-spin);
   content: attr(data-spin) / "";
   position: absolute;
   top: 0;
   opacity: var(--so, 0);
   color: var(--ember-hi, #ffb27a);
   pointer-events: none;
   -webkit-user-select: none;
   user-select: none;
}
.p2-spin-left::after {
   right: 100%;
   margin-right: 1ch;
}
.p2-spin-on::after {
   left: 0;
}
.p2-spin-on > .p2-v {
   opacity: calc(1 - var(--so, 0));
}

/* ---------- the timing note: the timers are for show (Jason) ---------- */
.p2-term-note {
   margin: 0;
   padding: 0 20px 14px;
   font: 400 12px/1.4 var(--f-sans, "Schibsted Grotesk", system-ui, sans-serif);
   color: var(--muted, #9b9890);
}

/* ---------- typing caret ---------- */
.p2-caret {
   display: inline-block;
   width: 0.55em;
   height: 1.15em;
   margin-left: 1px;
   vertical-align: -0.2em;
   background: var(--ember, #e8823f);
   opacity: 0;
}

/* ---------- completion sweep: one faint pass across the row ---------- */
.p2-sweepbox {
   position: absolute;
   inset: 0;
   z-index: -1;
   overflow: hidden;
   visibility: hidden;   /* the player shows it only while a sweep runs, so resting rows copy as plain lines */
   pointer-events: none;
}
.p2-sweep {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   width: 40%;
   opacity: 0;
   transform: translateX(-100%);
   background: linear-gradient(90deg, transparent, rgba(159, 216, 166, 0.16) 60%, transparent);
   background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--p2-sw, #9fd8a6) 17%, transparent) 60%, transparent);
}

/* ---------- reduced motion: the player draws the static copy-deck state, with nothing to pause or replay ---------- */
@media (prefers-reduced-motion: reduce) {
   .p2-term-ctrls {
      display: none;
   }
}

/* ---------- narrow screens: the session scrolls sideways inside its own frame; the buttons go icon-only (their
   aria-labels still name them) so the title keeps its room ---------- */
@media (max-width: 480px) {
   .p2-term-bar {
      padding-left: 14px;
   }
   .p2-term-btn {
      padding: 9px;
   }
   .p2-term-btn span {
      position: absolute;
      width: 1px;
      min-width: 0;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
   }
   .p2-term-pre {
      padding: 16px 16px 20px;
   }
}