._settings_b28n3_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_b28n3_10 {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--bd);
}

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

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

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

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

._pane_b28n3_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_b28n3_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_b28n3_67 {
  margin-left: 8px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tx-3);
  opacity: 0.8;
}

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

._slot_b28n3_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_b28n3_93 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mute);
  flex: none;
}

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

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

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

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

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

._slotRemove_b28n3_130 {
  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_b28n3_130:hover:not(:disabled) {
  border-color: var(--err);
  color: var(--err);
}

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

._add_b28n3_151 {
  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_b28n3_151:hover {
  background: var(--s2);
  color: var(--tx);
}

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

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

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

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

._seg_b28n3_194 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_b28n3_194 button:hover {
  color: var(--tx);
}

._seg_b28n3_194 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_b28n3_225 {
  height: 30px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm);
  background: var(--s2);
  padding: 0 9px;
  font-size: 12.5px;
}

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

._readonly_b28n3_240 {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--s2);
  border: 1px solid var(--bd);
  color: var(--tx-3);
}

._path_b28n3_251 {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx-2);
  overflow-wrap: anywhere;
}

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

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

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

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

._danger_b28n3_287 {
  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_b28n3_287:hover {
  background: var(--err-soft);
}

._confirm_b28n3_281 ._danger_b28n3_287 {
  margin-left: 0;
}

._ghost_b28n3_309 {
  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_b28n3_309:hover {
  background: var(--s3);
  color: var(--tx);
}
._blank_9e244_1 {
  display: grid;
  place-items: center;
  background: var(--page);
  min-height: 0;
}

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

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

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

._button_9e244_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_9e244_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_9e244_8[data-list='true'] {
  max-width: 420px;
  width: 100%;
  text-align: left;
  align-items: stretch;
}

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

._row_9e244_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_9e244_63:hover {
  border-color: var(--bd-3);
  background: var(--s3);
}

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

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

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

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

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

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

._rowBadge_9e244_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;
  }
}
/* 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_q8g9v_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_q8g9v_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_q8g9v_1[data-pinned='true'] ._actions_q8g9v_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_q8g9v_1[data-kind='question'] {
  border-color: var(--accent-line);
}

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

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

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

/* ---------- which chat ---------- */
._from_q8g9v_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_q8g9v_56:not(:disabled):hover {
  background: var(--s3);
}

._from_q8g9v_56:disabled {
  cursor: default;
}

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

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

/* ---------- head ---------- */
._head_q8g9v_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_q8g9v_1[data-kind='question'] ._head_q8g9v_96 {
  background: var(--accent-soft);
}

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

._title_q8g9v_114 {
  font-weight: 600;
}

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

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

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

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

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

._later_q8g9v_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_q8g9v_158 {
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._detail_q8g9v_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_q8g9v_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_q8g9v_181 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._resolvedQText_q8g9v_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_q8g9v_204 {
  padding-left: 10px;
  border-left: 2px solid var(--ok);
  color: var(--tx);
  font-size: 11.5px;
  line-height: 1.5;
}

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

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

._chip_q8g9v_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_q8g9v_236 {
  font-size: 10px;
  color: var(--tx-3);
}

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

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

._option_q8g9v_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_q8g9v_247:hover {
  border-color: var(--bd-3);
  background: var(--s3);
}

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

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

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

._other_q8g9v_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_q8g9v_289:focus {
  outline: none;
  border-color: var(--accent-line);
}

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

._primary_q8g9v_310 {
  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_q8g9v_310:hover:not(:disabled) {
  background: var(--accent-hi);
}

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

._ghost_q8g9v_332 {
  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_q8g9v_332:hover {
  border-color: var(--err);
  color: var(--err);
}
/* 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_1q7p1_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_1q7p1_3 > :first-child {
  margin-top: 0;
}

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

._p_1q7p1_19 {
  margin: 0 0 8px;
}

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

._em_1q7p1_28 {
  font-style: italic;
}

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

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

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

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

._li_1q7p1_52 {
  margin: 2px 0;
}

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

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

._pre_1q7p1_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;
}

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

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

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

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

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

._link_1q7p1_119 {
  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_1q7p1_127 .shiki,
._shiki_1q7p1_127 .shiki span {
  color: var(--shiki-light);
  background: transparent !important;
}

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

._shiki_1q7p1_127 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_1q7p1_127 code {
  font-family: var(--font-mono);
}
/* 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_69edf_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_69edf_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_69edf_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_69edf_31:last-child {
  margin-bottom: 0;
}

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

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

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

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

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

._notice_69edf_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_69edf_78 {
  max-width: 460px;
}

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

._compacted_69edf_82::before,
._compacted_69edf_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_69edf_19[data-role='user'] {
    max-width: calc(100% - 32px);
  }
}
/* 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_no7hh_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);
}

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

._dirty_no7hh_21 span {
  flex: 1;
}

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

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

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

._blank_no7hh_46 {
  /* `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_no7hh_67 {
  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_no7hh_67[data-dragging] {
  background: var(--s2);
  box-shadow: inset 0 1px 0 var(--accent-line);
}

._composer_no7hh_65 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 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_no7hh_93 {
  padding: 8px 12px 0;
  color: var(--warn);
  font-size: 11px;
  line-height: 1.5;
}

._tray_no7hh_100 {
  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_no7hh_67 {
  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_no7hh_67 ._thumbRemove_no7hh_118 {
  position: static;
  opacity: 1;
  background: none;
}

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

._thumb_no7hh_118 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_no7hh_118 {
  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_no7hh_118:hover ._thumbRemove_no7hh_118,
._thumbRemove_no7hh_118:focus-visible {
  opacity: 1;
}

._thumbRemove_no7hh_118: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. */
._attach_no7hh_174 {
  flex: none;
  width: 38px;
  height: 38px;
  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_no7hh_174: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_no7hh_198 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 38px;
  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_no7hh_198:hover {
  border-color: var(--bd-3);
  color: var(--tx);
}

._modeDot_no7hh_222 {
  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_no7hh_198[data-mode='plan'] ._modeDot_no7hh_222 {
  background: var(--info);
}

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

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

._mode_no7hh_198[data-mode='auto'] ._modeDot_no7hh_222 {
  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_no7hh_249 {
  flex: 1;
  resize: none;
  min-height: 38px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 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_no7hh_249:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--s1);
}

._blankLine_no7hh_270 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_no7hh_277 {
  display: flex;
  padding: 2px 0 6px 2px;
}

/* What the worktree already holds, under the branch line. */
._blankCarry_no7hh_283 {
  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. */
/* Conversations open in one worktree — modelled on `.dt-tabs` in the
   prototype, which is the app's existing small-tab pattern. */
._tabs_12yd5_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;
  scrollbar-width: none;
  flex: none;
}

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

._tab_12yd5_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_12yd5_3:hover {
  background: var(--s2);
  color: var(--tx-2);
}

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

._label_12yd5_46 {
  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_12yd5_58 {
  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_12yd5_66 {
  font-size: 10px;
  font-weight: 500;
  color: var(--tx-3);
  white-space: nowrap;
}

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

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

._rename_12yd5_81 {
  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. */
._dot_12yd5_98 {
  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. */
._dot_12yd5_98[data-status='working'] {
  background: var(--warn);
  animation: _pulse_12yd5_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_12yd5_1 {
  50% {
    opacity: 0.35;
  }
}

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

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

._pending_12yd5_133 {
  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_12yd5_147 {
  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_12yd5_3:hover ._close_12yd5_147,
._tab_12yd5_3[data-on='true'] ._close_12yd5_147 {
  opacity: 1;
}

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

._add_12yd5_171 {
  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_12yd5_171:hover {
  background: var(--s3);
  color: var(--tx);
}

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

._branch_12yd5_201 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

._action_12yd5_211 {
  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_12yd5_211: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_12yd5_233 {
  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_12yd5_233: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_12yd5_233[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_12yd5_281 {
  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_12yd5_233[data-on='true'] ._count_12yd5_281 {
  background: var(--accent-soft);
  color: var(--accent-hi);
}

@media (max-width: 820px) {
  ._surfaceLabel_12yd5_299 {
    /* 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_12yd5_233 {
    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_12yd5_233 ._count_12yd5_281 {
    display: none;
  }

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

  ._surface_12yd5_233[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_12yd5_201 {
    display: none;
  }

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

  ._tab_12yd5_3,
  ._surface_12yd5_233,
  ._add_12yd5_171 {
    height: 28px;
  }

  ._surface_12yd5_233 {
    padding: 0 9px;
  }
}
._panel_16gty_1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
}

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

._filters_16gty_20 {
  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;
  scrollbar-width: none;
}

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

._filter_16gty_20 {
  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_16gty_20:hover {
  background: var(--s2);
  color: var(--tx-2);
}

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

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

._search_16gty_69 {
  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_16gty_69 {
    font-size: 12px;
  }
}

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

._failure_16gty_95 {
  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_16gty_108 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0 40px;
}

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

._sectionName_16gty_119 {
  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_16gty_132 {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tx-3);
  opacity: 0.7;
}

._sectionNotes_16gty_140 {
  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_16gty_153 {
  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_16gty_153:hover {
  background: var(--s1);
}

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

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

._row_16gty_153[data-status='done'] ._title_16gty_172 {
  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_16gty_185 {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

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

._dot_16gty_203 {
  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_16gty_203[data-status='doing'] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2.5px var(--accent);
}

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

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

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

._title_16gty_172 {
  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_16gty_172:hover {
  background: var(--s2);
}

._titleEdit_16gty_259 {
  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_16gty_259 {
    font-size: 12.5px;
  }
}

._flag_16gty_278,
._size_16gty_279,
._blocked_16gty_280,
._when_16gty_281 {
  flex: none;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}

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

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

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

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

._notesToggle_16gty_311,
._run_16gty_312 {
  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_16gty_311 {
  width: 22px;
  height: 22px;
  justify-content: center;
}

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

._run_16gty_312 {
  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_16gty_312 {
    opacity: 1;
  }
}

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

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

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

/* ---------- run menu ---------- */
._runWrap_16gty_373 {
  position: relative;
  flex: none;
}

._scrim_16gty_378 {
  position: fixed;
  inset: 0;
  z-index: 40;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: default;
}

._menu_16gty_388 {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 41;
  min-width: 180px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-md);
  background: var(--s2);
  box-shadow: var(--shadow);
}

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

._menu_16gty_388 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_16gty_388 button:hover {
  background: var(--s3);
  color: var(--tx);
}

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

/* ---------- notes ---------- */
._notes_16gty_311 {
  /* 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_16gty_457 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 18px;
  color: var(--tx-3);
  opacity: 0.5;
  transition: opacity var(--dur);
}

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

._add_16gty_457 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_16gty_457 input {
    font-size: 12.5px;
  }
}

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

/* ---------- empty and broken ---------- */
._empty_16gty_496 {
  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_16gty_496 span {
  font-size: 11.5px;
  color: var(--tx-3);
  line-height: 1.6;
}

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

._broken_16gty_520 {
  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;
}
._panel_1t32x_1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
}

/* 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_1t32x_14 {
  display: grid;
  grid-template-columns: 220px 4px 1fr;
  flex: 1;
  min-height: 0;
}

._resizer_1t32x_21 {
  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_1t32x_21:hover {
  background: var(--accent);
}

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

._service_1t32x_45 {
  margin-bottom: 10px;
}

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

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

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

._op_1t32x_74 {
  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_1t32x_74:hover {
  background: var(--s2);
}

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

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

._opOn_1t32x_91 ._opPath_1t32x_95 {
  color: var(--tx);
}

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

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

._post_1t32x_123 {
  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_1t32x_129 {
  color: var(--warn);
}

._del_1t32x_133 {
  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_1t32x_143 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

._contract_1t32x_150,
._line_1t32x_151,
._tabs_1t32x_152 {
  flex: none;
}

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

._contractIcon_1t32x_165,
._sendIcon_1t32x_166 {
  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_1t32x_165 {
  color: var(--accent-hi);
}

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

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

._badge_1t32x_190 {
  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_1t32x_151 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bd);
}

._url_1t32x_208,
._urlInput_1t32x_209 {
  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_1t32x_209 {
  border-color: var(--accent-line);
  outline: none;
}

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

._send_1t32x_166 {
  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_1t32x_166:disabled {
  opacity: 0.6;
  cursor: default;
}

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

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

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

._tab_1t32x_152 {
  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_1t32x_152:hover {
  color: var(--tx-2);
}

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

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

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

._paneBody_1t32x_308 {
  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_1t32x_319 {
  color: var(--tx-3);
  font-size: 11.5px;
  margin: 0;
}

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

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

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

._kv_1t32x_326 input,
._varSet_1t32x_351 input,
._varSet_1t32x_351 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-mono);
  font-size: 11px;
  min-width: 0;
}

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

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

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

._response_1t32x_259 ._kvs_1t32x_326 {
  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_1t32x_395 {
  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_1t32x_395 span:first-child {
  color: var(--tx-3);
}

._body_1t32x_409 {
  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_1t32x_409:focus {
  outline: none;
  border-color: var(--accent-line);
}

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

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

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

._varName_1t32x_448 {
  font-family: var(--font-mono);
  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_1t32x_458 {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx-2);
}

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

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

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

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

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

._varSet_1t32x_351 input {
  flex: 1;
}

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

._responseHead_1t32x_506 {
  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_1t32x_517 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

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

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

._error_1t32x_541 {
  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_1t32x_552 {
  margin: 0 12px 10px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

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

._copy_1t32x_566 {
  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_1t32x_566:hover {
  color: var(--tx);
  border-color: var(--bd-2);
}

/* ---------- empty ---------- */
._empty_1t32x_583 {
  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_1t32x_583 svg {
  margin: 0 auto;
  color: var(--tx-3);
}

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

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

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

._primary_1t32x_617 {
  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_1aust_2 {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  /* Room for the terminal's own edge, so glyphs don't touch the panel border. */
  padding: 6px 0 0 8px;
}

/* 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_1aust_2[data-visible='false'] {
  display: none;
}

._host_1aust_21 {
  flex: 1;
  min-height: 0;
  min-width: 0;
}

/* xterm sizes its own canvas; this keeps its scrollbar in the app's idiom. */
._host_1aust_21 .xterm-viewport {
  scrollbar-width: thin;
  background: transparent !important;
}

._host_1aust_21 .xterm-viewport::-webkit-scrollbar {
  width: 9px;
}

._host_1aust_21 .xterm-viewport::-webkit-scrollbar-thumb {
  background: var(--bd-2);
  border-radius: 5px;
}

._ended_1aust_42 {
  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;
}
/* 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_1wpak_4 {
  padding: 4px 7px 14px;
  min-height: 0;
}

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

._section_1wpak_19 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 5px;
}

._sectionLabel_1wpak_26 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The only section that is a problem rather than a state, so it is the only
   one in the warning colour. --warn and not --err: nothing is broken or lost,
   there is something to do. */
._section_1wpak_19[data-tone='conflicted'] ._sectionLabel_1wpak_26 {
  color: var(--warn);
}

._section_1wpak_19[data-tone='staged'] ._sectionLabel_1wpak_26 {
  color: var(--git-add);
}

._section_1wpak_19[data-tone='unstaged'] ._sectionLabel_1wpak_26 {
  color: var(--git-mod);
}

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

._file_1wpak_54 {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background var(--dur);
}

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

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

._kind_1wpak_74 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
  text-align: center;
}

._kind_1wpak_74[data-status='M'] {
  color: var(--git-mod);
}

._kind_1wpak_74[data-status='A'] {
  color: var(--git-add);
}

._kind_1wpak_74[data-status='D'] {
  color: var(--git-del);
}

/* Clip the start of the path, not the filename. */
._path_1wpak_95 {
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: left;
  min-width: 0;
}

._counts_1wpak_107 {
  display: flex;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  flex: none;
}

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

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

._binary_1wpak_123 {
  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_1wpak_129 {
  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. */
._row_1wpak_140 {
  display: flex;
  align-items: center;
  border-radius: var(--r-xs);
}

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

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

._actions_1wpak_154,
._confirm_1wpak_155 {
  display: flex;
  align-items: center;
  gap: 1px;
  padding-right: 4px;
  flex: none;
}

/* Quiet until you're on the row — the file list is for reading first. */
._actions_1wpak_154 {
  opacity: 0;
}

._row_1wpak_140:hover ._actions_1wpak_154,
._row_1wpak_140[data-on='true'] ._actions_1wpak_154 {
  opacity: 1;
}

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

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

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

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

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

._confirmYes_1wpak_193 {
  background: var(--err);
  color: #fff;
}

._stageAll_1wpak_211 {
  margin-left: auto;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  font-size: 10px;
  font-weight: 600;
  color: var(--tx-3);
}

._stageAll_1wpak_211:hover {
  background: var(--s3);
  color: var(--tx);
}
/* 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. */
/* A visible boundary, not a hairline. This is where one section of the column
   ends and another begins, and `--bd` is the same near-invisible line used
   between rows *within* a list — which is the wrong weight for the edge
   between two of them. */
._panel_154qw_10 {
  border-top: 1px solid var(--bd-2);
  margin-top: 4px;
  flex: none;
}

/* Reads as a section header, in the same voice as Conflicts / Staged /
   Unstaged above it: small, uppercase, tracked, and its own colour. It was
   sentence case in the body text colour, which made the one heading you can
   actually click the least heading-like thing in the column.
   
   `--tx-2` rather than a status colour, deliberately: those three say
   something about the state of your work, and this is a place to put things,
   not a state to act on. Distinct by being neutral among them. */
._head_154qw_24 {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 10px 10px 9px;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-2);
  text-align: left;
  cursor: pointer;
}

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

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

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

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

/* Matching .sectionCount in the file list: same size, same colour, tabular so
   the number does not jitter as it changes. */
._count_154qw_60 {
  margin-left: auto;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}

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

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

._input_154qw_82 {
  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_154qw_82:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--s1);
}

._input_154qw_82:disabled {
  opacity: 0.5;
}

._primary_154qw_104,
._ghost_154qw_105,
._danger_154qw_106,
._undo_154qw_107 {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex: none;
}

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

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

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

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

._primary_154qw_104:disabled,
._ghost_154qw_105: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_154qw_152 {
  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_154qw_163,
._empty_154qw_164,
._hint_154qw_165 {
  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_154qw_174 {
  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_154qw_174 p {
  margin: 0;
}

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

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

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

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

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

._message_154qw_226 {
  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_154qw_236 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: var(--tx-3);
}

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

._acts_154qw_249 {
  display: flex;
  gap: 5px;
  flex: none;
}
/* Unified diff rendering — `.dwrap` in prototype/orc.html. */
._diff_gwijq_2 {
  min-height: 0;
  background: var(--code-bg);
}

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

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

._hunkHead_gwijq_25 {
  padding: 3px 12px;
  background: var(--s2);
  color: var(--tx-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  border-top: 1px solid var(--bd);
}

._line_gwijq_34 {
  display: grid;
  grid-template-columns: 44px 44px 14px minmax(0, 1fr);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.65;
}

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

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

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

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

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

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

._code_gwijq_73 {
  padding-right: 14px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  -webkit-user-select: text;
  user-select: text;
}

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

/* Side-by-side. Each row is a grid of two halves, and each half its own
   gutter+code grid, so a line that wraps on one side grows the whole row and
   the two sides stay aligned without any scroll syncing. */
._srow_gwijq_91 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.65;
}

._half_gwijq_99 {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  min-width: 0;
}

._half_gwijq_99[data-side='new'] {
  border-left: 1px solid var(--bd);
}

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

._half_gwijq_99[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. */
._half_gwijq_99[data-kind='empty'] {
  background: var(--s2);
}

/* 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. */
._line_gwijq_34[data-active='true'],
._srow_gwijq_91[data-active='true'] {
  box-shadow: inset 2px 0 0 var(--accent);
}

._line_gwijq_34,
._srow_gwijq_91 {
  cursor: default;
}
/* 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_3y4ao_3 {
  border-top: 1px solid var(--bd);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: none;
}

/* Wraps the textarea so the drafting skeleton can sit exactly over its box. */
._field_3y4ao_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_3y4ao_20 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 9px 0;
  pointer-events: none;
}

._line_3y4ao_30 {
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--s3) 0%, var(--s4) 50%, var(--s3) 100%);
  background-size: 200% 100%;
  animation: _commitShimmer_3y4ao_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_3y4ao_30:last-child {
  width: 58%;
}

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

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

._message_3y4ao_56 {
  width: 100%;
  resize: vertical;
  padding: 6px 8px;
  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_3y4ao_56:focus {
  outline: none;
  border-color: var(--accent);
}

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

._reroll_3y4ao_80 {
  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_3y4ao_80:hover:not(:disabled) {
  background: var(--s3);
  color: var(--tx);
}

._reroll_3y4ao_80:disabled {
  opacity: 0.5;
}

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

._go_3y4ao_100:disabled {
  opacity: 0.45;
}
/* 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_1cwd4_5 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 14px 14px;
}

._head_1cwd4_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_1cwd4_24 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--tx-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

._field_1cwd4_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_1cwd4_35 > span {
  flex: none;
  width: 42px;
}

._input_1cwd4_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-mono);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--tx);
}

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

._note_1cwd4_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_1cwd4_80 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

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

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

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

._primary_1cwd4_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_1cwd4_88:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Mirrors `.stepper` / `.stg` / `.sdet` in prototype/orc.html. */
._ship_iip5t_2 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* ------------------------------------------------------------- the steps -- */
._stepper_iip5t_1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 0;
  padding: 11px 8px 9px;
  list-style: none;
  flex: none;
}

._slot_iip5t_20 {
  display: flex;
  min-width: 0;
}

._step_iip5t_1 {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px 3px;
  border-radius: 8px;
}

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

/* 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_iip5t_1::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 50%;
  left: -50%;
  height: 1.5px;
  background: var(--bd-2);
  z-index: 0;
}

._slot_iip5t_20:first-child ._step_iip5t_1::before {
  display: none;
}

._step_iip5t_1[data-state='done']::before {
  background: var(--ok);
}

._node_iip5t_63 {
  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_iip5t_1[data-state='done'] ._node_iip5t_63 {
  background: var(--ok);
  border-color: var(--ok);
  color: #08130a;
}

._step_iip5t_1[data-state='now'] ._node_iip5t_63 {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

._stepLabel_iip5t_89 {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tx-2);
  white-space: nowrap;
}

._step_iip5t_1[data-on='true'] ._stepLabel_iip5t_89 {
  color: var(--tx);
}

._stepNote_iip5t_100 {
  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_iip5t_114 {
  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_iip5t_125 {
  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_iip5t_136 {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 10.5px;
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

._line_iip5t_149 {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--tx-2);
}

._line_iip5t_149 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_iip5t_167 {
  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_iip5t_183 {
  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_iip5t_183:hover:not(:disabled) {
  background: var(--s3);
  color: var(--tx-2);
}

._headBtn_iip5t_183: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_iip5t_220 {
    display: none;
  }
}

._acts_iip5t_225 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

._btn_iip5t_231 {
  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_iip5t_231:hover {
  background: var(--s3);
  border-color: var(--accent);
}

._go_iip5t_249 {
  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_iip5t_249: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_iip5t_269 {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--bd);
}

/* ------------------------------------------------------------- commits -- */
._commits_iip5t_276 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

._commit_iip5t_276 {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 0;
  font-size: 11px;
  min-width: 0;
  border-bottom: 1px solid var(--bd);
}

._commit_iip5t_276: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_iip5t_276[data-pushed='true'] ._subject_iip5t_305 {
  color: var(--tx-3);
}

._commit_iip5t_276[data-pushed='true'] ._sha_iip5t_309,
._commit_iip5t_276[data-pushed='true'] ._when_iip5t_310 {
  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_iip5t_276[data-edge='true'] {
  margin-top: 5px;
  padding-top: 9px;
  border-top: 1px dashed var(--bd-3);
}

._sha_iip5t_309 {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--tx-3);
  flex: none;
}

._subject_iip5t_305 {
  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_iip5t_343 {
  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_iip5t_343:hover:not(:disabled) {
  background: var(--s3);
}

._more_iip5t_343: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_iip5t_367 {
  color: var(--tx-3);
}

._when_iip5t_310 {
  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_iip5t_382 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

._chk_iip5t_388 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--tx-2);
}

._ok_iip5t_396 {
  color: var(--ok);
  display: flex;
}

._bad_iip5t_401 {
  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_iip5t_408 {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--tx-3);
}

._rawWrap_iip5t_415 {
  font-size: 11px;
}

._rawToggle_iip5t_419 {
  cursor: pointer;
  color: var(--tx-3);
  font-size: 10.5px;
  list-style: none;
}

._rawToggle_iip5t_419::-webkit-details-marker {
  display: none;
}

._rawToggle_iip5t_419::before {
  content: '▸ ';
}

._rawWrap_iip5t_415[open] ._rawToggle_iip5t_419::before {
  content: '▾ ';
}

._rawWrap_iip5t_415[open] ._rawToggle_iip5t_419 {
  margin-bottom: 6px;
}

/* git's own words, kept verbatim. */
._raw_iip5t_415 {
  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_iip5t_415[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_iip5t_464 {
  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_iip5t_479 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--tx);
}

._right_iip5t_485 {
  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_iip5t_495 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  min-height: 0;
}

._prCard_iip5t_506 {
  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_iip5t_506:hover {
  background: var(--s3);
}

._prIcon_iip5t_522 {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  flex: none;
}

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

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

._prNum_iip5t_547 {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-hi, var(--accent));
}

._prTitle_iip5t_554 {
  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_iip5t_564 {
  font-size: 10.5px;
  color: var(--tx-3);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._prGo_iip5t_573 {
  color: var(--tx-3);
  display: flex;
  flex: none;
}

._prCard_iip5t_506:hover ._prGo_iip5t_573 {
  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_iip5t_585 {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--tx-3);
}

._pill_iip5t_592 {
  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_iip5t_592[data-state='open'] {
  background: var(--ok-soft, rgba(74, 176, 108, 0.16));
  color: var(--ok);
}

._pill_iip5t_592[data-state='merged'] {
  background: rgba(167, 139, 250, 0.16);
  color: #a78bfa;
}

._pill_iip5t_592[data-state='closed'] {
  background: var(--err-soft);
  color: var(--err);
}

/* Opening a new pull request: source, target, go. */
._create_iip5t_623 {
  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_iip5t_638 {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
}

._selectWrap_iip5t_638 > svg {
  position: absolute;
  right: 7px;
  color: var(--tx-3);
  pointer-events: none;
}

._createLine_iip5t_652 {
  font-size: 11.5px;
  color: var(--tx-2);
}

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

._select_iip5t_638 {
  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-mono);
  font-size: 11px;
  max-width: 190px;
}

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

/* The create button is an anchor, so it needs the link reset too. */
._go_iip5t_249 {
  text-decoration: none;
}
/* 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_lk4qa_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_lk4qa_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_lk4qa_28 {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  height: 34px;
  flex: none;
  border-bottom: 1px solid var(--bd);
  overflow-x: auto;
  scrollbar-width: none;
}

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

._tab_lk4qa_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_lk4qa_28:hover {
  color: var(--tx-2);
  background: var(--s2);
}

._tab_lk4qa_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_lk4qa_28 svg {
  opacity: 0.7;
  flex: none;
}

._tab_lk4qa_28[data-on='true'] svg {
  opacity: 1;
}

._count_lk4qa_81 {
  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_lk4qa_95 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

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

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

._branch_lk4qa_117 {
  font-family: var(--font-mono);
  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_lk4qa_129 {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

._body_lk4qa_129[data-wide='true'] {
  grid-template-columns: 288px minmax(0, 1fr);
}

/* 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_lk4qa_145 > * {
  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_lk4qa_145 {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

._body_lk4qa_129[data-wide='true'] ._list_lk4qa_145 {
  border-right: 1px solid var(--bd);
}

._pane_lk4qa_3 {
  min-height: 0;
  overflow: auto;
  background: var(--code-bg);
}

._notice_lk4qa_171 {
  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_lk4qa_171 span {
  flex: 1;
}

._dismiss_lk4qa_188 {
  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_lk4qa_188:hover {
  background: var(--s3);
  color: var(--tx);
}

._icon_lk4qa_102[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_lk4qa_212 {
  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_lk4qa_212 {
  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_lk4qa_212:hover {
  color: var(--tx);
}

._backActs_lk4qa_243 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

._backAct_lk4qa_243 {
  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_lk4qa_243:hover {
  color: var(--tx);
  border-color: var(--bd-3);
}

/* Armed, after one press. Reads as a warning before the press that matters. */
._backAct_lk4qa_243[data-danger='true'] {
  background: var(--err-soft);
  border-color: var(--err);
  color: var(--err);
}

._backName_lk4qa_276 {
  min-width: 0;
  font-family: var(--font-mono);
  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_lk4qa_291 {
  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_lk4qa_291 p {
  margin: 0;
}

._conflict_lk4qa_291 code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tx);
}
/* 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_1m6hl_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_1m6hl_15 {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

._surface_1m6hl_15[data-visible='false'] {
  display: none;
}
._backdrop_i6a40_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_i6a40_1 0.14s ease;
}

@keyframes _fade_i6a40_1 {
  from {
    opacity: 0;
  }
}

/* Mirrors .modal / .m-hd / .m-bd / .m-ft in prototype/orc.html. */
._modal_i6a40_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_i6a40_1 0.17s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes _pop_i6a40_1 {
  from {
    transform: translateY(-6px) scale(0.985);
    opacity: 0;
  }
}

._head_i6a40_38 {
  display: flex;
  align-items: center;
  padding: 13px 15px;
  border-bottom: 1px solid var(--bd);
}

._title_i6a40_45 {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

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

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

._body_i6a40_66 {
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

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

._field_i6a40_73 > label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-2);
}

._folder_i6a40_85 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-2);
  background: var(--s2);
  color: var(--tx-3);
  text-align: left;
  transition:
    border-color var(--dur),
    background var(--dur);
}

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

._path_i6a40_106 {
  font-family: var(--font-mono);
  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;
}

._change_i6a40_119 {
  font-size: 11px;
  color: var(--accent-hi);
  font-weight: 600;
  flex: none;
}

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

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

._seg_i6a40_141 {
  display: flex;
  padding: 2px;
  background: var(--s3);
  border-radius: var(--r-sm);
  gap: 2px;
}

._seg_i6a40_141 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_i6a40_141 button:hover {
  color: var(--tx);
}

._seg_i6a40_141 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_i6a40_173 {
  font-size: 10.5px;
  color: var(--tx-3);
  line-height: 1.45;
}

._error_i6a40_179 {
  font-size: 11px;
  line-height: 1.5;
  color: var(--err);
}

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

._foot_i6a40_189 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-top: 1px solid var(--bd);
  background: var(--s2);
}

._note_i6a40_198 {
  font-size: 10.5px;
  color: var(--tx-3);
  margin-right: auto;
}

._primary_i6a40_204 {
  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_i6a40_204:hover:not(:disabled) {
  background: var(--accent-hi);
}

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

._ghost_i6a40_226 {
  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_i6a40_226:hover {
  background: var(--s3);
  color: var(--tx);
}
._history_1gyzu_1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
}

/* ---------- header ---------- */
._head_1gyzu_11 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--bd);
  flex: none;
}

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

._head_1gyzu_11 p {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--tx-3);
  max-width: 560px;
  line-height: 1.55;
}

._search_1gyzu_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_1gyzu_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_1gyzu_60 {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--tx-3);
}

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

/* ---------- filters ---------- */
._filters_1gyzu_76 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--bd);
  flex: none;
}

._qf_1gyzu_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_1gyzu_85:hover {
  background: var(--s2);
  color: var(--tx);
}

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

._qf_1gyzu_85 b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tx-3);
}

._sep_1gyzu_114 {
  width: 1px;
  height: 15px;
  margin: 0 4px;
  background: var(--bd-2);
  flex: none;
}

._tally_1gyzu_122 {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--tx-3);
}

/* ---------- rows ---------- */
._body_1gyzu_129 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 12px 18px;
}

._row_1gyzu_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_1gyzu_136:not(._headRow_1gyzu_148):hover {
  background: var(--s2);
}

._headRow_1gyzu_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_1gyzu_164,
._when_1gyzu_165 {
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._when_1gyzu_165 {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

._name_1gyzu_177 {
  min-width: 0;
}

._nameLine_1gyzu_181 {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._preview_1gyzu_188 {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._branch_1gyzu_197 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._state_1gyzu_209 {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

._pill_1gyzu_215 {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

._pill_1gyzu_215[data-kind='open'] {
  background: var(--ok-soft);
  color: var(--ok);
}

._pill_1gyzu_215[data-kind='closed'] {
  background: var(--s4);
  color: var(--tx-3);
}

._pill_1gyzu_215[data-kind='archived'] {
  color: var(--tx-3);
  border: 1px solid var(--bd-2);
}

._turns_1gyzu_240 {
  font-size: 11px;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

._acts_1gyzu_247 {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity var(--dur);
}

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

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

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

._mini_1gyzu_260:disabled {
  opacity: 0.3;
  cursor: default;
}

._empty_1gyzu_279 {
  padding: 40px 20px;
  text-align: center;
  color: var(--tx-3);
  font-size: 12.5px;
}

/* ---------- read-only transcript ---------- */
._detail_1gyzu_287 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  z-index: 5;
}

._detailHead_1gyzu_296 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bd);
  background: var(--s1);
  flex: none;
}

._detailTitle_1gyzu_306 {
  min-width: 0;
}

._detailName_1gyzu_310 {
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

._detailActs_1gyzu_325 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

._btn_1gyzu_333 {
  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_1gyzu_333:hover:not(:disabled) {
  border-color: var(--bd-3);
  color: var(--tx);
}

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

._btnPrimary_1gyzu_357 {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-hi);
}

._detailBody_1gyzu_363 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Why this one can be read but not continued. */
._blocked_1gyzu_370 {
  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_1gyzu_11 {
    flex-wrap: wrap;
  }

  ._search_1gyzu_35 {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  ._filters_1gyzu_76 {
    overflow-x: auto;
    scrollbar-width: none;
  }

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

  ._tally_1gyzu_122 {
    display: none;
  }

  ._row_1gyzu_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_1gyzu_148,
  ._agent_1gyzu_164,
  ._branch_1gyzu_197,
  ._turns_1gyzu_240 {
    display: none;
  }

  /* No hover to reveal them on a touch screen, so they are simply there. */
  ._acts_1gyzu_247 {
    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_n5mpg_1 {
  display: grid;
  grid-template-columns: 196px 1fr;
  min-height: 0;
  background: var(--page);
}

/* ---------- nav ---------- */
._nav_n5mpg_10 {
  border-right: 1px solid var(--bd);
  background: var(--s1);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
}

._navTitle_n5mpg_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_n5mpg_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_n5mpg_29:hover {
  background: var(--s2);
}

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

._navFoot_n5mpg_54 {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--bd);
}

/* ---------- body ---------- */
._body_n5mpg_61 {
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

._head_n5mpg_68 {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--bd);
  background: var(--bg);
}

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

._head_n5mpg_68 p {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--tx-3);
  max-width: 640px;
  line-height: 1.55;
}

._pane_n5mpg_89 {
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

/* ---------- setting rows ---------- */
._matrix_n5mpg_99 {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--s2);
}

._row_n5mpg_105 {
  display: grid;
  grid-template-columns: 1fr 216px;
  gap: 12px;
  align-items: center;
  padding: 9px 11px;
  border-bottom: 1px solid var(--bd);
}

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

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

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

._seg_n5mpg_129 {
  display: flex;
  padding: 2px;
  background: var(--s3);
  border-radius: var(--r-sm);
  gap: 2px;
}

._seg_n5mpg_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_n5mpg_129 button:hover:not(:disabled) {
  color: var(--tx);
}

._seg_n5mpg_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_n5mpg_129 button:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ---------- remote access ---------- */
._remote_n5mpg_170 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

._section_n5mpg_182 {
  /* 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_n5mpg_198 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 16px;
  border-bottom: 1px solid var(--bd);
  background: var(--accent-soft);
}

._qr_n5mpg_208 {
  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_n5mpg_218 {
  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_n5mpg_228 {
  font-size: 11px;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}

._device_n5mpg_234 {
  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_n5mpg_234:last-child {
  border-bottom: 0;
}

._none_n5mpg_248 {
  padding: 13px 11px 15px;
  font-size: 11.5px;
  color: var(--tx-3);
}

._confirm_n5mpg_254 {
  display: flex;
  gap: 6px;
  flex: none;
}

._primary_n5mpg_260,
._ghost_n5mpg_261,
._danger_n5mpg_262 {
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-family: var(--font-ui);
  flex: none;
}

._primary_n5mpg_260 {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

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

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

._danger_n5mpg_262 {
  background: var(--err-soft);
  color: var(--err);
  font-weight: 600;
}

/* Copy, copy link, cancel — under the countdown, wrapping on a narrow pane. */
._pairActs_n5mpg_295 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
}

._pairActs_n5mpg_295 ._ghost_n5mpg_261 {
  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_n5mpg_1 {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  ._nav_n5mpg_10 {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--bd);
    overflow-x: auto;
    scrollbar-width: none;
  }

  ._nav_n5mpg_10::-webkit-scrollbar {
    display: 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_n5mpg_18 {
    display: none;
  }

  ._navFoot_n5mpg_54 {
    margin-left: auto;
    padding: 0;
    border: 0;
  }

  ._navItem_n5mpg_29 {
    width: auto;
    height: 30px;
    white-space: nowrap;
    flex: none;
  }

  ._pane_n5mpg_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_n5mpg_105 {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  ._qr_n5mpg_208 {
    width: 168px;
    height: 168px;
  }
}

._primary_n5mpg_260:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Mirrors `.rail` in prototype/orc.html. */
._rail_b0kvz_1 {
  background: var(--s1);
  border-right: 1px solid var(--bd);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  min-width: 0;
}

._head_b0kvz_11 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 8px 5px 12px;
}

._label_b0kvz_18 {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tx-3);
}

._add_b0kvz_26 {
  margin-left: auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--tx-2);
}

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

._list_b0kvz_41 {
  overflow-y: auto;
  padding: 2px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

._empty_b0kvz_50 {
  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_b0kvz_60 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: none;
}

._agent_b0kvz_67 {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 4px;
}

._name_b0kvz_74 {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

._gear_b0kvz_85 {
  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_b0kvz_60:hover ._gear_b0kvz_85 {
  opacity: 1;
}

._gear_b0kvz_85: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_b0kvz_115 {
  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_b0kvz_130 {
  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_b0kvz_115:hover ._more_b0kvz_130,
._more_b0kvz_130:focus-visible,
._more_b0kvz_130[aria-expanded='true'] {
  opacity: 1;
}

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

._more_b0kvz_130:disabled {
  display: none;
}

._scrim_b0kvz_162 {
  position: fixed;
  inset: 0;
  z-index: 60;
  border: 0;
  padding: 0;
  background: transparent;
}

._pop_b0kvz_171 {
  position: fixed;
  z-index: 61;
  min-width: 190px;
  padding: 4px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-md);
  background: var(--s2);
  box-shadow: var(--shadow);
}

._item_b0kvz_182 {
  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_b0kvz_182: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_b0kvz_206 {
  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_b0kvz_1 0.14s ease;
}

@keyframes _fade_b0kvz_1 {
  from {
    opacity: 0;
  }
}

._modal_b0kvz_224 {
  width: 460px;
  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_b0kvz_171 0.17s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes _pop_b0kvz_171 {
  from {
    transform: translateY(-6px) scale(0.985);
    opacity: 0;
  }
}

._instance_b0kvz_242 {
  display: flex;
  align-items: center;
  gap: 8px;
  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. */
  padding: 6px 32px 6px 10px;
  border-radius: var(--r-md);
  position: relative;
  text-align: left;
  transition: background var(--dur);
}

._instance_b0kvz_242:not(:disabled):hover {
  background: var(--s2);
}

._instance_b0kvz_242:disabled {
  cursor: default;
  opacity: 0.55;
}

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

._instance_b0kvz_242[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_b0kvz_288 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mute);
  flex: none;
}

._dot_b0kvz_288[data-status='working'] {
  background: var(--warn);
  animation: _pulse_b0kvz_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_b0kvz_288[data-status='waiting'] {
  background: var(--attn);
}

._dot_b0kvz_288[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_b0kvz_288[data-state='preparing'] {
  background: var(--mute);
  animation: _pulse_b0kvz_1 1.2s ease-in-out infinite;
}

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

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

/* What the row is, now that the slot number is gone. Monospace because it is
   a branch and they are read by their shape; ellipsis because the rail is
   232px and a feature branch is not. */
._branch_b0kvz_333 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--tx-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._instance_b0kvz_242[data-on='true'] ._branch_b0kvz_333 {
  color: var(--tx);
}

/* 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_b0kvz_350 {
  font-size: 10px;
  color: var(--tx-3);
  flex: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

._pending_b0kvz_364 {
  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_b0kvz_381 {
  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_b0kvz_392 {
  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_b0kvz_381 + ._carry_b0kvz_381::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_b0kvz_381[data-kind='staged'] {
  color: var(--git-add);
}

._carry_b0kvz_381[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_b0kvz_381[data-kind='unpushed'] {
  color: var(--accent);
}
._app_134i1_1 {
  height: 100%;
  display: grid;
  grid-template-rows: var(--titlebar-h) 1fr;
  background: var(--bg);
  min-height: 0;
}

/* ---------- titlebar ---------- */
._titlebar_134i1_10 {
  display: flex;
  align-items: center;
  gap: 10px;
  /* left padding clears the macOS traffic lights drawn over the window */
  padding: 0 10px 0 78px;
  border-bottom: 1px solid var(--bd);
  background: var(--s1);
  -webkit-app-region: drag;
}

._titlebar_134i1_10 button {
  -webkit-app-region: no-drag;
}

._brand_134i1_25 {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

._tbRight_134i1_31 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* matches .tb-btn in the prototype */
._tbBtn_134i1_39 {
  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_134i1_39:hover {
  background: var(--s3);
  color: var(--tx);
}

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

/* A badged button reads as "live" even when the panel is closed. */
._tbBtn_134i1_39[data-badged='true'] {
  color: var(--tx);
}

/* matches .cbadge in the prototype */
._badge_134i1_68 {
  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_134i1_89 {
  position: relative;
  min-height: 0;
  display: grid;
}

/* Thin left rail + main pane (spec 2.1.3). */
._shell_134i1_96 {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 0;
}

/* Both exist only below the breakpoint. Declared here so the wide layout is
   explicit about not having them rather than inheriting their absence. */
._hamburger_134i1_104 {
  display: none;
}

._scrim_134i1_108 {
  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_134i1_125 {
  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_134i1_1 180ms ease 700ms forwards;
}

@keyframes _offlineIn_134i1_1 {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._offline_134i1_125 {
    animation-duration: 1ms;
  }
}

._offlineCard_134i1_154 {
  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_134i1_154 strong {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--tx);
}

._offlineCard_134i1_154 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_134i1_182 {
  width: 9px;
  height: 9px;
  margin-bottom: 3px;
  border-radius: 50%;
  background: var(--warn);
  animation: _offlinePulse_134i1_182 1.4s ease-in-out infinite;
}

@keyframes _offlinePulse_134i1_182 {
  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) {
  ._shell_134i1_96 {
    /* 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_134i1_96 > 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_134i1_96[data-rail='true'] > nav {
    transform: translateX(0);
  }

  ._scrim_134i1_108 {
    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_134i1_96[data-rail='true'] ._scrim_134i1_108 {
    opacity: 1;
    pointer-events: auto;
  }

  ._hamburger_134i1_104 {
    display: grid;
    place-items: center;
    width: 28px;
    height: 24px;
    margin-right: 2px;
    border-radius: var(--r-sm);
    color: var(--tx-2);
  }

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

  /* Same reasoning as the tab strip: bigger targets, bigger glyphs. */
  ._tbBtn_134i1_39 {
    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_134i1_10 {
  padding-left: 8px;
}

/* No hover states on a touch screen: `:hover` sticks after a tap, leaving
   whatever you last touched looking permanently focused. */
@media (hover: none) {
  ._hamburger_134i1_104:hover {
    background: none;
  }
}
/* 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 verbatim from prototype/orc.html so the real app
   and the prototype stay pixel-identical. Change values here, never
   in component modules.
   ============================================================ */
: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;

  --accent: #6e7aff;
  --accent-hi: #8b94ff;
  --accent-soft: rgba(110, 122, 255, 0.14);
  --accent-line: rgba(110, 122, 255, 0.38);

  --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);

  /* 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;
  --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). */
  --titlebar-h: 32px;
}

:root[data-theme='dark'] {
  --page: #08090b;
  --bg: #0b0c0e;
  --s1: #0f1113;
  --s2: #141619;
  --s3: #1a1d21;
  --s4: #22262b;
  --bd: #17191c;
  --bd-2: #202327;
  --bd-3: #2c3036;
  --tx: #e7e9ed;
  --tx-2: #98a0ab;
  --tx-3: #6a727d;
  --shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.4);
  --code-bg: #0d0f11;
  --add: rgba(63, 185, 80, 0.1);
  --del: rgba(240, 82, 82, 0.09);
}

:root[data-theme='light'] {
  --page: #edeef1;
  --bg: #fbfbfc;
  --s1: #ffffff;
  --s2: #f6f7f9;
  --s3: #eff1f4;
  --s4: #e5e8ed;
  --bd: #eceef1;
  --bd-2: #dfe3e8;
  --bd-3: #cbd1d9;
  --tx: #14161a;
  --tx-2: #596170;
  --tx-3: #858c99;
  --shadow: 0 24px 60px -24px rgba(20, 25, 40, 0.32), 0 1px 3px rgba(20, 25, 40, 0.1);
  --code-bg: #f7f8fa;
  --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;
}

/* ============================================================
   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;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-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;
}

/* 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;
  }
}