color: #fff;
  font: 600 10px/16px var(--cc-font);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.crew-chip.seen .crew-chip-count {
  opacity: 0.75;
}
.crew-pill {
  flex: none;
  padding: 0 7px;
  border: 1px solid var(--cc-line);
  border-radius: 999px;
  font-size: 0.92em;
  white-space: nowrap;
}
.crew-pill.strong {
  border-color: var(--cc-fg);
  font-weight: 600;
}
.crew-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.crew-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* ---------- the members' panels: the member talks, in pixel (owner, 2026-10-08; fix bank 0003) ----------
   Board https://claude.ai/artifact/FC1ydz6N6LVgzRtZfQNi4X («E-Talk-Pixel»). A layer over the transcript like the model
   picker (out of the flow: opening it never pushes the conversation), above the strip at the composer's width. Frame,
   corners and lift from the pixel house style (ornus-company/webview/pixel.css, design-system §12); the colour is the
   member's own (dev bank 0121's colours, carried into its panel by the owner's pick); reading text is the chat font,
   larger, each bubble in its own text's direction. */
.m-guide {
  --m: #1fae98;
  --m-btn: #1fae98;
  --m-ink: #04241f;
}
.m-guard {
  --m: #4d7cfe;
  --m-btn: #3b66e6;
  --m-ink: #ffffff;
}
.m-reviewer {
  --m: #9567f5;
  --m-btn: #7c4fe0;
  --m-ink: #ffffff;
}
.crew-pop {
  --m-frame: color-mix(in srgb, var(--m) 62%, var(--cc-bg));
  --m-bg: color-mix(in srgb, var(--m) 6%, var(--cc-bg));
  --m-bub: color-mix(in srgb, var(--m) 15%, var(--cc-bg));
  --m-soft: color-mix(in srgb, var(--m) 26%, var(--cc-bg));
  --m-line: color-mix(in srgb, var(--m) 34%, var(--cc-bg));
  position: absolute;
  z-index: 10;
  bottom: 100%;
  inset-inline: 0;
  margin-bottom: 8px;
  filter: var(--px-shadow);
}
.crew-panel {
  padding: 2px;
  background: var(--m-frame);
  clip-path: var(--px-step);
}
.crew-in {
  display: flex;
  flex-direction: column;
  max-height: min(70vh, 560px);
  background: var(--m-bg);
  color: var(--cc-fg);
  font-size: calc(var(--cc-size) + 1px);
  line-height: 1.6;
  clip-path: var(--px-step);
}
.crew-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 9px;
  padding-inline: 14px 9px;
  border-bottom: 2px dotted var(--m-line);
}
.crew-head .grow {
  flex: 1;
}
.crew-plate {
  padding: 2px 9px;
  background: var(--m-btn);
  color: var(--m-ink);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 18px;
  white-space: nowrap;
  clip-path: var(--px-notch);
}
html:lang(en) .crew-plate {
  font-family: var(--cc-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}
.crew-count {
  color: var(--cc-fg2);
  font-size: 0.9em;
  white-space: nowrap;
}
.crew-icon-btn,
.crew-head-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-fg2);
  font: inherit;
  font-size: 0.9em;
  white-space: nowrap;
  cursor: pointer;
  clip-path: var(--px-notch);
}
.crew-head-btn {
  padding: 0 10px;
  background: var(--m-bub);
  color: var(--cc-fg);
}
.crew-icon-btn:hover,
.crew-head-btn:hover {
  background: var(--m-soft);
  color: var(--cc-fg);
}
.crew-talk {
  container-type: inline-size;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 14px 16px;
}
/* A section's name between two dotted pixel rules. */
.crew-sect {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cc-fg2);
  font-size: 0.88em;
  white-space: nowrap;
}
.crew-sect::before,
.crew-sect::after {
  content: '';
  flex: 1;
  border-top: 2px dotted var(--m-line);
}
.crew-sect b {
  font-weight: 600;
  color: var(--cc-fg);
}
.crew-day {
  color: var(--cc-fg2);
  font-size: 0.88em;
  text-align: center;
}
.crew-day.rev-auto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
}
/* One thing the member says: its figure on the first bubble, the owner's answers under each. */
.crew-say {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.crew-av {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
}
.crew-say.first .crew-av {
  background: var(--m-soft);
  clip-path: var(--px-notch);
}
.crew-say-col {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.crew-bub {
  box-sizing: border-box;
  max-width: 100%;
  padding: 11px 14px 10px;
  background: var(--m-bub);
  overflow-wrap: anywhere;
  clip-path: var(--px-step);
}
.crew-bub.wide {
  align-self: stretch;
  /* The Reviewer's cards: title, reason, who reviews and the stages each on its own breathing row (the reason sat glued
     under the title; owner, 2026-10-09). */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.crew-bub.wide > .crew-meta.top {
  margin: 0;
}
.crew-bub.wide > .rev-reason,
.crew-bub.wide > .rev-skip {
  margin-top: -4px;
  line-height: 1.6;
}
/* Rows in the UI's own words take the full width, so their own direction decides where they start. */
.crew-say-col > .crew-acts {
  align-self: stretch;
}
/* The Guard's panel (owner, 2026-10-09): an item's two actions under its card, and the places to allow (deepest first). */
.crew-say-col > .guard-item-acts {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.guard-item-places {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.guard-item-place {
  max-width: 100%;
  overflow: hidden;
  padding: 4px 10px;
  border: 1px solid var(--cc-line);
  border-radius: 6px;
  background: transparent;
  color: var(--cc-fg);
  font: inherit;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.guard-item-place code {
  font-family: var(--cc-mono);
  font-size: 0.92em;
}
.guard-item-place:hover,
.guard-item-place:focus-visible {
  background: var(--cc-hover);
}
/* Owner, 2026-10-12: a Guard card opens what it means under it (an expandable row: the caret on its head row). */
.crew-open {
  cursor: pointer;
}
.crew-open:focus-visible {
  outline: 1px solid var(--cc-focus);
  outline-offset: 2px;
}
.crew-open .gs-caret {
  color: var(--cc-fg2);
}
.guard-explain {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--cc-line);
  color: var(--cc-fg2);
  line-height: 1.6;
}
.guard-explain p {
  margin: 0;
}
.guard-explain .crew-acts {
  margin-top: 4px;
}
/* The pixel tail of the first bubble points at the speaker (the bubble's own corners are cut, so it lives outside). */
.crew-say.first.talks .crew-say-col::before {
  content: '';
  position: absolute;
  inset-inline-start: -8px;
  top: 12px;
  width: 8px;
  height: 8px;
  background: var(--m-bub);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%);
}
.crew-say.first.talks[dir='rtl'] .crew-say-col::before {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%, 0 100%);
}
/* A narrow panel (the side bar): the figure stands above its first bubble and every bubble takes the full width. */
@container (max-width: 420px) {
  .crew-say {
    flex-direction: column;
    gap: 8px;
  }
  .crew-say:not(.first) .crew-av {
    display: none;
  }
  .crew-say-col {
    align-self: stretch;
  }
  .crew-say.first.talks .crew-say-col::before,
  .crew-say.first.talks[dir='rtl'] .crew-say-col::before {
    inset-inline-start: 14px;
    top: -8px;
    clip-path: polygon(0 100%, 0 0, 50% 0, 50% 50%, 100% 50%, 100% 100%);
  }
}
.crew-say-text {
  font-size: calc(var(--cc-size) + 2px);
  line-height: 1.6;
}
.crew-say[dir='rtl'] .crew-say-text {
  line-height: 1.8;
}
.crew-quiet {
  color: var(--cc-fg2);
}
.crew-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
  font-size: 0.88em;
}
.crew-meta.top {
  margin: 0 0 6px;
}
.crew-tag {
  --t-bg: color-mix(in srgb, var(--t) 16%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  background: var(--t-bg);
  font-weight: 600;
  white-space: nowrap;
  clip-path: var(--px-notch);
}
.crew-tag > i {
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--t);
}
.t-bug,
.t-stop,
.t-urgent {
  --t: #e5484d;
}
.t-hardening,
.t-flag {
  --t: #e5a54b;
}
.t-maintenance {
  --t: #7f9cc9;
}
.t-ok {
  --t: #46a758;
}
.t-neutral {
  --t: var(--cc-fg2);
}
.crew-tag.t-urgent {
  background: var(--t);
  color: #ffffff;
}
.crew-tag.t-urgent > i {
  background: #ffffff;
}
.crew-proof {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cc-fg2);
}
.crew-proof.p-code {
  color: color-mix(in srgb, #46a758 70%, var(--cc-fg));
}
.crew-proof .ic {
  stroke-linecap: square;
}
.crew-code {
  max-width: 100%;
  overflow: hidden;
  padding: 0 6px;
  background: color-mix(in srgb, var(--cc-fg) 9%, transparent);
  font-family: var(--cc-mono);
  font-size: 0.95em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crew-where {
  color: var(--cc-fg2);
}
.crew-time {
  color: var(--cc-fg2);
  font-variant-numeric: tabular-nums;
}
.crew-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* Buttons: notched and flat, the main one in the member's colour; secondary on a filled ground with an inset line. */
.crew-pop .guide-btn {
  height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: 0;
  background: var(--m-bub);
  box-shadow: inset 0 0 0 2px var(--m-line);
  color: var(--cc-fg);
  font: inherit;
  font-size: 0.93em;
  white-space: nowrap;
  cursor: pointer;
  clip-path: var(--px-notch);
}
.crew-pop .guide-btn:hover:not(:disabled) {
  background: var(--m-soft);
}
.crew-pop .guide-btn.pri {
  background: var(--m-btn);
  box-shadow: none;
  color: var(--m-ink);
  font-weight: 700;
}
.crew-pop .guide-btn.pri:hover:not(:disabled) {
  background: var(--m-btn);
  opacity: 1;
  filter: brightness(1.1);
}
.crew-pop .guide-btn.ghost {
  background: transparent;
  box-shadow: none;
  color: var(--cc-fg2);
}
.crew-pop .guide-btn.ghost:hover:not(:disabled) {
  background: var(--m-bub);
  color: var(--cc-fg);
}
.crew-pop .guide-x {
  width: 30px;
  height: 30px;
  border-radius: 0;
  clip-path: var(--px-notch);
}
.crew-pop .guide-x:hover {
  background: var(--m-bub);
  color: var(--cc-fg);
}
.crew-pop .guide-btn:focus-visible,
.crew-pop .guide-x:focus-visible,
.crew-pop .guide-step:focus-visible,
.crew-icon-btn:focus-visible,
.crew-head-btn:focus-visible {
  outline: 2px solid var(--m);
  outline-offset: -2px;
}
/* The next steps: pixel rows like a game's choice menu; the recommended one framed in the member's colour. */
.crew-steps {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.guide-step {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: var(--m-bub);
  color: var(--cc-fg);
  font: inherit;
  font-size: calc(var(--cc-size) + 1px);
  text-align: start;
  cursor: pointer;
  clip-path: var(--px-notch);
}
.guide-step:hover {
  background: var(--m-soft);
}
.guide-step.rec {
  box-shadow: inset 0 0 0 2px var(--m);
}
.guide-step b {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--m-soft);
  font: 700 12px var(--cc-mono);
  clip-path: var(--px-notch);
}
.guide-step.rec b {
  background: var(--m-btn);
  color: var(--m-ink);
}
.guide-step .crew-text {
  flex: 1;
  min-width: 0;
}
.crew-rec {
  flex: none;
  color: var(--cc-fg2);
  font-size: 0.85em;
}
.guide-x {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cc-fg2);
  cursor: pointer;
}
.guide-btn:focus-visible,
.guide-x:focus-visible {
  outline: 1px solid var(--cc-focus);
  outline-offset: 1px;
}
/* The Reviewer's parts inside a bubble take the pixel shapes too. */
.crew-pop .crew-pill {
  padding: 1px 8px;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--cc-fg) 9%, transparent);
  clip-path: var(--px-notch);
}
.crew-pop .crew-pill.solid {
  background: var(--m-btn);
  color: var(--m-ink);
  font-weight: 600;
}
.crew-pop .rev-seg {
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: 0;
  background: var(--m-bub);
  clip-path: var(--px-notch);
}
.crew-pop .rev-seg button {
  padding: 2px 10px;
  font-size: 0.9em;
  clip-path: var(--px-notch);
}
.crew-pop .rev-seg button:hover:not(.on) {
  background: var(--m-soft);
}
.crew-pop .rev-seg button.on {
  background: var(--m-btn);
  color: var(--m-ink);
}
.crew-pop .rev-choice {
  margin-top: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--m-bg) 60%, var(--m-bub));
  clip-path: var(--px-notch);
}
.crew-pop .rev-rv {
  padding: 2px 9px;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--m-line);
  clip-path: var(--px-notch);
}
.crew-pop .rev-rv:hover:not(.on):not(:disabled) {
  background: var(--m-soft);
}
.crew-pop .rev-rv.on {
  background: var(--m-soft);
  box-shadow: inset 0 0 0 2px var(--m);
  color: var(--cc-fg);
  font-weight: 600;
}
.crew-pop .rev-star {
  color: #e5a54b;
}
.crew-pop .rev-tip {
  border: 0;
  border-radius: 0;
  background: var(--m-bub);
  clip-path: var(--px-notch);
}
@media (prefers-reduced-motion: reduce) {
  .crew-fig,
  .crew-fig > svg {
    transition: none;
  }
}

/* ---------- session crew Phase 3: a Guard stop in the chat (board 4) ----------
   One plain line under the action it stopped, the owner's click beside it. Never a mascot inside (locked rule). */
.ecard.guard-stop {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0;
}
.guard-action {
  color: var(--cc-fg2);
  font-size: var(--cc-small);
  overflow-wrap: anywhere;
}
.guard-tool {
  font-weight: 600;
}
.guard-line b {
  font-weight: 600;
}
.guard-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--cc-m);
}
.guard-acts .grow {
  flex: 1 1 auto;
}
.guard-acts .crew-link {
  font-size: var(--cc-small);
  color: var(--cc-fg2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.crew-panel .crew-text::first-letter {
  text-transform: uppercase;
}
.guard-acts .crew-link,
.guard-acts .btn {
  white-space: nowrap;
}

/* ---------- session crew Phase 4: the Reviewer (board 5; pattern: GitHub Copilot code review on a change) ----------
   Frame 1 = the programmer's request (why, who reviews on the owner's plan, Review / Later / Skip); frame 2 = the
   stages «Reviews → Fixes → Checks» (done struck, current bold), the verdict counts and the findings. Monochrome like
   the strip; only a failed round takes the warning colour. */
.rev-line,
.rev-reason,
.rev-error {
  overflow-wrap: anywhere;
}
.rev-reason {
  margin-top: -4px;
}
.rev-reason::first-letter {
  text-transform: uppercase;
}
.rev-meta,
.rev-acts,
.rev-stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.rev-meta {
  column-gap: var(--cc-m);
  row-gap: 6px;
}
.rev-meta .rev-stages {
  gap: 6px;
}
.rev-acts {
  gap: 4px;
}
.guide-btn.pri {
  border-color: var(--cc-fg);
  background: var(--cc-fg);
  color: var(--cc-bg);
  font-weight: 600;
}
.guide-btn.pri:hover:not(:disabled) {
  background: var(--cc-fg);
  opacity: 0.88;
}
.guide-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.guide-btn:not(.pri):disabled:hover {
  background: transparent;
}
.rev-stages {
  color: var(--cc-fg2);
}
.rev-stages .done {
  color: var(--cc-fg);
  text-decoration: line-through;
}
.rev-stages .cur {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cc-fg);
  font-weight: 600;
}
/* §25 suggestion 2: a finished review's open findings, in the warning colour beside the struck stages. */
.rev-still-open {
  color: var(--cc-warn-accent);
  font-weight: 600;
}
.rev-stuck {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rev-stuck.bad > div:first-child {
  color: var(--cc-warn-accent);
}
.rev-error {
  color: var(--cc-fg2);
}
.rev-counts,
.rev-findings {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rev-counts li {
  display: flex;
  align-items: center;
  gap: var(--cc-m);
}
.rev-n {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* A finding = its own card (owner, 2026-10-09): severity first as a coloured tag, the id in the same colour, the verdict
   at the end of the head row, the text below; no coloured edge stripe (owner, same day). Severity colours: red critical, orange high, amber medium, blue low, grey
   nit — the meaning colours of the design system, a step apart so R1 and R5 never look alike. */
.rev-findings {
  gap: 8px;
}
.rev-f {
  --sev: var(--cc-fg2);
  --sev-ink: color-mix(in srgb, var(--sev) 78%, var(--cc-fg));
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 12px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-bg2) 55%, transparent);
}
.rev-f.s-critical {
  --sev: #e5484d;
}
.rev-f.s-high {
  --sev: #f0803c;
}
.rev-f.s-medium {
  --sev: #e5a54b;
}
.rev-f.s-low {
  --sev: #5e9bea;
}
.rev-f.s-nit {
  --sev: color-mix(in srgb, var(--cc-fg) 45%, transparent);
}
.rev-f-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.88em;
}
.rev-sev {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sev) 18%, transparent);
  color: var(--sev-ink);
  font-weight: 600;
  white-space: nowrap;
}
.rev-sev > i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sev);
}
.rev-id {
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--sev, var(--cc-fg)) 12%, transparent);
  color: var(--sev-ink, var(--cc-fg));
  font: 600 11px var(--cc-mono);
  white-space: nowrap;
}
.rev-fate {
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc-fg) 9%, transparent);
  color: var(--cc-fg2);
  white-space: nowrap;
}
.rev-f-head .rev-fate {
  margin-inline-start: auto;
}
.rev-fate.f-fixed {
  background: color-mix(in srgb, #46a758 18%, transparent);
  color: color-mix(in srgb, #46a758 75%, var(--cc-fg));
}
.rev-fate.f-open {
  box-shadow: inset 0 0 0 1px var(--cc-fg2);
  background: transparent;
  color: var(--cc-fg);
}
.rev-f-text {
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.rev-counts {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.rev-counts .rev-fate {
  font-size: 0.88em;
}
.rev-later {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 8px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-m);
}
.rev-later-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* §11.10 — the richer request and the automatic mode (board https://claude.ai/artifact/CKb6DMJ54kNusrsJL3yEwu).
   Monochrome like the strip: the chosen reviewer and the chosen segment are filled with the text colour. */
.crew-auto {
  position: absolute;
  right: -5px;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: var(--cc-menu-bg);
  color: var(--cc-fg);
}
.crew-pill.solid {
  border-color: var(--cc-fg);
  background: var(--cc-fg);
  color: var(--cc-bg);
}
.rev-seg {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--cc-line);
  border-radius: 6px;
}
.rev-seg button {
  padding: 1px 9px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.rev-seg button:hover:not(.on) {
  background: var(--cc-hover);
}
.rev-seg button.on {
  background: var(--cc-fg);
  color: var(--cc-bg);
  font-weight: 600;
}
.rev-seg button:focus-visible,
.rev-rv:focus-visible {
  outline: 1px solid var(--cc-focus);
  outline-offset: -1px;
}
.rev-what {
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
/* The review's level (owner, 2026-10-12, board «Review strength», option A; pattern: Linear's priority icon): bars like
   a phone signal, Critical a filled «!» square. The colour helps; the shape alone tells the level. */
.rev-level {
  --lv: var(--cc-fg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lv);
  font-weight: 600;
  white-space: nowrap;
}
.rev-level.critical {
  --lv: var(--cc-error);
}
.rev-level.high {
  --lv: var(--vscode-charts-orange, #e0752d);
}
.rev-level.medium {
  --lv: var(--vscode-charts-yellow, #cca700);
}
.rev-level.low {
  --lv: var(--vscode-descriptionForeground, var(--cc-fg));
}
.rev-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
}
.rev-bars i {
  width: 3px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--lv) 28%, transparent);
}
.rev-bars i:nth-child(1) {
  height: 5px;
}
.rev-bars i:nth-child(2) {
  height: 9px;
}
.rev-bars i:nth-child(3) {
  height: 13px;
}
.rev-bars i.on {
  background: var(--lv);
}
.rev-urgent {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--lv);
  color: var(--cc-bg);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.rev-skip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  overflow-wrap: anywhere;
}
.rev-skip-icon {
  flex: none;
  margin-top: 3px;
}
.rev-skip strong {
  color: var(--cc-fg);
  font-weight: 600;
}
.rev-auto {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: -4px;
}
.rev-tip {
  padding: 6px 8px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-m);
  color: var(--cc-fg2);
}
.rev-choice {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rev-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--cc-m);
}
.rev-label {
  min-width: 64px;
}
.rev-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.rev-rv {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border: 1px solid var(--cc-line);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.rev-rv:hover:not(.on):not(:disabled) {
  background: var(--cc-hover);
}
.rev-rv.on {
  border-color: var(--cc-fg);
  background: var(--cc-fg);
  color: var(--cc-bg);
}
.rev-rv:disabled {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: default;
}
.rev-star {
  font-size: 9px;
}
.rev-acts .grow {
  flex: 1;
}
/* The Reviewer's line in the chat: a quiet notice that heads its turn, never the owner's bubble. */
.notice.crew-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 0 8px;
}
.notice.crew-line.held > span:first-child {
  opacity: 0.7;
}
.notice.crew-line .chip {
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--cc-pill);
  font-size: var(--cc-small);
  line-height: 16px;
}
.notice.crew-line .chip.bad {
  color: var(--cc-error);
}

/* ---------- Plan §15: the Guide as a bottom sheet (owner, 2026-10-08: the board's calm look; next steps first). Pattern: a
   phone's modal bottom sheet (Tiko's AppBottomSheet: handle, scrim, slide up). Small stepped corners keep the house style. */
.gs-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, #000 38%, transparent);
  animation: gs-fade 180ms ease-out;
}
.gs-sheet {
  position: fixed;
  z-index: 41;
  bottom: 0;
  inset-inline: 0;
  margin-inline: auto;
  max-width: 680px;
  min-height: min(46vh, 360px);
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--cc-bg2);
  color: var(--cc-fg);
  font-size: calc(var(--cc-size) + 0.5px);
  line-height: 1.55;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -1px 0 var(--cc-line), 0 -8px 24px color-mix(in srgb, #000 22%, transparent);
  transition: transform 160ms ease-out;
  animation: gs-up 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gs-sheet.still {
  animation: none;
}
@keyframes gs-up {
  from {
    transform: translateY(100%);
  }
}
@keyframes gs-fade {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gs-sheet,
  .gs-scrim {
    animation: none;
  }
}
.gs-grip {
  flex: none;
  display: flex;
  justify-content: center;
  padding-block: 8px 2px;
  cursor: grab;
  touch-action: none;
}
.gs-grip span {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--cc-fg) 28%, transparent);
}
.gs-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 4px 8px;
  padding-inline: 16px 10px;
}
.gs-head .grow,
.gs-acts .grow,
.gs-earlier .grow {
  flex: 1;
}
.gs-dot {
  width: 10px;
  height: 10px;
  background: var(--m);
}
.gs-title {
  font-weight: 600;
}
.gs-body {
  overflow-y: auto;
  padding-inline: 16px;
  padding-block: 2px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gs-sec {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gs-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cc-fg2);
  display: flex;
  gap: 6px;
  align-items: center;
}
html:lang(en) .gs-label {
  text-transform: uppercase;
}
.gs-label b {
  font-weight: 600;
  padding-inline: 5px;
  background: color-mix(in srgb, var(--m) 22%, transparent);
  color: var(--cc-fg);
}
.gs-step {
  display: flex;
  align-items: stretch;
  background: var(--cc-pill);
  border-radius: 10px;
}
.gs-step:hover {
  background: var(--cc-pill-hover);
}
.gs-step-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 4px 9px 12px;
  padding-inline: 12px 4px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.gs-step-main b {
  flex: none;
  font-family: var(--cc-mono);
  font-size: 11.5px;
  line-height: 22px;
  color: var(--cc-fg2);
}

.gs-step-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.gs-rec {
  display: block;
  margin-bottom: 1px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  color: var(--cc-fg2);
}
/* Plan §26 (2026-10-13 review): a step's why as one muted line under its text (it was a tooltip only). */
.gs-why {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cc-fg2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* «Nothing new · Earlier below»: a short line, Earlier follows right under it. */
.gs-quiet.above {
  padding-block: 12px 0;
}
/* The sheet takes the focus when it opens (its title when it opened by itself): no ring for that programmatic focus. */
.gs-sheet:focus,
.gs-title:focus {
  outline: none;
}
.gs-close:focus-visible {
  outline: 1px solid var(--cc-focus);
  outline-offset: 1px;
}
/* A finding's place on its card, and «Set aside» as words with one confirming step (it was a bare «×»). */
}
.gs-step-main:focus-visible,
.gs-btn:focus-visible,
.gs-pin:focus-visible,
.gs-icon:focus-visible,
.gs-earlier:focus-visible,
.gs-hist-text:focus-visible {
  outline: 1px solid var(--cc-focus);
  outline-offset: -1px;
}

/* ---------- Plan session-crew §17 (owner, 2026-10-08: "ok" to the same calm look for the Guard and the Reviewer): inside
   the sheet the members' talk becomes flat cards — no figure or tail, the member's colour only on the head's dot and the
   recommended outline; section names as small labels; meaning colours (red, amber, green) kept on tags. */
.gs-sheet .crew-pop {
  position: static;
  inset: auto;
  z-index: auto;
  margin: 0;
  filter: none;
  --m-bub: var(--cc-pill);
  --m-soft: var(--cc-pill-hover);
  --m-line: var(--cc-line);
}
.gs-sheet .crew-say {
  display: block;
}
.gs-sheet .crew-say-col {
  gap: 8px;
}
.gs-sheet .crew-say-col::before {
  display: none;
}
.gs-sheet .crew-bub {
  align-self: stretch;
  padding: 10px 12px;
  background: var(--cc-pill);
  border-radius: 10px;
}
.gs-sheet .crew-say-text {
  font-size: calc(var(--cc-size) + 0.5px);
  line-height: 1.55;
}
.gs-sheet .crew-say[dir='rtl'] .crew-say-text {
  line-height: 1.7;
}
.gs-sheet .crew-sect {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
html:lang(en) .gs-sheet .crew-sect {
  text-transform: uppercase;
}
.gs-sheet .crew-sect::before,
.gs-sheet .crew-sect::after {
  display: none;
}
.gs-sheet .crew-sect b {
  padding-inline: 5px;
  background: color-mix(in srgb, var(--m) 22%, transparent);
}
.gs-sheet .crew-day {
  text-align: start;
}
.gs-sheet .crew-day.rev-auto {
  justify-content: flex-start;
}
.gs-sheet .crew-head-btn {
  padding: 0 10px;
  background: var(--cc-pill);
  clip-path: none;
}
.gs-sheet .crew-icon-btn {
  clip-path: none;
}
.gs-sheet .crew-icon-btn:hover,
.gs-sheet .crew-head-btn:hover {
  background: var(--cc-pill-hover);
}
.gs-sheet .crew-meta.top {
  margin-bottom: 4px;
}
.gs-head .crew-count {
  margin-inline-start: 4px;
}

.gs-sheet .crew-pop .guide-btn.pri {
  background: var(--cc-fg);
  color: var(--cc-bg2);
  font-weight: 600;
}
.gs-sheet .crew-pop .guide-btn.pri:hover:not(:disabled) {
  background: var(--cc-fg);
  opacity: 0.88;
}
.gs-sheet .crew-sect {
  gap: 6px;
}
.gs-sheet .crew-pop .crew-pill.solid {
  background: color-mix(in srgb, var(--m) 22%, transparent);
  color: var(--cc-fg);
}

/* Owner, 2026-10-08 (screenshot): no pixel corners anywhere in the crew's sheets — plain rounded corners; and the member
   large on the sheet's top edge at its start corner (the strip's figures sink while a sheet is open). */
.gs-sheet *,
.gs-sheet .crew-pop * {
  clip-path: none;
}
.gs-sheet .crew-bub {
  border-radius: 10px;
}
.gs-sheet .crew-tag,
.gs-sheet .crew-pop .crew-pill,
.gs-sheet .crew-code,
.gs-sheet .gs-state,
.gs-label b,
.gs-sheet .crew-sect b {
  border-radius: 4px;
}
.gs-sheet .crew-pop .guide-btn,
.gs-sheet .crew-head-btn,
.gs-sheet .crew-icon-btn,
.gs-sheet .crew-pop .rev-seg,
.gs-sheet .crew-pop .rev-seg button {
  border-radius: 6px;
}
.gs-hist {
  border-radius: 8px;
}
.gs-dot {
  border-radius: 50%;
}
.gs-figure {
  position: absolute;
  bottom: 100%;
  inset-inline-start: 18px;
  margin-bottom: -4px;
  line-height: 0;
  pointer-events: none;
  /* 4× drawn, shown at 5× (whole pixels stay whole). */
  transform: scale(1.25);
  transform-origin: bottom left;
}
[dir='rtl'] .gs-figure,
.gs-figure:dir(rtl) {
  transform-origin: bottom right;
}
/* A stage mood draws the room around the body (CREW_STAGE: 1 column before, 2 after, 4 rows above); the body keeps
   its place: 1 drawn column × 4 × 1.25 = 5px back on the left, 2 columns = 10px on the right. */
.gs-figure.mood {
  margin-left: -5px;
}
[dir='rtl'] .gs-figure.mood,
.gs-figure.mood:dir(rtl) {
  margin-left: 0;
  margin-right: -10px;
}
/* One reference card inside the composer for a reply quote and a Guide pick (owner, 2026-10-08: "wider, bigger
   text, the same as the reply"): full width, the chat's text size, three lines at most, × at the end. */
.cbox .refs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px 2px;
}
.refcard {
  padding: 8px 10px 9px;
  background: var(--cc-pill);
  border-radius: 8px;
/* Ornus's one loader (spokes.tsx, spokesArt.ts): one spoke per step, 0.9 s a turn. Whether it moves is the component's
   call (the mascot motion setting), so there is no Reduce motion rule here. */
.o-spokes {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  overflow: visible;
}
.o-spokes-turn {
  transform-box: view-box;
  transform-origin: center;
  animation: o-spokes-turn 0.9s steps(8) infinite;
}
.o-spokes.still .o-spokes-turn {
  animation: none;
}
@keyframes o-spokes-turn {
  to {
    transform: rotate(360deg);
  }
}