/*
 * SV3 TELEPORT DOWN — the re-lay control (#6853, W4 · DH #673).
 *
 * LIME IS RESERVED (#6024), AND THIS CONTROL NEVER SPENDS IT — ORCH ruling,
 * after #6937. The surface's single primary is #6851's CUT: the editor's own
 * save, the gesture the whole panel exists for. A pull is somebody else's work
 * arriving, which is a different weight.
 *
 * So lime appears here on ONE thing and it is not an action: the keyboard focus
 * ring. Not on the verb, not on the selected row, not on the region count, not
 * on DELIVERED, not on the progress bar, not on a missing-file row.
 *
 * The selected row is the OUTLINED SECONDARY — neutral ink, a stronger border,
 * and nothing else. It says "this is the row you are on", which is all it was
 * ever meant to say.
 *
 * NOT ON THIS MACHINE IS NOT AN ERROR. It is `--fg-mute` on `--bg-sub` with a
 * neutral rule: no `--danger`, no amber, no warning triangle. Six months into a
 * show, on another rig, it is the normal case, and dressing a normal case as a
 * failure is how a truthful product starts feeling broken.
 *
 * `refused` may spend the ONE red line this control is allowed. Nothing else in
 * it is ever red.
 *
 * At 390 (and in the browser) the control is TEXT ONLY — there is no button to
 * size, because none is rendered.
 */

.sv3-tp {
  --sv3-tp-sub: #3A3C44;
  --sv3-tp-line: #45434F;
  --sv3-tp-line-strong: #565362;
  --sv3-tp-fg: #D6D5DB;
  --sv3-tp-mute: #A19FAD;
  --sv3-tp-dim: #6F6C7F;
  --sv3-tp-accent: #CCDE49;
  --sv3-tp-accent-hover: #D8E574;
  --sv3-tp-accent-deep: #A3B520;
  --sv3-tp-on-accent: #1B1825;
  --sv3-tp-ring: rgba(204, 222, 73, 0.60);
  --sv3-tp-danger: #E87272;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--sv3-tp-line);
  background: var(--sv3-tp-sub);
  border-radius: 0 0 6px 6px;
  color: var(--sv3-tp-fg);
  font: 500 12px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.sv3-tp-copy {
  margin: 0;
  color: var(--sv3-tp-fg);
  overflow-wrap: anywhere;
}

.sv3-tp-detail {
  margin: 0;
  color: var(--sv3-tp-mute);
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* The one diagnostic line a refusal is allowed. Nothing else here is red. */
.sv3-tp-detail.is-diagnostic { color: var(--sv3-tp-danger); }

/* ── NOT ON THIS MACHINE ─────────────────────────────────────────────────── */

.sv3-tp[data-state="not_on_this_machine"] {
  border-left: 2px solid var(--sv3-tp-line-strong);
}

.sv3-tp-missing {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sv3-tp-missing-row {
  color: var(--sv3-tp-mute);
  font-weight: 400;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.sv3-tp-missing-lib { color: var(--sv3-tp-fg); }
.sv3-tp-missing-sep { color: var(--sv3-tp-dim); }
.sv3-tp-missing-ref { color: var(--sv3-tp-mute); }

.sv3-tp-more {
  margin: 0;
  color: var(--sv3-tp-dim);
  font-size: 11px;
  font-weight: 400;
}

/* DH #673: `see all` expands in place, so the line is a real button when a
   control may exist (390 keeps the static line). Quiet text action, like the
   offers - no chrome of its own. */
button.sv3-tp-more {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.sv3-tp-more:focus-visible {
  outline: 1px solid var(--line-strong, currentColor);
  outline-offset: 2px;
}

/* ── IN FLIGHT — neutral with motion, never lime ─────────────────────────── */

.sv3-tp-progress {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}

.sv3-tp-progress > span {
  display: block;
  height: 100%;
  background: var(--sv3-tp-mute);
  transition: width 160ms linear;
}

/* ── The verbs ───────────────────────────────────────────────────────────── */

.sv3-tp-verb,
.sv3-tp-offer {
  align-self: flex-start;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 12px;
  border: 1px solid var(--sv3-tp-line-strong);
  border-radius: 5px;
  background: transparent;
  color: var(--sv3-tp-fg);
  font: 600 12px/1.2 inherit;
  cursor: pointer;
}

.sv3-tp-offer {
  font-weight: 500;
  color: var(--sv3-tp-mute);
}

/* ── The hold (#6939) ────────────────────────────────────────────────────────
 *
 * A pull writes into an open session, so the verb is HELD, like SYNC's. The
 * control has always rendered the duration and never showed the press being
 * counted, which left a host with two bad options: a button that looks dead for
 * 800ms, or a session write on a single click.
 *
 * This is the fork's own shipped hold-to-confirm shape — a NEUTRAL progress
 * sweep, never red, the same "no danger colour" rule #6881's revoke ring lives
 * under. The transition DURATION is set inline by bindHold() from the button's
 * own data-hold, so the affordance and the timing can never disagree.
 *
 * NO RULE HERE CHANGES A BOX (#6840): the fill is absolutely positioned inside
 * the button that already exists, the label is lifted above it, and the button's
 * padding, border and size are untouched.
 */
.sv3-tp-verb { position: relative; overflow: hidden; }

.sv3-tp-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--sv3-tp-line-strong);
  pointer-events: none;
}

.sv3-tp-label { position: relative; }

/* ONE sweep colour for every row now. The selected row is no longer a filled
   lime button, so it needs no special-cased fill to stay legible on — which is
   a small mercy the ruling bought: there is one hold affordance, not two. */

/* A disarmed verb has no fill in the markup at all; this is belt and braces for
   a stale node mid-redraw. */
.sv3-tp-verb[disabled] .sv3-tp-fill { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* The hold still runs — it is a safety gesture, not a decoration — but the
     sweep arrives at once rather than travelling. */
  .sv3-tp-fill { transition: none !important; }
}

/* THE SELECTED ROW — outlined secondary, never lime.
 *
 * The class is `is-selected` and not `is-primary`, because it is not the
 * primary: CUT is. A class that said `primary` on the one control ruled out of
 * being it would be a lie sitting in the markup waiting to be believed.
 *
 * The whole difference is a stronger border and brighter ink. No fill, no
 * colour, no weight change — the row you are on should read as the row you are
 * on, not as a second call to action competing with the save. */
.sv3-tp-verb.is-selected {
  border-color: var(--sv3-tp-fg);
  color: var(--sv3-tp-fg);
}

/* Hover and press brighten the GROUND, not the border: the border going lime on
   hover would have spent the accent on an action after all, which is the thing
   the ruling took away. The wiring contract catches exactly that. */
.sv3-tp-verb.is-selected:hover:not([disabled]) { background: var(--sv3-tp-sub); }
.sv3-tp-verb.is-selected:active:not([disabled]) { background: var(--sv3-tp-line); }

.sv3-tp-verb[disabled] {
  border-color: var(--sv3-tp-line);
  background: transparent;
  color: var(--sv3-tp-dim);
  cursor: not-allowed;
}

.sv3-tp-verb:focus-visible,
.sv3-tp-offer:focus-visible {
  outline: 2px solid var(--sv3-tp-ring);
  outline-offset: 2px;
}

/* ── The fork note ───────────────────────────────────────────────────────── */

.sv3-tp-fork {
  margin: 0;
  color: var(--sv3-tp-dim);
  font-size: 11px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* ── Inspection only ─────────────────────────────────────────────────────── */

.sv3-tp[data-inspection="1"] {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

/* Down to the app's 320px floor the copy still reads and never overflows. */
@media (max-width: 420px) {
  .sv3-tp { padding: 6px 8px 8px; font-size: 11px; }
  .sv3-tp-verb, .sv3-tp-offer { width: 100%; text-align: center; }
}