/*
 * The grab area is wider than the seam it sits on — 7px against a 1px border,
 * centred on it by the caller. Widening the border instead would put a visible
 * 7px channel between every pair of panes; a target this size is what makes it
 * catchable without one.
 */
._handle_1iu6k_7 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  z-index: 5;
  cursor: col-resize;
  /* Never painted itself. What lights up is the 2px line below, so the size of
     the target and the size of the mark are two separate decisions: the first
     is about hitting it, the second about how loud it is once hit. The two
     were one for a while — the whole 7px filled with --accent-soft — and a
     band that wide reads as a gap in the layout rather than an edge you can
     pull. */
  background: transparent;
}

/* The visible line: as wide as the border it covers plus one, and centred on
   it. `transform` and not `left`, so it stays centred wherever the caller has
   put the handle. */
._handle_1iu6k_7::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: transparent;
  transition: background var(--dur);
}

._handle_1iu6k_7:hover::after,
._handle_1iu6k_7:focus-visible::after {
  /* The solid accent, not the soft wash the full-width version used: at 2px a
     14%-alpha line is barely there, and the point of the hover is to confirm
     you are on the thing before you drag it. */
  background: var(--accent);
}

/* Only while it has the keyboard, since it is otherwise invisible and a focus
   ring on an empty 7px strip reads as a rendering fault. Drawn on the line
   rather than the target, for the same reason the hover is. */
._handle_1iu6k_7:focus-visible::after {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

/* Below the breakpoint the rail is a drawer laid over the work and the review
   is one column at a time, so there is no boundary left to drag. Hidden here
   rather than unmounted by each caller: the layout that removes the second
   pane is a media query, and a JS width check would be a second opinion about
   the same thing that could disagree with it. */
@media (max-width: 820px) {
  ._handle_1iu6k_7 {
    display: none;
  }
}

/* A coarse pointer cannot hit a 7px strip, and on a touch screen the drag
   competes with scrolling the pane. */
@media (pointer: coarse) {
  ._handle_1iu6k_7 {
    display: none;
  }
}
._settings_i2hl5_1 {
  --settings-col: 560px;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  background: var(--bg);
}

/* The border spans the full width; its contents sit in the centred column. */
._head_i2hl5_10 {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--bd);
}

._headInner_i2hl5_15 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: var(--settings-col);
  margin: 0 auto;
}

._head_i2hl5_10 h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

._close_i2hl5_31 {
  margin-left: auto;
  width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--tx-3);
}

._close_i2hl5_31:hover {
  background: var(--s3);
  color: var(--tx);
}

._pane_i2hl5_46 {
  overflow-y: auto;
  padding: 16px 18px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: var(--settings-col);
  margin: 0 auto;
}

._section_i2hl5_57 {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-3);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--bd);
}

._sectionHint_i2hl5_67 {
  margin-left: 8px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tx-3);
  opacity: 0.8;
}

/* ---------- instance pool ---------- */
._pool_i2hl5_77 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._slot_i2hl5_83 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r-md);
  background: var(--s2);
  border: 1px solid var(--bd);
}

._slotDot_i2hl5_93 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mute);
  flex: none;
}

._slotDot_i2hl5_93[data-state='ready'] {
  background: var(--ok);
}

._slotDot_i2hl5_93[data-state='failed'] {
  background: var(--err);
}

._slotDot_i2hl5_93[data-state='preparing'],
._slotBody_i2hl5_110 {
  min-width: 0;
  flex: 1;
}

._slotBranch_i2hl5_115 {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The branch beside an instance's name — what it is on, not what it is called. */
._slotSub_i2hl5_125 {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--tx-3);
}

._slotMeta_i2hl5_132 {
  font-size: 10.5px;
  color: var(--tx-3);
  margin-top: 2px;
}

._slotRemove_i2hl5_138 {
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  color: var(--tx-2);
  font-size: 11px;
  font-weight: 550;
  flex: none;
}

._slotRemove_i2hl5_138:hover:not(:disabled) {
  border-color: var(--err);
  color: var(--err);
}

._slotRemove_i2hl5_138:disabled {
  opacity: 0.4;
  cursor: default;
}

._add_i2hl5_159 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 30px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--bd-3);
  color: var(--tx-2);
  font-size: 11.5px;
  font-weight: 550;
  transition:
    background var(--dur),
    color var(--dur);
}

._add_i2hl5_159:hover:not(:disabled) {
  background: var(--s2);
  color: var(--tx);
}

/* Adding a repo creates a worktree in every instance, so it takes a moment;
   the button says so rather than accepting a second press. */
._add_i2hl5_159:disabled {
  cursor: default;
  color: var(--tx-3);
}

/* Why an add or remove did not happen. Each is something to go and do, so
   it stays until the next attempt rather than fading. */
._refusal_i2hl5_189 {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  color: var(--tx);
  font-size: 11.5px;
  line-height: 1.5;
}

._field_i2hl5_198 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._field_i2hl5_198 > label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

._hint_i2hl5_213 {
  font-size: 10.5px;
  color: var(--tx-3);
  font-weight: 400;
}

/* Same segmented control as app Settings, sized for this pane's fields. */
._seg_i2hl5_220 {
  display: flex;
  padding: 2px;
  gap: 2px;
  background: var(--s3);
  border-radius: var(--r-sm);
}

._seg_i2hl5_220 button {
  flex: 1;
  height: 24px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--tx-3);
  transition:
    background var(--dur),
    color var(--dur);
}

._seg_i2hl5_220 button:hover {
  color: var(--tx);
}

._seg_i2hl5_220 button[data-on='true'] {
  background: var(--s1);
  color: var(--tx);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

._input_i2hl5_251 {
  height: 30px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm);
  background: var(--s2);
  padding: 0 9px;
  font-size: 12.5px;
}

._input_i2hl5_251:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--s1);
}

/* ---------- remove ---------- */
._remove_i2hl5_267 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border-radius: var(--r-md);
  background: var(--s2);
  border: 1px solid var(--bd);
}

._removeTitle_i2hl5_277 {
  font-size: 12px;
  font-weight: 550;
}

._removeSub_i2hl5_282 {
  font-size: 10.5px;
  color: var(--tx-3);
  margin-top: 2px;
  line-height: 1.45;
}

._confirm_i2hl5_289 {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

._danger_i2hl5_295 {
  margin-left: auto;
  height: 27px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--err);
  background: transparent;
  color: var(--err);
  font-size: 11.5px;
  font-weight: 550;
  white-space: nowrap;
  flex: none;
}

._danger_i2hl5_295:hover {
  background: var(--err-soft);
}

._confirm_i2hl5_289 ._danger_i2hl5_295 {
  margin-left: 0;
}

._ghost_i2hl5_317 {
  height: 27px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  background: var(--s1);
  color: var(--tx-2);
  font-size: 11.5px;
  font-weight: 550;
  white-space: nowrap;
}

._ghost_i2hl5_317:hover {
  background: var(--s3);
  color: var(--tx);
}
._blank_1t4gn_1 {
  display: grid;
  place-items: center;
  background: var(--page);
  min-height: 0;
}

._card_1t4gn_8 {
  text-align: center;
  padding: 0 24px;
}

._mark_1t4gn_13 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--tx-3);
  opacity: 0.6;
  margin-bottom: 10px;
}

._line_1t4gn_22 {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--tx-3);
}

._button_1t4gn_28 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 15px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  transition: background var(--dur);
}

._button_1t4gn_28:hover {
  background: var(--accent-hi);
}

/* The picker variant. Wider than the first-run card, because a branch name is
   the thing that identifies a worktree and truncating it identifies nothing. */
._card_1t4gn_8[data-list='true'] {
  max-width: 420px;
  width: 100%;
  text-align: left;
  align-items: stretch;
}

._list_1t4gn_55 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  width: 100%;
}

._row_1t4gn_63 {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  font-family: var(--font-ui);
  text-align: left;
}

._row_1t4gn_63:hover {
  border-color: var(--bd-3);
  background: var(--s3);
}

._rowDot_1t4gn_82 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--mute);
}

._rowDot_1t4gn_82[data-status='working'] {
  background: var(--info);
}

._rowDot_1t4gn_82[data-status='waiting'] {
  background: var(--warn);
}

._rowDot_1t4gn_82[data-status='error'] {
  background: var(--err);
}

._rowName_1t4gn_102 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx);
  flex: none;
}

._rowBranch_1t4gn_109 {
  min-width: 0;
  flex: 1;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._rowBadge_1t4gn_120 {
  flex: none;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
/* Reads as a file, not as a control: no hover state, no pointer, because
   there is nothing behind it to open. */
._chip_9szrx_3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  color: var(--tx-2);
  font-size: 11px;
  line-height: 1.4;
}

/* The name is the useful half, so it gets the space and the ellipsis. */
._name_9szrx_18 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tx);
}

._size_9szrx_25 {
  flex: none;
  color: var(--mute);
  font-size: 10.5px;
}
/* Clawd, four states.

   Idle keeps the original treatment: one held pose, a slow breath, and eyes
   squashed to slits by transform. The other three cut between two poses, which
   keeps their edges crisp — a hard swap can't produce a half-pixel. */
._clawd_3xsrp_6 {
  overflow: visible;
  flex: none;
}

/* Every transform is measured against the element's own box, not the whole
   canvas. Without this the eyes scale about the middle of the viewBox and fly
   out of the head, and the breathing body anchors to the bottom of the canvas
   instead of its own base — lifting it clear of the legs. */
._clawd_3xsrp_6 * {
  transform-box: fill-box;
}

._torso_3xsrp_19,
._arm_3xsrp_20,
._leg_3xsrp_21 {
  fill: var(--clawd, #d97757);
}

._eye_3xsrp_25 {
  fill: #1b1b1b;
}

/* ---------------------------------------------------------------- idle --
   Asleep: eyes squashed to slits, a slow breath, and the sleep marks
   drifting up. Deliberately the quietest state — "nothing is happening"
   should not compete for attention. */
._clawd_3xsrp_6[data-status='idle'] ._body_3xsrp_33 {
  animation: _breathe_3xsrp_1 3.4s ease-in-out infinite;
  transform-origin: bottom;
}

._clawd_3xsrp_6[data-status='idle'] ._eye_3xsrp_25 {
  transform: translateY(0.7px) scaleY(0.25);
}

._zzz_3xsrp_42 rect {
  fill: var(--tx-3);
  opacity: 0;
}

._clawd_3xsrp_6[data-status='idle'] ._zzz_3xsrp_42 ._z1_3xsrp_47 {
  animation: _drift_3xsrp_1 3.4s ease-out infinite;
}

._clawd_3xsrp_6[data-status='idle'] ._zzz_3xsrp_42 ._z2_3xsrp_51 {
  animation: _drift_3xsrp_1 3.4s ease-out infinite 0.7s;
}

@keyframes _breathe_3xsrp_1 {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.05);
  }
}

@keyframes _drift_3xsrp_1 {
  0% {
    opacity: 0;
    transform: translate(0, 2px);
  }
  30% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translate(2px, -4px);
  }
}

/* ------------------------------------------------------- the other three --
   Only one frame is visible at a time. Each runs the same keyframes with a
   negative delay of its share of the cycle, so they hand over in order and
   none is blank on the first paint.

   Two frames everywhere, so each is visible for half the cycle. */
._frame_3xsrp_85 {
  opacity: 0;
  animation-name: _flip_3xsrp_1;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  /* The fallback matters: a frame with no duration never animates, and since
     these start at opacity 0 that means it never appears at all. */
  animation-duration: var(--cycle, 0.5s);
}

/* Frame 2 runs the same keyframes half a cycle behind, so it takes over
   exactly as frame 1 hides. */
._frame_3xsrp_85[data-frame='1'] {
  animation-delay: calc(var(--cycle, 0.5s) * -0.5);
}

@keyframes _flip_3xsrp_1 {
  0%,
  49.999% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* -- working: quick enough to read as a walk. */
._clawd_3xsrp_6[data-status='working'] {
  --cycle: 0.5s;
}

/* -- waiting: the state that costs you money while it sits there. */
._clawd_3xsrp_6[data-status='waiting'] {
  --cycle: 0.86s;
}

/* -- error: slow enough to read as "stopped" rather than "busy". */
._clawd_3xsrp_6[data-status='error'] {
  --cycle: 1.9s;
}

._clawd_3xsrp_6[data-status='error'] ._torso_3xsrp_19,
._clawd_3xsrp_6[data-status='error'] ._arm_3xsrp_20,
._clawd_3xsrp_6[data-status='error'] ._leg_3xsrp_21 {
  fill: var(--err);
}

/* Posture and colour still carry the state without the movement. */
@media (prefers-reduced-motion: reduce) {
  ._clawd_3xsrp_6 ._frame_3xsrp_85,
  ._clawd_3xsrp_6 ._body_3xsrp_33,
  ._clawd_3xsrp_6 ._zzz_3xsrp_42 rect {
    animation: none;
  }

  ._clawd_3xsrp_6 ._frame_3xsrp_85 {
    opacity: 0;
  }

  ._clawd_3xsrp_6 ._frame_3xsrp_85[data-frame='0'] {
    opacity: 1;
  }
}
/* Over the transcript, not above it: opening the bar must not move the text
   you opened it to search. The offset clears the scrollbar. */
._bar_1xp0g_3 {
  position: absolute;
  top: 8px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-md);
  background: var(--s2);
  box-shadow: var(--shadow);
  color: var(--tx-3);
}

._input_1xp0g_20 {
  width: 180px;
  border: 0;
  outline: none;
  background: none;
  color: var(--tx);
  /* 16px or the page zooms on focus on a phone; the desktop size is below. */
  font: inherit;
  font-size: 16px;
}

@media (min-width: 821px) {
  ._input_1xp0g_20 {
    width: 200px;
    font-size: 12.5px;
  }
}

._input_1xp0g_20::placeholder {
  color: var(--tx-3);
}

._count_1xp0g_42 {
  /* Fixed width and tabular figures, so stepping from 9/12 to 10/12 doesn't
     shuffle the buttons beside it. */
  width: 46px;
  flex: none;
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--tx-3);
}

._count_1xp0g_42[data-empty='true'] {
  color: var(--attn);
}

._step_1xp0g_57,
._close_1xp0g_58 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--r-xs);
  color: var(--tx-3);
  transition:
    background var(--dur),
    color var(--dur);
}

._step_1xp0g_57:hover:not(:disabled),
._close_1xp0g_58:hover {
  background: var(--s4);
  color: var(--tx);
}

._step_1xp0g_57:disabled {
  opacity: 0.35;
  cursor: default;
}

/* One chevron serves both directions rather than a second path in the icon
   set — the shape is symmetric and the rotation is unambiguous. */
._up_1xp0g_85 {
  display: flex;
  transform: rotate(180deg);
}
/* Invisible, over everything but the popover it belongs to. A later popover
   opened from inside this one lands above both, because it is portalled after
   them and the two share these z-indices — document order breaks the tie. */
._scrim_4c02q_4 {
  position: fixed;
  inset: 0;
  z-index: 70;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: default;
  /* A titlebar drag region would otherwise take the dismissing click and move
     the window instead of closing the menu. */
  -webkit-app-region: no-drag;
}

/* Placed by the component, from its anchor, before first paint. The surface is
   the one every popover had drawn separately; sizes and padding are the
   caller's. */
._pop_4c02q_20 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 71;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-md);
  background: var(--s2);
  box-shadow: var(--shadow);
  -webkit-app-region: no-drag;
}
._wrap_1b6fv_1 {
  position: relative;
  flex: none;
}

/* Quieter than the mode chip beside it, and deliberately. The mode is a thing
   you set and act on; this is a thing you check. Same height so the composer
   row still reads as one line of controls. */
._chip_1b6fv_9 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  max-width: 150px;
  padding: 0 8px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: none;
  color: var(--tx-3);
  font-size: 11.5px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition:
    border-color var(--dur),
    color var(--dur);
}

._chip_1b6fv_9:hover {
  border-color: var(--bd-2);
  color: var(--tx-2);
}

/* Nothing has reported yet. Dimmer still rather than hidden: a control that
   disappears reads as a missing feature, where a dash reads as a figure that
   is not available yet — the same call the gauges make. */
._chip_1b6fv_9[data-unknown] {
  color: var(--tx-3);
  opacity: 0.6;
}

/* In place of the dash while the agent is asked, so a chip that will fill in
   a second from now does not read as one that has nothing to say. Sized to the
   label's cap height so the row does not jump when the name lands. */
._spinner_1b6fv_44 {
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: _modelSpin_1b6fv_1 var(--dur-spin) linear infinite;
}

@keyframes _modelSpin_1b6fv_1 {
  to {
    transform: rotate(360deg);
  }
}

._name_1b6fv_59 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._menu_1b6fv_65 {
  display: flex;
  flex-direction: column;
  min-width: 230px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}

/* Upwards, because the chip sits on the bottom edge of the window. */
._menu_1b6fv_65 button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--tx-2);
  font-size: 12px;
  cursor: pointer;
}

._menu_1b6fv_65 button:hover {
  background: var(--s3);
  color: var(--tx);
}

._menu_1b6fv_65 button[data-on] {
  color: var(--tx);
}

._optionName_1b6fv_97 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._empty_1b6fv_103 {
  padding: 8px 9px;
  color: var(--tx-3);
  font-size: 11.5px;
  line-height: 1.45;
}
/* Assistant markdown. Uses the same code tokens as the diff viewer so a
   snippet in the conversation and the same code in Review look identical. */
._md_1uawc_3 {
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* The thread already spaces messages apart; only *internal* gaps belong here,
   so the first and last block sit flush with the row. */
._md_1uawc_3 > :first-child {
  margin-top: 0;
}

._md_1uawc_3 > :last-child {
  margin-bottom: 0;
}

._p_1uawc_19 {
  margin: 0 0 8px;
}

._strong_1uawc_23 {
  font-weight: 650;
  color: var(--tx);
}

._em_1uawc_28 {
  font-style: italic;
}

._h_1uawc_32 {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--tx);
}

._hSmall_1uawc_39 {
  margin: 12px 0 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx-2);
}

._hr_1uawc_46 {
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--bd);
}

._list_1uawc_52 {
  margin: 0 0 8px;
  padding-left: 20px;
}

._li_1uawc_52 {
  margin: 2px 0;
}

/* Nested lists shouldn't inherit the outer list's bottom gap. */
._li_1uawc_52 > ._list_1uawc_52 {
  margin: 2px 0 0;
}

/* Inline code. Inside a `pre` the block's own styling wins — see below. */
._code_1uawc_67 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--s3);
  border-radius: var(--r-xs);
  padding: 1px 4px;
}

._pre_1uawc_75 {
  margin: 0 0 8px;
  padding: 9px 11px;
  background: var(--code-bg);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  overflow-x: auto;
}

/* The anchor for the copy button. `.pre` cannot be it — that is the element
   that scrolls, so a button positioned against it travels with the code. */
._block_1uawc_86 {
  position: relative;
  /* Taken over from `.pre` below, because the gap under a block belongs to
     whichever element is the outer one. */
  margin: 0 0 8px;
}

._block_1uawc_86 > ._pre_1uawc_75 {
  margin-bottom: 0;
}

._copy_1uawc_97 {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-xs);
  /* The block's own ground, so the button never sits half over a token. */
  background: var(--code-bg);
  /* Visible while reading rather than revealed on hover. The staging gutter
     learned this the hard way: a control you only find by pointing at it is
     missing at the moment you decide you want it.

     Quiet by colour and not by opacity, which was the first version and was
     wrong: --tx-3 already encodes "muted but readable" per theme, and dimming
     it a further 0.4 left the icon all but invisible on the light theme's pale
     code ground while still reading fine on the dark one. */
  color: var(--tx-3);
  transition:
    color var(--dur),
    background var(--dur);
}

._copy_1uawc_97:hover {
  background: var(--s3);
  color: var(--tx);
}

._copy_1uawc_97[data-said='ok'] {
  color: var(--ok);
}

._copy_1uawc_97[data-said='no'] {
  color: var(--err);
}

/* A fenced block's body is a `code` element too, so the inline pill styling
   has to be undone rather than avoided. */
._pre_1uawc_75 ._code_1uawc_67 {
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre;
}

._tableWrap_1uawc_147 {
  margin: 0 0 8px;
  overflow-x: auto;
}

._table_1uawc_147 {
  border-collapse: collapse;
  font-size: 12px;
}

._th_1uawc_157,
._td_1uawc_158 {
  border: 1px solid var(--bd);
  padding: 4px 8px;
  text-align: left;
}

._th_1uawc_157 {
  background: var(--s2);
  font-weight: 600;
  color: var(--tx);
  white-space: nowrap;
}

._link_1uawc_171 {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Shiki writes both palettes into one render as CSS variables, so switching
   appearance never re-highlights — it just reads the other variable. */
._shiki_1uawc_179 .shiki,
._shiki_1uawc_179 .shiki span {
  color: var(--shiki-light);
  background: transparent !important;
}

[data-theme='dark'] ._shiki_1uawc_179 .shiki,
[data-theme='dark'] ._shiki_1uawc_179 .shiki span {
  color: var(--shiki-dark);
}

._shiki_1uawc_179 pre.shiki {
  margin: 0;
  padding: 0;
  background: transparent !important;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  overflow-x: auto;
}

._shiki_1uawc_179 code {
  font-family: var(--font-mono);
}

/* A code block and the affordances that hang off it. The button is positioned
   against this rather than against the message, so hovering one block in a
   reply full of them reveals only that block's pin. */
._block_1uawc_86 {
  position: relative;
}

/* Hidden until hover, because a pin on every block would be a column of
   buttons down the side of every reply — and the thing being read is the code,
   not the furniture. Focus reveals it too: a keyboard has no hover. */
._pin_1uawc_214 {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  color: var(--tx-3);
  opacity: 0;
  transition:
    opacity var(--dur),
    color var(--dur);
}

._block_1uawc_86:hover ._pin_1uawc_214,
._pin_1uawc_214:focus-visible {
  opacity: 1;
}

._pin_1uawc_214:hover {
  color: var(--tx);
}
/* Above the transcript and below the tab strip. Deliberately quiet: it is
   furniture around the conversation, not part of it. */
/* Only ever the height of its tab row. The panel below is an overlay, so
   opening a pin cannot move the conversation — reading something you kept is
   not a reason for the thing you were reading to jump. */
._strip_f5frw_6 {
  position: relative;
  z-index: 5;
  flex: none;
  border-bottom: 1px solid var(--bd);
  /* A faint wash of the brand colour, not the chrome's --s1. This sits
     directly under the chat tab strip, which is --s1 with the same bottom
     border, so matching it made the pins look like a second row of chat tabs.
     The tint is weak on purpose: enough that the eye knows the band is a
     different kind of thing, not so much that it competes with the
     conversation beneath it. Translucent, so it works over either theme's
     page. */
  background: var(--accent-wash);
}

._tabs_f5frw_21 {
  display: flex;
  /* Stretch so a tab fills the row's height and its underline sits on the
     row's bottom edge. The leading icon is not a tab and has to opt out, or it
     is stretched to thirty pixels and reads as floating at the top. */
  align-items: stretch;
  gap: 4px;
  padding: 0 10px;
  color: var(--tx-3);
  /* Scrolls rather than wraps: a second row would push the conversation down
     every time another pin is added, which is a strange thing for a strip
     meant to save room to do. */
  overflow-x: auto;
  overflow-y: hidden;
  /* No bar: the wheel scrolls it sideways — lib/wheelSideways.ts. */
  scrollbar-width: none;
}

/* Underlined tabs rather than pills. A pill is a thing sitting on a bar; a tab
   is the top edge of the panel it opens, and that is what this is — the panel
   below is flush and full width, so the two read as one piece rather than a
   card floating under a button. */
._tab_f5frw_21 {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 240px;
  height: 30px;
  padding: 0 4px 0 9px;
  /* Edges on three sides, and the accent underline on the fourth. Raising the
     fill instead would have collapsed the ladder — an idle tab would meet the
     open one, and the open one has to match the panel — so the pills get
     presence from an outline rather than from another step of grey. */
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  /* Reserved on every tab so selecting one does not move the row by two
     pixels. */
  border-bottom: 2px solid transparent;
  /* Every tab has a surface of its own, not just the open one — without it a
     row of pins is a run of grey monospace that reads as one long sentence
     rather than three things to click. --s2 rather than --s1: against a band
     tinted this faintly, one step of lightness is not a step anyone sees. */
  background: var(--s2);
  color: var(--tx-2);
  font-size: 11.5px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition:
    border-color var(--dur),
    color var(--dur);
}

._tab_f5frw_21:hover {
  background: var(--s3);
  color: var(--tx);
}

/* The open tab carries the panel's own background, with the corners rounded
   only at the top. The two are flush, so they read as one surface with a
   handle rather than a card under a button — which is the whole reason for
   tabs over pills here. */
._tab_f5frw_21[data-on='true'] {
  border-color: var(--bd-3);
  border-bottom-color: var(--accent);
  background: var(--s3);
  color: var(--tx);
}

._label_f5frw_90 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dim until the tab is hovered, so a row of pins is a row of names rather than
   a row of close buttons. */
._remove_f5frw_98 {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  color: var(--tx-3);
  opacity: 0;
  transition: opacity var(--dur);
}

._tab_f5frw_21:hover ._remove_f5frw_98 {
  opacity: 1;
}

._remove_f5frw_98:hover {
  color: var(--err);
}

/* Flush under the tab row, full width, no top edge of its own: the row's own
   bottom border is this panel's top border, which is what makes a tab look
   like the top of the thing it opens rather than a button above a card.
   
   Still an overlay. In flow it was indistinguishable from the transcript —
   same width, same background, no edge — and opening one pushed the
   conversation down, which is a strange thing for a feature about keeping your
   place to do. The shadow is what separates it from the thread underneath; a
   border alone is not enough against a dark page. */
._panel_f5frw_126 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* A share of the window rather than a fixed number. 320 was generous on a
     laptop and mean on a large display, and the thing being shown is a whole
     answer — usually longer than three hundred pixels. Capped as a fraction so
     it can never swallow the conversation it is floating over, however tall
     the window gets. */
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px 14px;
  border-bottom: 1px solid var(--accent-line);
  /* Matches the open tab, which is what makes the two look like one surface
     with a handle. Move one and the other has to move. */
  background: var(--s3);
  box-shadow: var(--shadow);
}

/* The question, above the answer it produced. Styled like the prompt bubble in
   the transcript — same accent edge — so it reads as "you asked this" rather
   than as a heading the agent wrote. */
._question_f5frw_149 {
  margin-bottom: 12px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  border-left: 2px solid var(--accent-line);
  /* A step above the panel it sits in, which moved to --s3 when the tabs did.
     At the same value it disappears, and the question stops reading as a
     quoted thing. */
  background: var(--s4);
  color: var(--tx-2);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Not a tab, so it opts out of the row's stretch. */
._mark_f5frw_165 {
  align-self: center;
  flex: none;
  margin-right: 5px;
  /* The only accent-coloured thing in the row. One small mark saying what this
     band is costs nothing and does the work a label would, in a row where
     every other pixel belongs to the pins themselves. */
  color: var(--accent-hi);
}
/* The anchor the open side is attached to. Full width of the thread, so the
   side that opens from it can be too. */
._strip_1f1at_3 {
  position: relative;
  display: flex;
}

/* The whole strip as one tinted box — the place in the conversation where you
   asked on the side. Up to nearly the thread's full width; past that the tabs
   inside scroll sideways rather than wrap, because a second row would push the
   conversation down for something you glance at. */
._bar_1f1at_12 {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 8px);
  min-width: 0;
  padding: 3px 4px 3px 3px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-wash);
}

/* The icon and its word, in the accent: this is what says "side" at a glance,
   and it stays put while the tabs scroll past it. */
._lead_1f1at_26 {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px 0 7px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-hi);
  font-size: 11.5px;
  font-weight: 600;
}

._lead_1f1at_26 svg {
  flex: none;
}

/* The scrollbar is hidden; the wheel moves it (see the component). */
._tabs_1f1at_45 {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

._tabs_1f1at_45::-webkit-scrollbar {
  display: none;
}

/* A fade at whichever edge has tabs past it. A mask rather than a gradient
   laid over the top, so it fades into whatever the box is tinted with and
   needs no colour of its own — the mask reads only alpha. */
._tabs_1f1at_45[data-more-end] {
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
}

._tabs_1f1at_45[data-more-start] {
  mask-image: linear-gradient(to left, black calc(100% - 32px), transparent);
}

._tabs_1f1at_45[data-more-start][data-more-end] {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 32px,
    black calc(100% - 32px),
    transparent
  );
}

/* Segments of the box rather than pills of their own. The open one is lifted
   onto a solid surface, which is what ties it to the side opened from it. */
._tab_1f1at_45 {
  flex: none;
  display: flex;
  align-items: center;
  max-width: 220px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--tx-2);
  transition:
    background var(--dur),
    color var(--dur),
    border-color var(--dur);
}

._tab_1f1at_45:hover {
  background: var(--accent-soft);
  color: var(--tx);
}

._tab_1f1at_45[data-active] {
  background: var(--s2);
  border-color: var(--accent-edge);
  color: var(--tx);
}

._tabLabel_1f1at_107 {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 100%;
  padding: 0 4px 0 9px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11.5px;
}

/* A blank tab has no ✕, so its label keeps the right padding. */
._tabLabel_1f1at_107:only-child {
  padding-right: 9px;
}

._tabText_1f1at_126 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._count_1f1at_133 {
  flex: none;
  padding: 0 5px;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  color: var(--accent-hi);
  font-size: 10.5px;
}

/* Still being answered. */
._dot_1f1at_143 {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

._tabClose_1f1at_151 {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.6;
}

._tabClose_1f1at_151:hover,
._tabClose_1f1at_151:focus-visible {
  background: var(--s3);
  opacity: 1;
}

._add_1f1at_171 {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--accent-hi);
}

._add_1f1at_171:hover,
._add_1f1at_171:focus-visible {
  background: var(--accent-soft);
}

/* The open side, joined to its strip and floating over the thread — above it
   by default, below when `data-below` says there is more room there.

   Joined rather than spaced off: a gap made it read as a popover that happened
   to be nearby, not the inside of the tab you clicked. It overlaps the box's
   border by a pixel so the two borders are one line, takes the box's accent
   border so they are one colour, and the corners where they meet go square. */
._pop_1f1at_195 {
  position: absolute;
  left: 0;
  /* The box's own limit, so a strip at full width meets it edge to edge. */
  right: 8px;
  bottom: calc(100% - 1px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--accent-edge);
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--s2);
  font-size: 12.5px;
}

._pop_1f1at_195[data-below] {
  top: calc(100% - 1px);
  bottom: auto;
  border-radius: 0 0 var(--r-md) var(--r-md);
}

._strip_1f1at_3[data-open='above'] ._bar_1f1at_12 {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

._strip_1f1at_3[data-open='below'] ._bar_1f1at_12 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* While a side is open the box runs to the same width as it, so both edges
   meet and the outer corners round as one shape. Sized to its tabs, the box
   ended partway along the open side's edge and left a squared step there.

   It also leaves the wash for a solid surface. Over prose, a translucent box
   let the text behind it run straight into the card; the open side and its
   tabs are one raised card now, the tabs only tinted on top of it so the two
   halves still read as header and body. */
._strip_1f1at_3[data-open] ._bar_1f1at_12 {
  flex: 1;
  border-color: var(--accent-edge);
  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--s2);
}

/* The lift is on the strip, not on either box: a filter is cast by the outline
   of everything inside it, so the joined pair shadows as one shape and the
   seam between them is not darkened by either half's shadow. Raised above the
   rows after it, which the open side lies across. */
._strip_1f1at_3[data-open] {
  z-index: 5;
  filter: var(--lift);
}

._close_1f1at_250 {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--tx-3);
}

._close_1f1at_250:hover,
._close_1f1at_250:focus-visible {
  background: var(--s3);
  color: var(--tx);
}

._list_1f1at_271 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 40px 12px 16px;
}

._note_1f1at_281 {
  margin: 0;
  color: var(--tx-3);
  font-size: 11.5px;
  line-height: 1.5;
}

._exchange_1f1at_288 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._question_1f1at_294 {
  align-self: flex-start;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: var(--r-md);
  background: var(--s4);
  border: 1px solid var(--bd-3);
  color: var(--tx);
  white-space: pre-wrap;
}

._answer_1f1at_305 {
  color: var(--tx);
  line-height: 1.55;
}

._thinking_1f1at_310 {
  color: var(--tx-3);
  font-style: italic;
}

._error_1f1at_315 {
  color: var(--err);
  font-size: 11.5px;
}

._foot_1f1at_320 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 16px 14px;
}

/* The box and "Use in prompt" share a line; the box takes what is left. */
._footRow_1f1at_328 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

._footRow_1f1at_328:empty {
  display: none;
}

._ask_1f1at_338 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._input_1f1at_346 {
  min-width: 0;
  height: 32px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid var(--bd-3);
  border-radius: var(--r-md);
  /* A step down from the card, so the box reads as a well to type into. */
  background: var(--s1);
  color: var(--tx);
  font: inherit;
  transition: border-color var(--dur);
}

._input_1f1at_346:focus {
  outline: none;
  border-color: var(--accent-edge);
}

._quote_1f1at_365 {
  flex: none;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--bd-3);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--tx-2);
  font-size: 11.5px;
  transition:
    background var(--dur),
    color var(--dur);
}

._quote_1f1at_365:hover,
._quote_1f1at_365:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-hi);
}
/* One chip, floating over the conversation. Glass rather than a solid fill:
   the transcript scrolls underneath, so an opaque chip cuts whatever line is
   at the top of the scroll in half. The blur is what makes the alpha work —
   translucency alone over prose is a smear, not a surface. */
/* Three columns — label, figure, bar — and a row per gauge. A grid rather than
   two flex rows because the two labels are different lengths, and stacked rows
   whose figures do not line up read as two unrelated chips that happen to be
   touching. */
._pill_1naqj_9 {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  /* A touch more than a line's worth. With no rule between the rows the gap is
     the only thing separating them, and at 6px they read as one wrapped line. */
  row-gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--bd-3);
  /* Not a pill shape any more: 999px on a two-row box bows the sides out. */
  border-radius: var(--r-md);
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--shadow);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
}

/* Each row hands its three cells to the grid above rather than laying them out
   itself, so the columns are shared and everything aligns. `subgrid` and not
   `display: contents`, which would align them too but leaves the row without a
   box — and a row with no box has nowhere to hang its tooltip. */
._gauge_1naqj_34 {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  column-gap: 8px;
  color: var(--tx);
}

/* A shade back from the figure, so the eye lands on the number and the word
   only says which number it is. */
._label_1naqj_45 {
  color: var(--tx-2);
  font-weight: 450;
}

/* Right-aligned so the figures stack under one another whatever their width —
   a two-digit percentage and a dash otherwise sit at different offsets. */
._value_1naqj_52 {
  text-align: right;
  font-weight: 550;
}

/* The gauge proper, filled in the brand colour. One custom property carries
   the tint so the tone rules below are a single line each rather than three
   copies of the same gradient. */
._bar_1naqj_60 {
  --tint: var(--accent);
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--tint) 0 var(--fill, 0%),
    var(--bd-3) var(--fill, 0%) 100%
  );
}

/* Close to full. Both halves mean the same thing here — the next turn is the
   one that runs into something, and that is the one case where the bar stops
   being brand-coloured: the point of a warning colour is that it is not the
   colour everything else already is. */
._gauge_1naqj_34[data-tone='tight'] {
  color: var(--warn);
}

._gauge_1naqj_34[data-tone='tight'] ._bar_1naqj_60 {
  --tint: var(--warn);
}

._gauge_1naqj_34[data-tone='tight'] ._label_1naqj_45 {
  color: var(--warn);
  opacity: 0.75;
}

/* No figure, or a remembered one rather than a measured one. Dimmed instead of
   marked, now that the dash says it in the number itself. */
._gauge_1naqj_34[data-dim] {
  color: var(--tx-2);
}

._gauge_1naqj_34[data-dim] ._value_1naqj_52 {
  font-weight: 450;
}

/* The translucent brand colour rather than the solid one: a remembered figure
   is still a figure, and should read as the same measurement taken earlier
   rather than as a different kind of thing. */
._gauge_1naqj_34[data-dim] ._bar_1naqj_60 {
  --tint: var(--accent-line);
}
/* Before the bytes arrive there is no aspect ratio to honour, so the frame
   holds a modest box rather than collapsing to nothing and shoving the row
   about when it fills. It resizes once, when the image lands — the alternative
   is carrying width and height in the record, which is a contract change to
   save a single reflow. */
._frame_ufa1w_6 {
  position: relative;
  display: grid;
  place-items: center;
  width: 80px;
  height: 60px;
  border-radius: var(--r-md);
  background: var(--s2);
  overflow: hidden;
}

/* A hairline drawn over the image rather than behind it — a border would sit
   under the img and a bright picture simply covers it. Translucent white so it
   reads the same over a dark screenshot as over a light one; any fixed colour
   disappears against one of them.

   Deliberately not a tint over the picture itself. This exists so you can tell
   what you sent, and at this size dimming costs exactly that — worst for the
   case it is most useful for, checking whether something looks right. */
._frame_ufa1w_6::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

/* Once the image is there it decides the shape. A wide screenshot is wide and
   a square one is square — a fixed box would letterbox the first into an
   unreadable strip, which is most of what people actually attach. */
._frame_ufa1w_6[data-status='shown'] {
  width: auto;
  height: auto;
  background: none;
  /* Seats it on the surface. Without this a bright rectangle against a dark
     ground reads as pasted on rather than placed in. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Faintly alive while the bytes are in flight, still while they are not. A box
   that never changes reads as broken rather than as pending. */
._frame_ufa1w_6[data-status='loading'] {
  animation: _attachmentPulse_ufa1w_1 1.4s ease-in-out infinite;
}

@keyframes _attachmentPulse_ufa1w_1 {
  50% {
    opacity: 0.55;
  }
}

/* Outline rather than border, so saying an image is gone doesn't resize the
   box that was holding its place. */
._frame_ufa1w_6[data-status='missing'] {
  background: none;
  outline: 1px dashed var(--bd-2);
  outline-offset: -1px;
}

._frame_ufa1w_6[data-status='missing']::after {
  content: none;
}

/* Capped in both directions so one attachment can't take over the
   conversation, and never upscaled past its own size. Height is the binding
   constraint for nearly everything real: a screenshot is wider than it is
   tall, so this is what keeps a row scannable. */
._image_ufa1w_74 {
  display: block;
  max-width: 320px;
  max-height: 60px;
}

._label_ufa1w_80 {
  padding: 0 8px;
  color: var(--mute);
  font-size: 10.5px;
  line-height: 1.4;
  text-align: center;
}
._card_1vtwm_1 {
  border: 1px solid var(--bd-2);
  border-radius: var(--r-md);
  background: var(--s2);
  overflow: hidden;
}

/* `overflow: hidden` above would make the sticky row below scroll away with
   the rest — an intermediate clipping box is exactly what sticky cannot
   escape. Nothing inside actually overflows the card; the hidden was for the
   corners, and the children have their own radii. */
._card_1vtwm_1[data-pinned='true'] {
  overflow: visible;
}

/* Held against the bottom of the popup's scroll area, so the control that ends
   the interruption is on screen whatever the length of what is being asked.
   Opaque, because the questions pass underneath it. */
._card_1vtwm_1[data-pinned='true'] ._actions_1vtwm_19 {
  position: sticky;
  bottom: -13px;
  z-index: 1;
  margin: 0 -11px -11px;
  padding: 9px 11px 11px;
  background: var(--s2);
  border-top: 1px solid var(--bd);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

._card_1vtwm_1[data-kind='question'] {
  border-color: var(--accent-line);
}

._card_1vtwm_1[data-resolved='true'] {
  border-color: var(--bd);
  background: var(--s1);
  opacity: 0.85;
}

/* Just arrived while you were looking at the list. */
._card_1vtwm_1[data-new='true'] {
  animation: _arrive_1vtwm_1 1.6s ease-out;
}

@keyframes _arrive_1vtwm_1 {
  0%,
  40% {
    box-shadow: 0 0 0 2px var(--accent-line);
  }
  100% {
    box-shadow: 0 0 0 2px transparent;
  }
}

/* ---------- which chat ---------- */
._from_1vtwm_56 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 11px;
  border-bottom: 1px solid var(--bd);
  background: var(--s1);
  text-align: left;
  font-size: 11px;
  transition: background var(--dur);
}

._from_1vtwm_56:not(:disabled):hover {
  background: var(--s3);
}

._from_1vtwm_56:disabled {
  cursor: default;
}

._fromName_1vtwm_77 {
  color: var(--tx-2);
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

._fromGo_1vtwm_86 {
  margin-left: auto;
  color: var(--accent-hi);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
}

/* ---------- head ---------- */
._head_1vtwm_96 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--bd);
  background: var(--warn-soft);
  font-size: 11.5px;
}

._card_1vtwm_1[data-kind='question'] ._head_1vtwm_96 {
  background: var(--accent-soft);
}

._card_1vtwm_1[data-resolved='true'] ._head_1vtwm_96 {
  background: var(--s2);
}

._title_1vtwm_114 {
  font-weight: 600;
}

._card_1vtwm_1[data-kind='question'] ._title_1vtwm_114 {
  color: var(--accent-hi);
}

._card_1vtwm_1[data-kind='permission'] ._title_1vtwm_114 {
  color: var(--warn);
}

._card_1vtwm_1[data-resolved='true'] ._title_1vtwm_114 {
  color: var(--tx-3);
  font-weight: 550;
}

._tool_1vtwm_131 {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--tx-2);
}

._outcome_1vtwm_137 {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ok);
  white-space: nowrap;
}

._later_1vtwm_145 {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tx-3);
  background: var(--s4);
  border-radius: 20px;
  padding: 1px 7px;
}

/* ---------- body ---------- */
._body_1vtwm_158 {
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._detail_1vtwm_165 {
  margin: 0;
  padding: 8px 9px;
  border-radius: var(--r-sm);
  background: var(--code-bg);
  border: 1px solid var(--bd);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--tx-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 200px;
  overflow-y: auto;
}

._resolvedQuestions_1vtwm_181 {
  display: flex;
  flex-direction: column;
  /* Wider than the old 4px, because each entry is now two lines rather than
     one and the pairs have to read as pairs. */
  gap: 8px;
}

._resolvedQ_1vtwm_181 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._resolvedQText_1vtwm_195 {
  font-size: 11.5px;
  color: var(--tx-3);
  line-height: 1.5;
}

/* Indented and in the accent that marks a settled decision elsewhere, so the
   pair reads as question-then-answer at a glance rather than as two
   equally-weighted lines. */
._resolvedA_1vtwm_204 {
  padding-left: 10px;
  border-left: 2px solid var(--ok);
  color: var(--tx);
  font-size: 11.5px;
  line-height: 1.5;
}

/* ---------- questions ---------- */
._question_1vtwm_213 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

._qHead_1vtwm_219 {
  display: flex;
  align-items: center;
  gap: 7px;
}

._chip_1vtwm_225 {
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--s4);
  color: var(--tx-2);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._multi_1vtwm_236 {
  font-size: 10px;
  color: var(--tx-3);
}

._qText_1vtwm_241 {
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.5;
}

._options_1vtwm_247 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._option_1vtwm_247 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  text-align: left;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  background: var(--s1);
  transition:
    background var(--dur),
    border-color var(--dur);
}

._option_1vtwm_247:hover {
  border-color: var(--bd-3);
  background: var(--s3);
}

._option_1vtwm_247[data-on='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

._optLabel_1vtwm_278 {
  font-size: 11.5px;
  font-weight: 600;
}

._optDesc_1vtwm_283 {
  font-size: 10.5px;
  color: var(--tx-3);
  line-height: 1.45;
}

._other_1vtwm_289 {
  height: 27px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm);
  background: var(--s1);
  padding: 0 9px;
  font-size: 11.5px;
}

._other_1vtwm_289:focus {
  outline: none;
  border-color: var(--accent-line);
}

/* Selected reads the same as a selected option: it is the (n + 1)th choice. */
._other_1vtwm_289[data-on='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- actions ---------- */
._actions_1vtwm_19 {
  display: flex;
  gap: 7px;
  align-items: center;
}

._primary_1vtwm_316 {
  height: 27px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  transition:
    background var(--dur),
    opacity var(--dur);
}

._primary_1vtwm_316:hover:not(:disabled) {
  background: var(--accent-hi);
}

._primary_1vtwm_316:disabled {
  opacity: 0.45;
  cursor: default;
}

._ghost_1vtwm_338 {
  height: 27px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  background: var(--s1);
  color: var(--tx-2);
  font-size: 11.5px;
  font-weight: 550;
  transition:
    background var(--dur),
    color var(--dur),
    border-color var(--dur);
}

._ghost_1vtwm_338:hover {
  border-color: var(--err);
  color: var(--err);
}
/* A run of tool calls. Collapsed it is one line; open it is a capped, scrolled
   list. The chrome is deliberately quiet — this is what the agent did on the
   way to an answer, not the answer. */

/* How much of a command a row shows before it is cut off.

   In `ch` because the content is monospace and the question is how many
   characters of command you can read, not how many pixels the row takes. 56 of
   them is enough for a command to identify itself — the subcommand, the flag
   that matters, the first path — and short enough that a row stays a label on
   the reply rather than a panel around it. It lands comfortably inside the
   460px the attention card uses, which is the other thing in the thread
   deliberately narrower than the column. */
._group_1een1_14,
._tool_1een1_15 {
  --cmd-max: 56ch;
}

._group_1een1_14 {
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--s2);
  overflow: hidden;
  /* Same reasoning as `.tool`: collapsed, this is one short line and its fill
     had no reason to span the thread. Expanded it widens to its longest row,
     which is bounded by the ellipsis on `.toolDetail`. */
  width: fit-content;
  max-width: 100%;
}

._summary_1een1_31 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 10px;
  background: none;
  border: none;
  font: inherit;
  font-size: 11px;
  color: var(--tx-2);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

._summary_1een1_31:hover {
  background: var(--s3);
}

._chev_1een1_51 {
  display: flex;
  flex: none;
  color: var(--tx-3);
  transition: transform var(--dur);
}

._chev_1een1_51[data-open='true'] {
  transform: rotate(90deg);
}

._count_1een1_62 {
  flex: none;
  font-weight: 550;
}

/* The call happening right now, trailing the summary. Dimmer and monospace:
   it is a detail you can glance at, not a line you are meant to read. Capped
   like any other command line, and not expandable — opening the group lists
   this call among the rest, where it can be. */
._latest_1een1_71 {
  flex: 0 1 auto;
  min-width: 0;
  max-width: var(--cmd-max);
  font-family: var(--font-mono);
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* About five rows. Enough to see a run's shape without the thread jumping
   when one opens. */
._list_1een1_84 {
  max-height: 148px;
  overflow-y: auto;
  padding: 3px 0 4px;
  border-top: 1px solid var(--bd);
}

/* ---------- one tool call ---------- */

/* Inside a group these are plain rows; standing alone (a run of one or two)
   the border and fill are what make them read as a tool call at all. */
._tool_1een1_15 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: var(--s2);
  border: 1px solid var(--bd);
  font-size: 11px;
  min-width: 0;
  /* Hugs the command instead of filling the thread. A short `git status` was
     drawing a bar the full width of the window, which read as a container for
     the reply rather than a label on what was run.

     `width: fit-content` rather than `display: inline-flex`, which shrink-wraps
     too but makes these inline-level — two consecutive rows would then share a
     line whenever both fit. Staying block-level keeps one call per row. */
  width: fit-content;
  max-width: 100%;
}

._list_1een1_84 ._tool_1een1_15 {
  padding: 3px 10px;
  border: none;
  border-radius: 0;
  background: none;
  /* Back to filling the group: inside one there is no fill to wrap, and a
     hover target that stops halfway across the row is worse than a wide one. */
  width: auto;
}

/* ---------- the command, and reading all of it ---------- */

/* A row is a button only when something is hidden behind it, so these resets
   apply to the clipped ones and the plain <div> rows need none of them. */
button._tool_1een1_15 {
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

button._tool_1een1_15:hover,
button._tool_1een1_15:focus-visible {
  background: var(--s3);
}

._list_1een1_84 button._tool_1een1_15:hover,
._list_1een1_84 button._tool_1een1_15:focus-visible {
  /* The group already carries a fill, so the row needs its own to separate
     from it rather than to appear out of nothing. */
  background: var(--s3);
}

/* Open, the command wraps instead of being cut, and the row gives up hugging
   its content so the text has the column to wrap into. Still bounded by the
   thread, which is what stops a single pasted heredoc from becoming the
   conversation. */
._tool_1een1_15[data-open='true'] {
  width: auto;
}

._tool_1een1_15[data-open='true'] ._toolDetail_1een1_26 {
  max-width: 100%;
  white-space: pre-wrap;
  /* Commands break at no useful place — a path or a base64 blob has no spaces
     — so anywhere beats overflowing the row we just widened. */
  overflow-wrap: anywhere;
  overflow: visible;
}

._toolName_1een1_166 {
  font-weight: 650;
  color: var(--accent-hi);
  flex: none;
}

._toolDetail_1een1_26 {
  font-family: var(--font-mono);
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* The cap that keeps a long command from spanning the thread. The ellipsis
     sits at the end of this, not at the far edge of the window. */
  max-width: var(--cmd-max);
}
/* Rows of a conversation. Owned here rather than by the chat, because the
   History screen renders the same rows for a chat that is no longer running —
   two copies of this would be two conversations that slowly stopped matching. */

._thread_11jxj_5 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 24px;
}

/* What you said, told apart from what the agent said.
 *
 * The block is full width at every size, so the shape cannot carry it — a
 * panel spanning the column is exactly what the agent's own output looks
 * like. A heavier fill and an accent edge down the side do the work instead,
 * and they do it the same way on a laptop as on a phone: the question "who
 * wrote this" does not have a different answer at a different window width. */
._message_11jxj_19[data-role='user'] {
  align-self: flex-start;
  max-width: 100%;
  padding: 9px 12px 9px 11px;
  border-radius: var(--r-md);
  background: var(--s4);
  border: 1px solid var(--bd-3);
  border-left: 2px solid var(--accent-line);
}

/* Wraps, because several images should stack rather than force the bubble
   wider than the conversation. */
._attachments_11jxj_31 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 7px;
}

/* Nothing after it to separate from when the message was only an image. */
._attachments_11jxj_31:last-child {
  margin-bottom: 0;
}

._text_11jxj_43 {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

._message_11jxj_19[data-role='assistant'] ._text_11jxj_43 {
  color: var(--tx);
}

._notice_11jxj_54 {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  line-height: 1.5;
}

._notice_11jxj_54[data-tone='error'] {
  background: var(--err-soft);
  color: var(--err);
}

._notice_11jxj_54[data-tone='warn'] {
  background: var(--warn-soft);
  color: var(--warn);
}

._notice_11jxj_54[data-tone='info'] {
  background: var(--s2);
  color: var(--tx-2);
}

/* Inline attention request — narrower than the thread so it reads as an
   interjection rather than a message. */
._attention_11jxj_78 {
  max-width: 460px;
}

._compacted_11jxj_82 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  font-size: 10.5px;
  color: var(--tx-3);
  white-space: nowrap;
}

._compacted_11jxj_82::before,
._compacted_11jxj_82::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bd);
}

/* ---------- narrow widths ---------- */

/* The one cue that is still width-dependent. On a narrow column a block
   running edge to edge reads as the page rather than as a message in it, so a
   gutter holds it visibly short of the right side. There is room to spare on
   a laptop and nothing to fix, which is why this stays in the query while the
   fill and the accent edge no longer do. */
@media (max-width: 820px) {
  ._message_11jxj_19[data-role='user'] {
    max-width: calc(100% - 32px);
  }
}

/* An exchange: your prompt and everything that came back.
   
   It has to repeat the thread's own column and gap. `.thread` is a flex column
   whose gap used to fall between every row; wrapping rows in turns moved that
   gap to between *turns*, and the rows inside a turn — your prompt and the
   reply to it — went flush against each other. */
._turn_11jxj_119 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Hidden until the turn is hovered. A button beside every exchange would be a
   column of furniture down a conversation meant for reading, and the pin is
   worth having precisely when you already know which answer you want. */
/* Wraps the prompt so the pin can be positioned against the bubble rather than
   against the thread. `fit-content` is what makes that work: the row hugs the
   bubble, so "top right of the row" and "top right of the bubble" are the same
   place at any width. */
._promptRow_11jxj_133 {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

/* Room for the button, reserved rather than taken. The pin is absolute, so
   without this it would sit on top of the words — and on a two-character
   prompt it would cover them entirely. Scoped to .promptRow, which only wraps
   a prompt that can actually be pinned, so an unpinnable one keeps its normal
   shape. */
._promptRow_11jxj_133 ._message_11jxj_19[data-role='user'] {
  padding-right: 36px;
}

/* Inside the bubble, top right. It was outside it briefly and read as a
   detached control floating beside the message; before that it was at the
   thread's right edge, which put it a long way from a short prompt. Inside is
   where it belongs — the button acts on the message it sits in. */
._pin_11jxj_152 {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  /* No fill of its own. It used to be --s1, a dark chip — chosen when it sat
     on the page at the turn's right edge, where it needed to stand out from
     the thread. Inside the bubble that is four steps down a four-step scale,
     and it read as a hole punched in the message. Transparent takes the
     bubble's own colour, and the border alone says "button". */
  background: transparent;
  border-color: var(--bd-3);
  /* Always visible, never hover-only. A control that appears when the pointer
     is over the thread is a control nobody finds, and it vanished the moment
     you moved to the composer — which is exactly when you have decided the
     answer was worth keeping. Kept quiet instead: the same surface as the
     bubble it sits in, so it is present without being loud. */
  color: var(--tx-3);
  transition:
    background var(--dur),
    color var(--dur);
}

._pin_11jxj_152:hover,
._pin_11jxj_152:focus-visible {
  /* A tint rather than a surface, for the same reason: on the lightest
     background in the scale there is nothing lighter to step to. */
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-hi);
}

/* The agent's route to an answer, kept out of the way of the answer.

   Quiet to the point of nearly disappearing: this is Codex-only, it arrives on
   most turns, and a conversation where every reply is preceded by a loud box
   of thinking reads as though the thinking were the point. Same muted grey and
   size as the compaction marker, which is the other row that is furniture
   rather than conversation. */
._reasoning_11jxj_197 {
  margin: 2px 0;
  font-size: 11.5px;
  color: var(--tx-3);
}

._reasoningHead_11jxj_203 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  cursor: pointer;
  list-style: none;
  /* The marker is the chevron, which rotates — Safari draws its own triangle
     as well unless this is here, and two markers is one too many. */
  &::-webkit-details-marker {
    display: none;
  }
}

._reasoningHead_11jxj_203:hover {
  color: var(--tx-2);
}

._reasoningHead_11jxj_203 svg {
  flex: none;
  transition: transform var(--dur);
}

._reasoning_11jxj_197[open] ._reasoningHead_11jxj_203 svg {
  transform: rotate(90deg);
}

._reasoningBody_11jxj_230 {
  /* Indented under the summary and against a rule, so an expanded block reads
     as belonging to its heading rather than as a new message in the thread. */
  margin: 2px 0 6px 5px;
  padding-left: 11px;
  border-left: 1px solid var(--bd-2);
  color: var(--tx-3);
  line-height: 1.55;
}
/* Flex column, not a fixed grid template: the auth warning row is conditional,
   and a fixed template made the composer inherit the 1fr row when absent. */
._main_1cpnq_3 {
  /* Fills the column below the tab strip. Required because this is a flex item
     now — as a grid item it stretched by default, and without it an empty
     transcript collapses the section and lifts the composer to the top. */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
  /* Still positioned: the drop overlay and the mode menus are placed against
     the whole pane. What floats over the transcript is anchored to .body
     instead. */
  position: relative;
}

@keyframes _pulse_1cpnq_1 {
  50% {
    opacity: 0.35;
  }
}

._dirty_1cpnq_25 span {
  flex: 1;
}

._dirty_1cpnq_25 code {
  font-family: var(--font-mono);
}

._dirtyCancel_1cpnq_33,
._setupWarning_1cpnq_34 {
  padding: 7px 12px;
  border-bottom: 1px solid var(--bd);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 11px;
  line-height: 1.5;
}

/* The transcript and whatever floats over its top right corner. This box is
   the reason those floaters clear the pinned strip: positioned against the
   pane they measured from its top edge, so with pins open they sat on top of
   the tab row — a band of controls, covered by a readout. Giving the scroll
   area its own anchor puts them at the top of the conversation wherever the
   conversation starts, rather than counting pixels down from the pane. */
._body_1cpnq_14 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* The usage gauges, over the conversation rather than in the tab strip above
   it. On the strip they competed with the tabs for a row that already scrolls,
   and pushed the branch off the end of it; here they sit in the corner of the
   transcript, which is the emptiest part of the pane. Same corner as the find
   bar, which replaces them while it is open. */
._gauges_1cpnq_62 {
  position: absolute;
  top: 8px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  /* The transcript scrolls under these; without it a pointer aimed at the text
     behind them lands on a readout instead. */
  pointer-events: none;
}

/* Back on for the pills themselves, so their tooltips still work. */
._gauges_1cpnq_62 > * {
  pointer-events: auto;
}

/* ---------- transcript ---------- */
._scroll_1cpnq_81 {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

._blank_1cpnq_87 {
  /* `flex: 1` was inert here — .scroll is a block container, so this sized to
     its content and sat at the top rather than centring. Filling the scroll
     area's height is what makes `justify-content` mean anything. */
  min-height: 100%;
  box-sizing: border-box;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--tx-3);
  font-size: 12.5px;
}

/* ---------- composer ---------- */
/* Everything that sits below the transcript: the attachment tray, whatever the
   last attach had to say, and the composer row itself. The border and ground
   moved up here from .composer so the tray reads as part of the same surface
   rather than as a strip floating above it. */
._dock_1cpnq_108 {
  display: flex;
  flex-direction: column;
  flex: none;
  border-top: 1px solid var(--bd);
  background: var(--s1);
  transition: background var(--dur);
}

/* A file can be dropped anywhere in the conversation, but the dock is what
   acknowledges it — restyling the transcript under a dragged file makes the
   thing you are reading move. */
._dock_1cpnq_108[data-dragging] {
  background: var(--s2);
  box-shadow: inset 0 1px 0 var(--accent-line);
}

._composer_1cpnq_106 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  /* Tighter vertically than horizontally, deliberately. The field already
     carries its own 8px inside, so ten around it put the text eighteen pixels
     from the bar's edge and made a one-line composer sixty pixels tall — a lot
     of chrome for the thing you type one sentence into. */
  padding: 7px 12px;
}

/* Same words as the auth warning, because it is the same kind of thing: a
   sentence about why something didn't happen, in the place it didn't happen. */
._note_1cpnq_138 {
  padding: 8px 12px 0;
  color: var(--warn);
  font-size: 11px;
  line-height: 1.5;
}

._tray_1cpnq_145 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 0;
}

/* A document has no picture, so its tray entry is sized to its name rather
   than to a square, and keeps the same remove affordance beside it. */
._doc_1cpnq_108 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Always visible here: there is no image underneath for it to sit on top of,
   so hiding it until hover would only make it hard to find. */
._doc_1cpnq_108 ._thumbRemove_1cpnq_163 {
  position: static;
  opacity: 1;
  background: none;
}

._thumb_1cpnq_163 {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  overflow: hidden;
}

._thumb_1cpnq_163 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hidden until the thumbnail is hovered or the button is tabbed to: a row of
   always-on badges reads as a row of buttons rather than a row of pictures. */
._thumbRemove_1cpnq_163 {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg);
  color: var(--tx-2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur);
}

._thumb_1cpnq_163:hover ._thumbRemove_1cpnq_163,
._thumbRemove_1cpnq_163:focus-visible {
  opacity: 1;
}

._thumbRemove_1cpnq_163:hover {
  color: var(--tx);
}

/* Left of the input, opposite the mode button, and the same height as both so
   the row stays level as a long draft grows the textarea upward. */
/* 32, and the field and the mode chip match it. The three are one row, so the
   height lives in three places and has to move in all of them or they stop
   lining up. */
._attach_1cpnq_222 {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  color: var(--tx-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color var(--dur),
    color var(--dur);
}

._attach_1cpnq_222:hover {
  border-color: var(--bd-3);
  color: var(--tx);
}

/* What the agent may do without asking, in the composer row where a send
   button would sit. Bottom-aligned so it stays level with the last line as a
   long draft grows the input upward. */
._mode_1cpnq_246 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  color: var(--tx-2);
  font-size: 11.5px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition:
    border-color var(--dur),
    color var(--dur);
}

._mode_1cpnq_246:hover {
  border-color: var(--bd-3);
  color: var(--tx);
}

._modeDot_1cpnq_270 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mute);
}

/* Colour carries the leash, so the mode is legible without reading the word:
   planning is inert, asking is the accent, edits are a warning, auto is live. */
._mode_1cpnq_246[data-mode='plan'] ._modeDot_1cpnq_270 {
  background: var(--info);
}

._mode_1cpnq_246[data-mode='default'] ._modeDot_1cpnq_270 {
  background: var(--accent);
}

._mode_1cpnq_246[data-mode='acceptEdits'] ._modeDot_1cpnq_270 {
  background: var(--warn);
}

._mode_1cpnq_246[data-mode='auto'] ._modeDot_1cpnq_270 {
  background: var(--ok);
}

/* No send button: Enter sends, and the placeholder says so. Bounded so a long
   draft scrolls instead of eating the transcript. */
._input_1cpnq_297 {
  flex: 1;
  resize: none;
  min-height: 32px;
  max-height: 180px;
  overflow-y: auto;
  /* Six, not eight. The field's own padding is what stands between your text
     and its border, and at a 12.5px font eight put more air inside a one-line
     composer than the line itself. */
  padding: 6px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  font-size: 12.5px;
  line-height: 1.5;
  font-family: var(--font-ui);
}

._input_1cpnq_297:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--s1);
}

._blankLine_1cpnq_321 code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--tx-2);
}

/* Trails the conversation rather than sitting in a fixed corner. */
._mascot_1cpnq_328 {
  display: flex;
  padding: 2px 0 6px 2px;
}

/* What the worktree already holds, under the branch line. */
._blankCarry_1cpnq_334 {
  font-size: 11.5px;
  color: var(--tx-3);
}

/* A compaction boundary: the agent folded the earlier conversation into a
   summary to stay inside its context. Drawn as a hairline with a label rather
   than a card — there is nothing to act on, and it should read as a seam in
   the transcript, not as a message in it. */

/* ---------- btw ---------- */

/* Bottom right of the conversation, the corner opposite where a reply starts.
   A pill with a word on it rather than a bare icon: "btw" is not a glyph
   anyone knows yet. */
._sideButton_1cpnq_349 {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-xl);
  background: var(--s2);
  box-shadow: var(--shadow);
  color: var(--tx-2);
  font-size: 12px;
  transition:
    background var(--dur),
    color var(--dur),
    border-color var(--dur);
}

._sideButton_1cpnq_349:hover,
._sideButton_1cpnq_349:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-hi);
}
/* Conversations open in one worktree — modelled on `.dt-tabs` in the
   prototype, which is the app's existing small-tab pattern. */
._tabs_1nz5r_3 {
  display: flex;
  align-items: center;
  /* The surfaces now carry their own outline, so they no longer need a rule
     between them and the conversations to say they are a different kind of
     thing — the shape does it. A little more air instead. */
  gap: 4px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--bd);
  background: var(--s1);
  overflow-x: auto;
  overflow-y: hidden;
  /* No bar: the wheel scrolls it sideways — lib/wheelSideways.ts. */
  scrollbar-width: none;
  flex: none;
}

._tab_1nz5r_3 {
  display: flex;
  align-items: center;
  height: 21px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  color: var(--tx-3);
  white-space: nowrap;
  transition:
    background var(--dur),
    color var(--dur);
}

._tab_1nz5r_3:hover {
  background: var(--s2);
  color: var(--tx-2);
}

._tab_1nz5r_3[data-on='true'] {
  background: var(--s3);
  border-color: var(--bd-2);
  color: var(--tx);
}

._label_1nz5r_44 {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 4px 0 8px;
  font-size: 11px;
  font-weight: 550;
  color: inherit;
  max-width: 240px;
}

._name_1nz5r_56 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The chat's own status, next to its name — this is what the conversation's
   header bar used to say. */
._state_1nz5r_64 {
  font-size: 10px;
  font-weight: 500;
  color: var(--tx-3);
  white-space: nowrap;
}

._tab_1nz5r_3[data-status='waiting'] ._state_1nz5r_64 {
  color: var(--warn);
}

._tab_1nz5r_3[data-status='working'] ._state_1nz5r_64 {
  color: var(--accent);
}

._rename_1nz5r_79 {
  height: 19px;
  margin: 0 2px 0 6px;
  padding: 0 5px;
  width: 120px;
  border-radius: var(--r-xs);
  border: 1px solid var(--accent);
  background: var(--s1);
  color: var(--tx);
  font-size: 11px;
  font-weight: 550;
}

/* Same status vocabulary as the sidebar, so a colour means one thing. */
/* `--mute`, the same grey the rail uses for idle — `--tx-3` is a text colour
   and was a shade off, which is the sort of difference nobody names and
   everybody sees. */
/* The agent's own mark, where the status dot used to be.

   It carries both facts at once, which is the only reason replacing the dot
   works: the shape says which CLI is answering and the colour says how it is
   doing, on exactly the scale the dot used. A brand mark rendered in amber is
   a liberty, but this is 12px of interface chrome in a strip of muted greys —
   two full-colour logos would be the loudest thing on the screen, and the one
   thing a tab must never lose is its status. */
._mark_1nz5r_104 {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--mute);
}

._dot_1nz5r_111 {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mute);
  flex: none;
}

/* One scale, shared with the rail: grey resting, amber working, red asking.
   Idle was green here — which read as approval of something rather than as
   "nothing is happening", and disagreed with nothing only because the rail
   used its dot for a different fact entirely. The bare `.dot` grey now *is*
   idle, so there is no rule for it. */
._mark_1nz5r_104[data-status='working'] {
  color: var(--warn);
  animation: _pulse_1nz5r_1 1.2s ease-in-out infinite;
}

._mark_1nz5r_104[data-status='waiting'] {
  color: var(--attn);
}

._mark_1nz5r_104[data-status='error'] {
  color: var(--err);
}

._dot_1nz5r_111[data-status='working'] {
  background: var(--warn);
  animation: _pulse_1nz5r_1 1.2s ease-in-out infinite;
}

/* Keyframes are scoped per CSS module, so the sidebar's copy isn't reachable
   here — same timing, declared locally. */
@keyframes _pulse_1nz5r_1 {
  50% {
    opacity: 0.35;
  }
}

/* Its own colour, between working and broken, which is what it means. */
._dot_1nz5r_111[data-status='waiting'] {
  background: var(--attn);
}

._dot_1nz5r_111[data-status='error'] {
  background: var(--err);
}

._pending_1nz5r_159 {
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 7px;
  background: var(--warn);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

._close_1nz5r_173 {
  width: 17px;
  height: 17px;
  margin-right: 3px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--tx-3);
  flex: none;
  opacity: 0;
}

/* Revealed on hover or when the tab is current, so idle tabs stay quiet but
   the close affordance is never more than a pointer away. */
._tab_1nz5r_3:hover ._close_1nz5r_173,
._tab_1nz5r_3[data-on='true'] ._close_1nz5r_173 {
  opacity: 1;
}

._close_1nz5r_173:hover {
  background: var(--s4);
  color: var(--tx);
}

._add_1nz5r_197 {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 8px;
  /* Same shape as its neighbours: it sits in the row with them, and an odd
     one out reads as something that got left behind. */
  border-radius: var(--r-md);
  border: 1px solid var(--bd-2);
  color: var(--tx-3);
  font-size: 11px;
  font-weight: 550;
  flex: none;
}

._add_1nz5r_197:hover {
  background: var(--s3);
  color: var(--tx);
}

/* Branch and instance actions, pushed to the far end of the same bar. */
._right_1nz5r_219 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
}

._action_1nz5r_227 {
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  border: 1px solid var(--bd-2);
  color: var(--tx-2);
  font-size: 10.5px;
  font-weight: 550;
  white-space: nowrap;
  flex: none;
}

._action_1nz5r_227:hover {
  background: var(--s3);
  color: var(--tx);
}

/* Separates the worktree's fixed surfaces from its conversations. */
/* Matches `.tab` + `.label` exactly — same height, type and padding — so the
   two sit on one line rather than one pill standing taller than its
   neighbours. A chat pill's right padding is smaller because its close button
   supplies the rest; this has no close button, so it's even. */
._surface_1nz5r_249 {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 8px;
  /* Matches the composer's input and mode chip — the strip and the box you
     type into are the two things framing a conversation, and they should be
     cut the same way. */
  border-radius: var(--r-md);
  /* A resting fill rather than a bare glyph. Selection is then a change of
     fill on something already there, instead of a box appearing out of the
     background — and on a phone, where the labels are gone, it is the only
     thing giving an icon an edge to be tapped. */
  border: 1px solid var(--bd-2);
  background: var(--s2);
  color: var(--tx-3);
  font-size: 11px;
  font-weight: 550;
  white-space: nowrap;
  flex: none;
  transition:
    background var(--dur),
    border-color var(--dur),
    color var(--dur);
}

._surface_1nz5r_249:hover {
  color: var(--tx-2);
  border-color: var(--bd-3);
  background: var(--s3);
}

/* No weight change on selection: `.tab` doesn't do it either, and a pill that
   grows bolder shifts the ones beside it. */
._surface_1nz5r_249[data-on='true'] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-hi);
}

/* ---------------------------------------------------------------------------
   Narrow screens. The strip already scrolls sideways; what it needs is less to
   scroll. Same 820px as the shell.
   --------------------------------------------------------------------------- */
/* How many files changed, or commits unpushed — a qualifier on the label
   beside it, not a badge. Referenced by the strip since it was written and
   never defined, so it had been rendering as bare unstyled digits. */
._count_1nz5r_297 {
  min-width: 14px;
  padding: 0 4px;
  border-radius: 7px;
  background: var(--s4);
  color: var(--tx-2);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

._surface_1nz5r_249[data-on='true'] ._count_1nz5r_297 {
  background: var(--accent-soft);
  color: var(--accent-hi);
}

@media (max-width: 820px) {
  ._surfaceLabel_1nz5r_315 {
    /* Kept for assistive tech; the icon and the tooltip carry it visually. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  ._surface_1nz5r_249 {
    gap: 0;
  }

  /* The count goes with the label it was qualifying. On its own beside an
     icon it reads as a number about the icon rather than a file count — so
     the number goes and a dot takes over. You lose how many and keep the only
     part that makes you look: that there is something there. */
  ._surface_1nz5r_249 ._count_1nz5r_297 {
    display: none;
  }

  ._surface_1nz5r_249[data-flag='true'] {
    position: relative;
  }

  ._surface_1nz5r_249[data-flag='true']::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    /* Ringed in the strip's own background so it reads as sitting on the tab
       rather than as part of the glyph underneath it. */
    box-shadow: 0 0 0 2px var(--s1);
  }

  /* The branch is on the Ship tab and in the empty chat already; here it is
     the widest thing competing with the chat names for a phone's worth of room. */
  ._branch_1nz5r_357 {
    display: none;
  }

  ._tabs_1nz5r_3 {
    /* Momentum scrolling, and a tap target that clears the 44px guidance. */
    -webkit-overflow-scrolling: touch;
    padding: 7px 8px;
  }

  ._tab_1nz5r_3,
  ._surface_1nz5r_249,
  ._add_1nz5r_197 {
    height: 28px;
  }

  ._surface_1nz5r_249 {
    padding: 0 9px;
  }
}

/* The + and its caret, as one control. */
._new_1nz5r_379 {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
}

/* No rule between the halves. It was there to say "split button", and against
   a control this small it only read as a scratch across the middle of it —
   the caret's own shape already says there are two things here. */
._pick_1nz5r_389 {
  display: grid;
  place-items: center;
  width: 16px;
  align-self: stretch;
  color: var(--tx-3);
  cursor: pointer;
}

._pick_1nz5r_389:hover {
  color: var(--tx);
  background: var(--s2);
}

/* Sizes and layout only: placement, the scrim and the surface are the
   popover's. */
._menu_1nz5r_405 {
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 4px;
}

._menu_1nz5r_405 button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--tx-2);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

._menu_1nz5r_405 button:hover:not([aria-disabled='true']) {
  background: var(--s3);
  color: var(--tx);
}

/* Unavailable for now — mid-turn, or nothing said yet — and the title says
   which. */
._menu_1nz5r_405 button[aria-disabled='true'] {
  opacity: 0.45;
  cursor: default;
}

/* The key that does the same, pushed to the item's far edge. */
._menuKey_1nz5r_438 {
  margin-left: auto;
  padding-left: 16px;
  color: var(--tx-3);
  font-family: inherit;
  font-size: 11px;
}
._panel_1re9v_1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
}

/* ---------- which list ---------- */
/* A row above the filters, and only when a repo commits its own list. The
   same height and rule as the other surfaces' headers, so the strip above
   does not jump when moving between them. */
._sources_1re9v_14 {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  height: 34px;
  flex: none;
  border-bottom: 1px solid var(--bd);
  overflow-x: auto;
  overflow-y: hidden;
  /* No bar: the wheel scrolls it sideways — lib/wheelSideways.ts. */
  scrollbar-width: none;
}

._source_1re9v_14 {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--tx-3);
  font: inherit;
  font-size: 11.5px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur),
    color var(--dur);
}

._source_1re9v_14:hover {
  background: var(--s2);
  color: var(--tx-2);
}

._source_1re9v_14[data-on='true'] {
  background: var(--s3);
  color: var(--tx);
  font-weight: 600;
}

/* ---------- header ---------- */
._head_1re9v_58 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bd);
  flex: none;
}

._filters_1re9v_67 {
  display: flex;
  gap: 2px;
  min-width: 0;
  /* Scrolls rather than wraps: on a phone the search field below it is the
     thing you want kept in place, not a filter row that grows a second line. */
  overflow-x: auto;
  overflow-y: hidden;
  /* No bar: the wheel scrolls it sideways — lib/wheelSideways.ts. */
  scrollbar-width: none;
}

._filter_1re9v_67 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--tx-3);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition:
    background var(--dur),
    color var(--dur);
}

._filter_1re9v_67:hover {
  background: var(--s2);
  color: var(--tx-2);
}

._filter_1re9v_67[data-on='true'] {
  background: var(--s3);
  color: var(--tx);
}

._tally_1re9v_108 {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--tx-3);
}

._search_1re9v_114 {
  margin-left: auto;
  flex: none;
  width: 200px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--s2);
  color: var(--tx);
  /* 16px or Safari zooms the page on every focus, which on a phone reads as
     the layout breaking. */
  font: inherit;
  font-size: 16px;
}

@media (min-width: 821px) {
  ._search_1re9v_114 {
    font-size: 12px;
  }
}

._search_1re9v_114::placeholder {
  color: var(--tx-3);
}

._failure_1re9v_140 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 16px;
  flex: none;
  background: var(--err-soft);
  color: var(--err);
  font-size: 11.5px;
}

/* ---------- list ---------- */
._list_1re9v_153 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0 40px;
}

._section_1re9v_160 {
  padding: 10px 0 6px;
}

._sectionName_1re9v_164 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tx-3);
}

._sectionCount_1re9v_177 {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tx-3);
  opacity: 0.7;
}

._sectionNotes_1re9v_185 {
  margin: 0 16px 6px;
  padding: 8px 10px;
  border-left: 2px solid var(--bd-2);
  background: var(--s1);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--tx-3);
  white-space: pre-wrap;
}

/* ---------- one task ---------- */
._row_1re9v_198 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 5px 16px;
  min-height: 30px;
  border-bottom: 1px solid transparent;
  transition: background var(--dur);
}

._row_1re9v_198:hover {
  background: var(--s1);
}

._row_1re9v_198[data-busy='true'] {
  opacity: 0.55;
}

._row_1re9v_198[data-status='done'] ._title_1re9v_217,
._row_1re9v_198[data-status='parked'] ._title_1re9v_217 {
  color: var(--tx-3);
}

._row_1re9v_198[data-status='done'] ._title_1re9v_217 {
  text-decoration: line-through;
  text-decoration-color: var(--bd-3);
}

/* The status control is a real select so every value is one interaction away
   on a phone and reachable from the keyboard. The dot is what you see; the
   select is stretched over it, invisible. */
._status_1re9v_230 {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

._status_1re9v_230 select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font: inherit;
}

._dot_1re9v_248 {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--bd-3);
  color: var(--bg);
  transition:
    background var(--dur),
    border-color var(--dur);
}

._dot_1re9v_248[data-status='doing'] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2.5px var(--accent);
}

._dot_1re9v_248[data-status='done'] {
  border-color: var(--ok);
  background: var(--ok);
}

._dot_1re9v_248[data-status='parked'] {
  border-style: dashed;
  border-color: var(--bd-3);
}

._id_1re9v_277 {
  flex: none;
  min-width: 26px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--tx-3);
}

._title_1re9v_217 {
  flex: 1 1 200px;
  min-width: 0;
  padding: 2px 4px;
  margin: 0 -4px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--tx);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: text;
}

._title_1re9v_217:hover {
  background: var(--s2);
}

._titleEdit_1re9v_304 {
  flex: 1 1 200px;
  min-width: 0;
  padding: 2px 4px;
  margin: 0 -4px;
  border: 1px solid var(--accent);
  border-radius: var(--r-xs);
  background: var(--s2);
  color: var(--tx);
  font: inherit;
  font-size: 16px;
}

@media (min-width: 821px) {
  ._titleEdit_1re9v_304 {
    font-size: 12.5px;
  }
}

._flag_1re9v_323,
._size_1re9v_324,
._blocked_1re9v_325,
._when_1re9v_326 {
  flex: none;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}

._flag_1re9v_323 {
  background: var(--accent-soft);
  color: var(--accent-hi);
}

._size_1re9v_324 {
  background: var(--s3);
  color: var(--tx-3);
  font-family: var(--font-ui);
}

._blocked_1re9v_325 {
  background: var(--warn-soft);
  color: var(--warn);
}

._when_1re9v_326 {
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}

._notesToggle_1re9v_356,
._run_1re9v_357 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--tx-3);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
  transition:
    background var(--dur),
    color var(--dur),
    opacity var(--dur);
}

._notesToggle_1re9v_356 {
  width: 22px;
  height: 22px;
  justify-content: center;
}

._notesToggle_1re9v_356:hover {
  background: var(--s3);
  color: var(--tx-2);
}

._run_1re9v_357 {
  height: 22px;
  padding: 0 8px;
  /* Present but quiet until the row is under the pointer: it is the strongest
     action on the line and should not be the loudest thing on every one of
     sixty rows. On touch there is no hover, so it stays visible there. */
  opacity: 0;
}

@media (hover: none) {
  ._run_1re9v_357 {
    opacity: 1;
  }
}

._row_1re9v_198:hover ._run_1re9v_357,
._run_1re9v_357:focus-visible,
._run_1re9v_357[aria-expanded='true'] {
  opacity: 1;
}

._run_1re9v_357:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

._run_1re9v_357:disabled {
  cursor: default;
  opacity: 0.4;
}

/* ---------- run menu ---------- */
._runWrap_1re9v_418 {
  flex: none;
}

._menu_1re9v_422 {
  min-width: 180px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}

._menuHead_1re9v_429 {
  margin: 0;
  padding: 5px 8px 4px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tx-3);
}

._menu_1re9v_422 button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--tx-2);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

._menu_1re9v_422 button:hover {
  background: var(--s3);
  color: var(--tx);
}

._working_1re9v_459 {
  margin-left: auto;
  font-size: 9.5px;
  color: var(--accent);
}

/* ---------- notes ---------- */
._notes_1re9v_356 {
  /* Full width of the row, below everything else on it. */
  flex-basis: 100%;
  margin: 4px 0 6px 26px;
  padding: 8px 10px;
  border-left: 2px solid var(--bd-2);
  background: var(--s1);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--tx-2);
  /* The file's own wrapping is deliberate — it is prose someone hand-wrapped —
     so it is preserved rather than re-flowed. */
  white-space: pre-wrap;
}

/* ---------- add ---------- */
._add_1re9v_483 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 18px;
  color: var(--tx-3);
  opacity: 0.5;
  transition: opacity var(--dur);
}

._add_1re9v_483:hover,
._add_1re9v_483:focus-within {
  opacity: 1;
}

._add_1re9v_483 input {
  flex: 1;
  min-width: 0;
  padding: 3px 4px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--tx);
  font: inherit;
  font-size: 16px;
}

@media (min-width: 821px) {
  ._add_1re9v_483 input {
    font-size: 12.5px;
  }
}

._add_1re9v_483 input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* ---------- empty and broken ---------- */
._empty_1re9v_522 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 40px auto;
  max-width: 380px;
  padding: 0 20px;
  text-align: center;
  font-size: 12.5px;
  color: var(--tx-2);
}

._empty_1re9v_522 span {
  font-size: 11.5px;
  color: var(--tx-3);
  line-height: 1.6;
}

._empty_1re9v_522 code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx-2);
}

._broken_1re9v_546 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 32px 20px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--err-soft);
  color: var(--err);
  font-size: 12px;
  line-height: 1.6;
}
/* Which repo the surface acts on. Set off from whatever precedes it by a rule,
   so it reads as a choice about the surface and not as more of its title. */
._repos_1arsh_3 {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--bd-2);
}

._repo_1arsh_3 {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  color: var(--tx-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 550;
  white-space: nowrap;
  transition:
    background var(--dur),
    color var(--dur);
}

._repo_1arsh_3:hover {
  color: var(--tx-2);
  background: var(--s2);
}

._repo_1arsh_3[data-on='true'] {
  background: var(--s3);
  color: var(--tx);
  font-weight: 600;
}

/* The repo's branch, after its name: quieter, so the name still reads as the
   choice. Lighter still on the buttons not chosen, where it is context. */
._branch_1arsh_42 {
  font-weight: 400;
  color: var(--tx-3);
}

._repo_1arsh_3[data-on='true'] ._branch_1arsh_42 {
  color: var(--tx-2);
}

/* The same pill as the tab strip's count, a size down to sit in the shorter
   button. */
._count_1arsh_53 {
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 7px;
  background: var(--s4);
  color: var(--tx-2);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
._panel_12xy6_1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
}

/* The same header Review, Ship and the terminal draw — title, then which
   repo — so moving between them never moves the choice. */
._bar_12xy6_12 {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  height: 34px;
  flex: none;
  border-bottom: 1px solid var(--bd);
  overflow-x: auto;
  overflow-y: hidden;
  /* No bar: the wheel scrolls it sideways — lib/wheelSideways.ts. */
  scrollbar-width: none;
}

._title_12xy6_26 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 4px;
  color: var(--tx-2);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* The endpoint list is fixed and the request pane takes the rest: a path is
   about as long as it is going to get, while a response is never wide enough. */
/* Columns come from an inline style so the drag can move them; this is the
   fallback for the first paint and the shape of the track list. */
._split_12xy6_42 {
  display: grid;
  grid-template-columns: 220px 4px 1fr;
  flex: 1;
  min-height: 0;
}

._resizer_12xy6_49 {
  cursor: col-resize;
  background: var(--bd);
  /* The hit area is wider than the line, which is 4px and would otherwise be
     a target you have to aim at. */
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  background-clip: padding-box;
  box-sizing: content-box;
  margin: 0 -3px;
  z-index: 1;
}

._resizer_12xy6_49:hover {
  background: var(--accent);
}

/* ---------- endpoint list ---------- */
._list_12xy6_67 {
  overflow-y: auto;
  padding: 6px;
  min-height: 0;
}

._service_12xy6_73 {
  margin-bottom: 10px;
}

._serviceName_12xy6_77 {
  font-size: 11px;
  font-weight: 700;
  color: var(--tx);
  padding: 8px 7px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._serviceError_12xy6_87 {
  font-size: 10.5px;
  color: var(--err);
  padding: 2px 7px 6px;
}

._group_12xy6_93 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-3);
  padding: 8px 7px 4px;
}

._op_12xy6_102 {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 4px 7px;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;
  text-align: left;
}

._op_12xy6_102:hover {
  background: var(--s2);
}

._opOn_12xy6_119 {
  background: var(--s3);
}

._opPath_12xy6_123 {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--tx-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._opOn_12xy6_119 ._opPath_12xy6_123 {
  color: var(--tx);
}

._method_12xy6_136 {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  width: 33px;
  flex: none;
  text-align: right;
  letter-spacing: 0.02em;
  color: var(--tx-3);
}

._get_12xy6_147 {
  color: var(--ok);
}

._post_12xy6_151 {
  color: var(--info);
}

/* PUT and PATCH share a colour deliberately: they are the same act to the eye
   scanning a list, and a fifth hue buys less than it costs in legibility. */
._put_12xy6_157 {
  color: var(--warn);
}

._del_12xy6_161 {
  color: var(--err);
}

/* ---------- request pane ---------- */
/* Flex rather than a grid template, because the response pane is conditional.
   With `grid-template-rows` its track either collapses to content height — the
   one-line response this started as — or reserves space that sits empty before
   anything has been sent. Two `flex: 1` children split what is left and the
   survivor takes it all when the other is absent, with no track to size. */
._request_12xy6_171 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

._contract_12xy6_178,
._line_12xy6_179,
._tabs_12xy6_180 {
  flex: none;
}

._contract_12xy6_178 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--bd);
  background: var(--s2);
}

._contractIcon_12xy6_193,
._sendIcon_12xy6_194 {
  display: inline-flex;
  align-items: center;
  flex: none;
}

/* Icon paints with currentColor, so the accent is set on the wrapper — the
   component takes no className, and giving it one for this would make every
   other caller's colour a prop instead of a rule. */
._contractIcon_12xy6_193 {
  color: var(--accent-hi);
}

._path_12xy6_207 {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--tx);
}

._meta_12xy6_213 {
  font-size: 10.5px;
  color: var(--tx-3);
}

._badge_12xy6_218 {
  font-size: 10px;
  color: var(--accent-hi);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  margin-left: auto;
}

._line_12xy6_179 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bd);
}

._url_12xy6_236,
._urlInput_12xy6_237 {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--s3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  cursor: text;
}

._urlInput_12xy6_237 {
  border-color: var(--accent-line);
  outline: none;
}

._missing_12xy6_261 {
  color: var(--warn);
}

._send_12xy6_194 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--page);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

._send_12xy6_194:disabled {
  opacity: 0.6;
  cursor: default;
}

._tabs_12xy6_180,
._responseTabs_12xy6_287 {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
}

._tabs_12xy6_180 {
  border-bottom: 1px solid var(--bd);
}

._responseTabs_12xy6_287 {
  margin-left: auto;
  padding: 0;
}

._tab_12xy6_180 {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: none;
  background: none;
  border-radius: var(--r-sm);
  color: var(--tx-3);
  font-size: 11.5px;
  cursor: pointer;
}

._tab_12xy6_180:hover {
  color: var(--tx-2);
}

._tabOn_12xy6_321 {
  background: var(--s3);
  color: var(--tx);
}

._count_12xy6_326 {
  color: var(--tx-3);
  font-size: 10.5px;
}

._warn_12xy6_331 {
  color: var(--warn);
  font-weight: 700;
}

._paneBody_12xy6_336 {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  /* A floor, so a long response cannot squeeze the request you are editing
     down to nothing — the two are read together, not one after the other. */
  min-height: 150px;
  overflow: auto;
  padding: 10px 12px;
}

._note_12xy6_347 {
  color: var(--tx-3);
  font-size: 11.5px;
  margin: 0;
}

/* ---------- key/value editors ---------- */
._kvs_12xy6_354 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._kv_12xy6_354 {
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  gap: 10px;
}

._kv_12xy6_354 label {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--tx-3);
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

._kv_12xy6_354 input,
._varSet_12xy6_379 input,
._varSet_12xy6_379 select {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--s2);
  color: var(--tx);
  font-family: var(--font-ui);
  font-size: 11px;
  min-width: 0;
}

._kv_12xy6_354 input:focus,
._varSet_12xy6_379 input:focus {
  outline: none;
  border-color: var(--accent-line);
}

._required_12xy6_398 {
  color: var(--err);
}

._where_12xy6_402 {
  font-family: var(--font-ui);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tx-3);
  opacity: 0.7;
}

._response_12xy6_287 ._kvs_12xy6_354 {
  margin: 0 12px 10px;
  cursor: auto;
  padding: 8px 10px;
  flex: 1;
  overflow: auto;
  min-height: 0;
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--code-bg);
}

._kvRead_12xy6_423 {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx-2);
  word-break: break-all;
}

._kvRead_12xy6_423 span:first-child {
  color: var(--tx-3);
}

._body_12xy6_437 {
  width: 100%;
  flex: 1;
  min-height: 120px;
  resize: none;
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--code-bg);
  color: var(--tx);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  padding: 8px 10px;
}

._body_12xy6_437:focus {
  outline: none;
  border-color: var(--accent-line);
}

/* ---------- variables ---------- */
._vars_12xy6_458 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._var_12xy6_379 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._varHead_12xy6_470 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._varName_12xy6_476 {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--accent-hi);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xs);
  padding: 1px 5px;
}

._varValue_12xy6_486 {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx-2);
}

._varFrom_12xy6_492,
._unset_12xy6_493 {
  font-size: 10.5px;
  color: var(--tx-3);
}

._unset_12xy6_493 {
  color: var(--warn);
}

._clear_12xy6_502 {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--tx-3);
  font-size: 10.5px;
  cursor: pointer;
}

._clear_12xy6_502:hover {
  color: var(--tx);
}

._varSet_12xy6_379 {
  display: flex;
  gap: 8px;
}

._varSet_12xy6_379 input {
  flex: 1;
}

/* ---------- response ---------- */
._response_12xy6_287 {
  border-top: 1px solid var(--bd);
  background: var(--s2);
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 150px;
}

._responseHead_12xy6_534 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  flex: none;
}

/* A pill, not coloured text. The status is the first thing looked at after a
   send and it competes with a monospace URL directly above it, so it needs a
   shape of its own rather than a hue the eye has to find. */
._status_12xy6_545 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
}

._good_12xy6_557 {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: var(--ok);
}

._bad_12xy6_218 {
  color: var(--err);
  background: var(--err-soft);
  border-color: var(--err);
}

._error_12xy6_569 {
  margin: 0;
  padding: 0 12px 10px;
  color: var(--err);
  font-size: 11.5px;
}

/* The scroller; CodeBlock's own `.pre` brings the background, border and
   radius, so this only has to give it somewhere to fill and something to
   scroll in. Targeted by element rather than class because that class lives in
   Markdown.module.css and is not ours to name from here. */
._responseBody_12xy6_580 {
  margin: 0 12px 10px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

._responseBody_12xy6_580 > pre,
._responseBody_12xy6_580 > div {
  margin: 0;
  min-height: 100%;
  box-sizing: border-box;
}

._copy_12xy6_594 {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--s3);
  color: var(--tx-2);
  font-size: 10.5px;
  cursor: pointer;
}

._copy_12xy6_594:hover {
  color: var(--tx);
  border-color: var(--bd-2);
}

/* ---------- empty ---------- */
._empty_12xy6_611 {
  margin: auto;
  max-width: 380px;
  text-align: center;
  padding: 40px 20px;
  color: var(--tx-3);
}

/* `margin: 0 auto` rather than relying on the block's `text-align: center` —
   global.css makes every svg `display: block`, which text-align cannot centre. */
._empty_12xy6_611 svg {
  margin: 0 auto;
  color: var(--tx-3);
}

._empty_12xy6_611 h2 {
  margin: 12px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
}

._empty_12xy6_611 p {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.6;
}

._empty_12xy6_611 code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx-2);
}

._primary_12xy6_645 {
  height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--page);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
/* The shell fills the conversation column when its tab is selected. */
._wrap_18xjf_2 {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* The same header Review and Ship draw — title, then which repo — so moving
   between the three surfaces never moves the choice. Kept in step with
   RightPanel's `.tabs` and `.title` by hand: two rules are not worth a shared
   stylesheet, and the component inside them already is shared. */
._bar_18xjf_15 {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  height: 34px;
  flex: none;
  border-bottom: 1px solid var(--bd);
  overflow-x: auto;
  overflow-y: hidden;
  /* No bar: the wheel scrolls it sideways — lib/wheelSideways.ts. */
  scrollbar-width: none;
}

._title_18xjf_13 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 4px;
  color: var(--tx-2);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* Hidden rather than unmounted: the xterm instance keeps its viewport and
   scroll position, and re-attaching would mean replaying the whole buffer for
   a tab switch. `display: none` is safe here because nothing else depends on
   this element's box — the visibility effect re-fits when it comes back. */
._wrap_18xjf_2[data-visible='false'] {
  display: none;
}

._host_18xjf_49 {
  flex: 1;
  min-height: 0;
  min-width: 0;
  /* Room for the terminal's own edge, so glyphs don't touch the panel border.
     On the host rather than the wrap, so the header above still runs edge to
     edge like every other surface's. */
  margin: 6px 0 0 8px;
}

/* No bar, like every other vertical scroll in the app (see global.css). xterm 6
   draws its own, as elements rather than a native scrollbar, so the global
   rule cannot reach it and it is hidden here by name. */
._host_18xjf_49 .xterm-viewport {
  background: transparent !important;
}

._host_18xjf_49 .xterm-scrollable-element > .scrollbar.vertical {
  display: none;
}

._ended_18xjf_70 {
  flex: none;
  padding: 6px 10px;
  border-top: 1px solid var(--bd);
  font-size: 11px;
  color: var(--tx-3);
}
/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */

/**
 *  Default styles for xterm.js
 */

.xterm {
    cursor: text;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility:not(.debug),
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
    pointer-events: none;
}

.xterm .xterm-accessibility-tree:not(.debug) *::selection {
  color: transparent;
}

.xterm .xterm-accessibility-tree {
  font-family: monospace;
  user-select: text;
  white-space: pre;
}

.xterm .xterm-accessibility-tree > div {
  transform-origin: left;
  width: fit-content;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    /* Dim should not apply to background, so the opacity of the foreground color is applied
     * explicitly in the generated class and reset to 1 here */
    opacity: 1 !important;
}

.xterm-underline-1 { text-decoration: underline; }
.xterm-underline-2 { text-decoration: double underline; }
.xterm-underline-3 { text-decoration: wavy underline; }
.xterm-underline-4 { text-decoration: dotted underline; }
.xterm-underline-5 { text-decoration: dashed underline; }

.xterm-overline {
    text-decoration: overline;
}

.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }

.xterm-strikethrough {
    text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
	z-index: 6;
	position: absolute;
}

.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
	z-index: 7;
}

.xterm-decoration-overview-ruler {
    z-index: 8;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.xterm-decoration-top {
    z-index: 2;
    position: relative;
}



/* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */

/* xterm.js customization: Override xterm's cursor style */
.xterm .xterm-scrollable-element > .scrollbar {
    cursor: default;
}

/* Arrows */
.xterm .xterm-scrollable-element > .scrollbar > .scra {
	cursor: pointer;
	font-size: 11px !important;
}

.xterm .xterm-scrollable-element > .visible {
	opacity: 1;

	/* Background rule added for IE9 - to allow clicks on dom node */
	background:rgba(0,0,0,0);

	transition: opacity 100ms linear;
	/* In front of peek view */
	z-index: 11;
}
.xterm .xterm-scrollable-element > .invisible {
	opacity: 0;
	pointer-events: none;
}
.xterm .xterm-scrollable-element > .invisible.fade {
	transition: opacity 800ms linear;
}

/* Scrollable Content Inset Shadow */
.xterm .xterm-scrollable-element > .shadow {
	position: absolute;
	display: none;
}
.xterm .xterm-scrollable-element > .shadow.top {
	display: block;
	top: 0;
	left: 3px;
	height: 3px;
	width: 100%;
	box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.left {
	display: block;
	top: 3px;
	left: 0;
	height: 100%;
	width: 3px;
	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.top-left-corner {
	display: block;
	top: 0;
	left: 0;
	height: 3px;
	width: 3px;
}
.xterm .xterm-scrollable-element > .shadow.top.left {
	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
/* Rows run edge to edge like `.list` in DiffFileList — the Files tree and the
   Review file list are the same column in two surfaces, and an inset on one of
   them would make switching look like the panel moved. */
._tree_jspzx_4 {
  min-height: 0;
  padding: 2px 0 10px;
}

._empty_jspzx_9 {
  padding: 14px 8px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--tx-3);
}

/* One row for a folder and a file alike. The indent arrives as inline
   padding-left from the depth, so this sets everything except that. */
._row_jspzx_19 {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 6px;
  border: 0;
  background: none;
  color: var(--tx-2);
  font-family: var(--font-ui);
  font-size: 12px;
  text-align: left;
  cursor: default;
}

._row_jspzx_19:hover {
  background: var(--s2);
  color: var(--tx);
}

/* The selected file keeps its fill while the tree is unfocused, unlike a
   hover: it is where the viewer is, not where the pointer is, and losing it
   when you click into the code would leave the two panes disagreeing. */
._row_jspzx_19[data-selected] {
  background: var(--accent-wash);
  color: var(--tx);
}

/* A span around the icon rather than a class on it: `Icon` takes no
   className, and widening its props for one caller is the larger change. */
._glyph_jspzx_51 {
  display: inline-flex;
  flex: none;
  color: var(--tx-3);
}

._row_jspzx_19[data-selected] ._glyph_jspzx_51 {
  color: var(--accent);
}

/* Cut at the row's edge rather than wrapped. A wrapped name breaks the
   one-row-one-file rhythm the indent depends on to be readable. */
._name_jspzx_63 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
._file_g9xca_1 {
  min-width: 0;
  height: 100%;
  overflow: auto;
  background: var(--code-bg);
}

._blank_g9xca_8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 24px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--tx-3);
  text-align: center;
}

._open_g9xca_23 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm);
  background: var(--s2);
  color: var(--tx-2);
  font-family: var(--font-ui);
  font-size: 11.5px;
}

._open_g9xca_23:hover {
  border-color: var(--bd-3);
  color: var(--tx);
}

/* `max-content`, so a long line scrolls the pane sideways rather than wrapping.
   Wrapping would break the one-row-one-line correspondence the numbers claim. */
._code_g9xca_43 {
  min-width: max-content;
  padding: 6px 0 40px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
}

._line_g9xca_51 {
  display: flex;
  align-items: flex-start;
}

._line_g9xca_51:hover {
  background: var(--s1);
}

/* Unselectable, right-aligned, and a button — because the useful thing to do
   with a line number here is open that line in a real editor, which is the one
   action this read-only pane owes you. */
._num_g9xca_63 {
  flex: none;
  width: 52px;
  padding: 0 10px 0 0;
  border: 0;
  background: none;
  color: var(--tx-3);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: inherit;
  text-align: right;
  user-select: none;
  opacity: 0.55;
}

._line_g9xca_51:hover ._num_g9xca_63 {
  opacity: 1;
  color: var(--accent);
}

/* `pre-wrap` would wrap; `pre` keeps the line intact and lets `.file` scroll.
   The empty line still needs a height, which `min-height: 1lh` gives it
   without a `&nbsp;` in the text layer that find-in-page would walk over. */
._text_g9xca_86 {
  min-height: 1lh;
  padding-right: 24px;
  white-space: pre;
  color: var(--tx);
}

/* Syntax colours, the same mechanism as the diff and the transcript's code
   blocks — and the reason this rule has to exist at all rather than being
   implied by the tokens. `defaultColor: false` makes shiki write *both*
   palettes into one render as `--shiki-light` / `--shiki-dark` custom
   properties and no `color` of its own, so a span arrives styled with two
   variables nothing reads. The stylesheet picks the one for the current theme,
   which is what lets switching appearance cost nothing: the markup never
   re-highlights.

   Without this the tokens are all produced correctly and every one of them
   inherits `--tx` — a file rendered in one colour, which is exactly what it
   looked like. */
._text_g9xca_86 span {
  color: var(--shiki-light);
}

[data-theme='dark'] ._text_g9xca_86 span {
  color: var(--shiki-dark);
}

/* The line a search result landed on, held after the scroll. Without it the
   pane centres on the match and then gives you no way to tell which of the
   forty lines on screen you asked for. */
._line_g9xca_51[data-at] {
  background: var(--accent-wash);
}
._panel_1lo7o_1 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

._box_1lo7o_8 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin: 8px;
  padding: 0 7px;
  height: 26px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm);
  background: var(--s2);
  color: var(--tx-3);
}

._box_1lo7o_8:focus-within {
  border-color: var(--accent);
  color: var(--tx-2);
}

._input_1lo7o_27 {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--tx);
  font-family: var(--font-ui);
  font-size: 12px;
}

._input_1lo7o_27::placeholder {
  color: var(--tx-3);
}

._clear_1lo7o_41 {
  display: inline-flex;
  flex: none;
  padding: 2px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--tx-3);
}

._clear_1lo7o_41:hover {
  color: var(--tx);
}

/* One line, always present — including while idle. A status that appears only
   sometimes makes the list below it jump by its height every time a search
   starts or ends. */
._status_1lo7o_58 {
  flex: none;
  padding: 0 9px 7px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.4;
  color: var(--tx-3);
}

._restore_1lo7o_67 {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: inherit;
  font-size: inherit;
}

._restore_1lo7o_67:hover {
  text-decoration: underline;
}

._results_1lo7o_80 {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-bottom: 10px;
}

._group_1lo7o_87 {
  margin-bottom: 2px;
}

/* The file, as a header over its matches. Sticky so the path stays readable
   while you scroll a file with thirty hits in it — without it the lines lose
   their owner the moment the header scrolls off. */
._head_1lo7o_94 {
  display: flex;
  align-items: baseline;
  gap: 5px;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 4px 6px 4px 9px;
  background: var(--s1);
  font-family: var(--font-ui);
  font-size: 11.5px;
}

._name_1lo7o_107 {
  flex: none;
  color: var(--tx-2);
  font-weight: 500;
}

/* Gives up its width first, and from the front — the end of a folder is what
   distinguishes two of them. */
._dir_1lo7o_115 {
  min-width: 0;
  overflow: hidden;
  direction: rtl;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10.5px;
  color: var(--tx-3);
}

._count_1lo7o_126 {
  flex: none;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--s3);
  font-size: 10px;
  color: var(--tx-3);
}

._dismiss_1lo7o_136 {
  display: inline-flex;
  flex: none;
  align-self: center;
  padding: 2px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--tx-3);
  opacity: 0;
}

/* Revealed on hover or focus, never permanently: a column of crosses down the
   side of every result reads as a list of things to delete. Focus is in the
   selector so it stays reachable by keyboard. */
._head_1lo7o_94:hover ._dismiss_1lo7o_136,
._dismiss_1lo7o_136:focus-visible {
  opacity: 1;
}

._dismiss_1lo7o_136:hover {
  background: var(--s3);
  color: var(--tx);
}

._row_1lo7o_161 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 2px 6px 2px 14px;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
}

._row_1lo7o_161:hover {
  background: var(--s2);
}

._row_1lo7o_161[data-selected] {
  background: var(--accent-wash);
}

._line_1lo7o_183 {
  flex: none;
  width: 34px;
  text-align: right;
  color: var(--tx-3);
  opacity: 0.7;
}

/* One line, cut at the edge. Wrapping a result makes the list's rhythm depend
   on how long each matching line happens to be. */
._text_1lo7o_193 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  color: var(--tx-2);
}

._hit_1lo7o_202 {
  border-radius: 2px;
  background: var(--accent-soft);
  color: var(--tx);
}

/* The folding half of the header: everything except the cross. A button of its
   own because the cross cannot be nested inside one, and the whole strip has
   to stay clickable rather than only the chevron. */
._fold_1lo7o_211 {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

._fold_1lo7o_211 > svg {
  flex: none;
  align-self: center;
  color: var(--tx-3);
}

._fold_1lo7o_211:hover ._name_1lo7o_107 {
  color: var(--tx);
}
/* The same frame as RightPanel's `.panel`: these are two views of one worktree
   and the header has to sit at the same height in both, or switching surfaces
   looks like the window moved. */
._panel_14g3u_1 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

._tabs_14g3u_14 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 0 8px;
  height: 34px;
  border-bottom: 1px solid var(--bd);
  background: var(--s1);
}

._title_14g3u_25 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  color: var(--tx-2);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
}

._right_14g3u_36 {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-left: auto;
}

/* The open file's path, in the header rather than over the code: the viewer is
   a scroller and a sticky name inside it would cover the first line.

   Filename first and folder after it, the same shape `DiffFileList` uses for
   the same reason — the name is what you scan for. It replaced a
   `direction: rtl` truncation that cut the path from the front, which read
   correctly right up until a dotfile: in an RTL run a leading `.` is a neutral
   character and takes the paragraph direction, so `.prettierrc.json` rendered
   as `prettierrc.json.` with the dot moved to the end. Splitting the path
   avoids the bidi question entirely rather than fighting it with marks. */
._path_14g3u_54 {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* The name never shrinks while there is folder left to give up. */
._name_14g3u_66 {
  flex: none;
  color: var(--tx-2);
}

/* Cut from the front, since the end of a folder is the part that distinguishes
   two of them — and here the truncation is on plain directory text, where no
   leading punctuation is in play. */
._dir_14g3u_74 {
  min-width: 0;
  overflow: hidden;
  direction: rtl;
  text-align: left;
  text-overflow: ellipsis;
  color: var(--tx-3);
}

._icon_14g3u_83 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--tx-3);
}

._icon_14g3u_83:hover:not(:disabled) {
  background: var(--s3);
  color: var(--tx);
}

._icon_14g3u_83:disabled {
  opacity: 0.4;
}

/* Two tracks and the splitter out of flow between them, exactly as Review's
   body does it — the grid keeps the two children its tracks expect. */
._body_14g3u_107 {
  position: relative;
  display: grid;
  grid-template-columns: var(--tree-w) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

._list_14g3u_115 {
  min-width: 0;
  overflow: auto;
  border-right: 1px solid var(--bd);
  background: var(--s1);
}

._split_14g3u_122 {
  left: var(--tree-w);
}

/* Tree | Search, as one segmented control. Beside the title rather than inside
   the left column, so the column's full height belongs to whichever view is
   showing. */
._modes_14g3u_129 {
  display: flex;
  flex: none;
  gap: 1px;
  padding: 1px;
  border-radius: var(--r-sm);
  background: var(--s2);
}

._mode_14g3u_129 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 0;
  border-radius: calc(var(--r-sm) - 1px);
  background: none;
  color: var(--tx-3);
  font-family: var(--font-ui);
  font-size: 11px;
}

._mode_14g3u_129:hover {
  color: var(--tx-2);
}

._mode_14g3u_129[data-on] {
  background: var(--s4);
  color: var(--tx);
}

/* Both panes stay mounted and one is hidden, so flipping back keeps a result
   list and the tree's open folders. `display: none` rather than visibility,
   because a hidden pane must not hold scroll height in the column. */
._pane_14g3u_1 {
  display: none;
  min-height: 0;
  height: 100%;
}

._pane_14g3u_1[data-visible='true'] {
  display: block;
}
/* VS Code's source control group header: one thin line, title case, neutral.
   22px is VS Code's own row height — tall enough to hit, short enough that four
   of them cost less than one file row did as padding. */
._head_1w2xu_4 {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding-right: 8px;
  /* Filled at rest, not only on hover, so a section's edge is visible without
     a pointer on it — the header is a divider as much as a label. */
  background: var(--s2);
}

._head_1w2xu_4:hover {
  background: var(--s3);
}

._toggle_1w2xu_19 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 0 0 6px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

._chev_1w2xu_32 {
  display: flex;
  flex: none;
  color: var(--tx-3);
  transition: transform var(--dur);
}

._chev_1w2xu_32[data-open='true'] {
  transform: rotate(90deg);
}

._label_1w2xu_43 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-2);
}

._head_1w2xu_4:hover ._label_1w2xu_43,
._head_1w2xu_4:hover ._chev_1w2xu_32 {
  color: var(--tx);
}

._actions_1w2xu_57,
._confirm_1w2xu_58 {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: none;
}

/* Quiet until you're on the header, like the rows beneath it. Visibility
   rather than display, so the count badge does not jump sideways as the
   pointer crosses. Focus counts as being on it, so the keyboard can reach
   them. */
._actions_1w2xu_57 {
  visibility: hidden;
}

._head_1w2xu_4:hover ._actions_1w2xu_57,
._head_1w2xu_4:focus-within ._actions_1w2xu_57 {
  visibility: visible;
}

._confirm_1w2xu_58 {
  gap: 4px;
}

._action_1w2xu_57 {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--tx-3);
}

._action_1w2xu_57:hover {
  background: var(--s4);
  color: var(--tx);
}

._action_1w2xu_57[data-danger='true']:hover {
  background: var(--err-soft, var(--s4));
  color: var(--err);
}

/* A badge, as VS Code draws it: the number alone, without "files" after it,
   since the rows below already say what is being counted. */
._count_1w2xu_103 {
  flex: none;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  /* Half its height, so a pill. */
  border-radius: var(--r-md);
  background: var(--s3);
  font-size: 10px;
  font-weight: 600;
  color: var(--tx-2);
  font-variant-numeric: tabular-nums;
}

._confirmNo_1w2xu_119,
._confirmYes_1w2xu_120 {
  height: 18px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  font-size: 10.5px;
  font-weight: 550;
  white-space: nowrap;
}

._confirmNo_1w2xu_119 {
  color: var(--tx-2);
  border: 1px solid var(--bd-2);
}

._confirmYes_1w2xu_120 {
  background: var(--err);
  color: #fff;
}
/* Mirrors `.flist` / `.stgsec` / `.frow` in prototype/orc.html. */
/* No overflow of its own: the column around it scrolls, and a section that
   scrolled inside a scrolling column would be two bars for one list. */
._list_1co0c_4 {
  /* No inset at all: headers and rows run edge to edge, as in VS Code, and
     the stash header sits flush under the last section like a fourth one. */
  padding: 0;
  min-height: 0;
}

._empty_1co0c_11 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 6px;
  font-size: 11.5px;
  color: var(--tx-3);
  line-height: 1.5;
}

/* Two columns, not three: the A/M/D letter git prints was dropped, because
   opening a file shows you what happened to it far more plainly than a glyph
   does, and a column of `M` on nearly every row is repetition, not signal. The
   cost, accepted: a rename with no edits is `+0 −0`, so that row carries a
   name and nothing else. The counts are a sibling of this button now, not
   inside it — see `.counts`. */
._file_1co0c_27 {
  flex: 1;
  min-width: 0;
  padding: 4px 6px 4px 8px;
  text-align: left;
}

/* Filename first, folder after it — the name is what you scan for, and a
   column of full paths reads as one block of grey. The whole path is still on
   the row's `title`, so nothing is lost by demoting it here. */
._path_1co0c_37 {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 12px;
  white-space: nowrap;
}

/* The name never shrinks while there is folder left to give up, and only
   ellipsises once it alone is wider than the row. It used to be `flex-shrink:
   1` against the folder's 999, which reads as "folder first" but is a ratio:
   shrink is shared in proportion to shrink × width, so the name always lost a
   fraction of a pixel alongside the folder — enough for an ellipsis on both.
   `max-width` is what lets it truncate at all once it can't shrink; the gap
   and the collapsed folder after it fall off the end, clipped by `.path`. */
._name_1co0c_55 {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The folder is context, not identity: it gives up all its width before the
   name gives any, and clips at its start rather than its end so the innermost
   folder — the part that tells two same-named files apart — is the part that
   survives. */
._dir_1co0c_66 {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  color: var(--tx-3);
  /* rtl only for where the ellipsis lands — the text itself is still laid out
     left to right, since every segment is a strong-LTR run. `unicode-bidi:
     plaintext` would undo exactly that and put the ellipsis back on the end. */
  direction: rtl;
  text-align: left;
}

._counts_1co0c_26 {
  display: flex;
  gap: 3px;
  padding-right: 8px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  flex: none;
}

._plus_1co0c_91 {
  color: var(--git-add);
}

._minus_1co0c_95 {
  color: var(--git-del);
}

._binary_1co0c_99 {
  color: var(--tx-3);
}

/* The changed set was capped. Said out loud rather than silently trimmed —
   a short list that looks complete is worse than no list. */
._capped_1co0c_105 {
  padding: 8px 10px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--warn);
  background: var(--warn-soft);
  border-top: 1px solid var(--bd);
}

/* A row is a select button plus its actions, so the actions can't live inside
   the button itself — and the highlight belongs here, on the whole row, not on
   the button. The button carried its own `:hover` from when it *was* the row,
   which drew a second box inside this one: narrower, since it stops short of
   the actions, and rounder, since it uses --r-sm against this --r-xs. */
._row_1co0c_119 {
  display: flex;
  align-items: center;
}

._row_1co0c_119:hover {
  background: var(--s2);
}

._row_1co0c_119[data-on='true'] {
  background: var(--s3);
}

._actions_1co0c_132,
._confirm_1co0c_133 {
  display: flex;
  align-items: center;
  gap: 0;
  padding-right: 4px;
  flex: none;
}

/* Absent, not just invisible, until you're on the row: the file list is for
   reading first, and hidden buttons that still hold their width take it from
   the name. The name gives it back on hover, which is the trade VS Code makes
   too. */
._actions_1co0c_132 {
  display: none;
}

._row_1co0c_119:hover ._actions_1co0c_132 {
  display: flex;
}

._action_1co0c_132 {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--tx-3);
}

._action_1co0c_132:hover {
  background: var(--s4);
  color: var(--tx);
}

._danger_1co0c_167:hover {
  background: var(--err-soft, var(--s4));
  color: var(--err);
}

._confirmNo_1co0c_172,
._confirmYes_1co0c_173 {
  height: 19px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  font-size: 10.5px;
  font-weight: 550;
}

._confirmNo_1co0c_172 {
  color: var(--tx-2);
  border: 1px solid var(--bd-2);
}

._confirmYes_1co0c_173 {
  background: var(--err);
  color: #fff;
}
/* The repository's stashes, under the file list. Collapsed by default: most of
   the time there are none and it should cost one line, not a panel. */

/* Its own content's height, always. The column above scrolls past it, so
   there is nothing to cap and nothing to shrink into. No border or inset of
   its own: the filled header is the boundary, exactly as it is for the
   sections above, and a rule on top of it made this one look different. */
._panel_crvix_8 {
  flex: none;
}

._body_crvix_12 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px 10px;
}

._add_crvix_19 {
  display: flex;
  gap: 6px;
}

._input_crvix_24 {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm);
  background: var(--s2);
  font-size: 11.5px;
  color: var(--tx);
}

._input_crvix_24:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--s1);
}

._input_crvix_24:disabled {
  opacity: 0.5;
}

._primary_crvix_46,
._ghost_crvix_47,
._danger_crvix_48,
._undo_crvix_49 {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex: none;
}

._primary_crvix_46 {
  border: 1px solid var(--accent-line);
  background: var(--accent);
  /* Matching Settings and ShipTab, which both put plain white on the accent. */
  color: #fff;
}

._ghost_crvix_47 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--bd-2);
  background: none;
  color: var(--tx-2);
}

._ghost_crvix_47:hover:not(:disabled) {
  background: var(--s3);
  color: var(--tx);
}

._danger_crvix_48 {
  border: 1px solid var(--err);
  background: var(--err-soft);
  color: var(--err);
}

._primary_crvix_46:disabled,
._ghost_crvix_47:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Why the button above is dead. Warning rather than error: nothing has gone
   wrong, there is an order to do things in. */
._blocked_crvix_94 {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--warn);
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  font-size: 11px;
  line-height: 1.45;
  color: var(--tx);
}

._note_crvix_105,
._empty_crvix_106,
._hint_crvix_107 {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--tx-3);
}

/* A pop that did not come out clean. Warning rather than error: the stash
   survived every failure mode, so nothing here has been lost. */
._failed_crvix_116 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid var(--warn);
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  font-size: 11px;
  line-height: 1.45;
  color: var(--tx);
}

._failed_crvix_116 p {
  margin: 0;
}

._undo_crvix_49 {
  border: 1px solid var(--bd-2);
  background: var(--s1);
  color: var(--tx);
}

._list_crvix_140 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

._row_crvix_148 {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px solid var(--bd);
}

._row_crvix_148:last-child {
  border-bottom: 0;
}

._what_crvix_160 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

._message_crvix_168 {
  font-size: 11.5px;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The branch is the load-bearing half of this line, not the date: with one
   list across every worktree it is what says where an entry came from. */
._meta_crvix_178 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: var(--tx-3);
}

._meta_crvix_178 code {
  font-family: var(--font-mono);
  color: var(--tx-2);
}

._acts_crvix_191 {
  display: flex;
  gap: 5px;
  flex: none;
}
/* Unified diff rendering — `.dwrap` in prototype/orc.html. */
._diff_1pkuc_2 {
  /* Width of the gutter between the two sides. Here rather than inline so the
     drag handle can centre itself on it with the same number. */
  --mid-w: 26px;
  position: relative;
  min-height: 0;
  background: var(--code-bg);
}

/*
 * The side-by-side divider, as a share of the width rather than a pixel
 * column. It has to be a ratio: the diff pane's own width changes whenever the
 * file list beside it is dragged or the window resizes, and a pixel split
 * would slide off the seam every time it did.
 *
 * Absolutely positioned inside `.diff`, which is as tall as the diff rather
 * than as tall as the viewport, so the handle exists at every scroll position
 * — a sticky handle would have to be told the pane's height, which lives two
 * components away.
 */
/*
 * On the gutter's left edge, not down the middle of it.
 *
 * Centred, it ran straight through the stage buttons — the one thing the gutter
 * exists to hold — so the two were permanently fighting for the same 7px and
 * the button only won by being stacked above it. On the edge they do not
 * overlap at all, and the edge is also where `--diff-split` actually is, so the
 * handle sits on the number it drags.
 */
._splitHandle_1pkuc_31 {
  left: calc(var(--diff-split, 50) * 1%);
  margin-left: -3px;
}

/*
 * Combined view: as wide as its longest line, so the pane around it scrolls
 * sideways — one bar, at the foot of the pane, for the whole file.
 *
 * It wrapped until 2026-10-17. Wrapping kept everything on screen and cost the
 * shape of the code: a long line folded under itself reads as two lines, and
 * the indentation that says what is inside what is exactly what it broke.
 * One scroll box per hunk, as side by side has, was the alternative and was
 * not needed — inline has no second column to keep level with, so the file can
 * scroll as one thing. `min-width: 100%` keeps a short file full-width, so a
 * changed row's tint still runs to the pane's edge.
 */
._diff_1pkuc_2[data-layout='unified'] {
  width: max-content;
  min-width: 100%;
}

/* What spans the file stays the pane's width and stays put: the file name and
   hunk headers would otherwise stretch to the longest line and scroll away
   with the code. `cqw` is the review pane's width — DiffPane makes its
   scroller the container. */
._diff_1pkuc_2[data-layout='unified'] ._fileHead_1pkuc_57,
._diff_1pkuc_2[data-layout='unified'] ._hunkHead_1pkuc_58,
._diff_1pkuc_2[data-layout='unified'] ._truncated_1pkuc_59 {
  position: sticky;
  left: 0;
  width: 100cqw;
}

._placeholder_1pkuc_65 {
  padding: 24px;
  font-size: 12px;
  color: var(--tx-3);
}

._fileHead_1pkuc_57 {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--s2);
  border-bottom: 1px solid var(--bd);
  padding: 7px 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--tx);
}

/* The `@@` line, and the place a hunk's own staging lives — it is the only
   row in the diff that belongs to the whole hunk rather than to one line. */
._hunkHead_1pkuc_58 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 2px 12px;
  min-height: 22px;
  background: var(--s2);
  color: var(--tx-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  border-top: 1px solid var(--bd);
}

._hunkRange_1pkuc_99 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Sat on the seam, where the two sides meet.
 *
 * It was at the far right of the header first, which on a wide diff is most of
 * a screen away from the change it stages and reads as belonging to the new
 * side rather than to the hunk. The divider is the one place that belongs to
 * both sides at once, which is what a hunk does — the same reasoning that puts
 * these controls in the middle gutter of an editor's diff view. Tracks the drag
 * handle by reading the same `--diff-split`, so it stays on the seam wherever
 * the seam is put.
 */
._line_1pkuc_118 {
  display: grid;
  /* Leading column for the run's controls, then the two line numbers, the
     +/- sign and the code. Inline has no seam between panes to hang them on,
     so they go before everything — the leftmost thing on the row. */
  grid-template-columns: var(--mid-w) 44px 44px 14px 1fr;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
}

._line_1pkuc_118[data-kind='add'] {
  background: var(--add);
}

._line_1pkuc_118[data-kind='del'] {
  background: var(--del);
}

._gutter_1pkuc_137 {
  text-align: right;
  padding-right: 10px;
  color: var(--tx-3);
  opacity: 0.65;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

._sign_1pkuc_146 {
  text-align: center;
  user-select: none;
  color: var(--tx-3);
}

._line_1pkuc_118[data-kind='add'] ._sign_1pkuc_146 {
  color: var(--git-add);
}

._line_1pkuc_118[data-kind='del'] ._sign_1pkuc_146 {
  color: var(--git-del);
}

._code_1pkuc_160 {
  padding-right: 14px;
  /* Never wrapped, in either layout: one line of code is one line on screen,
     and what doesn't fit is reached by scrolling. */
  white-space: pre;
  -webkit-user-select: text;
  user-select: text;
}

._truncated_1pkuc_59 {
  padding: 10px 12px;
  font-size: 11px;
  color: var(--warn);
  background: var(--warn-soft);
}

/*
 * Side-by-side, one hunk at a time: a two-column grid whose children are the
 * two *sides*, each holding all of that hunk's lines.
 *
 * It was the other way round — a row per line, each containing both halves —
 * which kept the sides aligned by letting a wrapped line grow the whole row.
 * That bought alignment at the price of wrapping one line of code over three,
 * which is not how anyone reads a diff. Turned inside out, a side is a single
 * box that can scroll, and alignment is free by a different argument: nothing
 * wraps any more, so every line is exactly one line tall and `pairLines` has
 * already padded the two sides to the same count.
 */
._split_1pkuc_31 {
  display: grid;
  /*
   * Old, the gutter, new. Both sides read one custom property on `.diff`, so
   * the drag handle — which spans the whole diff, not one hunk — writes it once
   * and every hunk moves together.
   *
   * The gutter is a real column rather than a border, because it holds the
   * hunk's stage button: a change belongs to both sides at once, so its one
   * control belongs to neither of them, and there has to be somewhere between
   * them for it to be. It costs the new side 22px, which is why the old side
   * keeps the exact percentage and the new side takes what is left.
   */
  grid-template-columns: calc(var(--diff-split, 50) * 1%) var(--mid-w) minmax(0, 1fr);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
}

/*
 * One side of one hunk, and the thing that actually scrolls.
 *
 * `overflow-y: hidden` rather than the default: `overflow-x: auto` alone would
 * compute `overflow-y` to `auto` as well, and a side that scrolls vertically
 * would take that job away from the review pane around it and let the two
 * sides drift out of step. Hidden clips nothing here — the box is exactly as
 * tall as its lines — and the pane keeps scrolling the file as one.
 */
._side_1pkuc_216 {
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  background: var(--code-bg);
  overscroll-behavior-x: contain;
  /* No bar of its own: `.bars` below is every side's scrollbar. A bar per hunk
     sat mid-file wherever a hunk ended — a grey rule across the diff while
     reading — and the one you wanted was usually off-screen. */
  scrollbar-width: none;
}

/*
 * The two scrollbars of side by side, one under each column, held at the foot
 * of the pane while the file scrolls past.
 *
 * Empty scroll boxes over the same columns as `.split`, each with a spacer as
 * wide as its side's widest hunk; DiffView mirrors them with every side box,
 * so dragging either moves both columns, as the arrow keys and a trackpad do.
 * Opaque, because stuck to the bottom they sit over the last lines on screen,
 * the way any scrollbar does.
 */
._bars_1pkuc_222 {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: calc(var(--diff-split, 50) * 1%) var(--mid-w) minmax(0, 1fr);
  background: var(--code-bg);
}

._bar_1pkuc_222 {
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
}

/* Sized from script. A pixel tall, because a box with no height of its own
   overflows nothing and the bar would never appear. */
._barSpan_1pkuc_255 {
  height: 1px;
}

._barMid_1pkuc_259 {
  background: var(--s2);
  border-left: 1px solid var(--bd);
  border-right: 1px solid var(--bd);
}

/*
 * One box around all of a side's lines, sized once, so every row is as wide as
 * the longest one — and a row's width is the width of the tint behind a
 * change.
 *
 * The rows used to size themselves, `width: max-content` with
 * `min-width: 100%`, and the percentage is the trap: it resolves against the
 * visible box, not the scrolled width, so each row came out as wide as its own
 * text or one pane-width, whichever was larger. Scroll right and a short
 * line's colour stopped in mid-air with bare background beyond it.
 *
 * Applied to a wrapper rather than to the rows, which is what fixes it: here
 * `max-content` is the width of the *widest* row and the 100% floor is the
 * pane, so the box is the larger of the two and every row fills it. A grid
 * track on `.side` was tried first and cannot do this — a track whose max is
 * content-based is still clamped to the free space in a container with a
 * definite width, so it came back out at the pane width.
 */
._lines_1pkuc_283 {
  width: max-content;
  min-width: 100%;
}

/*
 * The inline layout's control column.
 *
 * Its own background and border rather than the row's, so it reads as a gutter
 * and the add/delete tint stops where the code starts — the same separation the
 * split view gets for free by putting this between two panes. One line tall and
 * relative, so the pair inside can overflow it exactly as it does there.
 */
._lineMid_1pkuc_296 {
  position: relative;
  height: 1lh;
  background: var(--s2);
  border-right: 1px solid var(--bd);
}

/* The gutter between the sides. Bordered on both edges, so the gap reads as a
   channel between two panes rather than as empty space in either of them. */
._mid_1pkuc_305 {
  background: var(--s2);
  border-left: 1px solid var(--bd);
  border-right: 1px solid var(--bd);
}

/*
 * One cell per line of the hunk, so a run's controls sit on the run.
 *
 * Height in `lh` rather than a copied pixel figure: a cell is exactly one line
 * of this grid's own type, which is what keeps the gutter in step with the code
 * beside it when the font or the line-height moves. Empty for every line that
 * does not begin a run, which is most of them.
 */
._midRow_1pkuc_319 {
  height: 1lh;
  position: relative;
}

/*
 * A run's controls, stacked and centred on the line they act on.
 *
 * Two line-heights tall with one button in each, so the seam between them lands
 * exactly on the middle of that line — the pair reads as belonging to it rather
 * than sitting near it. It overflows the row by half a line at each end, which
 * is safe by construction: a run is a *maximal* stretch of changed lines, so
 * the next one is at least one unshaded line further down and its pair begins
 * precisely where this one ends. Side by side was the alternative and it forced
 * a 40px channel between the panes to fit.
 */
._midStack_1pkuc_335 {
  position: absolute;
  left: 50%;
  /*
   * Centred on the whole run, not on its first line. The cell this sits in is
   * the run's first line, so the extra `--block-lines - 1` half-lines walk it
   * down to the middle of the run: a three-line change gets its controls
   * against its second line, which is where the eye reads the change as being.
   */
  top: calc(50% + ((var(--block-lines, 1) - 1) * 0.5lh));
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  z-index: 6;
}

/*
 * One press stages the hunk beside it.
 *
 * Quiet until the hunk is under the pointer, like the file list's row actions —
 * a diff is for reading first, and a column of buttons down the length of a
 * file is noise. Raised above the drag handle, which runs the full height of
 * the diff through this same gutter and would otherwise take every press meant
 * for this; the handle loses 20px per hunk and stays grabbable everywhere else.
 */
._stageHunk_1pkuc_360 {
  width: 20px;
  height: 1lh;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--tx-3);
  /*
   * Plainly visible at rest, at the size it is actually drawn.
   *
   * This took two wrong passes. First they were hidden until the hunk was
   * hovered, which is what the file list does — and reads completely
   * differently here, because a file row is obviously actionable while this is
   * a 22px channel of empty space that gives no reason to put a pointer in it.
   * Then they were --tx-3 at 45% opacity, which composites to rgb(59, 63, 70)
   * against this gutter's rgb(20, 22, 25): about 1.6:1, on an 11px glyph drawn
   * in 1px strokes. It looked fine in a 5x screenshot and was invisible on a
   * screen, which is the one thing this codebase says not to do.
   *
   * --tx-2 at full opacity is the same weight the line numbers carry, which are
   * legible next to the code without competing with it — the right bar for a
   * control that should be findable while reading and not shout.
   */
  color: var(--tx-2);
  z-index: 6;
  transition:
    color var(--dur),
    background var(--dur);
}

._stageHunk_1pkuc_360:hover {
  background: var(--s4);
  color: var(--tx);
}

/*
 * Undo this block, in the working tree.
 *
 * Under the stage button because that is the order the two are reached for —
 * keep it, or throw it away — and because the destructive one should not be the
 * first thing the hand lands on. It takes two presses: the file list's discard
 * asks the same way, for the same reason, which is that nothing gets this back.
 * Armed, it says so in red rather than by growing a dialog there is no room
 * for; moving focus away disarms it.
 */
._revertHunk_1pkuc_406 {
  width: 20px;
  height: 1lh;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--tx-2);
  transition:
    color var(--dur),
    background var(--dur);
}

._revertHunk_1pkuc_406:hover {
  background: var(--s4);
  color: var(--err);
}

/* Sits beside the armed button, outside the gutter, because the gutter is
   26px and this has something to say. Ignores the pointer so it can never be
   the thing a hurried second press lands on. */
._armHint_1pkuc_427 {
  position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--err);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 650;
  white-space: nowrap;
  pointer-events: none;
}

._revertHunk_1pkuc_406[data-armed='true'] {
  background: var(--err);
  color: #fff;
}

/* No width of its own: it stretches to the side's single column, which is
   already sized to the longest line. */
._sline_1pkuc_450 {
  display: grid;
  grid-template-columns: 44px max-content;
  /*
   * Exactly one line tall, always — this is what keeps the two sides level.
   *
   * A filler row, the blank opposite an insertion or a deletion, has no text in
   * it at all, and a grid row with no content is zero pixels high. So every
   * time the two sides had an unequal number of changed lines, the side with
   * the filler came up one line short and everything below it sat one line off
   * from its counterpart — the further down the file, the more of them, which
   * is why it looked like the alignment was simply wrong rather than that
   * anything specific was missing.
   *
   * `1lh` and not a copied pixel figure: one line of this grid's own type, so
   * it follows the font and line-height instead of having to be re-tuned when
   * either moves.
   */
  height: 1lh;
}

._sline_1pkuc_450[data-kind='del'] {
  background: var(--del);
}

._sline_1pkuc_450[data-kind='add'] {
  background: var(--add);
}

/* Filler opposite an insertion or a deletion — deliberately inert, so the eye
   reads it as "nothing here" rather than as an unchanged line. */
._sline_1pkuc_450[data-kind='empty'] {
  background: var(--s2);
}

/*
 * The line number stays put while the code scrolls under it, as an editor's
 * gutter does — scrolling right to read a long line and losing your place in
 * the file is the thing that makes a horizontal diff annoying.
 *
 * It needs an opaque background of its own for that, and the row's tint cannot
 * supply one: `--add` and `--del` are translucent washes meant to sit over the
 * code background, so inheriting one would let the code show through. Hence
 * the pair — the wash as an image, the code background as the colour under it.
 */
._sline_1pkuc_450 ._gutter_1pkuc_137 {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--code-bg);
  /*
   * The muting moves from the element to the text. `.gutter` dims itself with
   * `opacity: 0.65`, which is fine where it scrolls with the code but ruinous
   * once it is sticky and has a background to hold: element opacity applies to
   * the background too, so the code slid underneath and showed straight
   * through the line numbers. Same grey, same 65%, applied where it belongs.
   */
  opacity: 1;
  color: color-mix(in srgb, var(--tx-3) 65%, transparent);
}

._sline_1pkuc_450[data-kind='add'] ._gutter_1pkuc_137 {
  background-image: linear-gradient(var(--add), var(--add));
}

._sline_1pkuc_450[data-kind='del'] ._gutter_1pkuc_137 {
  background-image: linear-gradient(var(--del), var(--del));
}

._sline_1pkuc_450[data-kind='empty'] ._gutter_1pkuc_137 {
  background-color: var(--s2);
}

/*
 * Still selected, as far as the reader is concerned.
 *
 * Set by `useCodeSelection` while the ask-about-this popover is open, because
 * the browser's own highlight is gone by then — the popover's text box has the
 * focus and the document selection went with it. `background-image` and not
 * `background`, so it layers over the add/delete tint instead of replacing it;
 * declared after those rules for the same reason, since their shorthand resets
 * the image.
 */
._sline_1pkuc_450[data-picked='true'],
._line_1pkuc_118[data-picked='true'] {
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
}

/* The gutter paints its own background, so it needs telling too. */
._sline_1pkuc_450[data-picked='true'] ._gutter_1pkuc_137 {
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
}

/*
 * The combined view's gutter — controls, both line numbers and the sign —
 * stays put while the code scrolls under it, as side by side's line number
 * does and for the same reason: scrolling right to read a long line and losing
 * your place in the file is what makes a sideways diff annoying.
 *
 * Opaque for that, with the row's tint laid over as an image, exactly as
 * `.sline .gutter` below explains. The offsets repeat the grid's column widths
 * because a sticky cell has to be told where its column starts.
 */
._line_1pkuc_118 > ._lineMid_1pkuc_296,
._line_1pkuc_118 > ._gutter_1pkuc_137,
._line_1pkuc_118 > ._sign_1pkuc_146 {
  position: sticky;
  z-index: 1;
}

._line_1pkuc_118 > ._lineMid_1pkuc_296 {
  left: 0;
}

._line_1pkuc_118 > ._gutter_1pkuc_137:nth-child(2) {
  left: var(--mid-w);
}

._line_1pkuc_118 > ._gutter_1pkuc_137:nth-child(3) {
  left: calc(var(--mid-w) + 44px);
}

._line_1pkuc_118 > ._sign_1pkuc_146 {
  left: calc(var(--mid-w) + 88px);
}

._line_1pkuc_118 > ._gutter_1pkuc_137,
._line_1pkuc_118 > ._sign_1pkuc_146 {
  background-color: var(--code-bg);
}

/* Same move as side by side's gutter: element opacity would let the code
   scrolling underneath show through, so the muting goes on the text. */
._line_1pkuc_118 > ._gutter_1pkuc_137 {
  opacity: 1;
  color: color-mix(in srgb, var(--tx-3) 65%, transparent);
}

._line_1pkuc_118[data-kind='add'] > ._gutter_1pkuc_137,
._line_1pkuc_118[data-kind='add'] > ._sign_1pkuc_146 {
  background-image: linear-gradient(var(--add), var(--add));
}

._line_1pkuc_118[data-kind='del'] > ._gutter_1pkuc_137,
._line_1pkuc_118[data-kind='del'] > ._sign_1pkuc_146 {
  background-image: linear-gradient(var(--del), var(--del));
}

._line_1pkuc_118[data-picked='true'] > ._gutter_1pkuc_137,
._line_1pkuc_118[data-picked='true'] > ._sign_1pkuc_146 {
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
}

/* A run's controls overhang their cell by half a line each way, into the
   neighbours' cells — which are sticky and opaque now, and later rows paint
   over earlier ones. Raised, so the pair and its "press again" sit on top. */
._line_1pkuc_118 > ._lineMid_1pkuc_296:has(> ._midStack_1pkuc_335) {
  z-index: 3;
}

/* The line the editor button would jump to. Marked on both layouts, since the
   button's target has to be visible wherever you picked it — on the combined
   view's leading cell, which stays on screen when the row scrolls. */
._line_1pkuc_118[data-active='true'] > ._lineMid_1pkuc_296 {
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Side-by-side puts it on the gutter rather than the row, because the row is
   as wide as its longest line: a marker on its left edge scrolls out of sight
   exactly when you have scrolled away and most need to know which line you
   are on. The gutter is the part that stays. */
._sline_1pkuc_450[data-active='true'] ._gutter_1pkuc_137 {
  box-shadow: inset 2px 0 0 var(--accent);
}

/*
 * The whole row takes a selection, not just the glyphs.
 *
 * `global.css` turns selection off for the shell and asks components to opt
 * back in, and only `.code` did — which meant a drag had to *begin* on a
 * character. Starting in the empty space past the end of a short line, which is
 * most of a diff, selected nothing at all, and the natural gesture of sweeping
 * down the right-hand side of a block never worked.
 *
 * The gutter keeps its own `user-select: none`, so line numbers still cannot be
 * dragged into the text — the row being selectable is about where a selection
 * may start, not about what ends up in it.
 */
._line_1pkuc_118,
._sline_1pkuc_450 {
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}

/* Syntax colours, same mechanism as the transcript's code blocks: shiki writes
   both palettes into one render as CSS variables and the stylesheet picks the
   one for the current theme, so switching appearance never re-highlights.

   The row's own background is left alone — the add and delete tints are what
   make a diff readable, and a token colour sits on top of them. */
._code_1pkuc_160 span {
  color: var(--shiki-light);
}

[data-theme='dark'] ._code_1pkuc_160 span {
  color: var(--shiki-dark);
}
/* The commit composer. Mounted under the staged files in Review and on the
   Ship tab's commit step; the styles travel with the component. */
._commit_jjov3_3 {
  border-top: 1px solid var(--bd);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
}

/* Wraps the textarea so the drafting skeleton can sit exactly over its box. */
._field_jjov3_13 {
  position: relative;
}

/* Never takes pointer events: the box stays clickable and typable underneath
   the whole time. Typing is not an interruption of the draft — the message
   that arrives deliberately won't overwrite what you wrote. */
._drafting_jjov3_20 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* Tracks the textarea's padding plus its border and half-leading, so the
     bars land where the text will. */
  padding: 8px 7px 0;
  pointer-events: none;
}

._line_jjov3_32 {
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--s3) 0%, var(--s4) 50%, var(--s3) 100%);
  background-size: 200% 100%;
  animation: _commitShimmer_jjov3_1 1.3s ease-in-out infinite;
}

/* Short, like the last line of a real paragraph — an even block of bars reads
   as a loading bar rather than as text about to arrive. */
._line_jjov3_32:last-child {
  width: 58%;
}

@keyframes _commitShimmer_jjov3_1 {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._line_jjov3_32 {
    animation: none;
  }
}

._message_jjov3_58 {
  /* Block, not the textarea's default inline-block: inline, it sat on a text
     baseline and carried the descender space under it, which read as extra
     gap above the commit button that no margin accounted for. */
  display: block;
  width: 100%;
  resize: vertical;
  padding: 3px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  background: var(--s1);
  color: var(--tx);
  font-size: 11.5px;
  line-height: 1.5;
  font-family: inherit;
}

._message_jjov3_58:focus {
  outline: none;
  border-color: var(--accent);
}

._row_jjov3_80 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._reroll_jjov3_86 {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  border: 1px solid var(--bd-2);
  color: var(--tx-3);
  flex: none;
}

._reroll_jjov3_86:hover:not(:disabled) {
  background: var(--s3);
  color: var(--tx);
}

._reroll_jjov3_86:disabled {
  opacity: 0.5;
}

._go_jjov3_106 {
  flex: 1;
  height: 24px;
  border-radius: var(--r-xs);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

._go_jjov3_106:disabled {
  opacity: 0.45;
}

/* Why the button is held back. Quiet: it is a precondition, not a failure. */
._note_jjov3_121 {
  margin: 0;
  color: var(--tx-3);
  font-size: 11px;
  line-height: 1.45;
}

/* git's or a hook's own words, kept until dismissed — the press failed, and
   the button re-enabling on its own says nothing about why. */
._error_jjov3_130 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 5px 7px;
  border-radius: var(--r-sm);
  background: var(--err-soft);
  color: var(--err);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

._error_jjov3_130 span {
  flex: 1;
  min-width: 0;
}

._dismiss_jjov3_150 {
  flex: none;
  color: var(--tx-2);
  font-size: 11px;
}

._dismiss_jjov3_150:hover {
  color: var(--tx);
}
/* The worktree-move form. Fluid, because it has two homes at different widths:
   a modal raised from the sidebar's row menu, and the Ship tab's panel. The
   container decides how wide; this decides what is in it. */

._reset_uae4b_5 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 14px 14px;
}

._head_uae4b_12 {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--tx);
}

/* Which worktree this is about. The popover is anchored to its row, but the
   row scrolls and the anchor is the only thing saying which one — so the
   branch is named here rather than left to the pointer's position. */
._on_uae4b_24 {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  color: var(--tx-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

._field_uae4b_35 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-2);
}

/* A fixed label column, so the two inputs align with each other rather than
   with the width of the words Branch and From. */
._field_uae4b_35 > span {
  flex: none;
  width: 42px;
}

._input_uae4b_51 {
  flex: 1;
  min-width: 0;
  height: 27px;
  padding: 0 8px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm);
  background: var(--s2);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--tx);
}

._input_uae4b_51:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--s1);
}

._note_uae4b_71 {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--tx-3);
}

/* Wraps, because a third button appears here when a refusal can be cleared by
   stashing — and "Stash them and move" beside Cancel and Move worktree is
   wider than the popover this form also renders in. */
._acts_uae4b_80 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

._ghost_uae4b_87,
._primary_uae4b_88 {
  height: 27px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

._ghost_uae4b_87 {
  border: 1px solid var(--bd-2);
  background: none;
  color: var(--tx-2);
}

._ghost_uae4b_87:hover {
  background: var(--s3);
  color: var(--tx);
}

._primary_uae4b_88 {
  border: 1px solid var(--accent-line);
  background: var(--accent);
  /* Matching Settings and ShipTab, which both put plain white on the accent. */
  color: #fff;
}

._primary_uae4b_88:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Inline, so it sits on the baseline of whatever row or sentence holds it, and
   `flex: none` so a long subject beside it truncates instead of the id. */
._sha_1lnmh_3 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

._copy_1lnmh_10 {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--r-xs);
  color: var(--tx-3);
  /* Fixed to the box it occupies, so swapping the glyph for a check never
     nudges the subject next to it. */
  flex: none;
  transition:
    color var(--dur),
    background var(--dur);
}

._copy_1lnmh_10:hover {
  background: var(--s3);
  color: var(--tx);
}

._copy_1lnmh_10[data-said='ok'] {
  color: var(--ok);
}

._copy_1lnmh_10[data-said='no'] {
  color: var(--err);
}
/* Mirrors `.stepper` / `.stg` / `.sdet` in prototype/orc.html. */
._ship_bdikk_2 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* ------------------------------------------------------------- the steps -- */
._stepper_bdikk_1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin: 0;
  padding: 11px 8px 9px;
  list-style: none;
  flex: none;
}

._slot_bdikk_20 {
  display: flex;
  min-width: 0;
}

._step_bdikk_1 {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px 3px 8px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--dur),
    border-color var(--dur);
}

/* Every step is a button, and has to look like one before it is pressed: a
   timeline drawn flat read as a picture of progress, and only the step
   already open had any outline at all. Hover gives each its edge. */
._step_bdikk_1:hover {
  background: var(--s2);
  border-color: var(--bd-2);
}

._step_bdikk_1:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 1px;
}

/* The open one: raised, and underlined in the accent, so it reads as the tab
   whose contents are the pane below rather than as one more highlighted node. */
._step_bdikk_1[data-on='true'] {
  background: var(--s3);
  border-color: var(--bd-3);
}

._step_bdikk_1[data-on='true']::after {
  content: '';
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

._step_bdikk_1:hover ._node_bdikk_73 {
  border-color: var(--bd-3);
}

/* The rail between nodes, drawn leftward from each step's own centre so it
   always lands on its neighbour whatever the column width turns out to be. */
._step_bdikk_1::before {
  content: '';
  position: absolute;
  top: 15px;
  right: 50%;
  left: -50%;
  height: 1.5px;
  background: var(--bd-2);
  z-index: 0;
}

._slot_bdikk_20:first-child ._step_bdikk_1::before {
  display: none;
}

._step_bdikk_1[data-state='done']::before {
  background: var(--ok);
}

._node_bdikk_73 {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--s4);
  color: var(--tx-3);
  border: 1.5px solid var(--bd-2);
  position: relative;
  z-index: 1;
}

._step_bdikk_1[data-state='done'] ._node_bdikk_73 {
  background: var(--ok);
  border-color: var(--ok);
  color: #08130a;
}

._step_bdikk_1[data-state='now'] ._node_bdikk_73 {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

._stepLabel_bdikk_124 {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tx-2);
  white-space: nowrap;
}

._step_bdikk_1[data-on='true'] ._stepLabel_bdikk_124 {
  color: var(--tx);
}

._stepNote_bdikk_135 {
  font-size: 9.5px;
  color: var(--tx-3);
  text-align: center;
  line-height: 1.25;
  /* One line, ellipsised: notes vary in length and a wrapping one would shift
     every other node's label down with it. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------- the open step's pane -- */
._detail_bdikk_149 {
  border-top: 1px solid var(--bd);
  background: var(--s1);
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

._head_bdikk_160 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-3);
}

._headRight_bdikk_171 {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 10.5px;
  font-family: var(--font-ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

._line_bdikk_184 {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--tx-2);
}

._line_bdikk_184 code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx);
}

/* The one control that lives in a pane header rather than the action row.
   Quiet by default — it sits beside a label, not among the buttons — and it
   is a refresh, which should never compete with the thing the step is for. */
/* The list's own heading, so the control that refreshes it is beside the
   thing it refreshes rather than at the far end of the pane. */
._listHead_bdikk_202 {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Above the heading, so the line separates this section from the create
     row rather than fencing the heading off from the list it names. */
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-3);
}

._headBtn_bdikk_218 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 20px;
  margin: -4px -4px -4px 8px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--tx-3);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--dur),
    color var(--dur);
}

._headBtn_bdikk_218:hover:not(:disabled) {
  background: var(--s3);
  color: var(--tx-2);
}

._headBtn_bdikk_218:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Dropped on a phone, where the strip is tight and the icon alone is a
   refresh in any language. The label stays for screen readers via aria-label
   on the button itself. */
@media (max-width: 820px) {
  ._headBtnLabel_bdikk_255 {
    display: none;
  }
}

._acts_bdikk_260 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

._btn_bdikk_266 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-xs);
  font-size: 11.5px;
  color: var(--tx);
  text-decoration: none;
}

._btn_bdikk_266:hover {
  background: var(--s3);
  border-color: var(--accent);
}

._go_bdikk_284 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--r-xs);
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}

._go_bdikk_284:disabled {
  opacity: 0.5;
}

/* What to do with the slot once the work has left it. Separated by a rule
   rather than spaced, because it is a different question from the one the rest
   of the step answers — not another way to act on this pull request. */
._next_bdikk_304 {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--bd);
}

/* ------------------------------------------------------------- commits -- */
._commits_bdikk_311 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

._commit_bdikk_311 {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 0;
  font-size: 11px;
  min-width: 0;
  border-bottom: 1px solid var(--bd);
}

._commit_bdikk_311:last-child {
  border-bottom: 0;
}

/* Already on a remote. Dimmed rather than hidden: it is what this branch has
   done, and the question the step answers is "what have I written here", not
   only "what is still to send". Dimming is per row on purpose — the list is by
   date, and a cherry-picked or amended commit can sit unpushed below a pushed
   one, where any rule drawn across the list would be a lie. */
._commit_bdikk_311[data-pushed='true'] ._subject_bdikk_340 {
  color: var(--tx-3);
}

._commit_bdikk_311[data-pushed='true'] ._sha_bdikk_344,
._commit_bdikk_311[data-pushed='true'] ._when_bdikk_345 {
  opacity: 0.7;
}

/* The remote's tip, drawn only when the list actually divides there. The gap
   above it does the separating — a dashed border alone would land against the
   previous row's solid one and read as a single heavy line. */
._commit_bdikk_311[data-edge='true'] {
  margin-top: 5px;
  padding-top: 9px;
  border-top: 1px dashed var(--bd-3);
}

._sha_bdikk_344 {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--tx-3);
  flex: none;
}

._subject_bdikk_340 {
  color: var(--tx-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* The subject absorbs the spare width, so the date stays pinned right and a
     long subject truncates rather than pushing it off the row. */
  flex: 1;
  min-width: 0;
}

/* Paging further back. Quiet and full width — it is the end of a list rather
   than an action on the branch, and it must not read like Push. */
._more_bdikk_378 {
  align-self: flex-start;
  padding: 4px 9px;
  font: inherit;
  font-size: 10.5px;
  color: var(--tx-2);
  background: var(--s2);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm);
  cursor: pointer;
}

._more_bdikk_378:hover:not(:disabled) {
  background: var(--s3);
}

._more_bdikk_378:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The base commit's subject, on the line that says where the branch started.
   Quieter than a commit subject in the list: it is somebody else's work, and
   the point of the line is the fact of the branch point, not what it said. */
._baseSubject_bdikk_402 {
  color: var(--tx-3);
}

._when_bdikk_345 {
  font-size: 10px;
  color: var(--tx-3);
  white-space: nowrap;
  flex: none;
}

/* ---------------------------------------------------------- push result --
   git narrates a push across half a dozen `remote:` lines. This says what it
   did in one, and keeps the narration behind a disclosure for when the summary
   isn't enough. */
._outcome_bdikk_417 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

._chk_bdikk_423 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--tx-2);
}

._ok_bdikk_431 {
  color: var(--ok);
  display: flex;
}

._bad_bdikk_436 {
  color: var(--err);
  display: flex;
}

/* Pushed as far right as it goes: it's a confirmation you glance at, not part
   of the sentence. */
._remote_bdikk_443 {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--tx-3);
}

._rawWrap_bdikk_450 {
  font-size: 11px;
}

._rawToggle_bdikk_454 {
  cursor: pointer;
  color: var(--tx-3);
  font-size: 10.5px;
  list-style: none;
}

._rawToggle_bdikk_454::-webkit-details-marker {
  display: none;
}

._rawToggle_bdikk_454::before {
  content: '▸ ';
}

._rawWrap_bdikk_450[open] ._rawToggle_bdikk_454::before {
  content: '▾ ';
}

._rawWrap_bdikk_450[open] ._rawToggle_bdikk_454 {
  margin-bottom: 6px;
}

/* git's own words, kept verbatim. */
._raw_bdikk_450 {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--s2);
  border: 1px solid var(--bd);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--tx-2);
}

._raw_bdikk_450[data-bad='true'] {
  border-color: var(--err);
  color: var(--err);
}

/* Marks the odd one out in the commit list: work that arrived rather than work
   that was written here. */
._badge_bdikk_499 {
  flex: none;
  padding: 0 5px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--s4);
  color: var(--tx-3);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._inlineSha_bdikk_514 {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--tx);
}

._right_bdikk_520 {
  margin-left: auto;
  font-size: 10px;
  color: var(--tx-3);
}

/* ------------------------------------------------------------ pull requests --
   A found pull request is the answer this step exists for, so it's a card:
   tinted, bordered and clickable as a whole. As plain rows it read like more
   explanatory text and got lost among the caveats. */
._prs_bdikk_530 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  min-height: 0;
}

._prCard_bdikk_541 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  text-decoration: none;
  min-width: 0;
}

._prCard_bdikk_541:hover {
  background: var(--s3);
}

._prIcon_bdikk_557 {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  flex: none;
}

._prMain_bdikk_568 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

._prTop_bdikk_576 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._prNum_bdikk_582 {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-hi, var(--accent));
}

._prTitle_bdikk_589 {
  font-size: 11.5px;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Where it merges to. The branch alone doesn't say that, and with several PRs
   open from one branch it's the only thing telling them apart. */
._prBase_bdikk_599 {
  font-size: 10.5px;
  color: var(--tx-3);
  font-family: var(--font-ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._prGo_bdikk_608 {
  color: var(--tx-3);
  display: flex;
  flex: none;
}

._prCard_bdikk_541:hover ._prGo_bdikk_608 {
  color: var(--accent);
}

/* The limits of a partial match, once the card has already said the useful
   part. Quieter than a standalone message would be. */
._footnote_bdikk_620 {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--tx-3);
}

._pill_bdikk_627 {
  flex: none;
  padding: 0 6px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--s4);
  color: var(--tx-3);
}

._pill_bdikk_627[data-state='open'] {
  background: var(--ok-soft, rgba(74, 176, 108, 0.16));
  color: var(--ok);
}

._pill_bdikk_627[data-state='merged'] {
  background: rgba(167, 139, 250, 0.16);
  color: #a78bfa;
}

._pill_bdikk_627[data-state='closed'] {
  background: var(--err-soft);
  color: var(--err);
}

/* Opening a new pull request: source, target, go. */
._create_bdikk_658 {
  display: flex;
  /* Centred, and every child given the same height below. Without this the
     row's items align to its top edge and the branch name floats above the
     two controls beside it. */
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

/* Holds the chevron over the select. A native select on macOS ignores
   `height`, so it sat a few pixels taller than the button next to it —
   `appearance: none` is what makes the two agree, and costs the platform
   arrow, which is drawn back on top. */
._selectWrap_bdikk_673 {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
}

._selectWrap_bdikk_673 > svg {
  position: absolute;
  right: 7px;
  color: var(--tx-3);
  pointer-events: none;
}

._createLine_bdikk_687 {
  font-size: 11.5px;
  color: var(--tx-2);
}

._createLine_bdikk_687 code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx);
}

._select_bdikk_673 {
  appearance: none;
  height: 26px;
  /* Room on the right for the chevron drawn over it. */
  padding: 0 24px 0 8px;
  line-height: 24px;
  border-radius: var(--r-xs);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  color: var(--tx);
  font-family: var(--font-ui);
  font-size: 11px;
  max-width: 190px;
}

._select_bdikk_673:focus {
  outline: none;
  border-color: var(--accent);
}

/* The create button is an anchor, so it needs the link reset too. */
._go_bdikk_284 {
  text-decoration: none;
}
/* The ask box's size and layout; where it sits, and its surface, are the
   popover's. */
._pop_1grq1_3 {
  width: 340px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  animation: _rise_1grq1_1 0.13s ease;
}

@keyframes _rise_1grq1_1 {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

._head_1grq1_18 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 7px 5px 10px;
  color: var(--tx-3);
}

/* The file and lines this will quote — the one thing worth confirming before
   sending, since the selection that produced it is about to be let go. */
._where_1grq1_28 {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--tx-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Clip the front: the filename and the line range are the identifying half. */
  direction: rtl;
  text-align: left;
}

._close_1grq1_42 {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--tx-3);
  flex: none;
}

._close_1grq1_42:hover {
  background: var(--s3);
  color: var(--tx);
}

._input_1grq1_57 {
  margin: 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tx);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  resize: none;
  outline: none;
}

._input_1grq1_57::placeholder {
  color: var(--tx-3);
}

._foot_1grq1_74 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 10px;
}

._lines_1grq1_82 {
  flex: 1;
  font-size: 10px;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}

._send_1grq1_89 {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 550;
  flex: none;
}

._send_1grq1_89:disabled {
  background: var(--s4);
  color: var(--tx-3);
}

._send_1grq1_89:not(:disabled):hover {
  background: var(--accent-hi);
}

/*
 * Opens downward, out of its own way. It hung upward first, to keep it clear
 * of the bottom of the window, and the cost was that it covered the popover it
 * belongs to — including the instruction you had just typed and the file and
 * lines it was about. Downward is still the preference; the popover flips it
 * up only when the window leaves no room below.
 */
._menu_1grq1_119 {
  min-width: 180px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}

._menuHead_1grq1_126 {
  /* The global reset only sets box-sizing, so a <p> keeps its own margin —
     which opened a blank line under the heading. Zeroed as the Tasks menu's
     identical heading already is. */
  margin: 0;
  padding: 4px 8px 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-3);
}

._menu_1grq1_119 button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  color: var(--tx-2);
  text-align: left;
}

._menu_1grq1_119 button:hover {
  background: var(--s3);
  color: var(--tx);
}

._working_1grq1_156 {
  margin-left: auto;
  font-size: 9.5px;
  color: var(--warn);
}
/* The review diff's grid cell: the scroller, and the change strip beside it.
   Positioned so the find bar can float over the top of the diff rather than
   take a row and push the file down the moment it opens. */
._wrap_12zj7_4 {
  position: relative;
  display: flex;
  min-height: 0;
  min-width: 0;
}

._scroller_12zj7_11 {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--code-bg);
  /* So the combined view's file and hunk headers can be exactly this wide
     (`100cqw`) while the diff inside is as wide as its longest line. */
  container-type: inline-size;
}

/* No vertical bar: the strip beside it is the scrollbar now, with a thumb of
   its own and the changes drawn on it. Two thin rails side by side, one of
   them saying nothing the other does not, was the alternative. Width only —
   a horizontal bar, should anything ever need one, keeps its global height. */
._scroller_12zj7_11::-webkit-scrollbar {
  width: 0;
}

/*
 * The map of the file's changes, down the right edge.
 *
 * Its own column rather than laid over the diff, so it never sits on the end
 * of a long line. Coloured with the same green and red as the +/- signs, which
 * are the full-strength versions of the tints behind the rows — the washes
 * themselves are far too faint to read at a few pixels wide.
 */
._strip_12zj7_38 {
  position: relative;
  flex: none;
  width: 14px;
  background: var(--s2);
  border-left: 1px solid var(--bd);
  cursor: pointer;
  /* Dragging on a phone scrolls the diff, not the page. */
  touch-action: none;
}

/* Old on the left, new on the right — the same sides the split view puts them
   on — so a changed line, which is both, reads as a red and green pair.

   Inset 3px from each edge, where the thumb is inset 1px: the thumb shows a
   pixel either side of every mark inside it, so the marks read as sitting in
   the viewport rather than as a separate bar beside it.

   Muted towards the strip's own ground. The full --git-add / --git-del are
   tuned for a one-character sign; as solid bars down the edge of the pane
   they were the loudest thing on screen. */
._mark_12zj7_59 {
  position: absolute;
  min-height: 2px;
  pointer-events: none;
}

._mark_12zj7_59[data-kind='del'] {
  left: 3px;
  right: 50%;
  background: color-mix(in srgb, var(--git-del) 55%, var(--s2));
}

._mark_12zj7_59[data-kind='add'] {
  left: 50%;
  right: 3px;
  background: color-mix(in srgb, var(--git-add) 55%, var(--s2));
}

/* What is on screen now. Behind the marks and solid, rather than a wash laid
   over them: on top, it tinted every mark inside the viewport, so the same
   change was a different colour depending on whether you were looking at it. */
._thumb_12zj7_80 {
  position: absolute;
  left: 1px;
  right: 1px;
  min-height: 12px;
  background: var(--s4);
  pointer-events: none;
  transition: background var(--dur);
}

._strip_12zj7_38:hover ._thumb_12zj7_80 {
  background: var(--bd-2);
}
/* Review and Ship, as a surface rather than a side panel — so no left border
   and no background of its own; it fills the column like every other surface. */
._panel_hcsrq_3 {
  flex: 1;
  /* Flex, not fixed grid rows: the notice is conditional, so a three-row
     template puts the body in the wrong row whenever it's absent — squashing
     it to its content height and leaving the rest of the panel empty. */
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* What this surface is, stated once. It no longer switches anything — the
   strip above does that — so it reads as a heading, not a control. */
._title_hcsrq_16 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 4px;
  color: var(--tx-2);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

._tabs_hcsrq_28 {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  height: 34px;
  flex: none;
  border-bottom: 1px solid var(--bd);
  overflow-x: auto;
  overflow-y: hidden;
  /* No bar: the wheel scrolls it sideways — lib/wheelSideways.ts. */
  scrollbar-width: none;
}

._tab_hcsrq_28 {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--tx-3);
  font-size: 11.5px;
  font-weight: 550;
  white-space: nowrap;
  transition:
    background var(--dur),
    color var(--dur);
}

._tab_hcsrq_28:hover {
  color: var(--tx-2);
  background: var(--s2);
}

._tab_hcsrq_28[data-on='true'] {
  background: var(--s3);
  color: var(--tx);
  font-weight: 600;
}

/* Dimmer than the label: the icon aids scanning, it isn't the thing you read. */
._tab_hcsrq_28 svg {
  opacity: 0.7;
  flex: none;
}

._tab_hcsrq_28[data-on='true'] svg {
  opacity: 1;
}

._count_hcsrq_79 {
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--s4);
  color: var(--tx-2);
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

._right_hcsrq_93 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

._icon_hcsrq_100 {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--tx-3);
  flex: none;
}

._icon_hcsrq_100:hover:not(:disabled) {
  background: var(--s3);
  color: var(--tx);
}

/* There is nowhere further to go. Dimmed rather than hidden: a control that
   disappears at the ends of a file makes the row jump and takes the shortcut
   it names away with it. */
._icon_hcsrq_100:disabled {
  opacity: 0.35;
  cursor: default;
}

._branch_hcsrq_123 {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Narrow: files only. Wide: files beside the diff — the same layout the
   prototype's full-window review uses. */
._body_hcsrq_135 {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* The list's width is the user's, dragged from the seam. Not clamped in CSS
   the way the rail is, because here the panel is already measured for
   `wide`/`canSplit` — so RightPanel.tsx clamps the stored value against that
   measurement and this reads the result. One clamp, in the place that also
   has to answer "is there still room for a side-by-side diff". */
._body_hcsrq_135[data-wide='true'] {
  grid-template-columns: var(--list-w, 288px) minmax(0, 1fr);
}

._listSplit_hcsrq_152 {
  left: calc(var(--list-w, 288px) - 3px);
}

/* Children keep their own height, which is what lets this scroll at all.
   Flex items shrink by default, so the file list — which has `min-height: 0`
   and no flex of its own — collapsed toward nothing to make room for whatever
   sat below it, instead of pushing the column past its end. Same trap as the
   attention popup's body, one layer down. */
._list_hcsrq_152 > * {
  flex: none;
}

/* The one scroll region in this column.
   It used to clip, with the file list scrolling inside it — which made two
   nested scrollbars for one list of things, and left anything below the files
   (the commit box, the stashes) with no way to be reached once it overflowed.
   Everything inside is now its natural height and this scrolls past all of it. */
._list_hcsrq_152 {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* CommitBox draws its rule on top, for sitting under something. Here it sits
   above the sections, so the rule moves to the edge it now shares with them. */
._commitTop_hcsrq_179 > * {
  border-top: 0;
  border-bottom: 1px solid var(--bd);
}

._body_hcsrq_135[data-wide='true'] ._list_hcsrq_152 {
  border-right: 1px solid var(--bd);
}

/* The diff's grid cell. It no longer scrolls itself: DiffPane puts a scroller
   and the change strip side by side inside it, and the strip has to stay put
   while the diff moves. */
._pane_hcsrq_3 {
  min-height: 0;
  background: var(--code-bg);
}

._notice_hcsrq_196 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  flex: none;
  border-bottom: 1px solid var(--bd);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 10.5px;
  line-height: 1.45;
}

._notice_hcsrq_196 span {
  flex: 1;
}

._dismiss_hcsrq_213 {
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  border: 1px solid var(--bd-2);
  color: var(--tx-2);
  font-size: 10.5px;
  font-weight: 550;
  flex: none;
}

._dismiss_hcsrq_213:hover {
  background: var(--s3);
  color: var(--tx);
}

._icon_hcsrq_100[data-on='true'] {
  background: var(--s3);
  color: var(--tx);
}

/* The way back out of a file, and what you can do to it, on a screen too
   narrow to show the list beside the diff. Sticky, because a long diff would
   otherwise scroll both the only exit and the only actions away. */
._backBar_hcsrq_237 {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 8px 0 10px;
  flex: none;
  border-bottom: 1px solid var(--bd);
  background: var(--s1);
}

._back_hcsrq_237 {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
  height: 100%;
  color: var(--tx-2);
  font-size: 12px;
  font-family: var(--font-ui);
  text-align: left;
}

._back_hcsrq_237:hover {
  color: var(--tx);
}

._backActs_hcsrq_268 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

._backAct_hcsrq_268 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  color: var(--tx-2);
  font-size: 11.5px;
  font-family: var(--font-ui);
}

._backAct_hcsrq_268:hover {
  color: var(--tx);
  border-color: var(--bd-3);
}

/* Armed, after one press. Reads as a warning before the press that matters. */
._backAct_hcsrq_268[data-danger='true'] {
  background: var(--err-soft);
  border-color: var(--err);
  color: var(--err);
}

._backName_hcsrq_301 {
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 11.5px;
  /* The end of a path identifies the file; the start of it is repetition. */
  direction: rtl;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* What the diff pane says instead of drawing a conflicted file. Roomy and
   prose, not a banner: it is the whole content of the pane, and the thing it
   has to do is explain a state the person did not ask for. */
._conflict_hcsrq_316 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px;
  max-width: 62ch;
  font-size: 12px;
  line-height: 1.55;
  color: var(--tx-2);
}

._conflict_hcsrq_316 p {
  margin: 0;
}

._conflict_hcsrq_316 code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx);
}
/* The Comments tab: the pull request's review comments down the side, one
   comment filling the rest. Fills the worktree column like every surface. */
._view_1r8a8_3 {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--comments-list-w, 300px) minmax(0, 1fr);
  background: var(--bg);
}

/* ----------------------------------------------------------------- side -- */
._side_1r8a8_13 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--bd);
  background: var(--s1);
}

._sideHead_1r8a8_22 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--bd);
  color: var(--tx-3);
}

._sideRepo_1r8a8_32 {
  padding: 6px 10px 0;
}

._headRight_1r8a8_36 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

._prLink_1r8a8_43 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--tx-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

a._prLink_1r8a8_43:hover {
  color: var(--accent-hi);
}

._base_1r8a8_59 {
  color: var(--tx-3);
  font-weight: 500;
}

/* Which list. A sunken track with the chosen one raised out of it, so it
   reads as "pick one of these" rather than as loose buttons. */
._filters_1r8a8_66 {
  display: flex;
  margin: 8px 10px 0;
  padding: 2px;
  gap: 2px;
  border-radius: var(--r-sm);
  background: var(--s2);
  border: 1px solid var(--bd-2);
}

._filter_1r8a8_66 {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 24px;
  padding: 0 4px;
  border-radius: var(--r-xs);
  color: var(--tx-3);
  font-size: 11px;
  font-weight: 550;
  white-space: nowrap;
  transition:
    background var(--dur),
    color var(--dur);
}

._filter_1r8a8_66:hover {
  color: var(--tx);
  background: var(--s3);
}

._filter_1r8a8_66[data-on='true'] {
  background: var(--s4);
  color: var(--tx);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

._filterCount_1r8a8_106 {
  min-width: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--s3);
  color: var(--tx-3);
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
}

/* Only the open list's count is coloured. */
._filter_1r8a8_66[data-on='true'] ._filterCount_1r8a8_106 {
  background: var(--accent-soft);
  color: var(--accent-hi);
}

._toolbar_1r8a8_123 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--bd);
}

._selectWrap_1r8a8_132 {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--tx-3);
}

._selectWrap_1r8a8_132 svg {
  position: absolute;
  right: 6px;
  pointer-events: none;
}

._select_1r8a8_132 {
  appearance: none;
  height: 22px;
  padding: 0 20px 0 7px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-xs);
  background: var(--s2);
  color: var(--tx-2);
  font: inherit;
  font-size: 11px;
}

._barBtn_1r8a8_157,
._model_1r8a8_158 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--tx-2);
  font-size: 11px;
  white-space: nowrap;
  transition:
    background var(--dur),
    border-color var(--dur),
    color var(--dur);
}

._barBtn_1r8a8_157:hover:not(:disabled),
._model_1r8a8_158:hover {
  background: var(--s3);
  color: var(--tx);
}

._barBtn_1r8a8_157:disabled {
  opacity: 0.5;
}

/* Quieter than the actions: it is a setting you check, not a thing you do. */
._model_1r8a8_158 {
  min-width: 0;
  color: var(--tx-3);
  border-color: var(--bd-2);
  max-width: 150px;
}

._modelName_1r8a8_193 {
  overflow: hidden;
  text-overflow: ellipsis;
}

._icon_1r8a8_198,
._iconSm_1r8a8_199 {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  color: var(--tx-3);
}

._iconSm_1r8a8_199 {
  width: 22px;
  height: 22px;
}

._icon_1r8a8_198:hover:not(:disabled),
._iconSm_1r8a8_199:hover {
  background: var(--s3);
  color: var(--tx);
}

._icon_1r8a8_198:disabled {
  opacity: 0.5;
}

._iconSm_1r8a8_199[data-said='ok'] {
  color: var(--ok);
}

._iconSm_1r8a8_199[data-said='no'] {
  color: var(--err);
}

._menu_1r8a8_232 {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}

._menu_1r8a8_232 button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--tx-2);
  font-size: 12px;
}

._menu_1r8a8_232 button:hover {
  background: var(--s3);
  color: var(--tx);
}

._menu_1r8a8_232 button[data-on] {
  color: var(--tx);
}

._optionName_1r8a8_262 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._list_1r8a8_268 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 2px;
}

._line_1r8a8_278 {
  margin: 4px 6px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--tx-2);
}

._line_1r8a8_278 > * {
  font-size: 11.5px;
}

._footnote_1r8a8_289 {
  margin: 6px;
  font-size: 10.5px;
  color: var(--tx-3);
}

/* One comment in the list: where, the gist, who — and where it stands. */
._row_1r8a8_296 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 7px 8px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  text-align: left;
  min-width: 0;
  transition: background var(--dur);
}

._row_1r8a8_296:hover {
  background: var(--s2);
}

._row_1r8a8_296[data-on='true'] {
  background: var(--s3);
  border-color: var(--bd-2);
  box-shadow: inset 2px 0 0 var(--accent);
}

._rowTop_1r8a8_319 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Severity as a colour, once analysed; hollow before, so "unread" is visible. */
._dot_1r8a8_327 {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--tx-3);
}

._dot_1r8a8_327[data-severity] {
  border: none;
  background: var(--tx-3);
}

._dot_1r8a8_327[data-severity='critical'] {
  background: var(--err);
}

._dot_1r8a8_327[data-severity='major'] {
  background: var(--warn);
}

._dot_1r8a8_327[data-severity='minor'] {
  background: var(--info);
}

._dot_1r8a8_327[data-severity='question'] {
  background: var(--accent-hi);
}

._rowWhere_1r8a8_356 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--tx-2);
}

._state_1r8a8_366 {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 5px;
  border-radius: var(--r-xs);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 15px;
  white-space: nowrap;
  background: var(--s3);
  color: var(--tx-3);
}

._state_1r8a8_366[data-tone='busy'] {
  color: var(--tx-2);
}

._state_1r8a8_366[data-tone='warn'] {
  background: var(--warn-soft);
  color: var(--warn);
}

._state_1r8a8_366[data-tone='err'] {
  background: var(--err-soft);
  color: var(--err);
}

._state_1r8a8_366[data-tone='accent'] {
  background: var(--accent-soft);
  color: var(--accent-hi);
  font-family: var(--font-mono);
}

._state_1r8a8_366[data-tone='ok'] {
  background: var(--ok-soft);
  color: var(--ok);
}

._state_1r8a8_366 ._spinner_1r8a8_407 {
  width: 7px;
  height: 7px;
}

._rowText_1r8a8_412 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--tx);
  font-size: 11.5px;
  line-height: 1.45;
}

._rowMeta_1r8a8_422 {
  color: var(--tx-3);
  font-size: 10.5px;
}

/* --------------------------------------------------------------- detail -- */
._detail_1r8a8_428 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

._empty_1r8a8_435 {
  margin: auto;
  color: var(--tx-3);
  font-size: 12px;
}

._page_1r8a8_441 {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

._pageHead_1r8a8_449 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--bd);
  min-width: 0;
}

/* Only on a phone, where the list and the page take turns. */
._back_1r8a8_460 {
  display: none;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-left: -6px;
  border-radius: var(--r-sm);
  color: var(--tx-2);
}

._tabs_1r8a8_471 {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 34px;
  padding: 0 10px;
  border-bottom: 1px solid var(--bd);
}

._tab_1r8a8_471 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  color: var(--tx-3);
  font-size: 11.5px;
  font-weight: 550;
  transition: color var(--dur);
}

._tab_1r8a8_471:hover {
  color: var(--tx);
}

._tab_1r8a8_471[data-on='true'] {
  color: var(--tx);
  box-shadow: inset 0 -2px 0 var(--accent);
}

._tabDot_1r8a8_502 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-hi);
}

._tabDot_1r8a8_502[data-status='waiting'] {
  background: var(--warn);
}

._tabCount_1r8a8_513 {
  display: inline-flex;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
}

._plus_1r8a8_520 {
  color: var(--ok);
}

._minus_1r8a8_524 {
  color: var(--err);
}

/* The comment, folded to its first line while the fix is what's open. */
._folded_1r8a8_529 {
  border-bottom: 1px solid var(--bd);
  background: var(--s1);
}

._foldToggle_1r8a8_534 {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 14px;
  text-align: left;
  color: var(--tx-2);
  font-size: 11.5px;
  min-width: 0;
}

._foldToggle_1r8a8_534:hover {
  color: var(--tx);
}

._foldText_1r8a8_550 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._foldBody_1r8a8_557 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 40vh;
  overflow-y: auto;
  padding: 0 14px 10px;
}

/* The Analysis tab: the comment in full, then orc's read of it and the acts. */
._scroll_1r8a8_567 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 16px;
}

/* A fact about the fix, one line: landed, moved, conflicted. */
._banner_1r8a8_578 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  background: var(--s2);
  color: var(--tx-2);
  font-size: 11px;
  line-height: 1.5;
}

._banner_1r8a8_578 > svg {
  flex: none;
  margin-top: 2px;
}

._banner_1r8a8_578 > span {
  flex: 1;
  min-width: 0;
}

._banner_1r8a8_578 code {
  font-family: var(--font-mono);
  font-size: 10.5px;
}

._banner_1r8a8_578[data-tone='ok'] {
  background: var(--ok-soft);
}

._banner_1r8a8_578[data-tone='ok'] > svg {
  color: var(--ok);
}

._banner_1r8a8_578[data-tone='warn'] {
  background: var(--warn-soft);
}

._banner_1r8a8_578[data-tone='warn'] > svg {
  color: var(--warn);
}

._banner_1r8a8_578[data-tone='err'] {
  background: var(--err-soft);
}

._banner_1r8a8_578[data-tone='err'] > svg {
  color: var(--err);
}

/* In the Changes list, the banners sit above the files with the list's gutter. */
._changes_1r8a8_631 ._banner_1r8a8_578 {
  margin: 6px 6px 0;
}

._changes_1r8a8_631 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

._chat_1r8a8_642 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

._chatBar_1r8a8_649 {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-bottom: 1px solid var(--bd);
  background: var(--accent-wash);
  color: var(--tx-2);
  font-size: 11px;
}

._chatBar_1r8a8_649 code {
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* --------------------------------------------------------------- phone -- */
/* The list and the page take turns, as Review's list and diff do: a comment
   needs the whole width, and squeezed beside the list it has none. */
@media (max-width: 820px) {
  ._view_1r8a8_3 {
    grid-template-columns: minmax(0, 1fr);
  }

  ._view_1r8a8_3[data-drilled='true'] ._side_1r8a8_13,
  ._view_1r8a8_3[data-drilled='false'] ._detail_1r8a8_428 {
    display: none;
  }

  ._side_1r8a8_13 {
    border-right: none;
  }

  ._back_1r8a8_460 {
    display: grid;
  }
}

/* -------------------------------------------------------------- comment -- */
._author_1r8a8_688 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--tx);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

._bot_1r8a8_698 {
  padding: 0 5px;
  border-radius: var(--r-xs);
  background: var(--info-soft);
  color: var(--info);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._path_1r8a8_709 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--tx-3);
}

._tag_1r8a8_721 {
  flex: none;
  padding: 0 5px;
  border-radius: var(--r-xs);
  background: var(--s3);
  color: var(--tx-3);
  font-size: 10px;
}

._hunk_1r8a8_730 {
  margin: 0;
  padding: 5px 0;
  border-radius: var(--r-sm);
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  overflow-x: auto;
}

._hunkLine_1r8a8_741 {
  display: block;
  padding: 0 8px;
  white-space: pre;
  color: var(--tx-2);
}

._hunkLine_1r8a8_741[data-kind='add'] {
  background: var(--add);
}

._hunkLine_1r8a8_741[data-kind='del'] {
  background: var(--del);
}

/* Comment bodies run smaller than a chat message: they are read in a column
   of several, not one at a time. */
._comment_1r8a8_758 {
  min-width: 0;
}

._comment_1r8a8_758 > :first-child {
  font-size: 12px;
}

._comment_1r8a8_758[data-clamped] > :first-child {
  max-height: 16em;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

._more_1r8a8_772 {
  margin-top: 4px;
  padding: 0;
  color: var(--accent-hi);
  font-size: 11px;
}

._more_1r8a8_772:hover {
  text-decoration: underline;
}

._followUp_1r8a8_783 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--bd-2);
}

._acts_1r8a8_791 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

._btn_1r8a8_798 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-xs);
  color: var(--tx);
  font-size: 11px;
}

._btn_1r8a8_798:hover:not(:disabled) {
  background: var(--s3);
  border-color: var(--accent);
}

._btn_1r8a8_798:disabled {
  opacity: 0.5;
}

._go_1r8a8_819 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 11px;
  border-radius: var(--r-xs);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

._go_1r8a8_819:disabled {
  opacity: 0.5;
}

._linkBtn_1r8a8_836 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 4px;
  color: var(--accent-hi);
  font-size: 11px;
}

._linkBtn_1r8a8_836:hover:not(:disabled) {
  text-decoration: underline;
}

._linkBtn_1r8a8_836:disabled {
  opacity: 0.5;
}

._linkBtn_1r8a8_836[data-danger] {
  color: var(--err);
}

._reply_1r8a8_858 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._replyBox_1r8a8_864 {
  width: 100%;
  min-height: 64px;
  padding: 7px 9px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm);
  background: var(--s1);
  color: var(--tx);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}

._replyBox_1r8a8_864:focus {
  outline: none;
  border-color: var(--accent);
}

._failure_1r8a8_883 {
  margin: 0;
  color: var(--err);
  font-size: 11px;
  line-height: 1.45;
}

/* ------------------------------------------------------------- analysis -- */
._analysis_1r8a8_891 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  /* Washed in the accent, so orc's judgement reads as orc's and not as more
     of the reviewer's text above it. */
  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--s2);
  border: 1px solid var(--bd-2);
}

._working_1r8a8_903 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tx-3);
  font-size: 11.5px;
}

._spinner_1r8a8_407 {
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: _commentSpin_1r8a8_1 var(--dur-spin) linear infinite;
}

@keyframes _commentSpin_1r8a8_1 {
  to {
    transform: rotate(360deg);
  }
}

._verdict_1r8a8_926 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._severity_1r8a8_932 {
  padding: 1px 7px;
  border-radius: var(--r-xs);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--s3);
  color: var(--tx-2);
}

._severity_1r8a8_932[data-severity='critical'] {
  background: var(--err-soft);
  color: var(--err);
}

._severity_1r8a8_932[data-severity='major'] {
  background: var(--warn-soft);
  color: var(--warn);
}

._severity_1r8a8_932[data-severity='minor'] {
  background: var(--info-soft);
  color: var(--info);
}

._severity_1r8a8_932[data-severity='question'] {
  background: var(--accent-soft);
  color: var(--accent-hi);
}

._severity_1r8a8_932[data-severity='invalid'] {
  color: var(--tx-3);
}

._stale_1r8a8_967 {
  color: var(--tx-3);
  font-size: 10.5px;
  font-style: italic;
}

._summary_1r8a8_973 > * {
  color: var(--tx);
  font-size: 12px;
  line-height: 1.55;
}

._options_1r8a8_979 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._option_1r8a8_262 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 7px 9px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm);
  background: var(--bg);
}

._option_1r8a8_262[data-recommended='true'] {
  border-color: var(--accent-line);
}

._optionHead_1r8a8_1003 {
  display: flex;
  align-items: center;
  gap: 7px;
}

._optionTitle_1r8a8_1009 {
  color: var(--tx);
  font-size: 11.5px;
  font-weight: 600;
}

._pick_1r8a8_1015 {
  color: var(--accent-hi);
  font-size: 10px;
  font-weight: 600;
}

._optionDetail_1r8a8_1021 > * {
  color: var(--tx-2);
  font-size: 11.5px;
  line-height: 1.5;
}

._optionBtn_1r8a8_1027 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--s3);
  color: var(--tx);
  font-size: 10.5px;
}

._optionBtn_1r8a8_1027:hover {
  background: var(--s4);
}

._optionBtn_1r8a8_1027:disabled {
  opacity: 0.5;
}

._optionsMissing_1r8a8_1047 {
  margin: 0;
  color: var(--tx-3);
  font-size: 11.5px;
  font-style: italic;
}
/* One worktree, one column: the strip, then whichever surface it selected.
   Replaces the old `.split` grid — there is no second column to size, no
   divider to drag, and nothing to expand into, because a surface already has
   the whole window. */
._column_1vjx5_5 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* One of the surfaces. Kept mounted while hidden so the conversation's scroll
   position and half-typed message survive a look at the terminal. */
._surface_1vjx5_15 {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

._surface_1vjx5_15[data-visible='false'] {
  display: none;
}

/* The chat surface of a worktree with no conversation open. Quiet, on the
   page's ground like the app's own blank screen, because nothing is wrong —
   the tabs above are all still live. */
._none_1vjx5_30 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--page);
  padding: 0 24px;
}

._noneLine_1vjx5_41 {
  margin: 0;
  font-size: 12.5px;
  color: var(--tx-3);
}

._noneButton_1vjx5_47 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  color: var(--tx);
  font-size: 12px;
  font-weight: 600;
  transition:
    background var(--dur),
    border-color var(--dur);
}

._noneButton_1vjx5_47:hover {
  background: var(--s3);
  border-color: var(--bd-3);
}

._noneKey_1vjx5_69 {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--tx-3);
  margin-left: 2px;
}
._backdrop_40u91_1 {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: start center;
  padding-top: 12vh;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px);
  animation: _fade_40u91_1 0.14s ease;
}

@keyframes _fade_40u91_1 {
  from {
    opacity: 0;
  }
}

/* Mirrors .modal / .m-hd / .m-bd / .m-ft in prototype/orc.html. */
._modal_40u91_19 {
  width: 520px;
  max-width: calc(100% - 40px);
  background: var(--s1);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: _pop_40u91_1 0.17s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes _pop_40u91_1 {
  from {
    transform: translateY(-6px) scale(0.985);
    opacity: 0;
  }
}

._head_40u91_38 {
  display: flex;
  align-items: center;
  padding: 13px 15px;
  border-bottom: 1px solid var(--bd);
}

._title_40u91_45 {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

._close_40u91_51 {
  margin-left: auto;
  width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--tx-3);
}

._close_40u91_51:hover {
  background: var(--s3);
  color: var(--tx);
}

._body_40u91_66 {
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

._field_40u91_73 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._field_40u91_73 > label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-2);
}

._path_40u91_85 {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
  min-width: 0;
  flex: 1;
}

/* One repository, and the note that goes with it when there is one. Every
   repo is this same row — none is the "main" one — and the only thing to do
   with one is take it back out. */
._repo_40u91_101 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._repoRow_40u91_107 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 4px 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  color: var(--tx-3);
}

._drop_40u91_119 {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--r-sm);
  color: var(--tx-3);
  transition:
    background var(--dur),
    color var(--dur);
}

._drop_40u91_119:hover {
  background: var(--s3);
  color: var(--tx);
}

._input_40u91_137 {
  height: 32px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm);
  background: var(--s2);
  padding: 0 10px;
  font-size: 12.5px;
}

._input_40u91_137:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--s1);
}

._seg_40u91_152 {
  display: flex;
  padding: 2px;
  background: var(--s3);
  border-radius: var(--r-sm);
  gap: 2px;
}

._seg_40u91_152 button {
  flex: 1;
  height: 26px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 550;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
  transition:
    background var(--dur),
    color var(--dur);
}

._seg_40u91_152 button:hover {
  color: var(--tx);
}

._seg_40u91_152 button[data-on='true'] {
  background: var(--s1);
  color: var(--tx);
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

._hint_40u91_184 {
  font-size: 10.5px;
  color: var(--tx-3);
  line-height: 1.45;
}

._error_40u91_190 {
  font-size: 11px;
  line-height: 1.5;
  color: var(--err);
}

._error_40u91_190 code {
  font-family: var(--font-mono);
}

._hint_40u91_184 code {
  font-family: var(--font-mono);
}

/* The offer to fix the folder: what is wrong, the action, and what the action
   will do — in that order, because the last one is the part someone needs
   before pressing it, not after. */
/* The one way to add a repository, first or fifth. Dashed like the other
   "add" rows in orc, so it reads as a slot rather than as something added. */
._add_40u91_209 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--bd-3);
  color: var(--tx-2);
  font-size: 11.5px;
  font-weight: 550;
  transition:
    background var(--dur),
    color var(--dur);
}

._add_40u91_209:hover:not(:disabled) {
  background: var(--s2);
  color: var(--tx);
}

._add_40u91_209:disabled {
  cursor: default;
  color: var(--tx-3);
}

._labelHint_40u91_235 {
  margin-left: 4px;
  font-weight: 400;
  color: var(--tx-3);
}

._setupActions_40u91_241 {
  display: flex;
  gap: 6px;
}

._setup_40u91_241 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  background: var(--s2);
}

._setupAction_40u91_241 {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--s3);
  color: var(--tx);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

._setupAction_40u91_241:hover:not(:disabled) {
  background: var(--s4);
}

._setupAction_40u91_241:disabled {
  opacity: 0.6;
  cursor: default;
}

._foot_40u91_279 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-top: 1px solid var(--bd);
  background: var(--s2);
}

._note_40u91_288 {
  font-size: 10.5px;
  color: var(--tx-3);
  margin-right: auto;
}

._primary_40u91_294 {
  height: 30px;
  padding: 0 15px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  transition:
    background var(--dur),
    opacity var(--dur);
}

._primary_40u91_294:hover:not(:disabled) {
  background: var(--accent-hi);
}

._primary_40u91_294:disabled {
  opacity: 0.4;
  cursor: default;
}

._ghost_40u91_316 {
  height: 30px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  background: var(--s1);
  color: var(--tx-2);
  font-size: 12px;
  font-weight: 550;
}

._ghost_40u91_316:hover {
  background: var(--s3);
  color: var(--tx);
}
._history_v06eq_1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
}

/* ---------- header ---------- */
._head_v06eq_11 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--bd);
  flex: none;
}

._head_v06eq_11 h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

._head_v06eq_11 p {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--tx-3);
  max-width: 560px;
  line-height: 1.55;
}

._search_v06eq_35 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 11px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--s2);
  width: 280px;
  color: var(--tx-3);
}

._search_v06eq_35 input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
  font-family: var(--font-ui);
  color: var(--tx);
}

._close_v06eq_60 {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--tx-3);
}

._close_v06eq_60:hover {
  background: var(--s2);
  color: var(--tx);
}

/* ---------- filters ---------- */
._filters_v06eq_76 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--bd);
  flex: none;
}

._qf_v06eq_85 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  color: var(--tx-3);
  font-size: 11.5px;
  font-family: var(--font-ui);
}

._qf_v06eq_85:hover {
  background: var(--s2);
  color: var(--tx);
}

._qf_v06eq_85[data-on='true'] {
  background: var(--s3);
  color: var(--tx);
  font-weight: 550;
}

._qf_v06eq_85 b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tx-3);
}

._sep_v06eq_114 {
  width: 1px;
  height: 15px;
  margin: 0 4px;
  background: var(--bd-2);
  flex: none;
}

._tally_v06eq_122 {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--tx-3);
}

/* ---------- rows ---------- */
._body_v06eq_129 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 12px 18px;
}

._row_v06eq_136 {
  display: grid;
  grid-template-columns: 84px minmax(180px, 1.4fr) minmax(130px, 1fr) 74px 66px 84px;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  text-align: left;
}

._row_v06eq_136:not(._headRow_v06eq_148):hover {
  background: var(--s2);
}

._headRow_v06eq_148 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bd);
  margin-bottom: 4px;
  border-radius: 0;
}

._agent_v06eq_164,
._when_v06eq_165 {
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._when_v06eq_165 {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

/* The mark sits with the agent's name rather than in a column of its own —
   "whose conversation was this" is one fact, and a whole column for a 11px
   glyph would cost the title its width. */
._agent_v06eq_164 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._agent_v06eq_164 svg {
  flex: none;
  opacity: 0.8;
}

._name_v06eq_191 {
  min-width: 0;
}

._nameLine_v06eq_195 {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._preview_v06eq_202 {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._branch_v06eq_211 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._state_v06eq_223 {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

._pill_v06eq_229 {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

._pill_v06eq_229[data-kind='open'] {
  background: var(--ok-soft);
  color: var(--ok);
}

._pill_v06eq_229[data-kind='closed'] {
  background: var(--s4);
  color: var(--tx-3);
}

._pill_v06eq_229[data-kind='archived'] {
  color: var(--tx-3);
  border: 1px solid var(--bd-2);
}

._turns_v06eq_254 {
  font-size: 11px;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

._acts_v06eq_261 {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity var(--dur);
}

._row_v06eq_136:hover ._acts_v06eq_261,
._row_v06eq_136:focus-within ._acts_v06eq_261 {
  opacity: 1;
}

._mini_v06eq_274 {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--tx-3);
}

._mini_v06eq_274:hover:not(:disabled) {
  background: var(--s4);
  color: var(--tx);
}

._mini_v06eq_274:disabled {
  opacity: 0.3;
  cursor: default;
}

._empty_v06eq_293 {
  padding: 40px 20px;
  text-align: center;
  color: var(--tx-3);
  font-size: 12.5px;
}

/* ---------- read-only transcript ---------- */
._detail_v06eq_301 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  z-index: 5;
}

._detailHead_v06eq_310 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bd);
  background: var(--s1);
  flex: none;
}

._detailTitle_v06eq_320 {
  min-width: 0;
}

._detailName_v06eq_324 {
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._detailMeta_v06eq_332 {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--tx-3);
  font-family: var(--font-ui);
}

._detailActs_v06eq_339 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

._btn_v06eq_347 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  color: var(--tx-2);
  font-size: 11.5px;
  font-family: var(--font-ui);
}

._btn_v06eq_347:hover:not(:disabled) {
  border-color: var(--bd-3);
  color: var(--tx);
}

._btn_v06eq_347:disabled {
  opacity: 0.45;
  cursor: default;
}

._btnPrimary_v06eq_371 {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-hi);
}

._detailBody_v06eq_377 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Why this one can be read but not continued. */
._blocked_v06eq_384 {
  padding: 8px 16px;
  border-bottom: 1px solid var(--bd);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 11px;
  line-height: 1.5;
  flex: none;
}

/* ---------------------------------------------------------------------------
   Narrow screens. The table stops being a table: a row keeps the name it is
   identified by and the state you are filtering on, and drops the columns that
   only make sense when they line up with each other.
   --------------------------------------------------------------------------- */
@media (max-width: 820px) {
  ._head_v06eq_11 {
    flex-wrap: wrap;
  }

  ._search_v06eq_35 {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  ._filters_v06eq_76 {
    overflow-x: auto;
    overflow-y: hidden;
    /* No bar: the wheel scrolls it sideways — lib/wheelSideways.ts. */
    scrollbar-width: none;
  }

  ._tally_v06eq_122 {
    display: none;
  }

  ._row_v06eq_136 {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  /* Agent, branch and turn count all read off the chat once it is open. The
     name is the only column that identifies the row. */
  ._headRow_v06eq_148,
  ._agent_v06eq_164,
  ._branch_v06eq_211,
  ._turns_v06eq_254 {
    display: none;
  }

  /* No hover to reveal them on a touch screen, so they are simply there. */
  ._acts_v06eq_261 {
    opacity: 1;
  }
}
/* Mirrors `.queue` in prototype/orc.html — a slide-over, not a docked column. */
._panel_verqu_2 {
  position: absolute;
  top: var(--titlebar-h);
  right: 0;
  bottom: 0;
  /* Never wider than the screen it is sliding over. On a phone that makes it
     the whole width, which is right — it is the thing you opened. */
  width: min(392px, 100%);
  z-index: 50;
  background: var(--s1);
  border-left: 1px solid var(--bd-2);
  box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.55);
  display: grid;
  grid-template-rows: auto 1fr;
  animation: _slide_verqu_1 0.18s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@keyframes _slide_verqu_1 {
  from {
    transform: translateX(18px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

._head_verqu_30 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bd);
}

._hand_verqu_38 {
  color: var(--warn);
  display: grid;
  place-items: center;
  flex: none;
}

._title_verqu_45 {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

._count_verqu_51 {
  font-size: 11px;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}

._close_verqu_57 {
  margin-left: auto;
  width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--tx-3);
  flex: none;
}

._close_verqu_57:hover {
  background: var(--s3);
  color: var(--tx);
}

._list_verqu_73 {
  overflow-y: auto;
  padding: 8px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._section_verqu_81 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tx-3);
  padding: 6px 2px 0;
}

._empty_verqu_90 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 4px;
  font-size: 11.5px;
  color: var(--tx-3);
}

._empty_verqu_90 span {
  opacity: 0.75;
  line-height: 1.5;
}

/* On a phone the panel is the screen, so the drop shadow and the left border
   are framing nothing. */
@media (max-width: 820px) {
  ._panel_verqu_2 {
    border-left: 0;
    box-shadow: none;
  }
}
/* Structure mirrors .settings / .set-nav / .set-pane in prototype/orc.html. */
._settings_1tj3y_1 {
  display: grid;
  grid-template-columns: 196px 1fr;
  min-height: 0;
  background: var(--page);
}

/* ---------- nav ---------- */
._nav_1tj3y_10 {
  border-right: 1px solid var(--bd);
  background: var(--s1);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
}

._navTitle_1tj3y_18 {
  /* Indented past the tabs' icons so it reads as their heading rather than as
     one of them: 9px of their padding plus the 13px glyph and its 8px gap. */
  padding: 6px 9px 9px 30px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-3);
}

._navItem_1tj3y_29 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 9px;
  width: 100%;
  border-radius: var(--r-sm);
  color: var(--tx-2);
  font-size: 12px;
  transition:
    background var(--dur),
    color var(--dur);
}

._navItem_1tj3y_29:hover {
  background: var(--s2);
}

._navItem_1tj3y_29[data-on='true'] {
  background: var(--s3);
  color: var(--tx);
  font-weight: 550;
}

._navFoot_1tj3y_54 {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--bd);
}

/* ---------- body ---------- */
._body_1tj3y_61 {
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

._head_1tj3y_68 {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--bd);
  background: var(--bg);
}

._head_1tj3y_68 h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

._head_1tj3y_68 p {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--tx-3);
  max-width: 640px;
  line-height: 1.55;
}

._pane_1tj3y_89 {
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

/* ---------- setting rows ---------- */
._matrix_1tj3y_99 {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--s2);
}

._row_1tj3y_105 {
  display: grid;
  grid-template-columns: 1fr 216px;
  gap: 12px;
  align-items: center;
  padding: 9px 11px;
  border-bottom: 1px solid var(--bd);
}

._row_1tj3y_105:last-child {
  border-bottom: 0;
}

._rowName_1tj3y_118 {
  font-size: 12px;
  font-weight: 550;
}

._rowSub_1tj3y_123 {
  font-size: 10.5px;
  color: var(--tx-3);
  margin-top: 1px;
}

._seg_1tj3y_129 {
  display: flex;
  padding: 2px;
  background: var(--s3);
  border-radius: var(--r-sm);
  gap: 2px;
}

._seg_1tj3y_129 button {
  flex: 1;
  height: 24px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--tx-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition:
    background var(--dur),
    color var(--dur);
}

._seg_1tj3y_129 button:hover:not(:disabled) {
  color: var(--tx);
}

._seg_1tj3y_129 button[data-on='true'] {
  background: var(--s1);
  color: var(--tx);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

._seg_1tj3y_129 button:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ---------- keyboard ---------- */

/* Right-aligned in the row's second column, where every other pane puts its
   control. A shortcut is not something you set here — this is the page that
   says what it is — so it reads as a value rather than as a button. */
._keys_1tj3y_174 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* Between chords, with an "or" or "…" doing the separating; still wider
     than between the keys of one chord. */
  gap: 6px;
}

/* One chord: its keys close together, each its own keycap. */
._combo_1tj3y_184 {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* A keycap: a square minimum so a lone symbol is not a sliver, a heavier
   bottom edge so it reads as a key rather than a tag. */
._keys_1tj3y_174 kbd {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--tx-2);
  background: var(--s3);
  border: 1px solid var(--bd-2);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  white-space: nowrap;
}

._between_1tj3y_210 {
  font-size: 11px;
  color: var(--tx-3);
  margin: 0 3px;
}

/* ---------- remote access ---------- */
._remote_1tj3y_217 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._remote_1tj3y_217 code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx-2);
}

._section_1tj3y_229 {
  /* Matches `.row`'s 11px so headings line up with the rows beneath them —
     these all sit inside `.matrix`, which supplies the card and no padding. */
  margin: 6px 0 0;
  padding: 14px 11px 7px;
  border-bottom: 1px solid var(--bd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-3);
}

/* The code and its QR, while one is live. Centred because it is the only
   thing on screen anyone is looking at while they hold up a phone, and
   full-bleed inside the card rather than a second box drawn inside a box. */
._pairing_1tj3y_245 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 16px;
  border-bottom: 1px solid var(--bd);
  background: var(--accent-soft);
}

._qr_1tj3y_255 {
  width: 200px;
  height: 200px;
  border-radius: var(--r-sm);
  /* The generator draws black on white; a dark theme must not invert it, or
     scanners lose the contrast they rely on. */
  background: #fff;
  padding: 8px;
}

._code_1tj3y_265 {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--tx);
  /* The letter-spacing pads the right edge; this pulls the block back centre. */
  text-indent: 0.22em;
}

._countdown_1tj3y_275 {
  font-size: 11px;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}

._device_1tj3y_281 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border-bottom: 1px solid var(--bd);
}

/* The last row ends the card; a rule there would float above nothing. */
._device_1tj3y_281:last-child {
  border-bottom: 0;
}

._none_1tj3y_295 {
  padding: 13px 11px 15px;
  font-size: 11.5px;
  color: var(--tx-3);
}

._confirm_1tj3y_301 {
  display: flex;
  gap: 6px;
  flex: none;
}

._primary_1tj3y_307,
._ghost_1tj3y_308,
._danger_1tj3y_309 {
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-family: var(--font-ui);
  flex: none;
}

._primary_1tj3y_307 {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

._ghost_1tj3y_308 {
  border: 1px solid var(--bd-2);
  background: var(--s2);
  color: var(--tx-2);
}

._ghost_1tj3y_308:hover {
  color: var(--tx);
  border-color: var(--bd-3);
}

._danger_1tj3y_309 {
  background: var(--err-soft);
  color: var(--err);
  font-weight: 600;
}

/* Copy, copy link, cancel — under the countdown, wrapping on a narrow pane. */
._pairActs_1tj3y_342 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
}

._pairActs_1tj3y_342 ._ghost_1tj3y_308 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------------------------------------------------------------------------
   Narrow screens. The two-column settings become one: the sections move to a
   scrolling row on top, the way a phone's tab bar works, and the pane below
   gets the whole width.
   --------------------------------------------------------------------------- */
@media (max-width: 820px) {
  ._settings_1tj3y_1 {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  ._nav_1tj3y_10 {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--bd);
    overflow-x: auto;
    overflow-y: hidden;
    /* No bar: the wheel scrolls it sideways — lib/wheelSideways.ts. */
    scrollbar-width: none;
  }

  /* The heading and Back are a column's furniture; in a row they would be two
     more things to scroll past to reach the section you wanted. */
  ._navTitle_1tj3y_18 {
    display: none;
  }

  ._navFoot_1tj3y_54 {
    margin-left: auto;
    padding: 0;
    border: 0;
  }

  ._navItem_1tj3y_29 {
    width: auto;
    height: 30px;
    white-space: nowrap;
    flex: none;
  }

  ._pane_1tj3y_89 {
    padding: 14px;
  }

  /* Label above control rather than beside it: 216px of segmented buttons and
     a sentence of explanation do not share a phone's width. */
  ._row_1tj3y_105 {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  ._qr_1tj3y_255 {
    width: 168px;
    height: 168px;
  }
}

._primary_1tj3y_307:disabled {
  opacity: 0.4;
  cursor: default;
}

/* The relay wants a newer orc than this one. Warning, not error: nothing is
   broken and nothing has stopped — it is a thing to do before it becomes one,
   which is exactly what --warn is for and --err is not. */
._outdated_1tj3y_424 {
  padding: 12px 14px;
  border: 1px solid var(--warn);
  border-radius: var(--r-md);
  background: var(--warn-soft);
  margin-bottom: 12px;
}

._outdatedHead_1tj3y_432 {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--tx);
  margin-bottom: 4px;
}

._outdatedBody_1tj3y_439 {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--tx-2);
}

._outdatedBody_1tj3y_439 code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx);
}

/* A segment button carrying a mark as well as a word. The gap is what stops
   the two reading as one run of glyphs. */
._provider_1tj3y_453 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- editor ---------- */

/* The row's control column, filled: a select sized to its longest option would
   jump in width as the choice changed. The chevron is drawn rather than left
   to the platform, which paints a bright-blue stepper on macOS. */
._selectWrap_1tj3y_464 {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--tx-3);
}

._selectWrap_1tj3y_464 svg {
  position: absolute;
  right: 8px;
  pointer-events: none;
}

._select_1tj3y_464 {
  appearance: none;
  width: 100%;
  height: 28px;
  padding: 0 24px 0 9px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm);
  background: var(--s3);
  color: var(--tx);
  font: inherit;
  font-size: 11.5px;
  text-overflow: ellipsis;
}

._select_1tj3y_464:disabled {
  opacity: 0.6;
}
/* The rows of the branches form: one per repo, in columns so the fields line
   up across repos — the thing being compared is what each repo is on and
   where it is going. The form's frame, fields and buttons are BranchReset's,
   so the single-repo form in Ship and this one cannot drift apart. */

/* Wider than the shared form's 42px label column, which is sized for "Branch"
   and "From". More specific than that rule rather than `!important`. */
label > span._everyLabel_1hsxs_8 {
  width: auto;
}

._rows_1hsxs_12 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._heads_1hsxs_18,
._row_1hsxs_12 {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

._heads_1hsxs_18 {
  font-size: 10px;
  font-weight: 600;
  color: var(--tx-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._repo_1hsxs_34 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._name_1hsxs_40 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tx);
}

/* The branch it is on now — cut at its end rather than its start would lose
   the part that tells branches apart, so it is left whole and clipped. */
._on_1hsxs_49 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._on_1hsxs_49 svg {
  color: var(--ok);
  flex: none;
}

/* Why one repo did not move, under its own row and across all three columns. */
._refusal_1hsxs_67 {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--tx);
}
/* The hue arrives as --bot, one of the ten --bot-n tokens. The tile is that
   hue washed into the surface, the robot is the hue itself — one colour per
   agent, at two strengths, rather than a second colour to pick. */
._tile_1xvhb_4 {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: var(--r-sm);
  color: var(--bot);
  background: color-mix(in srgb, var(--bot) 16%, transparent);
}

._fill_1xvhb_13 {
  fill: currentColor;
  stroke: none;
}
/* Mirrors `.rail` in prototype/orc.html.

   The row heights are named once, here. Folding only narrows the rail, so
   nothing moves vertically — but they began as two components with separate
   sizes, which shifted every row, and naming them keeps the next change from
   reintroducing that. Overflow is hidden so the closing column clips. */
._rail_14x1y_1 {
  --rail-head: 34px;
  --rail-agent: 28px;
  --rail-row: 30px;
  --rail-group-gap: 8px;

  background: var(--s1);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

._head_14x1y_22 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--rail-head);
  flex: none;
  /* 14px puts the fold button, which leads, in the middle of the folded
     rail. */
  padding: 4px 8px 0 14px;
}

._label_14x1y_33 {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tx-3);
}

._add_14x1y_41 {
  margin-left: auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--tx-2);
}

._add_14x1y_41:hover,
._fold_14x1y_52:hover {
  background: var(--s3);
  color: var(--tx);
}

/* Folds the rail. First in the head, in the column the folded rail keeps. */
._fold_14x1y_52 {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--r-xs);
  color: var(--tx-3);
}

/* A worktree's number, at the head of its row: 32px, the width of the folded
   rail's content, so when the rail folds this is exactly what is left. The
   status dot sits in its corner. */
._num_14x1y_71 {
  position: relative;
  width: 32px;
  height: 100%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tx-3);
  transition: color var(--dur);
}

._instance_14x1y_85:not(:disabled):hover ._num_14x1y_71,
._instance_14x1y_85[data-on='true'] ._num_14x1y_71 {
  color: var(--tx);
}

._num_14x1y_71 > ._dot_14x1y_90 {
  position: absolute;
  top: 5px;
  right: 4px;
  width: 6px;
  height: 6px;
}

/* The waiting count on the tile, for the folded rail only — open, the row
   prints it at its far end. Over the tile's lower corner. */
._numPending_14x1y_100 {
  position: absolute;
  bottom: 1px;
  right: 0;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--attn);
  color: var(--s1);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  opacity: 0;
}

/* ---------- folded ---------- */
/*
 * The same list, narrowed. App eases the column to its folded width over
 * --dur-rail; here everything right of the icon column fades out over the
 * same time and is clipped by the rows, so the rail closes over one list
 * instead of trading one for another. Wide screens only — below the
 * breakpoint the rail is a drawer, always drawn full, and the hamburger is
 * that layout's control.
 */
@media (min-width: 821px) {
  ._label_14x1y_33,
  ._add_14x1y_41,
  ._name_14x1y_129,
  ._gear_14x1y_130,
  ._agent_14x1y_131 > ._pending_14x1y_131,
  ._instanceName_14x1y_132,
  ._note_14x1y_133,
  ._carrySet_14x1y_134,
  ._instance_14x1y_85 > ._pending_14x1y_131,
  ._numPending_14x1y_100,
  ._group_14x1y_137::before {
    transition: opacity var(--dur-rail) ease;
  }

  ._agent_14x1y_131,
  ._instance_14x1y_85 {
    overflow: hidden;
  }

  ._rail_14x1y_1[data-collapsed='true'] ._label_14x1y_33,
  ._rail_14x1y_1[data-collapsed='true'] ._add_14x1y_41,
  ._rail_14x1y_1[data-collapsed='true'] ._name_14x1y_129,
  ._rail_14x1y_1[data-collapsed='true'] ._gear_14x1y_130,
  ._rail_14x1y_1[data-collapsed='true'] ._agent_14x1y_131 > ._pending_14x1y_131,
  ._rail_14x1y_1[data-collapsed='true'] ._instanceName_14x1y_132,
  ._rail_14x1y_1[data-collapsed='true'] ._note_14x1y_133,
  ._rail_14x1y_1[data-collapsed='true'] ._carrySet_14x1y_134,
  ._rail_14x1y_1[data-collapsed='true'] ._instance_14x1y_85 > ._pending_14x1y_131 {
    opacity: 0;
    pointer-events: none;
  }

  ._rail_14x1y_1[data-collapsed='true'] ._numPending_14x1y_100 {
    opacity: 1;
  }

  /* Its trigger would sit over the tile in a 32px row. */
  ._rail_14x1y_1[data-collapsed='true'] ._more_14x1y_164 {
    display: none;
  }

  /* A hairline between agents, drawn in the gap between groups so it adds
     no height; shown folded, where names no longer mark where one agent
     ends. */
  ._group_14x1y_137 {
    position: relative;
  }

  ._group_14x1y_137 + ._group_14x1y_137::before {
    content: '';
    position: absolute;
    top: calc(var(--rail-group-gap) / -2);
    left: 4px;
    right: 4px;
    border-top: 1px solid var(--bd-2);
    opacity: 0;
  }

  ._rail_14x1y_1[data-collapsed='true'] ._group_14x1y_137 + ._group_14x1y_137::before {
    opacity: 1;
  }

  /* The scrollbar would take most of a 32px column. */
  ._rail_14x1y_1[data-collapsed='true'] ._list_14x1y_190 {
    scrollbar-width: none;
  }

  ._rail_14x1y_1[data-collapsed='true'] ._list_14x1y_190::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 820px) {
  ._fold_14x1y_52 {
    display: none;
  }
}

/* The worktree just switched to, named beside its tile while the rail is
   folded. Fixed and portalled — see `placeCaption` — with its top and left
   written by script, and its left edge pointing back at the tile. Fades in,
   holds and fades out over --dur-flash; never takes a click. */
._caption_14x1y_209 {
  position: fixed;
  z-index: 40;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  box-shadow: var(--shadow);
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
  animation: _caption_14x1y_209 var(--dur-flash) ease forwards;
}

._captionInstance_14x1y_226 {
  font-size: 12px;
  font-weight: 650;
  color: var(--tx);
}

._captionAgent_14x1y_232 {
  font-size: 11.5px;
  color: var(--tx-3);
}

@keyframes _caption_14x1y_209 {
  0% {
    opacity: 0;
    transform: translate(-4px, -50%);
  }
  12%,
  75% {
    opacity: 1;
    transform: translate(0, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(0, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._caption_14x1y_209 {
    animation-name: _caption-still_14x1y_1;
  }

  @keyframes _caption-still_14x1y_1 {
    0%,
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

._list_14x1y_190 {
  overflow-y: auto;
  padding: 2px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: var(--rail-group-gap);
  flex: 1;
  min-height: 0;
}

._empty_14x1y_279 {
  padding: 8px 4px;
  font-size: 11px;
  color: var(--tx-3);
}

/* ---------- agent ---------- */
/* Same reason as the attention popup's body and Review's column: a flex child
   shrinks by default, so an agent with several instances would be squeezed to
   fit the rail instead of scrolling it. */
._group_14x1y_137 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: none;
}

._agent_14x1y_131 {
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--rail-agent);
  /* Centres the 22px robot over the 32px number tiles below it. */
  padding: 0 9px 0 5px;
}

._name_14x1y_129 {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

._gear_14x1y_130 {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--tx-3);
  flex: none;
  opacity: 0;
  transition:
    opacity var(--dur),
    background var(--dur),
    color var(--dur);
}

._group_14x1y_137:hover ._gear_14x1y_130 {
  opacity: 1;
}

._gear_14x1y_130:hover {
  background: var(--s4);
  color: var(--tx);
}

/* ---------- instance (a pool slot) ---------- */
/* The row: the instance button, with its actions trigger layered over it.
   Stacked rather than sat beside it — a trigger in the flow pushes the row's
   content along and leaves a gap where it will one day be. This paints nothing
   itself; the button keeps its own fill, which is what stops a disabled slot
   lighting up on hover. */
._row_14x1y_346 {
  position: relative;
  min-width: 0;
}

/* Hidden until wanted. It is a second action on a row whose first action is
   the whole point of the row, and a permanent dot on every slot would compete
   with the status dot that is actually load-bearing. Kept visible while its
   menu is open, or it would vanish under the pointer that opened it.

   Absolutely placed over the button's right edge, where the button reserves
   room for it. Being a sibling on top rather than a child is what makes the
   click land here and not on the row: a <button> cannot contain another, and
   nesting the handler in a div instead would trade a real button — tab stop,
   Enter, the lot — for one that only behaves like one. */
._more_14x1y_164 {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  color: var(--tx-3);
  opacity: 0;
  transition: opacity var(--dur);
}

._row_14x1y_346:hover ._more_14x1y_164,
._more_14x1y_164:focus-visible,
._more_14x1y_164[aria-expanded='true'] {
  opacity: 1;
}

._more_14x1y_164:hover:not(:disabled) {
  background: var(--s3);
  color: var(--tx);
}

._more_14x1y_164:disabled {
  display: none;
}

/* Sizes only: placement, the scrim and the surface are the popover's. */
._pop_14x1y_394 {
  min-width: 190px;
  padding: 4px;
}

._item_14x1y_399 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--tx-2);
  text-align: left;
  cursor: pointer;
}

._item_14x1y_399:hover {
  background: var(--s3);
  color: var(--tx);
}

/* ---------- the move dialog ---------- */

/* Mirrors CreateAgent's backdrop and modal, which mirror the prototype's, with
   one difference: `fixed` rather than `absolute`, because this is portalled to
   the body and has no positioned ancestor to inset against. */
._backdrop_14x1y_423 {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: start center;
  padding-top: 14vh;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px);
  animation: _fade_14x1y_1 0.14s ease;
}

@keyframes _fade_14x1y_1 {
  from {
    opacity: 0;
  }
}

/* Wide enough for the branches form's three columns — a repo, where it is
   going, and what that is cut from — without squeezing branch names. */
._modal_14x1y_443 {
  width: 600px;
  max-width: calc(100% - 40px);
  background: var(--s1);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: _pop_14x1y_394 0.17s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes _pop_14x1y_394 {
  from {
    transform: translateY(-6px) scale(0.985);
    opacity: 0;
  }
}

._instance_14x1y_85 {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  /* What lets the branch and status text ellipsis instead of forcing the row
     wider than the rail. */
  min-width: 0;
  /* The right padding is the trigger's berth. Reserved always rather than
     opened on hover, because growing it as the pointer arrives shifts the
     carry badges sideways under the very pointer that is reaching for them. */
  height: var(--rail-row);
  /* No left padding: the number tile is the row's left edge. */
  padding: 0 32px 0 0;
  border-radius: var(--r-md);
  position: relative;
  text-align: left;
  transition: background var(--dur);
}

._instance_14x1y_85:not(:disabled):hover {
  background: var(--s2);
}

._instance_14x1y_85:disabled {
  cursor: default;
  opacity: 0.55;
}

._instance_14x1y_85[data-on='true'] {
  background: var(--s3);
}

._instance_14x1y_85[data-on='true']::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

/* The conversation, in one dot.
   Grey for idle rather than green: idle is the resting state of every row, and
   a rail of green ticks reads as approval of something. The colours climb with
   how much the row wants from you — nothing, then working, then a question. */
._dot_14x1y_90 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mute);
  flex: none;
}

._dot_14x1y_90[data-status='working'] {
  background: var(--warn);
  animation: _pulse_14x1y_1 1.2s ease-in-out infinite;
}

/* Its own colour, not the error red with a halo on it. Those were briefly the
   same red distinguished by a ring, which is a way of admitting that two
   different things had been given one colour. Waiting on you and broken are
   not the same state and should not need looking at twice. */
._dot_14x1y_90[data-status='waiting'] {
  background: var(--attn);
}

._dot_14x1y_90[data-status='error'] {
  background: var(--err);
}

/* A worktree that does not exist yet has no conversation to report, so its
   state outranks whatever the status happens to say. */
._dot_14x1y_90[data-state='preparing'] {
  background: var(--mute);
  animation: _pulse_14x1y_1 1.2s ease-in-out infinite;
}

._dot_14x1y_90[data-state='failed'] {
  background: var(--err);
}

@keyframes _pulse_14x1y_1 {
  50% {
    opacity: 0.35;
  }
}

/* The instance's name — in the UI face, since it is a name someone gave it
   rather than an identifier, unlike the branch it replaced as the label. Not
   `.name`: that is the agent's heading above it, and sharing the class let
   this rule restyle the heading. */
._instanceName_14x1y_132 {
  font-size: 12px;
  color: var(--tx-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._instance_14x1y_85[data-on='true'] ._instanceName_14x1y_132 {
  color: var(--tx);
}

/* Renaming in place: the row's own height, so the list does not jump. */
._rename_14x1y_570 {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--s1);
  color: var(--tx);
  font: inherit;
  font-size: 12px;
  outline: none;
}

/* Provisioning, or why it failed. Where the permanent status word used to sit,
   and empty for the whole of a working slot's life. */
._note_14x1y_133 {
  font-size: 10px;
  color: var(--tx-3);
  flex: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._note_14x1y_133[data-state='failed'] {
  color: var(--err);
}

._pending_14x1y_131 {
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* What a worktree is carrying — changed files, then commits ahead. Muted:
   it's context for a decision, not an alert. */
._carry_14x1y_134 {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* One flex item holding all the numbers. The row itself has an 8px gap, and
   leaving these as separate children put that gap on the left of the separator
   and nothing on the right — the dot sat against the second number. */
._carrySet_14x1y_134 {
  display: inline-flex;
  align-items: baseline;
  flex: none;
}

/* A separator only where two numbers actually meet, so "1 8" can't be misread
   as eighteen. Nothing trails a lone number — the colour already says which
   kind it is, and a dot on the end of every chip was noise. */
._carry_14x1y_134 + ._carry_14x1y_134::before {
  content: '·';
  margin: 0 3px;
  color: var(--tx-3);
  font-weight: 400;
}

/* Staged reads as ready, unstaged as still moving — same vocabulary as the
   review panel, so a colour means one thing across the app. */
._carry_14x1y_134[data-kind='staged'] {
  color: var(--git-add);
}

._carry_14x1y_134[data-kind='unstaged'] {
  color: var(--git-mod);
}

/* Unpushed commits — the accent, since pushing is the next action rather than
   a state of the files. */
._carry_14x1y_134[data-kind='unpushed'] {
  color: var(--accent);
}
._app_flvpg_1 {
  height: 100%;
  display: grid;
  grid-template-rows: var(--titlebar-h) 1fr;
  background: var(--bg);
  min-height: 0;
}

/* ---------- titlebar ---------- */
._titlebar_flvpg_10 {
  display: flex;
  align-items: center;
  gap: 10px;
  /* left padding clears the macOS traffic lights drawn over the window */
  padding: 0 10px 0 var(--traffic-lights-w);
  border-bottom: 1px solid var(--bd);
  background: var(--s1);
  -webkit-app-region: drag;
}

._titlebar_flvpg_10 button {
  -webkit-app-region: no-drag;
}

._brand_flvpg_25 {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* Centred on the window, not on the space between the brand and the buttons,
   which would drift as the badge count came and went. Capped so it can never
   reach either side, and it cuts the agent's name before the instance's. */
._titlebar_flvpg_10 {
  position: relative;
}

._where_flvpg_38 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 2 * 190px);
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

._whereAgent_flvpg_51 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tx-3);
}

._whereSep_flvpg_58 {
  color: var(--tx-3);
  opacity: 0.6;
}

._whereInstance_flvpg_63 {
  flex: none;
  color: var(--tx);
}

._tbRight_flvpg_68 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* matches .tb-btn in the prototype */
._tbBtn_flvpg_76 {
  width: 26px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--tx-2);
  position: relative;
  transition:
    background var(--dur),
    color var(--dur);
}

._tbBtn_flvpg_76:hover {
  background: var(--s3);
  color: var(--tx);
}

/* An update is downloaded and waiting for a restart.
   Accent rather than a warning colour: nothing is wrong, and orc has no
   business making a dot look like a problem to be dealt with. The ring is the
   titlebar's own background, so the dot reads as a dot rather than as part of
   the gear it overlaps. */
._tbBtn_flvpg_76[data-badge]::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--s1);
}

._tbBtn_flvpg_76[data-on='true'] {
  background: var(--accent-soft);
  color: var(--accent-hi);
}

/* A badged button reads as "live" even when the panel is closed. */
._tbBtn_flvpg_76[data-badged='true'] {
  color: var(--tx);
}

/* matches .cbadge in the prototype */
._badge_flvpg_122 {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3.5px;
  border-radius: 8px;
  background: var(--err);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--s1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Positioning context for the slide-over, which docks under the titlebar. */
._stage_flvpg_143 {
  position: relative;
  min-height: 0;
  display: grid;
}

/* Thin left rail + main pane (spec 2.1.3). The rail's width is the user's,
   dragged from the seam and read back out of localStorage at mount; the token
   here is only the fallback for a first run. `position: relative` is what lets
   the splitter be absolutely positioned against this box instead of taking a
   grid cell — with two tracks declared, an in-flow third child would fall into
   an implicit row, which is the trap recorded on `.unreachable` below. */
._shell_flvpg_155 {
  position: relative;
  display: grid;
  /* Clamped here and not only in the drag handler, so a width dragged on a
     large display cannot eat a smaller window the app later opens on. The
     handler in App.tsx clamps to the same 150px / half, for the feel of the
     drag; this is the one that holds when nothing is being dragged. Change
     both or neither. */
  grid-template-columns: clamp(150px, var(--rail-w, 200px), 50%) 1fr;
  min-height: 0;
}

/* Centred on the rail's right border, and clamped by the identical expression
   — anything else lets the handle drift off the seam it is supposed to be. */
._railSplit_flvpg_169 {
  left: calc(clamp(150px, var(--rail-w, 200px), 50%) - 3px);
}

/* Folded: the rail narrows to its icon column (see Sidebar's folded rules) and
   the work takes the rest. No splitter — the folded rail has one width. Wide
   screens only: below the breakpoint the rail is a drawer laid over the work,
   and folding a column that is not in the layout would leave the hamburger
   opening an icon column. */
@media (min-width: 821px) {
  /* The column eases when it folds or unfolds — and when the width is nudged
     by keyboard or reset by a double-click, which is no worse for it. Not
     while the splitter is being dragged: the rail would trail the pointer by
     --dur-rail, so a drag in progress turns the transition off. */
  ._shell_flvpg_155 {
    transition: grid-template-columns var(--dur-rail) ease;
  }

  ._shell_flvpg_155:has(> ._railSplit_flvpg_169[data-dragging]) {
    transition: none;
  }

  /* 49: the list's 8px gutters either side of a 32px number tile, and the
     rail's 1px border. */
  ._shell_flvpg_155[data-hidden='true'] {
    grid-template-columns: 49px 1fr;
  }

  ._shell_flvpg_155[data-hidden='true'] > ._railSplit_flvpg_169 {
    display: none;
  }
}

/* Both exist only below the breakpoint. Declared here so the wide layout is
   explicit about not having them rather than inheriting their absence. */
._hamburger_flvpg_204 {
  display: none;
}

._scrim_flvpg_208 {
  display: none;
}

/* Browser-only: the connection to the machine orc runs on has dropped. */
/* ---------- unreachable ---------- */

/*
 * Fixed, so it is not a child of the shell's grid. It used to be one, and with
 * two tracks defined and three children to place, the titlebar inherited the
 * content's `1fr` and the content fell into an implicit row — the layout came
 * apart the moment the connection did.
 *
 * It covers rather than announces on purpose. Every number behind it is what
 * the laptop last said, and there is no way to tell from here how old that is;
 * blurring it is the honest rendering of "do not trust this yet".
 */
._offline_flvpg_225 {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--page) 62%, transparent);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  /* Held back for a moment. A socket that drops and comes straight back is
     common on a phone, and a full-screen panel that flashes for it is worse
     than the stale reading it was warning about. */
  opacity: 0;
  animation: _offlineIn_flvpg_1 180ms ease 700ms forwards;
}

@keyframes _offlineIn_flvpg_1 {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._offline_flvpg_225 {
    animation-duration: 1ms;
  }
}

._offlineCard_flvpg_254 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  max-width: 320px;
  padding: 22px 26px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-lg);
  background: var(--s2);
  box-shadow: var(--shadow);
  text-align: center;
}

._offlineCard_flvpg_254 strong {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--tx);
}

._offlineCard_flvpg_254 span {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--tx-3);
}

/* Something moving, because "retrying" is a claim the panel should be able to
   back up — a still dialog reads as having given up. */
._offlinePulse_flvpg_282 {
  width: 9px;
  height: 9px;
  margin-bottom: 3px;
  border-radius: 50%;
  background: var(--warn);
  animation: _offlinePulse_flvpg_282 1.4s ease-in-out infinite;
}

@keyframes _offlinePulse_flvpg_282 {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------------------------------------------------------------------------
   Narrow screens — a phone, or the window dragged small.

   One breakpoint, not a scale of them. The layout has exactly two states: the
   rail sits beside the work, or it slides over it. Anything between those is a
   third design nobody asked for.
   --------------------------------------------------------------------------- */
@media (max-width: 820px) {
  /* A phone's bar has the hamburger and three buttons in it already, and the
     open drawer names the worktree. */
  ._where_flvpg_38 {
    display: none;
  }

  ._shell_flvpg_155 {
    /* One column. The rail is taken out of flow below and laid over it. */
    grid-template-columns: 1fr;
  }

  /* The rail is the shell's only <nav>. Targeted by element rather than by
     position: the scrim sits before it, and a selector that counts children
     breaks the moment anything else is added to the shell. */
  ._shell_flvpg_155 > nav {
    position: fixed;
    /* Fixed positioning ignores the body's safe-area padding, so the inset has
       to be added back or the drawer starts under the notch. */
    top: calc(var(--titlebar-h) + env(safe-area-inset-top));
    bottom: 0;
    left: 0;
    width: min(280px, 82vw);
    z-index: 30;
    transform: translateX(-100%);
    transition: transform var(--dur) ease;
    box-shadow: var(--shadow);
  }

  ._shell_flvpg_155[data-rail='true'] > nav {
    transform: translateX(0);
  }

  ._scrim_flvpg_208 {
    display: block;
    position: fixed;
    inset: calc(var(--titlebar-h) + env(safe-area-inset-top)) 0 0 0;
    z-index: 29;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) ease;
  }

  ._shell_flvpg_155[data-rail='true'] ._scrim_flvpg_208 {
    opacity: 1;
    pointer-events: auto;
  }

  ._hamburger_flvpg_204 {
    display: grid;
    place-items: center;
    width: 28px;
    height: 24px;
    margin-right: 2px;
    border-radius: var(--r-sm);
    color: var(--tx-2);
  }

  ._hamburger_flvpg_204:hover {
    background: var(--s2);
    color: var(--tx);
  }

  /* Same reasoning as the tab strip: bigger targets, bigger glyphs. */
  ._tbBtn_flvpg_76 {
    width: 28px;
    height: 24px;
  }
}

/* In a browser there are no traffic lights to clear, so the 78px reserved for
   them is dead space — and on a phone it is most of the row. */
:root[data-remote='true'] ._titlebar_flvpg_10 {
  padding-left: 8px;
}

/* Windows: nothing at the left, and minimise/maximise/close drawn over the
   right end. `titlebar-area-*` is what the window-controls overlay reports and
   tracks the real buttons — a scaled display, a theme with wider ones — with
   the fixed width as the fallback for a runtime that does not set it. */
:root[data-captions='right'] ._titlebar_flvpg_10 {
  padding-left: 10px;
  padding-right: calc(
    100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, calc(100vw - var(--captions-w))) +
      6px
  );
}

/* The centred name keeps clear of the caption buttons too, which put ~140px
   more on the right than a Mac has. */
:root[data-captions='right'] ._where_flvpg_38 {
  max-width: calc(100% - 2 * 330px);
}

/* No hover states on a touch screen: `:hover` sticks after a tap, leaving
   whatever you last touched looking permanently focused. */
@media (hover: none) {
  ._hamburger_flvpg_204:hover {
    background: none;
  }
}
/* Deliberately not styled like a dialog. A dialog implies something behind it
   that is still there, and there is not — this is the whole window. */
._screen_18xfd_3 {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 32px;
  background: var(--s0, #08090b);
}

._card_18xfd_11 {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

._title_18xfd_19 {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--tx);
}

._body_18xfd_27 {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tx-2);
}

/* Small, last, and only for a support conversation. Nobody arrives at this
   screen wanting to read a version number. */
._meta_18xfd_36 {
  margin: 8px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--bd);
  width: 100%;
  font-size: 11.5px;
  color: var(--tx-3);
}

/* The one thing to do, and nothing competing with it. */
._action_18xfd_46 {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

._action_18xfd_46:hover {
  background: var(--accent-hi);
}

._card_18xfd_11 code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--tx);
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
/* The first thing a phone sees. Centred and narrow: it is one decision, and
   the surrounding app is deliberately not rendered behind it. */
._pair_s10m4_3 {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
  overflow-y: auto;
}

._card_s10m4_13 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 340px;
  padding: 24px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-lg);
  background: var(--s1);
  box-shadow: var(--shadow);
}

._mark_s10m4_25 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-hi);
}

._card_s10m4_13 h1 {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

._blurb_s10m4_39 {
  margin: 8px 0 20px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--tx-3);
}

._label_s10m4_46 {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-2);
  margin-bottom: 6px;
}

._hint_s10m4_53 {
  font-weight: 400;
  color: var(--tx-3);
}

/* Wide-spaced and monospaced: it is read off another screen a character at a
   time, and grouping is what stops a transposed pair. */
._code_s10m4_60 {
  height: 44px;
  margin-bottom: 16px;
  padding: 0 12px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-md);
  background: var(--s2);
  color: var(--tx);
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 0.22em;
  text-align: center;
}

._name_s10m4_74 {
  height: 36px;
  margin-bottom: 18px;
  padding: 0 11px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-md);
  background: var(--s2);
  color: var(--tx);
  font-size: 13px;
  font-family: var(--font-ui);
}

._code_s10m4_60:focus,
._name_s10m4_74:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--s1);
}

._error_s10m4_93 {
  margin-bottom: 14px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--err-soft);
  color: var(--err);
  font-size: 11.5px;
  line-height: 1.5;
}

._submit_s10m4_103 {
  height: 42px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
}

._submit_s10m4_103:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Said plainly, on the screen where the decision is actually made. */
._foot_s10m4_119 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--bd);
  color: var(--tx-3);
  font-size: 10.5px;
  line-height: 1.5;
}
/* Mirrors .modal / .m-hd / .m-bd / .m-ft from prototype/orc.html. */
._window_16itd_2 {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--s1);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}

._bar_16itd_12 {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--bd);
  background: var(--warn-soft);
  /* The window is frameless — this row is the drag handle. */
  -webkit-app-region: drag;
}

._bar_16itd_12 button {
  -webkit-app-region: no-drag;
}

._hand_16itd_27 {
  color: var(--warn);
  display: grid;
  place-items: center;
  flex: none;
}

._heading_16itd_34 {
  min-width: 0;
}

._title_16itd_38 {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

._sub_16itd_44 {
  font-size: 10.5px;
  color: var(--tx-3);
  margin-top: 1px;
}

._body_16itd_50 {
  overflow-y: auto;
  padding: 13px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cards keep their own height, which is what makes this column scroll.
   Flex items shrink by default, so a card taller than the body was being
   squeezed to fit instead of overflowing it — the body then had nothing to
   scroll, and `.card`'s own `overflow: hidden` quietly cut off everything
   past the fold. A question with five options showed three and no scrollbar,
   with nothing on screen suggesting there was more. */
._body_16itd_50 > * {
  flex: none;
}

._none_16itd_69 {
  padding: 24px 4px;
  text-align: center;
  font-size: 12px;
  color: var(--tx-3);
}

._foot_16itd_76 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-top: 1px solid var(--bd);
  background: var(--s2);
}

._note_16itd_85 {
  min-width: 0;
  font-size: 10.5px;
  color: var(--tx-3);
  line-height: 1.45;
}

/* The footer's one control. Pushed right, opposite the note, and never
   disabled — whatever else is true, putting this off is always available. */
._later_16itd_94 {
  margin-left: auto;
  height: 27px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  background: var(--s1);
  color: var(--tx-2);
  font-size: 11.5px;
  font-weight: 550;
  white-space: nowrap;
  flex: none;
  transition:
    background var(--dur),
    color var(--dur),
    border-color var(--dur);
}

._later_16itd_94:hover:not(:disabled) {
  background: var(--s3);
  color: var(--tx);
  border-color: var(--bd-3);
}

._later_16itd_94:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Bundled rather than fetched: the CSP allows `font-src 'self'`, and a local
   app shouldn't need the network to render its own text. Variable weights, so
   one file per family covers every weight the UI uses. */
/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./inter-cyrillic-wght-normal-DqGufNeO.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./inter-greek-ext-wght-normal-DlzME5K_.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./inter-greek-wght-normal-CkhJZR-_.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./inter-vietnamese-wght-normal-CBcvBZtf.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./inter-latin-ext-wght-normal-DO1Apj_S.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./inter-latin-wght-normal-Dx4kXJAl.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* jetbrains-mono-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAfsABQAAAAAEAwAAAeCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbHhwoP0hWQVJbBmA/U1RBVIFiJyYAdC9qEQgKhGSEAAsgADCGCAE2AiQDOgQgBYlMB4EUDAcbLQ4onoexrSC/2ZyLAa8p8VHB8/x3Vue+V0hVJalMJg2nx/TCrQXxBeqLjQG7FyM1WEa/X1tEXN7cFz9EJEMmMUz3RihWSSKeQCbcIou0izz/C8v+fq3VfajEa9gDD11CImXS7qL/RJFVzC1qiB6KmKeD6TZdQ6IRGv78dL6uSVVCfgni5mzu7kcgQBgAEAQTQRCoL++STTYybkJxNfQxAAIAGu8OdEB9teW2jh4BpgDqFjAeSEByW3zFP0CBBgNMsMCGEDjgggdhiEAUAeIIED7ABTDUEnkIE9Q9ahFgKttcVhApo4ACB4qobHaccgDfEjFO6aaWUhjMLt2SyIvHKoDqoA4CSUwEIYQCEjhAO9R1G6keDeDZGjNo+AhxOjCEGTr1WeIF3kYBiLAOKvkJSMiKX0VdAyQt3SDJClCkxJCHkCzfqyVTriJZLcolS32JZHUekq2TYNkYtCtjYHMQXSxGjXDz2t/yLWXzDzxz+o3zFwDEaN23F+13pyMdQAEaSKAR9vcGq4A4MTSKCElGW+M7UcY7xqkggITb28ZJhlqc9q2twYKTt0NjixBgYvO9BIihEBLYuOFXQzfIQ7dXGUEEEgFDooBfAzqiQbpJrhiWSuKJCRFKYbHCyJKI2G5GiZbNAvgAu5pc3vwx4G+g3aDkhklABiSz0BICXrYghtYhx/cdJ+44rY2oZ0aMNRFz3VZjb6W33F3gzltqtOCV8tTHSpOeXuItfvr5lCdfzFpqtEitvqdcdGGFd28ZqqC0tPbeChGXgrIlnhSWu/eUso4uKWFLugyDzQJhflY4659+WjQ++6x72WUMv9G8mw6QJl7BVxX5fe/kpUsOvnZwee9uQ0cGXYd0o89XB2748sDSnt8d2VphdOTTgceDVvOds0v9P/s7HPq15aGun/6Vllb56f1dl0t1LejqrNkpdRZsG8TOnM5vkBG5oiVyVGnS8LHps5cfNWJs6qKPfaNSxiQNBUm3cKNWROr0GSur7Za31k1vieq7LH11VF+jXdRIasRKflc7jkobm1Z9te1IyZA0pDkhLR98+H37Zf1c/8at+dB7x+7GfVyTfJMPiYztsnl59Y5l4j+0n1RXlpHnF3Tq7HecmNF/CJodEMAikruxiyJaGLvHOdAfoA+oDvpjBm2b91cHGRZMU9n25xEU0A8fgEEAdKI3Q1iDtc034sug5YVMkE2jsE+BIkwSoQ3gxXMqz9tELp48bd0cFKOKS7xYjEuXBnZP5ia7DyiO/X/YI+PQSbt2uSdqAkWL9nQbV1XB94/+uPfdZz8dnXYFBYrcTl2SIR/ybxJNJPz/Gupb0JaZeens2ekC7EKr8t+Ls/P5VJPYJdHKyqfg2nqU6bhlidzcddQV/7MmecTzJ5VPcKXkNKSEogHjYFx6QZ7rQ+FSe8njaiNuOnXS8H2ScQ619c2mC3VTtauL0rRbXd/CkSOP37FY9Zkjz8+GibYUMOEWF+RdrFS8Ecv1SHOpPUPZGEIpjPvFyU5cXKjd6OXqorTqy9GwRd++HVufPGnVsW+aO3vggKZ18jR9sXaTC1PWTEsVUaK0FkNySbTQDqlm2PfDjZcu4aalnSLKjnOoYQ0nUlqqXcGpPu/4VgV/xU2pAqW4BW3qzhQ8/hFKhV2qE3+BKAtDqBXjfgnVdH4y0wg5tbVNRenNdTWOrenWLcupQdmsbq5b+18piTe/xRdp1xbILxNPJGInm2z6hoB21Lal0i+ePTtd7B45+3XhFJ329evskXm7qurUVREotqSluSo/L29d3qDhI4YOQqWhI4YNvBNfsMHeXKemXrxQfKeuPOGRVayA3JtkJKEgbPp+dXUDluddutRYLFoXGXWX6N3WFaGLbQtRSitVYNacTNSdy7AaG/HSaUEANcBoGXNdcZvZsOqQ1icBDv21/gzAoYPHH/WDW0qNR3QTYKEAEHig6o13NXbND06CQPlRtYjGNnSktRc09k1mAMDvAlDKfQjgy6fssInlfzmNAjKkDxoxHOBLdVRAIVt9j4qo+hA1w9T1aNBNTUOTTNUHLbqokE+UAfJXCIGw/IxCSL5GRUJeR40rL/UxTm4Q08H6MbCs70ObuNyIIXrINHQYInF06UUlevTjbQzTh5upiDMzMMogUtEnjPs/Y7jAHCJeB0GBHh04tC6FiB6ZFB1oArUSIoFoqhzCeAN6lHwm0T4C3VVPWvjpSMXReuWesMEcoqrmgtNBGd2noWeV0hNAz9rFeShNJxHGsPa3HXeKTk8b55hahySYHaYKKFFLpCfN8rsoaJn01CR04Gkc+5k7KVTCmClX8Q10HCrUEkVlSX+XO33oQR9609tJ516H497WSobWs5Up6TLaS10/dessIskgJSLiDlWvHVUywpkQ7hdPZqGyiEF0uVQerVcPamT1A3eKXdyI1vG9OoflrSXihZ1qqGE3nhmAgiIbRCQgPLEPtOM3UQwTLYaYYomNlpA44opnjV6jkD6id80OOrzf6BzmMD6eEa1zKyeYG1fzfEf16V6jw9XYOaar1/b2kP/IYX8oR2mcFvv2GtBV3JXgd437AQAA) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(./jetbrains-mono-cyrillic-wght-normal-D73BlboJ.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(./jetbrains-mono-greek-wght-normal-Bw9x6K1M.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(./jetbrains-mono-vietnamese-wght-normal-Bt-aOZkq.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(./jetbrains-mono-latin-ext-wght-normal-DBQx-q_a.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* jetbrains-mono-latin-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(./jetbrains-mono-latin-wght-normal-B9CIFXIH.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ============================================================
   TOKENS — lifted from prototype/orc.html. Change values here, never
   in component modules.

   The neutrals no longer match the prototype's. They were greys with
   almost no hue, and the app read as black and white with one blue
   button in it; on 2026-10-16 they were pulled toward the accent's
   indigo-violet — blue leading, red a little ahead of green, so it
   reads as violet-black rather than navy. Chroma is kept low enough
   that a surface still reads as a surface, not as a colour.
   ============================================================ */
:root {
  --font-ui:
    'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
    sans-serif;
  --font-mono:
    'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --dur: 0.16s;
  /* One turn of a loading ring. Slow enough to read as waiting, not alarm. */
  --dur-spin: 0.8s;
  /* How long the worktree's name stays up after a switch with the rail folded:
     long enough to read two words, short enough to be gone before you type. */
  --dur-flash: 1.2s;
  /* The agents rail folding to a strip and back. */
  --dur-rail: 0.2s;

  --accent: #6e7aff;
  --accent-hi: #8b94ff;
  --accent-soft: rgba(110, 122, 255, 0.14);
  /* Fainter than soft: for tinting a whole band rather than a control. At
     `soft` a full-width strip reads as a coloured panel and competes with what
     is under it; this is meant to be noticed without being looked at. */
  --accent-wash: rgba(110, 122, 255, 0.05);
  --accent-line: rgba(110, 122, 255, 0.38);
  /* The edge of something that floats over the conversation in the accent —
     the open btw card. `line` is drawn for rules inside the layout and nearly
     vanishes as the outline of a card laid over prose. */
  --accent-edge: rgba(110, 122, 255, 0.62);

  --ok: #3fb950;
  --ok-soft: rgba(63, 185, 80, 0.13);
  --warn: #d9a21b;
  --warn-soft: rgba(217, 162, 27, 0.14);
  /* Something is waiting on you. Between --warn and --err on purpose, because
     that is what it means: more than work in progress, less than a failure.
     Its own token rather than a reuse of either — an agent blocked on a
     question is the state orc exists to surface, and it earns a colour that
     nothing else in the app is allowed to borrow. */
  --attn: #e8823c;
  --attn-soft: rgba(232, 130, 60, 0.14);
  --err: #f05252;
  --err-soft: rgba(240, 82, 82, 0.13);

  /* The agents' own colours, for their marks. Claude's is Anthropic's coral;
     OpenAI's mark is monochrome, so Codex takes the text colour and follows
     the theme the way its own logo does — black on light, white on dark. */
  --brand-claude: #d97757;
  --brand-codex: var(--tx);

  /* Git decoration colours, kept apart from the alert palette above.
     A modified file isn't a warning and a deletion isn't an error — they're
     just what the diff says — so they don't borrow the alert palette.

     Pastel rather than desaturated: around 45–55% saturation at a high
     lightness reads as a solid colour that happens to be soft, where merely
     dropping the saturation just looked washed out. The light theme keeps
     darker, deeper versions — a pastel on white is invisible. */
  --git-add: #7bd6a0;
  --git-mod: #e6c56d;
  --git-del: #f09283;
  /* The agents' robots, one hue each — see components/RobotAvatar. Spread
     round the wheel at similar lightness so none of them reads as the
     important one, and kept apart from the status colours' exact values, since
     a robot is a name, not a state. */
  --bot-0: #8b95ff;
  --bot-1: #4cc2ff;
  --bot-2: #45d19c;
  --bot-3: #b5d64f;
  --bot-4: #f2bf4a;
  --bot-5: #ff9270;
  --bot-6: #ff74b0;
  --bot-7: #c084fc;
  --bot-8: #36cfcf;
  --bot-9: #d6a679;
  --info: #4c9aff;
  --info-soft: rgba(76, 154, 255, 0.13);
  --mute: #6b7280;

  /* Height of the custom titlebar; macOS traffic lights are positioned to match
     (see trafficLightPosition in src/main/index.ts), and Windows draws its
     caption buttons at this height (titleBarOverlay, same file). */
  --titlebar-h: 32px;
  /* Room for the window's own controls: the traffic lights at the left on a
     Mac, Windows' minimise/maximise/close at the right — three 46px buttons. */
  --traffic-lights-w: 78px;
  --captions-w: 138px;
}

:root[data-theme='dark'] {
  --page: #09080e;
  --bg: #0d0c15;
  --s1: #11101b;
  --s2: #161522;
  --s3: #1c1b2a;
  --s4: #242335;
  --bd: #191826;
  --bd-2: #222131;
  --bd-3: #2e2c42;
  --tx: #e9e8f3;
  --tx-2: #9d9bb5;
  --tx-3: #6e6c88;
  --shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.4);
  /* Lift for a card laid over the conversation, as a `filter` rather than a
     box-shadow: it is cast by the outline of everything inside the element,
     so a card made of two joined boxes shadows as one shape with no seam.
     All the way round, where `--shadow` falls mostly downward — a card opening
     upward over the messages needs its top edge lifted most of all. */
  --lift: drop-shadow(0 0 22px rgba(0, 0, 0, 0.7)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  --code-bg: #0e0d17;
  /* A surface that floats over content rather than sitting in the layout:
     --s2 at an alpha that lets the conversation show through, for chips the
     text scrolls under. Paired with a blur at the point of use — alpha alone
     over prose is a smear, and the blur is what turns it into a surface. */
  --glass: rgba(22, 21, 34, 0.55);
  /*
   * Lifted toward white rather than made stronger. The saturated hue at a low
   * alpha composited against a near-black code background to something close
   * to black itself — rgb(18, 32, 23) for an added line — so a change read as
   * a dark smudge rather than a tint. A pale version of the same hue lands
   * around rgb(32, 45, 40) instead: lighter, but no louder, since the alpha is
   * what carries intensity and it has barely moved.
   *
   * How far to pull the other two channels up is the whole trick, and the
   * deletion got it wrong first. Green survives being washed out because the
   * eye reads green off the channel that carries most of the luminance; red
   * does not, so rgba(255, 172, 165) blended to rgb(42, 34, 35) — a warm grey
   * with six points of red in it, which is what "dull" meant. The red channel
   * has to stay ahead of the other two by enough to be a hue rather than a
   * temperature: this blends to rgb(56, 32, 32), a 24-point lead, at an alpha
   * still low enough that the syntax colours on top of it are unaffected.
   */
  --add: rgba(160, 245, 190, 0.13);
  --del: rgba(250, 110, 100, 0.18);
}

:root[data-theme='light'] {
  --page: #eeedf4;
  --bg: #fbfbfe;
  --s1: #ffffff;
  --s2: #f6f5fb;
  --s3: #efeef7;
  --s4: #e6e4f0;
  --bd: #ecebf3;
  --bd-2: #e0deea;
  --bd-3: #cdcadb;
  --tx: #15141d;
  --tx-2: #5b5a73;
  --tx-3: #87859c;
  --shadow: 0 24px 60px -24px rgba(20, 25, 40, 0.32), 0 1px 3px rgba(20, 25, 40, 0.1);
  --lift: drop-shadow(0 0 18px rgba(20, 25, 40, 0.18)) drop-shadow(0 1px 3px rgba(20, 25, 40, 0.14));
  --code-bg: #f7f6fb;
  /* Higher alpha than the dark theme's: light text furniture over light prose
     has less contrast to spend, so it has to hide more of what is behind it to
     stay readable. */
  --glass: rgba(246, 245, 251, 0.72);
  --add: rgba(63, 185, 80, 0.13);
  --del: rgba(240, 82, 82, 0.11);
  /* Darker than the dark theme's, as the rest of this block is: the same hue
     against white needs more depth to carry the same weight. */
  --attn: #c25f14;
  --attn-soft: rgba(194, 95, 20, 0.13);
  --git-add: #2a744b;
  --git-mod: #86651a;
  --git-del: #a4483a;
  --accent: #5461e8;
  --accent-edge: rgba(84, 97, 232, 0.55);
  /* Deeper, as the git colours above are: a pastel robot on white vanishes. */
  --bot-0: #4f5ae0;
  --bot-1: #0f7fc2;
  --bot-2: #13895c;
  --bot-3: #5f7d0f;
  --bot-4: #a3700a;
  --bot-5: #cc4a24;
  --bot-6: #c42a72;
  --bot-7: #8a3fd1;
  --bot-8: #0d8686;
  --bot-9: #8c6239;
}

/* ============================================================
   BASE — reset + primitives shared by every component module.
   Component-specific styles belong in *.module.css, not here.
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/*
 * The app is as tall as what you can see, which stops being the height of the
 * page the moment a phone keyboard opens over it. lib/viewport.ts keeps this
 * in step with the visual viewport; the fallback is what every desktop and
 * every keyboard-less moment uses.
 */
#root {
  height: var(--app-h, 100%);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings:
    'cv05' 1,
    'cv09' 1,
    'ss03' 1;
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

svg {
  display: block;
  flex: none;
}

/* Nothing in a desktop shell should be text-selectable by default; opt back in
   per component (terminal output, diffs, logs) with .selectable. */
body {
  -webkit-user-select: none;
  user-select: none;
}

.selectable {
  -webkit-user-select: text;
  user-select: text;
  cursor: auto;
}

/*
 * No vertical bars, anywhere. Asked for 2026-10-17: a permanent 9px track down
 * every pane — this is a classic scrollbar, it does not fade the way a macOS
 * overlay one does — was chrome on every surface for something a trackpad and
 * a wheel both already do, and the review diff has its change strip instead.
 * Width 0 rather than `display: none`, which would take the horizontal bars
 * below with it.
 */
::-webkit-scrollbar {
  width: 0;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--bd-2);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bd-3);
  background-clip: content-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/*
 * Horizontal bars are kept where a block scrolls sideways inside a page that
 * scrolls down — code blocks, tables, the diff — since the wheel there has to
 * keep scrolling the page. 10px of track with a 6px thumb inside it: 6px of
 * track was the first size and was too thin to grab. The tab strips and
 * headers hide theirs and take the wheel instead (lib/wheelSideways.ts).
 */

/* Keep the app clear of a notch and a home indicator. Zero everywhere else,
   so this costs nothing on a desktop. */
body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  box-sizing: border-box;
}

/* A phone zooming in on every tap of a text field is a rejection of the layout
   above, not a convenience. 16px is the threshold Safari uses. */
@media (max-width: 820px) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

/* Find-in-conversation. Registered by lib/useFind.ts — a highlight name is
   document-global, so these rules cannot live in a component module. Only a
   few properties are allowed inside ::highlight(), and background-color is
   one of them; the shorthand is not. */
/* The review diff's search registers under its own names (see the prefix in
   useFind.ts) so it can be open at the same time as the conversation's; it is
   painted identically, because it is the same tool in a different pane. */
::highlight(orc-find),
::highlight(orc-find-diff) {
  /* --accent-line rather than --accent-soft: soft is tuned for tinting a
     control you are already looking at, and at 0.14 a five-letter run of it
     inside a paragraph was easy to scan straight past. */
  background-color: var(--accent-line);
}

::highlight(orc-find-on),
::highlight(orc-find-diff-on) {
  background-color: var(--accent);
  /* Matching every other place that puts text on the accent. */
  color: #fff;
}