:root {
  color-scheme: light;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-synthesis: none;
  line-height: 1.55;

  /* Approved US-09.14 palette and accessible operational extensions. */
  --ct-color-white: #ffffff;
  --ct-color-canvas: #f7f7f2;
  --ct-color-canvas-soft: #fcfcfa;
  --ct-color-icon-tile: #f0ede9;
  --ct-color-logo: #3d9653;
  --ct-color-mark: #2a3833;
  --ct-color-action: #0b7a4b;
  --ct-color-forest: #0b3226;
  --ct-color-mint: #9ed9b8;
  --ct-color-graphite: #24302b;
  --ct-color-agent: #5f50b5;
  --ct-color-attention: #8a5705;
  --ct-color-risk: #b42318;
  --ct-color-muted: #56645d;
  --ct-color-border: #dfe4df;
  --ct-color-border-strong: #9eaea4;
  --ct-color-selection: #e5f5eb;
  --ct-color-agent-soft: #f3f0ff;
  --ct-color-attention-soft: #fff8e8;
  --ct-color-risk-soft: #fff2f0;
  --ct-color-info-soft: #eef6ff;
  --ct-color-success-soft: #edf8f1;
  --ct-color-disabled: #748078;

  --ct-font-size-xs: 0.75rem;
  --ct-font-size-sm: 0.875rem;
  --ct-font-size-md: 1rem;
  --ct-font-size-lg: 1.125rem;
  --ct-font-size-xl: 1.4rem;
  --ct-font-size-display: clamp(2rem, 4.2vw, 3.6rem);
  --ct-font-weight-medium: 550;
  --ct-font-weight-semibold: 650;

  --ct-space-1: 0.25rem;
  --ct-space-2: 0.5rem;
  --ct-space-3: 0.75rem;
  --ct-space-4: 1rem;
  --ct-space-5: 1.5rem;
  --ct-space-6: 2rem;
  --ct-space-7: 3rem;
  --ct-space-8: 5rem;

  --ct-radius-sm: 0.5rem;
  --ct-radius-md: 0.75rem;
  --ct-radius-lg: 1.25rem;
  --ct-radius-xl: 1.5rem;
  --ct-radius-pill: 999px;

  --ct-shadow-sm: 0 0.25rem 1rem color-mix(in srgb, var(--ct-color-graphite) 7%, transparent);
  --ct-shadow-md: 0 0.75rem 2.75rem color-mix(in srgb, var(--ct-color-graphite) 8%, transparent);
  --ct-focus-ring: 0 0 0 0.25rem color-mix(in srgb, var(--ct-color-agent) 20%, transparent);

  --ct-breakpoint-narrow: 30rem;
  --ct-breakpoint-compact: 48rem;
  --ct-breakpoint-wide: 75rem;

  --ct-motion-instant: 80ms;
  --ct-motion-fast: 150ms;
  --ct-motion-standard: 240ms;
  --ct-motion-deliberate: 480ms;
  --ct-motion-cycle: 1600ms;
  --ct-motion-interrupt: 0ms;
  --ct-motion-reduced: 0ms;
  --ct-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ct-ease-expressive: cubic-bezier(0.34, 1.2, 0.64, 1);

  /* Console shell and page patterns (US-09.42), from prototype screen 2. */
  --ct-color-faint: #7a857e;
  --ct-color-border-soft: #edefea;
  --ct-color-attention-line: #f1dfb5;
  --ct-color-waiting: #1f6b86;
  --ct-color-waiting-soft: #eaf4f8;
  --ct-color-forest-light: #1c4a3b;
  --ct-color-on-dark-hover: rgb(255 255 255 / 0.12);
  --ct-scrim: rgb(11 50 38 / 0.3);
  --ct-ring: 0 0 0 1px rgb(11 50 38 / 0.07);
  --ct-lift: 0 0 0 1px rgb(11 50 38 / 0.07), 0 1px 2px rgb(11 50 38 / 0.05),
    0 4px 12px -6px rgb(11 50 38 / 0.1);
  --ct-shadow-lg: 0 2px 6px rgb(11 50 38 / 0.05), 0 28px 64px -22px rgb(11 50 38 / 0.34);
  --ct-shadow-frame: 0 0 0 1px rgb(11 50 38 / 0.06), 0 1px 3px rgb(11 50 38 / 0.04),
    0 16px 40px -28px rgb(11 50 38 / 0.25);
  --ct-shadow-entry: 0 0 0 1px rgb(11 50 38 / 0.06), 0 1px 3px rgb(11 50 38 / 0.04),
    0 24px 48px -30px rgb(11 50 38 / 0.3);
  --ct-breakpoint-phone: 44rem;

  /* Importar planilha (US-09.39), from prototype screen 3. */
  --ct-color-action-top: #10905a;
  --ct-color-action-hover: #09673f;
  --ct-color-line: #e1e5e0;
  --ct-color-line-strong: #a7b4ab;
  --ct-color-sheet-margin: #f5f6f2;
  --ct-color-sheet-head: #fafaf7;
  --ct-color-sheet-dot: #4a9a6a;
  --ct-color-art-stroke: #c9d3cc;
  --ct-color-art-chip: #cfe9d9;
  --ct-color-forest-deep: #0f3d2f;
  --ct-color-on-dark: #e9f3ee;
  --ct-color-on-dark-muted: #cfe3d8;
  --ct-color-hatch: rgb(11 50 38 / 0.045);
  /* The faint grey of a step still to come, darkened to 4.5:1 on white:
     unlike the prototype's disabled buttons, the steps are read as text. */
  --ct-color-step-next: #6f7972;
  --ct-shadow-xs: 0 1px 2px rgb(11 50 38 / 0.05);
  --ct-shadow-card: 0 1px 2px rgb(11 50 38 / 0.04), 0 6px 18px -8px rgb(11 50 38 / 0.14);
  --ct-shadow-primary: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 1px 2px rgb(11 50 38 / 0.25),
    0 8px 18px -8px rgb(11 122 75 / 0.6);
  --ct-lift-hover: 0 0 0 1px rgb(11 50 38 / 0.16), 0 1px 2px rgb(11 50 38 / 0.05),
    0 6px 16px -8px rgb(11 50 38 / 0.16);
  --ct-lift-hover-small: 0 0 0 1px rgb(11 50 38 / 0.16), 0 4px 12px -6px rgb(11 50 38 / 0.12);
  --ct-shadow-chosen: 0 0 0 1.5px var(--ct-color-action), 0 8px 22px -14px rgb(11 122 75 / 0.55);
  --ct-shadow-chosen-small: 0 0 0 1.5px var(--ct-color-action), 0 6px 16px -12px rgb(11 122 75 / 0.6);
  --ct-shadow-chosen-icon: 0 6px 14px -8px rgb(11 122 75 / 0.8);
  --ct-shadow-segment: 0 1px 2px rgb(11 50 38 / 0.1), 0 0 0 1px rgb(11 50 38 / 0.08);
  --ct-shadow-pill: 0 6px 14px -8px rgb(11 50 38 / 0.6);
  --ct-filter-art: drop-shadow(0 10px 18px rgb(11 50 38 / 0.12));
  --ct-motion-stagger: 10ms;
  --ct-motion-assemble: 760ms;
  --ct-motion-spin: 900ms;
  --ct-motion-reveal: 420ms;
  --ct-ease-assemble: cubic-bezier(0.2, 0.9, 0.25, 1.05);

  /* Visão geral (US-09.52), from prototype screen 2. */
  --ct-color-series: #4a9a6a;
  --ct-color-late: #b7791f;
  --ct-color-late-soft: #ecd3a6;
  --ct-color-next: #0f3d2f;
  --ct-color-vg-on-dark: #e3efe8;
  --ct-color-vg-on-dark-muted: #c9ddd2;
  --ct-color-on-dark-tip: #d8e9df;
  --ct-color-mint-hover: #b4e4c8;
  --ct-color-action-deep: #09673f;
  --ct-color-chat: #efeae2;
  --ct-color-chat-ink: #111b21;
  --ct-color-chat-meta: #54656f;
  --ct-shadow-vg-card: 0 1px 2px rgb(11 50 38 / 0.05), 0 18px 40px -18px rgb(11 50 38 / 0.28);
  --ct-shadow-primary: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 1px 2px rgb(11 50 38 / 0.25),
    0 8px 18px -8px rgb(11 122 75 / 0.6);
  --ct-shadow-bubble: 0 1px 0.5px rgb(11 20 26 / 0.13);
  --ct-motion-breathe: 3s;
  --ct-motion-tip: 140ms;

  /* Réguas (US-09.5), from prototype screen 1: the late and agreement
     colours of the régua map, its route colours, the WhatsApp preview and
     the shadows of its stations. */
  --ct-color-risk-hover: #991e14;
  --ct-color-deal: #1f6b86;
  --ct-color-deal-soft: #eaf4f8;
  --ct-color-attention-ink: #5c3a03;
  --ct-color-attention-on-dark: #ffe2a8;
  --ct-color-on-dark-soft: rgb(255 255 255 / 0.16);
  --ct-color-on-dark-text: #e9f3ee;
  --ct-route-pay: var(--ct-color-action);
  --ct-route-talk: var(--ct-color-agent);
  --ct-route-promise: var(--ct-color-late);
  --ct-route-deal: var(--ct-color-deal);
  --ct-route-auto: #8d9891;
  --ct-chat-bg: #efeae2;
  --ct-chat-head: #f7f7f5;
  --ct-chat-out: #d9fdd3;
  --ct-chat-ink: #111b21;
  --ct-chat-meta: #54656f;
  --ct-chat-hint: #667781;
  --ct-chat-dot: rgb(214 207 196 / 0.55);
  --ct-chat-line: #e3e3e0;
  --ct-chat-back: #1d8a5d;
  --ct-chat-notice: #fff5c4;
  --ct-chat-sep: rgb(255 255 255 / 0.85);
  --ct-chat-seg: rgb(255 255 255 / 0.55);
  --ct-chat-seg-line: rgb(11 20 26 / 0.06);
  --ct-chat-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13);
  --ct-chat-ring: inset 0 0 0 1px rgb(11 20 26 / 0.04);
  --ct-device: #121815;
  --ct-device-ring: #34403a;
  --ct-device-edge: #0b0f0d;
  --ct-device-island: #000000;
  --ct-shadow-soft: 0 1px 2px rgb(11 50 38 / 0.04), 0 6px 18px -8px rgb(11 50 38 / 0.14);
  --ct-shadow-raised: 0 1px 2px rgb(11 50 38 / 0.05), 0 18px 40px -18px rgb(11 50 38 / 0.28);
  --ct-shadow-danger: 0 1px 2px rgb(11 50 38 / 0.25);
  --ct-ring-station: 0 0 0 1px rgb(11 50 38 / 0.14);
  --ct-ring-dot: 0 0 0 1px rgb(11 50 38 / 0.18);
  --ct-shadow-station: 0 0 0 1px rgb(11 50 38 / 0.14), 0 6px 14px -4px rgb(11 50 38 / 0.35);
  --ct-shadow-station-review: 0 6px 14px -4px rgb(11 50 38 / 0.3);
  --ct-shadow-station-on: 0 10px 20px -6px rgb(11 50 38 / 0.45);
  --ct-shadow-chip: 0 6px 14px -8px rgb(11 50 38 / 0.6);
  --ct-shadow-thumb: 0 1px 2px rgb(11 50 38 / 0.3);
  --ct-rail-gloss: inset 0 1px 0 rgb(255 255 255 / 0.45);
  --ct-motion-gentle: 200ms;
  --ct-motion-route: 1500ms;
  --ct-motion-route-hold: 3200ms;
  --ct-motion-route-fade: 700ms;
  --ct-ease-route: cubic-bezier(0.35, 0, 0.2, 1);
  /* end tokens */
}

* {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
}

body {
  margin: 0;
  color: var(--ct-color-graphite);
  background: var(--ct-color-canvas);
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--ct-color-action);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--ct-color-forest);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: var(--ct-space-3) 0 var(--ct-space-5);
  color: var(--ct-color-forest);
  font-size: var(--ct-font-size-display);
  font-weight: var(--ct-font-weight-semibold);
  letter-spacing: -0.045em;
  line-height: 1.12;
}

h2 {
  margin: 0 0 var(--ct-space-3);
  color: var(--ct-color-forest);
  font-size: var(--ct-font-size-xl);
  font-weight: var(--ct-font-weight-semibold);
  letter-spacing: -0.02em;
}

h3 {
  margin: 0 0 var(--ct-space-2);
  color: var(--ct-color-forest);
  font-size: var(--ct-font-size-md);
}

p {
  margin: var(--ct-space-3) 0 var(--ct-space-4);
}

small {
  color: var(--ct-color-muted);
}

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 0.1875rem solid var(--ct-color-agent);
  outline-offset: 0.1875rem;
  box-shadow: var(--ct-focus-ring);
}

.ct-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ct-skip {
  position: fixed;
  top: -8rem;
  left: var(--ct-space-4);
  z-index: 20;
  padding: var(--ct-space-4);
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border-radius: var(--ct-radius-md);
  box-shadow: var(--ct-shadow-md);
}

.ct-skip:focus {
  top: var(--ct-space-4);
}

.ct-header {
  width: min(100% - 3rem, 75rem);
  margin: auto;
  padding: var(--ct-space-6) 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ct-space-4);
}

.ct-lockup {
  width: 11.5rem;
  height: auto;
}

.ct-header__label {
  padding: 0.35rem 0.8rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-pill);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-medium);
}

/* The emergency control keeps its size and label at every width: an urgent
   action that shrinks into an icon is an action nobody finds in a hurry. */
.ct-header__stop {
  margin-left: auto;
}

.ct-eyebrow {
  color: var(--ct-color-action);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ct-muted,
.ct-footnote {
  color: var(--ct-color-muted);
}

.ct-footnote {
  margin-top: var(--ct-space-5);
  font-size: var(--ct-font-size-xs);
}

.ct-entry {
  width: min(100% - 3rem, 70rem);
  margin: var(--ct-space-7) auto var(--ct-space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr);
  align-items: center;
  gap: var(--ct-space-8);
}

/* A settings page is one readable column of panels at every width. The entry
   screen's two-column grid holds an introduction beside a single card; reusing
   it for a long page of controls overlaps them on a phone, where a control
   another element sits on top of cannot be reached at all. */
.ct-page {
  width: min(100% - 3rem, 70rem);
  margin: var(--ct-space-7) auto var(--ct-space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ct-space-6);
}

.ct-intro > p {
  max-width: 30rem;
  font-size: var(--ct-font-size-lg);
}

.ct-brand-tile {
  width: 11.25rem;
  height: 11.25rem;
  margin-top: var(--ct-space-6);
  display: grid;
  place-items: center;
  background: var(--ct-color-icon-tile);
  border-radius: var(--ct-space-7);
}

.ct-panel {
  padding: var(--ct-space-6);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-xl);
  box-shadow: var(--ct-shadow-md);
}

.ct-panel > :first-child {
  margin-top: 0;
}

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

.ct-auth-form,
.ct-field {
  display: grid;
}

.ct-auth-form {
  gap: var(--ct-space-4);
  margin-top: var(--ct-space-5);
}

.ct-field {
  gap: var(--ct-space-2);
}

.ct-field label {
  color: var(--ct-color-forest);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-field__hint,
.ct-field__error {
  font-size: var(--ct-font-size-xs);
}

.ct-field__hint {
  color: var(--ct-color-muted);
}

.ct-field__error {
  display: flex;
  align-items: center;
  gap: var(--ct-space-2);
  color: var(--ct-color-risk);
  font-weight: var(--ct-font-weight-medium);
}

.ct-field input,
.ct-field select,
.ct-setup-textarea {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.8rem 0.95rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-canvas-soft);
  border: 1px solid var(--ct-color-border-strong);
  border-radius: var(--ct-radius-md);
}

.ct-field [aria-invalid="true"] {
  border-color: var(--ct-color-risk);
}

.ct-select {
  position: relative;
  display: block;
}

.ct-select select {
  appearance: none;
  padding-right: var(--ct-space-7);
}

.ct-select > svg {
  position: absolute;
  top: 50%;
  right: var(--ct-space-4);
  pointer-events: none;
  transform: translateY(-50%);
}

.ct-button {
  width: fit-content;
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ct-space-2);
  color: var(--ct-color-white);
  background: var(--ct-color-action);
  border: 1px solid var(--ct-color-action);
  border-radius: var(--ct-radius-md);
  cursor: pointer;
  font-weight: var(--ct-font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    color var(--ct-motion-fast) var(--ct-ease-standard),
    background-color var(--ct-motion-fast) var(--ct-ease-standard),
    border-color var(--ct-motion-fast) var(--ct-ease-standard),
    transform var(--ct-motion-instant) var(--ct-ease-standard);
}

.ct-button:hover {
  color: var(--ct-color-white);
  background: var(--ct-color-forest);
  border-color: var(--ct-color-forest);
}

.ct-button:active {
  transform: translateY(0.0625rem);
}

.ct-button:disabled {
  color: var(--ct-color-white);
  background: var(--ct-color-disabled);
  border-color: var(--ct-color-disabled);
  cursor: wait;
}

.ct-button--secondary {
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border-color: var(--ct-color-border-strong);
}

.ct-button--secondary:hover,
.ct-button--quiet:hover {
  color: var(--ct-color-forest);
  background: var(--ct-color-selection);
  border-color: var(--ct-color-action);
}

.ct-button--quiet {
  color: var(--ct-color-action);
  background: transparent;
  border-color: transparent;
}

.ct-button--danger {
  color: var(--ct-color-white);
  background: var(--ct-color-risk);
  border-color: var(--ct-color-risk);
}

.ct-button--danger:hover {
  color: var(--ct-color-risk);
  background: var(--ct-color-white);
  border-color: var(--ct-color-risk);
}

.ct-auth-form .ct-button {
  width: 100%;
  justify-content: space-between;
}

.ct-notice {
  padding: var(--ct-space-4);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ct-space-3);
  color: var(--ct-color-graphite);
  border-left: 0.25rem solid var(--ct-color-attention);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-color-attention-soft);
}

.ct-notice--risk {
  border-color: var(--ct-color-risk);
  background: var(--ct-color-risk-soft);
}

.ct-notice--info {
  border-color: var(--ct-color-agent);
  background: var(--ct-color-info-soft);
}

.ct-notice--success {
  border-color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
}

.ct-notice h2,
.ct-notice p {
  margin: 0;
  font-size: var(--ct-font-size-sm);
}

.ct-notice p {
  margin-top: var(--ct-space-1);
}

.ct-offline {
  color: var(--ct-color-attention);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-medium);
}

.ct-definition-list,
.ct-evidence {
  margin: var(--ct-space-5) 0;
}

.ct-definition-list > div,
.ct-evidence > div {
  padding: var(--ct-space-4) 0;
  border-top: 1px solid var(--ct-color-border);
}

.ct-definition-list dt,
.ct-evidence dt {
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-xs);
}

.ct-definition-list dd,
.ct-evidence dd {
  margin: var(--ct-space-1) 0 0;
  color: var(--ct-color-forest);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-footer {
  margin: var(--ct-space-6);
  padding: var(--ct-space-4);
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-xs);
  text-align: center;
}

.ct-motion-board {
  width: min(100% - 3rem, 75rem);
  margin: var(--ct-space-4) auto var(--ct-space-8);
}

.ct-motion-board__intro {
  max-width: 48rem;
}

.ct-motion-board__intro > p {
  max-width: 42rem;
  font-size: var(--ct-font-size-lg);
}

.ct-motion-picker {
  margin: var(--ct-space-6) 0 var(--ct-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-2);
}

.ct-motion-picker .ct-button {
  min-height: 2.4rem;
  padding: var(--ct-space-2) var(--ct-space-3);
  font-size: var(--ct-font-size-sm);
}

.ct-motion-canvas {
  min-height: 34rem;
  overflow: hidden;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-xl);
  box-shadow: var(--ct-shadow-md);
}

.ct-motion-scene {
  min-height: 34rem;
  padding: var(--ct-space-6);
  display: grid;
  grid-template-columns: minmax(18rem, 1.15fr) minmax(18rem, 0.85fr);
  align-items: center;
  gap: var(--ct-space-7);
}

.ct-motion-stage {
  position: relative;
  min-height: 28rem;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, var(--ct-color-white), transparent 62%),
    var(--ct-color-canvas);
  border-radius: var(--ct-radius-lg);
  isolation: isolate;
}

.ct-motion-copy h2 {
  margin-top: var(--ct-space-4);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.ct-motion-copy p {
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-lg);
}

.ct-motion-copy dl {
  margin: var(--ct-space-5) 0 0;
  display: grid;
  gap: var(--ct-space-3);
}

.ct-motion-copy dl div {
  padding-top: var(--ct-space-3);
  border-top: 1px solid var(--ct-color-border);
}

.ct-motion-copy dt {
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ct-motion-copy dd {
  margin: var(--ct-space-1) 0 0;
}

.ct-motion-symbol {
  position: relative;
  width: min(86%, 28rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.ct-motion-art {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ct-radius-lg);
}

.ct-motion-symbol--import .ct-motion-art {
  animation: ct-settle var(--ct-motion-cycle) var(--ct-ease-expressive) infinite alternate;
}

.ct-motion-file {
  position: absolute;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-action);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  box-shadow: var(--ct-shadow-sm);
  animation: ct-file-organize var(--ct-motion-cycle) var(--ct-ease-standard) infinite alternate;
}

.ct-motion-file--one { top: 12%; left: 2%; }
.ct-motion-file--two { right: 0; bottom: 22%; animation-delay: calc(var(--ct-motion-cycle) / -3); }
.ct-motion-file--three { bottom: 2%; left: 18%; animation-delay: calc(var(--ct-motion-cycle) / -2); }

.ct-motion-symbol--validation .ct-motion-art {
  animation: ct-validate var(--ct-motion-cycle) var(--ct-ease-standard) infinite alternate;
}

.ct-motion-validation-success {
  width: 8rem;
  height: 8rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
  border: 1px solid var(--ct-color-mint);
  border-radius: 2.4rem;
  box-shadow: var(--ct-shadow-md);
  animation: ct-complete-settle var(--ct-motion-deliberate) var(--ct-ease-expressive) both;
}

.ct-motion-guide {
  position: absolute;
  top: 19%;
  right: 28%;
  width: 0.2rem;
  height: 29%;
  background: var(--ct-color-attention);
  border-radius: var(--ct-radius-pill);
  box-shadow: 0 0 1.5rem color-mix(in srgb, var(--ct-color-attention) 32%, transparent);
  animation: ct-guide var(--ct-motion-cycle) var(--ct-ease-standard) infinite alternate;
}

.ct-motion-route {
  position: relative;
  width: min(88%, 34rem);
  color: var(--ct-color-action);
}

.ct-motion-route > svg:first-child {
  position: absolute;
  top: -3.4rem;
  left: 0;
}

.ct-motion-route svg:last-of-type {
  width: 100%;
  overflow: visible;
}

.ct-motion-route path {
  fill: none;
  stroke: var(--ct-color-border-strong);
  stroke-width: 8;
  stroke-linecap: round;
}

.ct-motion-route circle {
  fill: var(--ct-color-white);
  stroke: var(--ct-color-action);
  stroke-width: 5;
}

.ct-motion-pulse {
  position: absolute;
  top: 55%;
  left: 3%;
  width: 1rem;
  height: 1rem;
  background: var(--ct-color-logo);
  border: 0.2rem solid var(--ct-color-white);
  border-radius: 50%;
  box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--ct-color-mint) 58%, transparent);
  animation: ct-route-pulse var(--ct-motion-cycle) var(--ct-ease-standard) infinite;
}

.ct-motion-signal {
  position: relative;
  width: 16rem;
  height: 16rem;
  display: grid;
  place-items: center;
}

.ct-motion-signal__core {
  width: 7rem;
  height: 7rem;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--ct-color-action);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: 2.2rem;
  box-shadow: var(--ct-shadow-md);
}

.ct-motion-signal__ring {
  position: absolute;
  inset: 20%;
  border: 0.16rem solid var(--ct-color-mint);
  border-radius: 50%;
  animation: ct-signal var(--ct-motion-cycle) var(--ct-ease-standard) infinite;
}

.ct-motion-signal__ring--two {
  animation-delay: calc(var(--ct-motion-cycle) / -2);
}

.ct-motion-agent {
  width: min(86%, 28rem);
  padding: var(--ct-space-5);
  color: var(--ct-color-graphite);
  background: var(--ct-color-agent-soft);
  border: 1px solid color-mix(in srgb, var(--ct-color-agent) 24%, var(--ct-color-border));
  border-radius: var(--ct-radius-xl);
}

.ct-motion-agent__icon {
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-white);
  background: var(--ct-color-agent);
  border-radius: var(--ct-radius-lg);
  animation: ct-agent-breathe var(--ct-motion-cycle) var(--ct-ease-standard) infinite alternate;
}

.ct-motion-agent ol {
  padding: 0;
  margin: var(--ct-space-5) 0 0;
  display: grid;
  gap: var(--ct-space-3);
  list-style: none;
}

.ct-motion-agent__step {
  padding: var(--ct-space-3);
  display: flex;
  align-items: center;
  gap: var(--ct-space-3);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
}

.ct-motion-agent__step--active {
  border-color: var(--ct-color-agent);
  animation: ct-agent-step var(--ct-motion-cycle) var(--ct-ease-standard) infinite alternate;
}

.ct-motion-symbol--complete::before {
  position: absolute;
  inset: 16%;
  z-index: -1;
  background: var(--ct-color-mint);
  border-radius: 50%;
  content: "";
  filter: blur(2.6rem);
  opacity: 0.24;
  animation: ct-complete-glow var(--ct-motion-cycle) var(--ct-ease-standard) infinite alternate;
}

.ct-motion-symbol--complete .ct-motion-art {
  animation: ct-complete-settle var(--ct-motion-deliberate) var(--ct-ease-expressive) both;
}

.ct-motion-complete-ring {
  position: absolute;
  inset: 14%;
  z-index: -1;
  border: 0.15rem solid var(--ct-color-mint);
  border-radius: 50%;
  animation: ct-complete-ring var(--ct-motion-cycle) var(--ct-ease-standard) infinite;
}

.ct-motion-controls {
  margin: var(--ct-space-5) 0;
  padding: var(--ct-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-space-5);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-lg);
}

.ct-motion-controls p {
  max-width: 35rem;
  margin-bottom: 0;
}

.ct-motion-board[data-motion-condition="offline"] .ct-motion-controls,
.ct-motion-board[data-motion-condition="failure"] .ct-motion-controls {
  background: var(--ct-color-attention-soft);
  border-color: color-mix(in srgb, var(--ct-color-attention) 45%, var(--ct-color-border));
}

.ct-motion-board[data-motion-condition="failure"] .ct-motion-controls {
  background: var(--ct-color-risk-soft);
  border-color: color-mix(in srgb, var(--ct-color-risk) 45%, var(--ct-color-border));
}

.ct-motion-board[data-motion-paused="true"] [data-motion-animated],
.ct-motion-board[data-motion-paused="true"] [data-motion-animated] * {
  animation-play-state: paused !important;
}

.ct-motion-restarting [data-motion-animated],
.ct-motion-restarting [data-motion-animated] * {
  animation-name: none !important;
}

.ct-motion-board__note {
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
}

@keyframes ct-settle {
  from { transform: translateY(0.7rem) scale(0.985); }
  to { transform: translateY(0) scale(1); }
}

@keyframes ct-file-organize {
  from { opacity: 0.45; transform: translate3d(-0.6rem, 0.8rem, 0) scale(0.9); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes ct-validate {
  from { transform: translateX(0.35rem); }
  to { transform: translateX(0); }
}

@keyframes ct-guide {
  from { opacity: 0.35; transform: scaleY(0.75); }
  to { opacity: 0.9; transform: scaleY(1); }
}

@keyframes ct-route-pulse {
  0% { left: 3%; transform: translateY(0.6rem); }
  36% { left: 32%; transform: translateY(-0.25rem); }
  68% { left: 62%; transform: translateY(-1.35rem); }
  100% { left: 92%; transform: translateY(-0.45rem); }
}

@keyframes ct-signal {
  from { opacity: 0.55; transform: scale(0.55); }
  to { opacity: 0; transform: scale(1.45); }
}

@keyframes ct-agent-breathe {
  from { transform: translateY(0); }
  to { transform: translateY(-0.35rem); }
}

@keyframes ct-agent-step {
  from { box-shadow: 0 0 0 0 transparent; }
  to { box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--ct-color-agent) 10%, transparent); }
}

@keyframes ct-complete-settle {
  from { opacity: 0; transform: translateY(1rem) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ct-complete-glow {
  from { opacity: 0.12; transform: scale(0.88); }
  to { opacity: 0.28; transform: scale(1); }
}

@keyframes ct-complete-ring {
  from { opacity: 0.5; transform: scale(0.76); }
  to { opacity: 0; transform: scale(1.18); }
}

.ct-badge {
  width: fit-content;
  padding: 0.3rem 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-2);
  color: var(--ct-color-graphite);
  background: var(--ct-color-canvas-soft);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-pill);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-semibold);
  line-height: 1.1;
}

.ct-badge__marker {
  display: inline-flex;
}

.ct-badge--cadence,
.ct-badge--success {
  color: var(--ct-color-forest);
  background: var(--ct-color-selection);
  border-color: var(--ct-color-mint);
}

.ct-badge--human,
.ct-badge--attention {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
}

.ct-badge--agent {
  color: var(--ct-color-agent);
  background: var(--ct-color-agent-soft);
}

.ct-badge--risk {
  color: var(--ct-color-risk);
  background: var(--ct-color-risk-soft);
}

.ct-number {
  color: var(--ct-color-forest);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.ct-navigation {
  margin-bottom: var(--ct-space-4);
  padding: var(--ct-space-2);
  display: flex;
  gap: var(--ct-space-2);
  overflow-x: auto;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-lg);
}

.ct-navigation__item {
  min-height: 2.75rem;
  padding: var(--ct-space-2) var(--ct-space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-2);
  color: var(--ct-color-muted);
  border-radius: var(--ct-radius-md);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.ct-navigation__item--active {
  color: var(--ct-color-forest);
  background: var(--ct-color-selection);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-tabs {
  display: flex;
  gap: var(--ct-space-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--ct-color-border);
}

.ct-tab {
  padding: var(--ct-space-3) var(--ct-space-4);
  color: var(--ct-color-muted);
  border-bottom: 0.1875rem solid transparent;
  font-weight: var(--ct-font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.ct-tab--active {
  color: var(--ct-color-forest);
  border-color: var(--ct-color-action);
}

.ct-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-lg);
}

.ct-table {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  background: var(--ct-color-white);
  font-size: var(--ct-font-size-sm);
}

.ct-table caption {
  padding: var(--ct-space-4);
  color: var(--ct-color-forest);
  font-weight: var(--ct-font-weight-semibold);
  text-align: left;
}

.ct-table th,
.ct-table td {
  padding: var(--ct-space-3) var(--ct-space-4);
  border-top: 1px solid var(--ct-color-border);
  text-align: left;
  vertical-align: middle;
}

.ct-table thead th {
  color: var(--ct-color-muted);
  background: var(--ct-color-canvas-soft);
  font-size: var(--ct-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ct-dialog,
.ct-drawer {
  width: 100%;
  margin: 0;
  padding: var(--ct-space-5);
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-sm);
}

.ct-dialog {
  position: static;
  max-width: none;
}

.ct-drawer {
  border-left: 0.25rem solid var(--ct-color-agent);
}

.ct-actions,
.ct-showcase {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ct-space-3);
}

.ct-actions {
  justify-content: flex-end;
  margin-top: var(--ct-space-5);
}

.ct-toast {
  width: fit-content;
  padding: var(--ct-space-3) var(--ct-space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-2);
  color: var(--ct-color-forest);
  background: var(--ct-color-success-soft);
  border: 1px solid var(--ct-color-mint);
  border-radius: var(--ct-radius-md);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-medium);
}

.ct-tooltip {
  position: relative;
}

.ct-icon-button {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-grid;
  place-items: center;
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border-strong);
  border-radius: var(--ct-radius-pill);
  cursor: help;
}

.ct-tooltip__content {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--ct-space-2));
  width: 14rem;
  padding: var(--ct-space-3);
  visibility: hidden;
  color: var(--ct-color-white);
  background: var(--ct-color-forest);
  border-radius: var(--ct-radius-sm);
  font-size: var(--ct-font-size-xs);
  opacity: 0;
  transition: opacity var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-tooltip:hover .ct-tooltip__content,
.ct-tooltip:focus-within .ct-tooltip__content {
  visibility: visible;
  opacity: 1;
}

.ct-pagination {
  margin-top: var(--ct-space-4);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ct-space-3);
  font-size: var(--ct-font-size-sm);
}

.ct-pagination a {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-1);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-pagination a:last-child {
  justify-self: end;
}

.ct-chart {
  margin: 0;
  padding: var(--ct-space-5);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-lg);
}

.ct-chart figcaption {
  color: var(--ct-color-forest);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-chart__plot {
  display: grid;
  gap: var(--ct-space-3);
}

.ct-chart__row {
  display: grid;
  grid-template-columns: 7rem minmax(6rem, 1fr) 2rem;
  align-items: center;
  gap: var(--ct-space-3);
  font-size: var(--ct-font-size-sm);
}

.ct-chart__row progress {
  width: 100%;
  height: 0.7rem;
  accent-color: var(--ct-color-action);
}

.ct-state {
  min-height: 9rem;
  padding: var(--ct-space-4);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ct-space-3);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-lg);
}

.ct-state h3,
.ct-state p {
  margin: 0;
}

.ct-state p {
  margin-top: var(--ct-space-1);
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
}

.ct-state__icon {
  color: var(--ct-color-action);
}

.ct-state--stale .ct-state__icon,
.ct-state--partial .ct-state__icon,
.ct-state--offline .ct-state__icon {
  color: var(--ct-color-attention);
}

.ct-state--error .ct-state__icon,
.ct-state--permission .ct-state__icon {
  color: var(--ct-color-risk);
}

.ct-state progress {
  width: 100%;
  margin-top: var(--ct-space-3);
  accent-color: var(--ct-color-action);
}

.ct-state .ct-button {
  margin-top: var(--ct-space-3);
}

.ct-skeleton {
  width: min(100%, 16rem);
  height: 0.75rem;
  margin-top: var(--ct-space-4);
  display: block;
  background: var(--ct-color-border);
  border-radius: var(--ct-radius-pill);
}

.ct-conversation,
.ct-timeline,
.ct-evidence,
.ct-queue {
  margin: 0;
  padding: var(--ct-space-5);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-lg);
}

.ct-conversation > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: var(--ct-space-3);
}

.ct-timeline,
.ct-queue {
  list-style: none;
}

.ct-timeline li,
.ct-queue li {
  padding: var(--ct-space-3) 0;
  display: flex;
  gap: var(--ct-space-3);
  border-top: 1px solid var(--ct-color-border);
}

/* A queue row that carries its own controls must stack rather than overlap
   them on a phone: a control another element is sitting on top of cannot be
   reached at all. The timeline is left alone — it carries no controls. */
.ct-queue li {
  flex-wrap: wrap;
  align-items: center;
}

.ct-queue li > div:first-child {
  flex: 1 1 14rem;
}

.ct-queue li form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ct-space-3);
}

.ct-timeline li:first-child,
.ct-queue li:first-child {
  padding-top: 0;
  border-top: 0;
}

/* Each line of a row on its own: the access history writes its lines as
   small text, which ran together into one ("Acesso alteradocolega@…"). */
.ct-timeline span,
.ct-timeline small,
.ct-queue small {
  display: block;
}

.ct-queue li {
  align-items: center;
  justify-content: space-between;
}

/* Pessoas e permissões: every row drawn alike, the person on the left and
   their access on the right, in columns all rows share; removing someone is a
   quiet action that asks first, in its own panel. */
.ct-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--ct-space-4);
}

.ct-team li {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: end;
}

.ct-team li > form.ct-actions {
  margin: 0;
  justify-content: flex-start;
}

.ct-team li > form .ct-field {
  width: 17rem;
}

.ct-team li dialog form {
  display: grid;
  gap: var(--ct-space-4);
}

@media (max-width: 44rem) {
  .ct-team {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-team li {
    row-gap: var(--ct-space-3);
  }

  .ct-team li > form .ct-field {
    width: 100%;
  }
}

.ct-emergency {
  margin-top: var(--ct-space-5);
  padding: var(--ct-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-space-5);
  background: var(--ct-color-risk-soft);
  border: 1px solid var(--ct-color-risk);
  border-radius: var(--ct-radius-lg);
}

.ct-emergency p {
  margin-bottom: 0;
}

.ct-catalog {
  width: min(100% - 3rem, 75rem);
  margin: var(--ct-space-5) auto var(--ct-space-8);
}

.ct-catalog__intro {
  max-width: 54rem;
  margin-bottom: var(--ct-space-7);
}

.ct-catalog__intro > p {
  max-width: 48rem;
  font-size: var(--ct-font-size-lg);
}

.ct-catalog__section {
  margin-top: var(--ct-space-7);
  padding-top: var(--ct-space-6);
  border-top: 1px solid var(--ct-color-border);
}

.ct-form-grid,
.ct-stat-grid,
.ct-overlay-grid,
.ct-state-grid,
.ct-pattern-grid {
  display: grid;
  gap: var(--ct-space-4);
}

.ct-form-grid,
.ct-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ct-form-grid > :last-child {
  grid-column: 1 / -1;
}

.ct-stat-grid {
  margin-bottom: var(--ct-space-4);
}

.ct-stat-grid .ct-panel {
  display: grid;
  gap: var(--ct-space-2);
}

.ct-stat-grid strong {
  font-size: var(--ct-font-size-xl);
}

.ct-overlay-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--ct-space-4);
}

.ct-state-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ct-pattern-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[hidden] {
  display: none !important;
}

.ct-preview-grayscale {
  filter: grayscale(1);
}

@media (max-width: 48rem) {
  .ct-header,
  .ct-catalog,
  .ct-entry {
    width: min(100% - 2rem, 44rem);
  }

  .ct-motion-scene {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: var(--ct-space-5);
  }

  .ct-motion-stage {
    min-height: 22rem;
  }

  .ct-motion-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .ct-header {
    padding: var(--ct-space-5) 0;
    align-items: flex-start;
  }

  .ct-lockup {
    width: 9.4rem;
  }

  .ct-header__label {
    max-width: 9rem;
    text-align: center;
  }

  .ct-header__stop {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }

  .ct-entry {
    margin-top: var(--ct-space-4);
    grid-template-columns: 1fr;
    gap: var(--ct-space-5);
  }

  .ct-brand-tile {
    display: none;
  }

  .ct-form-grid,
  .ct-stat-grid,
  .ct-overlay-grid,
  .ct-state-grid,
  .ct-pattern-grid {
    grid-template-columns: 1fr;
  }

  .ct-form-grid > :last-child {
    grid-column: auto;
  }

  .ct-emergency {
    align-items: stretch;
    flex-direction: column;
  }

  .ct-emergency .ct-button {
    width: 100%;
  }
}

@media (max-width: 30rem) {
  .ct-panel,
  .ct-catalog__section {
    padding-right: var(--ct-space-4);
    padding-left: var(--ct-space-4);
  }

  .ct-panel {
    border-radius: var(--ct-radius-lg);
  }

  .ct-chart__row {
    grid-template-columns: 6rem minmax(3rem, 1fr) 2rem;
    gap: var(--ct-space-2);
  }

  .ct-pagination {
    grid-template-columns: repeat(2, 1fr);
  }

  .ct-pagination span {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ct-motion-instant: var(--ct-motion-reduced);
    --ct-motion-fast: var(--ct-motion-reduced);
    --ct-motion-standard: var(--ct-motion-reduced);
    --ct-motion-deliberate: var(--ct-motion-reduced);
    --ct-motion-cycle: var(--ct-motion-reduced);
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

.ct-setup-textarea { resize: vertical; font: inherit; }
.ct-setup-check { display: flex; gap: 0.6rem; align-items: center; margin-block: 0.5rem; }

#interest_terms summary { cursor: pointer; padding-block: 0.7rem; }
#interest_terms summary h3 { display: inline; }

/* ---------- Console shell (US-09.42) ----------
   "Moldura clara", prototype screen 2: the menu sits on the canvas without a
   border and the content is one white panel. Hairline rings instead of
   borders, one type scale and quiet icons, so the data is the loud thing. */

.ct-console {
  --ct-side-w: 15.5rem;
  min-height: 100vh;
  background:
    radial-gradient(1400px 420px at 50% -260px, var(--ct-color-white) 0%, transparent 70%),
    var(--ct-color-canvas);
  font-size: 0.95rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

html[data-menu="mini"] .ct-console {
  --ct-side-w: 4.5rem;
}

.ct-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--ct-side-w) minmax(0, 1fr);
  transition: grid-template-columns var(--ct-motion-standard) var(--ct-ease-standard);
}

.ct-side {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  padding: 0.85rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ct-side__top {
  min-height: 2.4rem;
  padding-left: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ct-side__brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ct-color-mark);
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.ct-side__toggle,
.ct-side__item,
.ct-side__account,
.ct-side__pause {
  position: relative;
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  text-decoration: none;
  transition:
    background-color var(--ct-motion-fast) var(--ct-ease-standard),
    color var(--ct-motion-fast) var(--ct-ease-standard),
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-side__toggle {
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ct-color-muted);
  cursor: pointer;
}

.ct-side svg {
  flex: 0 0 auto;
  stroke-width: 1.75;
}

.ct-side__toggle:hover,
.ct-side__item:hover,
.ct-side__account:hover,
.ct-side__pause:hover {
  color: var(--ct-color-forest);
  background: color-mix(in srgb, var(--ct-color-forest) 5.5%, transparent);
}

/* Which company she is in: the first thing under the brand. */
.ct-side__company {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0.42rem 0.55rem 0.42rem 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border-radius: 0.65rem;
  box-shadow: var(--ct-lift);
  font-size: 0.88rem;
  font-weight: 650;
  white-space: nowrap;
}

.ct-side__company .ct-side__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ct-company-tile,
.ct-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ct-color-white);
  background: linear-gradient(160deg, var(--ct-color-forest-light), var(--ct-color-forest));
  font-weight: 750;
  letter-spacing: 0.02em;
}

.ct-company-tile {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 0.45rem;
  font-size: 0.66rem;
}

.ct-avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  font-size: 0.78rem;
}

.ct-side__nav {
  margin-top: 0.2rem;
  display: grid;
  gap: 0.1rem;
}

.ct-side__item {
  width: 100%;
  padding: 0.5rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ct-color-graphite);
  font-size: 0.9rem;
  font-weight: 550;
  white-space: nowrap;
}

.ct-side__item svg {
  color: var(--ct-color-muted);
}

.ct-side__item[aria-current="page"] {
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  box-shadow: var(--ct-lift);
  font-weight: 650;
}

.ct-side__item[aria-current="page"] svg {
  color: var(--ct-color-action);
}

.ct-side__foot {
  margin-top: auto;
  padding-top: 0.65rem;
  display: grid;
  gap: 0.15rem;
  border-top: 1px solid color-mix(in srgb, var(--ct-color-forest) 8%, transparent);
}

.ct-side__account {
  min-width: 0;
  padding: 0.42rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ct-color-graphite);
}

.ct-side__account .ct-side__label {
  min-width: 0;
  display: grid;
}

.ct-side__account b {
  overflow: hidden;
  color: var(--ct-color-forest);
  font-size: 0.86rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-side__account small {
  color: var(--ct-color-muted);
  font-size: 0.75rem;
}

.ct-side__account[aria-current="page"] {
  background: var(--ct-color-white);
  box-shadow: var(--ct-lift);
}

/* Calm at rest: the pause is always one click away and never shouts. */
.ct-side__pause {
  width: 100%;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ct-color-muted);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.ct-side__pause svg,
.ct-more__pause svg {
  margin-inline: 0.12rem;
  fill: currentColor;
  stroke-width: 0;
}

.ct-side__pause[aria-current="page"] {
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  box-shadow: var(--ct-lift);
}

.ct-side__pause--stopped,
.ct-side__pause--stopped[aria-current="page"],
.ct-more__pause--stopped {
  color: var(--ct-color-attention);
}

.ct-pause-dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-inline: 0.2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, currentColor 18%, transparent);
}

/* Collapsed to icons: each icon names itself on hover and keyboard focus. */
html[data-menu="mini"] .ct-side .ct-side__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html[data-menu="mini"] .ct-side__top {
  padding-left: 0;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.7rem;
}

html[data-menu="mini"] .ct-side__company {
  padding-inline: 0;
  justify-content: center;
  background: transparent;
  box-shadow: none;
}

html[data-menu="mini"] .ct-side__item,
html[data-menu="mini"] .ct-side__account,
html[data-menu="mini"] .ct-side__pause {
  padding-inline: 0;
  justify-content: center;
}

html[data-menu="mini"] .ct-side [data-tip]:hover::after,
html[data-menu="mini"] .ct-side [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  top: 50%;
  left: calc(100% + 0.65rem);
  z-index: 40;
  padding: 0.32rem 0.6rem;
  color: var(--ct-color-white);
  background: var(--ct-color-forest);
  border-radius: 0.45rem;
  box-shadow: var(--ct-shadow-md);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
}

.ct-frame {
  min-width: 0;
  min-height: calc(100vh - 1rem);
  margin: 0.5rem 0.5rem 0.5rem 0;
  display: flex;
  flex-direction: column;
  background: var(--ct-color-white);
  border-radius: 1.1rem;
  box-shadow: var(--ct-shadow-frame);
}

.ct-main {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2.25rem) 3rem;
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 1.6rem;
  container: page / inline-size;
}

.ct-main:focus {
  outline: none;
}

.ct-main__top {
  display: none;
}

.ct-main__company {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ct-color-forest);
  font-size: 0.86rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-main__pause {
  min-height: 2rem;
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ct-color-muted);
  background: var(--ct-color-white);
  border-radius: var(--ct-radius-pill);
  box-shadow: var(--ct-ring);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ct-main__pause svg {
  fill: currentColor;
  stroke-width: 0;
}

.ct-main__pause--stopped {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  box-shadow: inset 0 0 0 1px var(--ct-color-attention-line);
}

/* Existing pages composed of panels sit on the white frame as quiet cards. */
.ct-main .ct-panel {
  padding: 1.35rem 1.5rem;
  border: 0;
  border-radius: 1rem;
  box-shadow: var(--ct-lift);
}

.ct-main .ct-panel h2 {
  font-size: 1.12rem;
}

.ct-button--small {
  min-height: 2.25rem;
  padding: 0.42rem 0.85rem;
  border-radius: var(--ct-radius-pill);
  font-size: 0.84rem;
}

/* Phone: a bottom tab bar instead of the menu; "Mais" opens a sheet. */
.ct-tabbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  padding: 0.3rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
  display: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: color-mix(in srgb, var(--ct-color-white) 96%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--ct-color-forest) 9%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.ct-tabbar__item {
  position: relative;
  padding: 0.3rem 0 0.15rem;
  display: grid;
  justify-items: center;
  gap: 0.12rem;
  color: var(--ct-color-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}

.ct-tabbar__icon {
  width: 3.4rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border-radius: var(--ct-radius-pill);
  transition: background-color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-tabbar__icon svg {
  stroke-width: 1.75;
}

.ct-tabbar__item[aria-current="page"],
.ct-tabbar__item--current {
  color: var(--ct-color-forest);
}

.ct-tabbar__item[aria-current="page"] .ct-tabbar__icon,
.ct-tabbar__item--current .ct-tabbar__icon {
  background: var(--ct-color-selection);
}

/* Sheets: a modal panel at the side on a computer and from the bottom on a
   phone. Closed, a dialog stays hidden by the browser. */
.ct-sheet {
  margin: 0;
  padding: 0;
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border: 0;
  box-shadow: var(--ct-shadow-lg);
}

.ct-sheet[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.ct-sheet::backdrop {
  background: var(--ct-scrim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.ct-sheet--side {
  inset: 0.5rem 0.5rem 0.5rem auto;
  width: min(32rem, calc(100vw - 1rem));
  max-width: none;
  height: auto;
  max-height: calc(100dvh - 1rem);
  overflow: hidden;
  border-radius: 1.15rem;
}

.ct-sheet--more {
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: 88dvh;
  padding: 0.7rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-radius: 1.3rem 1.3rem 0 0;
}

.ct-sheet--more[open] {
  grid-template-rows: auto;
  align-content: start;
  gap: 0.35rem;
}

@media (prefers-reduced-motion: no-preference) {
  .ct-sheet--side[open] {
    animation: ct-sheet-side var(--ct-motion-standard) var(--ct-ease-standard) both;
  }

  .ct-sheet--more[open] {
    animation: ct-sheet-rise var(--ct-motion-standard) var(--ct-ease-standard) both;
  }
}

@keyframes ct-sheet-side {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
}

@keyframes ct-sheet-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

.ct-sheet__head {
  padding: 1.1rem 1.15rem 0.6rem 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ct-sheet__head h2 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.ct-sheet--more .ct-sheet__head {
  padding: 0.2rem 0.3rem;
}

.ct-sheet__close {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ct-color-forest);
  background: var(--ct-color-canvas);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.ct-sheet__body {
  padding: 0 1.3rem 1.1rem;
  overflow: auto;
}

.ct-sheet__body > :first-child {
  margin-top: 0;
}

.ct-sheet__foot {
  padding: 0.85rem 1.3rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid var(--ct-color-border-soft);
}

.ct-more__list {
  display: grid;
}

.ct-more__item,
.ct-more__pause {
  width: 100%;
  padding: 0.85rem 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--ct-color-forest);
  border-bottom: 1px solid var(--ct-color-border-soft);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
}

.ct-more__item svg {
  color: var(--ct-color-muted);
  stroke-width: 1.75;
}

.ct-more__foot {
  margin-top: 0.35rem;
  padding: 0.7rem 0.35rem 0;
  display: grid;
  gap: 0.15rem;
  border-top: 1px solid var(--ct-color-border);
}

.ct-sheet__head + .ct-more__foot {
  margin-top: 0;
  border-top: 0;
}

.ct-more__company {
  margin: 0;
  padding: 0.35rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ct-color-forest);
  font-weight: 650;
}

.ct-more__account {
  padding-inline: 0;
}

.ct-more__account b,
.ct-more__account small {
  display: block;
}

.ct-more__account small {
  font-weight: 500;
}

.ct-more__pause {
  padding-inline: 0.15rem;
  color: var(--ct-color-graphite);
  border-bottom: 0;
  font-size: 0.92rem;
}

.ct-more__pause svg {
  margin-inline: 0.15rem;
}

@media (max-width: 44rem) {
  .ct-shell {
    display: block;
  }

  .ct-side {
    display: none;
  }

  .ct-frame {
    min-height: 100vh;
    margin: 0;
    padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .ct-main {
    padding-top: 1.4rem;
    gap: 1.35rem;
  }

  .ct-main__top {
    margin-bottom: -0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .ct-tabbar {
    display: grid;
  }

  .ct-sheet--side {
    inset: auto 0 0;
    width: 100%;
    max-height: 88dvh;
    border-radius: 1.25rem 1.25rem 0 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .ct-sheet--side[open] {
      animation-name: ct-sheet-rise;
    }
  }
}

/* ---------- Page patterns (US-09.42) ---------- */
.ct-page-header {
  display: grid;
  gap: 0.85rem;
}

.ct-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-muted);
  font-size: 0.85rem;
}

.ct-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ct-crumbs a {
  color: var(--ct-color-muted);
  font-weight: 550;
  text-decoration: none;
}

.ct-crumbs a:hover {
  color: var(--ct-color-forest);
  text-decoration: underline;
}

.ct-crumbs svg {
  color: var(--ct-color-faint);
}

.ct-page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.ct-page-header__text {
  min-width: min(100%, 18rem);
}

.ct-page-eyebrow {
  margin: 0 0 0.55rem;
  color: var(--ct-color-muted);
  font-size: 0.86rem;
  font-weight: 550;
}

.ct-page-title {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: clamp(1.75rem, 3.3vw, 2.35rem);
  font-weight: 720;
  letter-spacing: -0.038em;
  line-height: 1.08;
}

.ct-page-lede {
  max-width: 40rem;
  margin: 0.5rem 0 0;
  color: var(--ct-color-graphite);
  font-size: 1.02rem;
}

.ct-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ct-page-tabs {
  margin-top: 0.25rem;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--ct-color-border);
  scrollbar-width: none;
}

.ct-page-tab {
  position: relative;
  padding: 0.55rem 0 0.75rem;
  color: var(--ct-color-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ct-page-tab:hover,
.ct-page-tab[aria-current="page"] {
  color: var(--ct-color-forest);
}

.ct-page-tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--ct-color-action);
  border-radius: 2px;
}

.ct-stepper {
  max-width: 46rem;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0.6rem;
  list-style: none;
}

.ct-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.55rem;
}

.ct-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.95rem;
  right: 0.6rem;
  left: 2.55rem;
  height: 2px;
  background: var(--ct-color-border);
  border-radius: 2px;
}

.ct-step--done:not(:last-child)::after {
  background: color-mix(in srgb, var(--ct-color-action) 55%, var(--ct-color-white));
}

.ct-step__mark {
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-muted);
  background: var(--ct-color-white);
  border: 1.5px solid var(--ct-color-border-strong);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
}

.ct-step--done .ct-step__mark {
  color: var(--ct-color-white);
  background: var(--ct-color-action);
  border-color: var(--ct-color-action);
}

.ct-step--current .ct-step__mark {
  color: var(--ct-color-white);
  background: var(--ct-color-forest);
  border-color: var(--ct-color-forest);
  box-shadow: 0 0 0 4px var(--ct-color-selection);
}

.ct-step--waiting .ct-step__mark {
  color: var(--ct-color-waiting);
  background: var(--ct-color-waiting-soft);
  border-color: var(--ct-color-waiting);
}

.ct-step__text {
  min-width: 0;
  display: grid;
}

.ct-step__name {
  color: var(--ct-color-forest);
  font-size: 0.95rem;
  font-weight: 650;
}

.ct-step--next .ct-step__name {
  color: var(--ct-color-muted);
}

.ct-step__detail {
  overflow: hidden;
  color: var(--ct-color-muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container page (max-width: 36rem) {
  .ct-stepper {
    grid-auto-flow: row;
    gap: 0;
  }

  .ct-step {
    padding: 0.45rem 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.75rem;
  }

  .ct-step:not(:last-child)::after {
    top: 2.35rem;
    right: auto;
    bottom: -0.45rem;
    left: 0.95rem;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
  }
}

.ct-band,
.ct-state-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem 0.85rem;
  color: var(--ct-color-graphite);
  border-radius: 1rem;
  font-size: 0.92rem;
}

.ct-band {
  padding: 0.8rem 0.9rem 0.8rem 1.05rem;
  background: var(--ct-color-attention-soft);
  box-shadow: inset 0 0 0 1px var(--ct-color-attention-line);
}

.ct-band > svg {
  color: var(--ct-color-attention);
}

.ct-band > p,
.ct-state-error > p {
  margin: 0;
}

/* Narrow: the action moves under the words, which stay beside the icon. */
@container page (max-width: 36rem) {
  .ct-band,
  .ct-state-error {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ct-band > :nth-child(3),
  .ct-state-error > :nth-child(3) {
    grid-column: 2;
    justify-self: start;
  }
}

.ct-band b {
  color: var(--ct-color-attention);
  font-weight: 650;
}

.ct-state-error {
  padding: 1rem 1.15rem;
  border: 1px dashed var(--ct-color-border-strong);
}

.ct-state-error > svg {
  color: var(--ct-color-muted);
}

.ct-state-error strong {
  font-weight: 600;
}

/* A step that failed (US-09.128): the calm card where the page would be. */
.ct-step-failed {
  max-width: 66rem;
  display: grid;
  gap: 1.75rem;
}

.ct-step-failed__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ct-step-failed__actions > form {
  margin: 0;
}

.ct-state-waiting {
  display: grid;
  gap: 0.85rem;
}

.ct-state-waiting__line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ct-color-muted);
  font-size: 0.88rem;
  font-weight: 550;
}

.ct-shimmer {
  display: block;
  background: linear-gradient(
    90deg,
    var(--ct-color-border-soft) 0%,
    var(--ct-color-canvas-soft) 50%,
    var(--ct-color-border-soft) 100%
  );
  background-size: 200% 100%;
  border-radius: 1rem;
  animation: ct-shimmer var(--ct-motion-cycle) linear infinite;
}

.ct-shimmer--block {
  height: 9rem;
}

.ct-shimmer--row {
  height: 4.4rem;
}

@keyframes ct-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

.ct-state-center {
  max-width: 34rem;
  margin: clamp(1.5rem, 8vh, 4.5rem) auto 0;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.75rem;
  text-align: center;
}

.ct-state-center h2 {
  margin: 0.2rem 0 0;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.ct-state-center p {
  margin: 0;
  color: var(--ct-color-muted);
}

.ct-state-center__icon {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-forest);
  background: var(--ct-color-icon-tile);
  border-radius: 50%;
}

.ct-state-center__actions {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.ct-toast-message {
  position: fixed;
  bottom: 1.5rem;
  left: calc(50% + var(--ct-side-w) / 2);
  z-index: 60;
  /* Its own width, not what is left right of the centre: a long message
     wraps in a readable line instead of a narrow column. */
  width: max-content;
  max-width: min(34rem, calc(100vw - 2rem));
  padding: 0.7rem 0.75rem 0.7rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ct-color-white);
  background: var(--ct-color-forest);
  border-radius: var(--ct-radius-md);
  box-shadow: var(--ct-shadow-lg);
  font-size: 0.9rem;
  font-weight: 550;
  transform: translateX(-50%);
}

.ct-toast-message > svg {
  flex: 0 0 auto;
  color: var(--ct-color-mint);
}

.ct-toast-message__close {
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ct-color-white);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.ct-toast-message__close:hover {
  background: var(--ct-color-on-dark-hover);
}

/* What did not happen: calm amber, never the green of what worked. */
.ct-toast-message--again {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  box-shadow: var(--ct-shadow-lg), inset 0 0 0 1px color-mix(in srgb, var(--ct-color-attention) 28%, transparent);
}

.ct-toast-message--again > svg,
.ct-toast-message--again .ct-toast-message__close {
  color: var(--ct-color-attention);
}

.ct-toast-message--again .ct-toast-message__close:hover {
  background: color-mix(in srgb, var(--ct-color-attention) 12%, transparent);
}

/* Without the page's script a toast stays, its close button hidden: it must
   not cover what is under it, such as "Colar link do Google Planilhas". */
.ct-toast-message:has(> .ct-toast-message__close[hidden]) {
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .ct-toast-message {
    animation: ct-toast-in var(--ct-motion-standard) var(--ct-ease-standard) both;
  }
}

@keyframes ct-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}

@media (max-width: 44rem) {
  .ct-toast-message {
    bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
  }
}

/* ---------- Entry: sign-in and the company link (US-09.42) ---------- */
.ct-entry-page {
  width: min(100% - 2rem, 25.5rem);
  margin: 0 auto;
  padding: clamp(2.5rem, 12vh, 7rem) 0 3rem;
  display: grid;
  gap: 1.75rem;
}

.ct-entry-page:focus {
  outline: none;
}

.ct-entry-page__lockup {
  width: 9.5rem;
  height: auto;
  justify-self: center;
}

.ct-entry-card {
  padding: 1.75rem 1.6rem 1.6rem;
  display: grid;
  gap: 1.1rem;
  background: var(--ct-color-white);
  border-radius: 1.2rem;
  box-shadow: var(--ct-shadow-entry);
}

.ct-entry-card h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.ct-entry-card > p {
  margin: -0.5rem 0 0;
  color: var(--ct-color-muted);
}

.ct-entry-card .ct-auth-form {
  margin: 0;
}

.ct-entry-card .ct-auth-form .ct-button {
  justify-content: center;
}

.ct-entry-note {
  margin: 0;
  color: var(--ct-color-muted);
  font-size: 0.86rem;
  text-align: center;
}

.ct-support {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
}

.ct-support summary {
  cursor: pointer;
}

/* Minha conta */
.ct-account {
  max-width: 34rem;
  padding: 1.35rem 1.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1.1rem;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-lift);
}

.ct-avatar--large {
  width: 3rem;
  height: 3rem;
  font-size: 1.1rem;
}

.ct-account__facts {
  margin: 0;
  display: grid;
  gap: 0.8rem;
}

.ct-account__facts div {
  display: grid;
  gap: 0.1rem;
}

.ct-account__facts dt {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.ct-account__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ct-color-forest);
  font-weight: 600;
}

/* The name colleagues see (US-09.86). */
.ct-account__name {
  max-width: 34rem;
  padding: 1.1rem 1.5rem 1.25rem;
  display: grid;
  justify-items: start;
  gap: 0.85rem;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-lift);
}

.ct-account__name .ct-field {
  width: 100%;
}

/* The way to the people who use the company's CashTeam. */
.ct-account__go {
  max-width: 34rem;
  padding: 0.95rem 1.1rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-lift);
  text-decoration: none;
}

.ct-account__go > svg:first-child {
  color: var(--ct-color-action);
}

.ct-account__go span {
  display: grid;
  gap: 0.15rem;
}

.ct-account__go b {
  font-weight: var(--ct-font-weight-semibold);
}

.ct-account__go small {
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
}

.ct-account__go > svg:last-child {
  color: var(--ct-color-muted);
}

.ct-account__go:hover {
  background: var(--ct-color-canvas-soft);
}

.ct-account__go:focus-visible {
  outline: none;
  box-shadow: var(--ct-focus-ring);
}

.ct-account__out {
  margin: 0;
}

/* Fixture-only catalog of the page patterns. */
.ct-pattern {
  display: grid;
  align-content: start;
  gap: 1.1rem;
}

.ct-pattern h2 {
  margin: 0;
}

.ct-pattern-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ct-pattern-row > div {
  display: grid;
}

.ct-pattern-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-pattern-list li {
  padding: 0.75rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--ct-color-border-soft);
}

.ct-pattern-list li:last-child {
  border-bottom: 0;
}

.ct-pattern-list strong {
  color: var(--ct-color-forest);
  font-variant-numeric: tabular-nums;
}

.ct-pattern-states {
  display: grid;
  gap: 1rem;
}

.ct-pattern-states > h2 {
  margin: 0.5rem 0 0;
}

.ct-pattern-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.ct-pattern-grid-2 .ct-state-center {
  margin-top: 0.5rem;
}

/* Notices on console pages take the shell's hairline look. */
.ct-console .ct-notice {
  padding: 0.9rem 1rem;
  border-left: 0;
  border-radius: 0.9rem;
  box-shadow: inset 0 0 0 1px var(--ct-color-attention-line);
}

.ct-console .ct-notice--risk {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-color-risk) 24%, transparent);
}

.ct-console .ct-notice--info {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-color-agent) 20%, transparent);
}

.ct-console .ct-notice--success {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-color-action) 22%, transparent);
}

/* Phone: a short tab label where the full one would be cut; screen readers
   keep hearing the full one. */
.ct-page-tab__short {
  display: none;
}

.ct-tabbar__icon {
  position: relative;
}

/* While collections are paused, the Mais tab carries a calm amber dot. */
.ct-tabbar__paused {
  position: absolute;
  top: 0.2rem;
  right: 0.95rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--ct-color-attention);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ct-color-white);
}

@media (max-width: 44rem) {
  .ct-page-tab__full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ct-page-tab__short {
    display: inline;
  }
}

/* ---------- Importar planilha (US-09.39) ----------
   Prototype screen 3. Her own spreadsheet, tagged, is the one bold element;
   everything around it stays quiet: hairline rings, the console's type
   scale, calm amber only where something is in doubt. */
.ct-imp {
  max-width: 66rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
}

.ct-imp p {
  margin: 0;
}

.ct-imp .ct-page-header {
  gap: 0;
}

.ct-imp .ct-crumbs {
  margin-bottom: 0.8rem;
}

.ct-imp > .ct-crumbs {
  margin-bottom: -0.55rem;
}

.ct-imp .ct-page-header .ct-imp-steps {
  margin-bottom: 1.35rem;
}

.ct-crumbs__here {
  color: var(--ct-color-muted);
}

.ct-imp .ct-page-title {
  font-size: clamp(1.75rem, 3.2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.ct-imp .ct-page-lede {
  max-width: none;
  margin-top: 0.4rem;
  font-size: 1rem;
}

.ct-imp-h2 {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.012em;
}

.ct-imp-h3 {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: 0.96rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.ct-imp-sec {
  min-width: 0;
  display: grid;
  gap: 0.7rem;
}

.ct-imp-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ct-imp-calm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ct-color-muted);
  font-size: 0.88rem;
}

.ct-imp-calm svg {
  color: var(--ct-color-action);
  stroke-width: 1.75;
}

.ct-imp-likely {
  padding: 0.1rem 0.5rem;
  display: inline-flex;
  align-items: center;
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
  border-radius: var(--ct-radius-pill);
  font-size: 0.7rem;
  font-weight: 650;
  white-space: nowrap;
}

/* The steps: a line of numbered marks; on a phone, the marks alone. */
.ct-imp-steps .ct-stepper {
  max-width: 40rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ct-imp-steps .ct-step {
  position: static;
  min-width: 0;
  padding: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ct-imp-steps .ct-step:last-child {
  flex: 0 0 auto;
}

.ct-imp-steps .ct-step:not(:last-child)::after {
  position: static;
  width: auto;
  min-width: 0.75rem;
  height: 2px;
  flex: 1 1 auto;
  background: var(--ct-color-line);
  transform: none;
}

.ct-imp-steps .ct-step--done:not(:last-child)::after {
  background: color-mix(in srgb, var(--ct-color-action) 50%, var(--ct-color-white));
}

.ct-imp-steps .ct-step__link,
.ct-imp-steps .ct-step > .ct-step__mark {
  flex: 0 0 auto;
}

.ct-imp-steps .ct-step__link {
  padding: 0.25rem 0.45rem 0.25rem 0.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: var(--ct-radius-pill);
  text-decoration: none;
}

.ct-imp-steps .ct-step:not(:has(.ct-step__link)) {
  padding-left: 0.2rem;
}

.ct-imp-steps .ct-step > .ct-step__text {
  padding-right: 0.45rem;
}

.ct-imp-steps .ct-step__mark {
  width: 1.8rem;
  height: 1.8rem;
  border-color: var(--ct-color-line-strong);
}

.ct-imp-steps .ct-step--current .ct-step__mark {
  border-color: var(--ct-color-forest);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ct-color-mint) 45%, transparent);
}

.ct-imp-steps .ct-step--done .ct-step__mark {
  border-color: var(--ct-color-action);
}

.ct-imp-steps .ct-step__name {
  color: var(--ct-color-muted);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.ct-imp-steps .ct-step--current .ct-step__name {
  color: var(--ct-color-forest);
  font-weight: 700;
}

.ct-imp-steps .ct-step--next .ct-step__name {
  color: var(--ct-color-step-next);
}

.ct-imp-steps .ct-step__link:hover .ct-step__name {
  color: var(--ct-color-forest);
}

/* Buttons of the import, as the prototype draws them. */
.ct-imp-btn {
  padding: 0.66rem 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--ct-radius-md);
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--ct-motion-fast) var(--ct-ease-standard),
    border-color var(--ct-motion-fast) var(--ct-ease-standard),
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard),
    transform var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-imp-btn svg {
  flex: 0 0 auto;
}

.ct-imp-btn--primary {
  color: var(--ct-color-white);
  background: linear-gradient(180deg, var(--ct-color-action-top), var(--ct-color-action));
  box-shadow: var(--ct-shadow-primary);
}

.ct-imp-btn--primary:hover {
  color: var(--ct-color-white);
  background: linear-gradient(180deg, var(--ct-color-action), var(--ct-color-action-hover));
}

.ct-imp-btn--primary:active {
  transform: translateY(1px);
}

.ct-imp-btn--primary:disabled {
  background: var(--ct-color-line-strong);
  box-shadow: none;
  cursor: not-allowed;
}

.ct-imp-btn--ghost {
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border-color: var(--ct-color-line);
  box-shadow: var(--ct-shadow-xs);
}

.ct-imp-btn--ghost:hover {
  color: var(--ct-color-forest);
  border-color: var(--ct-color-line-strong);
}

.ct-imp-btn--sm {
  padding: 0.42rem 0.8rem;
  border-radius: var(--ct-radius-pill);
  font-size: 0.84rem;
}

.ct-imp-btn--quiet {
  padding: 0.4rem 0.55rem;
  color: var(--ct-color-muted);
  background: transparent;
  font-size: 0.86rem;
  font-weight: 600;
}

.ct-imp-btn--quiet:hover {
  color: var(--ct-color-forest);
}

.ct-imp-btn--mint {
  color: var(--ct-color-forest);
  background: var(--ct-color-mint);
}

.ct-imp-btn--mint:hover {
  color: var(--ct-color-forest);
  background: color-mix(in srgb, var(--ct-color-mint) 85%, var(--ct-color-white));
}

/* A choice is a native radio she does not see: the card around it shows it,
   and its focus. */
.ct-imp-choice,
.ct-imp-toggle,
.ct-imp-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

:is(.ct-imp-what-pick, .ct-imp-cart-pick, .ct-imp-sheet-pick, .ct-imp-kind, .ct-imp-seg-pick, .ct-imp-rhythm-pick, .ct-imp-btn):has(:focus-visible) {
  outline: 0.1875rem solid var(--ct-color-agent);
  outline-offset: 0.1875rem;
}

.ct-imp-start {
  display: grid;
  gap: 1.35rem;
}

.ct-imp-locked {
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.35rem;
  border: 0;
}

/* What she wants to do: two cards, each with its model. */
.ct-imp-what {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.ct-imp-what-card {
  position: relative;
  display: grid;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-lift);
  transition:
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard),
    background-color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-imp-what-card:hover {
  box-shadow: var(--ct-lift-hover);
}

.ct-imp-what-card:has(.ct-imp-choice:checked) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ct-color-success-soft) 70%, var(--ct-color-white)), var(--ct-color-white) 70%);
  box-shadow: var(--ct-shadow-chosen);
}

.ct-imp-what-pick {
  position: relative;
  padding: 1rem 1.05rem 0.55rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  border-radius: 1rem;
  cursor: pointer;
}

.ct-imp-what-ic {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-muted);
  background: var(--ct-color-icon-tile);
  border-radius: 0.8rem;
  transition:
    background-color var(--ct-motion-fast) var(--ct-ease-standard),
    color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-imp-what-ic svg {
  stroke-width: 1.75;
}

.ct-imp-what-card:has(.ct-imp-choice:checked) .ct-imp-what-ic {
  color: var(--ct-color-white);
  background: linear-gradient(160deg, var(--ct-color-action-top), var(--ct-color-action));
  box-shadow: var(--ct-shadow-chosen-icon);
}

.ct-imp-what-text {
  display: grid;
  gap: 0.1rem;
}

.ct-imp-what-text b {
  color: var(--ct-color-forest);
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.ct-imp-what-text span {
  color: var(--ct-color-muted);
  font-size: 0.84rem;
}

.ct-imp-radio {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ct-color-line-strong);
  transition: box-shadow var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-imp-what-card:has(.ct-imp-choice:checked) .ct-imp-radio {
  box-shadow:
    inset 0 0 0 1.5px var(--ct-color-action),
    inset 0 0 0 4.5px var(--ct-color-white),
    inset 0 0 0 9px var(--ct-color-action);
}

.ct-imp-model {
  justify-self: start;
  margin-left: 4.25rem;
  padding: 0.15rem 0.4rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-action);
  border-radius: 0.4rem;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
}

.ct-imp-model:hover {
  color: var(--ct-color-action-hover);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* The carteira. */
.ct-imp-carts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.ct-imp-cart-pick {
  position: relative;
  min-width: 12.5rem;
  padding: 0.7rem 1rem 0.72rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.55rem;
  background: var(--ct-color-white);
  border-radius: 0.9rem;
  box-shadow: var(--ct-lift);
  cursor: pointer;
  transition:
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard),
    background-color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-imp-cart-pick > b,
.ct-imp-cart-pick > span:not(.ct-imp-cart-plus) {
  grid-column: 1 / -1;
}

.ct-imp-cart-pick b {
  color: var(--ct-color-forest);
  font-size: 0.93rem;
}

.ct-imp-cart-pick > span:not(.ct-imp-cart-plus) {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
}

.ct-imp-cart-pick:hover {
  box-shadow: var(--ct-lift-hover-small);
}

.ct-imp-cart-pick:has(.ct-imp-choice:checked) {
  background: color-mix(in srgb, var(--ct-color-success-soft) 55%, var(--ct-color-white));
  box-shadow: var(--ct-shadow-chosen-small);
}

.ct-imp-cart-pick--new {
  align-items: center;
}

.ct-imp-cart-pick--new > b,
.ct-imp-cart-pick--new > span:not(.ct-imp-cart-plus) {
  grid-column: 2;
}

.ct-imp-cart-plus {
  width: 1.9rem;
  height: 1.9rem;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  color: var(--ct-color-action);
  background: var(--ct-color-canvas);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--ct-color-line);
}

.ct-imp-newname {
  max-width: 26rem;
  display: none;
  gap: 0.35rem;
}

.ct-imp-start:has(#ct-imp-cart-new:checked) .ct-imp-newname {
  display: grid;
}

.ct-imp-newname label {
  color: var(--ct-color-graphite);
  font-size: 0.84rem;
  font-weight: 600;
}

.ct-imp-field {
  min-width: 0;
  padding: 0.55rem 0.7rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-line-strong);
  border-radius: var(--ct-radius-sm);
  font: inherit;
}

.ct-imp-field:hover {
  border-color: var(--ct-color-forest);
}

.ct-imp-field[aria-invalid="true"] {
  border-color: var(--ct-color-attention);
  box-shadow: 0 0 0 3px var(--ct-color-attention-line);
}

.ct-imp-field--sm {
  padding: 0.3rem 0.5rem;
  border-radius: 0.45rem;
  font-size: 0.86rem;
}

.ct-imp-cart-note,
.ct-imp-size-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: var(--ct-color-attention);
  font-size: 0.84rem;
  font-weight: 550;
}

/* A file too large for the import: said where she chose it, and only then. */
.ct-imp-size-note {
  justify-content: center;
  margin-top: 0.6rem;
}
.ct-imp-size-note[hidden] {
  display: none;
}

.ct-imp-cart-note svg,
.ct-imp-size-note svg {
  margin-top: 0.15rem;
  flex: 0 0 auto;
}

/* What is said for each task: the carteira and the remembered columns
   belong to customers only. */
.ct-imp-for-payments,
.ct-imp-remember {
  display: none;
}

.ct-imp-start:has(#ct-imp-task-payments:checked) .ct-imp-for-payments {
  display: inline;
}

.ct-imp-start:has(#ct-imp-task-payments:checked) .ct-imp-for-customers,
.ct-imp-start:has(#ct-imp-task-payments:checked) .ct-imp-cart {
  display: none;
}

.ct-imp-start:has(#ct-imp-cart-0:checked):not(:has(#ct-imp-task-payments:checked)) .ct-imp-remember--0,
.ct-imp-start:has(#ct-imp-cart-1:checked):not(:has(#ct-imp-task-payments:checked)) .ct-imp-remember--1,
.ct-imp-start:has(#ct-imp-cart-2:checked):not(:has(#ct-imp-task-payments:checked)) .ct-imp-remember--2,
.ct-imp-start:has(#ct-imp-cart-3:checked):not(:has(#ct-imp-task-payments:checked)) .ct-imp-remember--3,
.ct-imp-start:has(#ct-imp-cart-4:checked):not(:has(#ct-imp-task-payments:checked)) .ct-imp-remember--4,
.ct-imp-start:has(#ct-imp-cart-5:checked):not(:has(#ct-imp-task-payments:checked)) .ct-imp-remember--5 {
  display: inline-flex;
}

/* The drop zone: a sheet of paper waiting for her planilha. */
.ct-imp-drop {
  position: relative;
  padding: 2.3rem 1.5rem 1.9rem;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  background:
    radial-gradient(28rem 12rem at 50% 42%, var(--ct-color-white) 30%, transparent 75%),
    linear-gradient(var(--ct-color-border-soft) 1px, transparent 1px) 0 0 / 100% 2.1rem,
    linear-gradient(90deg, var(--ct-color-border-soft) 1px, transparent 1px) 0 0 / 6.5rem 100%,
    var(--ct-color-canvas-soft);
  border: 1.5px dashed var(--ct-color-line-strong);
  border-radius: 1.3rem;
  transition:
    border-color var(--ct-motion-fast) var(--ct-ease-standard),
    background-color var(--ct-motion-fast) var(--ct-ease-standard),
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-imp-drop--over {
  background-color: var(--ct-color-success-soft);
  border-color: var(--ct-color-action);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ct-color-mint) 35%, transparent);
}

.ct-imp-sheet-art {
  width: 6rem;
  height: auto;
  filter: var(--ct-filter-art);
}

.ct-imp-art-paper {
  fill: var(--ct-color-white);
  stroke: var(--ct-color-art-stroke);
}

.ct-imp-art-lines {
  fill: none;
  stroke: var(--ct-color-line);
}

.ct-imp-art-head {
  fill: var(--ct-color-selection);
}

.ct-imp-art-band {
  stroke: var(--ct-color-selection);
  stroke-width: 8;
}

.ct-imp-art-green {
  fill: var(--ct-color-art-chip);
}

.ct-imp-art-grey {
  fill: var(--ct-color-line);
}

.ct-imp-art-badge {
  fill: var(--ct-color-action);
}

.ct-imp-art-arrow {
  fill: none;
  stroke: var(--ct-color-white);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ct-imp-drop-title {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 680;
  letter-spacing: -0.02em;
}

.ct-imp-drop-sub {
  color: var(--ct-color-muted);
  font-size: 0.9rem;
}

.ct-imp-drop-actions {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.ct-imp-choose,
.ct-imp-link-toggle {
  position: relative;
}

.ct-imp-linkrow {
  width: min(34rem, 100%);
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.ct-imp-drop:has(#ct-imp-link-open:checked) .ct-imp-linkrow {
  display: flex;
}

.ct-imp-linkrow .ct-imp-field {
  flex: 1 1 16rem;
}

.ct-imp-linkrow .ct-imp-cart-note {
  flex-basis: 100%;
  justify-content: center;
}

.ct-imp-remember {
  margin-top: 0.35rem;
  padding: 0.22rem 0.65rem 0.22rem 0.5rem;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
  border-radius: var(--ct-radius-pill);
  font-size: 0.8rem;
  font-weight: 650;
}

.ct-imp-drop .ct-offline:not([hidden]) {
  display: block;
}

/* Reading: the mark comes together, the real stages tick by. */
.ct-imp-reading {
  padding: 1.7rem 1.8rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.6rem;
  background: var(--ct-color-white);
  border-radius: 1.3rem;
  box-shadow: var(--ct-lift);
}

.ct-imp-mark {
  width: 4.6rem;
  height: 4.6rem;
  overflow: visible;
}

.ct-imp-piece {
  fill: var(--ct-color-mark);
  transform-box: fill-box;
  transform-origin: center;
}

.ct-imp-piece--1 {
  fill: var(--ct-color-logo);
}

@media (prefers-reduced-motion: no-preference) {
  .ct-imp-mark--assembling .ct-imp-piece {
    animation: ct-imp-assemble var(--ct-motion-assemble) var(--ct-ease-assemble) both;
  }

  .ct-imp-mark--assembling .ct-imp-piece--0 {
    --from: -9px, -9px;
    animation-delay: calc(var(--ct-motion-stagger) * 4);
  }

  .ct-imp-mark--assembling .ct-imp-piece--1 {
    --from: 13px, -13px;
    animation-delay: calc(var(--ct-motion-stagger) * 16);
  }

  .ct-imp-mark--assembling .ct-imp-piece--2 {
    --from: -10px, 10px;
    animation-delay: calc(var(--ct-motion-stagger) * 26);
  }

  .ct-imp-mark--assembling .ct-imp-piece--3 {
    --from: 10px, 10px;
    animation-delay: calc(var(--ct-motion-stagger) * 34);
  }

  .ct-imp-stage--now .ct-imp-stage-dot {
    animation: ct-imp-spin var(--ct-motion-spin) linear infinite;
  }
}

@keyframes ct-imp-assemble {
  from {
    opacity: 0;
    transform: translate(var(--from)) scale(0.82);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ct-imp-spin {
  to {
    transform: rotate(360deg);
  }
}

.ct-imp-reading-text {
  min-width: 0;
  display: grid;
  gap: 0.75rem;
}

.ct-imp-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  color: var(--ct-color-muted);
  font-size: 0.88rem;
}

.ct-imp-file svg {
  color: var(--ct-color-action);
}

.ct-imp-file b {
  color: var(--ct-color-forest);
  font-weight: 650;
}

.ct-imp-stages {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  list-style: none;
}

.ct-imp-stages li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ct-color-muted);
  font-size: 0.93rem;
}

.ct-imp-stages .ct-imp-stage--done {
  color: var(--ct-color-graphite);
}

.ct-imp-stages .ct-imp-stage--now {
  color: var(--ct-color-forest);
  font-weight: 650;
}

.ct-imp-stage-dot {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ct-color-line);
}

.ct-imp-stage--done .ct-imp-stage-dot {
  color: var(--ct-color-white);
  background: var(--ct-color-action);
  box-shadow: none;
}

.ct-imp-stage--now .ct-imp-stage-dot {
  border: 2px solid transparent;
  border-top-color: var(--ct-color-action);
  box-shadow: inset 0 0 0 2px var(--ct-color-line);
}

/* Which tab of the workbook. */
.ct-imp-sheets {
  padding: 1.4rem 1.5rem;
  display: grid;
  gap: 0.85rem;
  background: var(--ct-color-white);
  border-radius: 1.3rem;
  box-shadow: var(--ct-lift);
}

.ct-imp-sheet-list {
  max-width: 34rem;
  display: grid;
  gap: 0.5rem;
}

.ct-imp-sheet-pick {
  position: relative;
  padding: 0.75rem 0.95rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  background: var(--ct-color-white);
  border-radius: 0.8rem;
  box-shadow: var(--ct-lift);
  cursor: pointer;
}

.ct-imp-sheet-pick b {
  color: var(--ct-color-forest);
}

.ct-imp-sheet-pick > span:not(.ct-imp-likely) {
  color: var(--ct-color-muted);
  font-size: 0.84rem;
}

.ct-imp-sheet-pick:has(.ct-imp-choice:checked) {
  background: color-mix(in srgb, var(--ct-color-success-soft) 55%, var(--ct-color-white));
  box-shadow: 0 0 0 1.5px var(--ct-color-action);
}

/* Calm amber for what she can fix: a file that does not open, a missing
   column, a column in doubt, a carteira someone else changed. */
.ct-imp .ct-band {
  padding: 0.95rem 1.05rem;
  gap: 0.75rem;
}

.ct-imp .ct-band > form {
  margin: 0;
}

.ct-imp-error .ct-band > p {
  display: grid;
  gap: 0.1rem;
}

/* Focused by the page so it lands on the reason, as the main region is. */
.ct-imp-error:focus {
  outline: none;
  box-shadow: none;
}

/* Editing a planilha is the computer's: a phone says so. */
.ct-imp-on-phone {
  display: none;
}

@media (max-width: 44rem) {
  .ct-imp-on-phone {
    display: block;
    margin-top: 0.35rem;
  }
}

.ct-imp-missing .ct-band {
  grid-template-columns: auto minmax(0, 1fr);
}

.ct-imp-missing .ct-band > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}

.ct-imp-missing label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.ct-imp-doubt .ct-band > p {
  line-height: 1.45;
}

.ct-imp-doubt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.ct-imp-doubt-actions form {
  margin: 0;
}

.ct-imp-doubt-actions .ct-imp-btn--quiet {
  color: var(--ct-color-attention);
}

.ct-imp-stale .ct-band > p,
.ct-imp-failed .ct-band > p {
  line-height: 1.45;
}

/* Read-only: she can look, not import. */
.ct-imp-denied .ct-state-center {
  max-width: 34rem;
  margin: 0;
  padding: 1.8rem;
  justify-items: start;
  gap: 0.6rem;
  text-align: left;
  background: var(--ct-color-white);
  border-radius: 1.3rem;
  box-shadow: var(--ct-lift);
}

.ct-imp-denied .ct-state-center__icon {
  width: 2.8rem;
  height: 2.8rem;
  color: var(--ct-color-muted);
  border-radius: 0.9rem;
}

.ct-imp-denied .ct-state-center__icon svg {
  width: 20px;
  height: 20px;
}

.ct-imp-denied h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.ct-imp-denied .ct-state-center p {
  color: var(--ct-color-graphite);
}

/* Columns: how each row reads, and her own spreadsheet with a tag over each
   column. */
.ct-imp-understood {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  color: var(--ct-color-graphite);
}

.ct-imp-warn {
  color: var(--ct-color-attention);
  font-weight: 650;
}

.ct-imp-same-cols {
  padding: 0.15rem 0.6rem 0.15rem 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
  border-radius: var(--ct-radius-pill);
  font-size: 0.8rem;
  font-weight: 650;
}

.ct-imp-kinds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.ct-imp-kind {
  position: relative;
  padding: 0.85rem 0.95rem 0.9rem;
  display: grid;
  justify-items: start;
  gap: 0.15rem;
  background: var(--ct-color-white);
  border-radius: 0.95rem;
  box-shadow: var(--ct-lift);
  cursor: pointer;
  transition:
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard),
    background-color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-imp-kind b {
  color: var(--ct-color-forest);
  font-size: 0.92rem;
}

.ct-imp-kind > span:not(.ct-imp-ka-art):not(.ct-imp-likely) {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
}

.ct-imp-kind:has(.ct-imp-choice:checked) {
  background: color-mix(in srgb, var(--ct-color-success-soft) 55%, var(--ct-color-white));
  box-shadow: var(--ct-shadow-chosen-small);
}

.ct-imp-kind .ct-imp-likely {
  margin-top: 0.3rem;
}

.ct-imp-ka-art {
  height: 2.4rem;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ct-imp-ka {
  display: grid;
  gap: 0.22rem;
}

.ct-imp-ka i {
  width: 2.1rem;
  height: 0.36rem;
  display: block;
  background: color-mix(in srgb, var(--ct-color-forest) 18%, var(--ct-color-white));
  border-radius: var(--ct-radius-pill);
}

.ct-imp-ka i.ct-imp-ka-wide {
  width: 3rem;
  height: 0.55rem;
}

.ct-imp-ka--dots {
  display: flex;
  gap: 0.22rem;
}

.ct-imp-ka--dots b {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--ct-color-sheet-dot);
  border-radius: 50%;
}

.ct-imp-ka--dots b.ct-imp-ka-big {
  width: 0.9rem;
  height: 0.9rem;
}

.ct-imp-ka-to {
  position: relative;
  width: 1rem;
  height: 0.55rem;
  color: var(--ct-color-line-strong);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}

.ct-imp-ka-to::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.ct-imp-kinds--pay {
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-lift);
  font-size: 0.9rem;
}

.ct-imp-kinds--pay > svg {
  flex: 0 0 auto;
  color: var(--ct-color-action);
}

.ct-imp-kinds-text {
  display: grid;
  gap: 0.1rem;
}

.ct-imp-kinds--pay b {
  color: var(--ct-color-forest);
}

.ct-imp-kinds-text > span {
  color: var(--ct-color-muted);
}

/* Her spreadsheet: a column at a time, so one choice per column serves the
   grid on a computer and the column cards on a phone. */
.ct-imp-sheet {
  max-width: 100%;
  overflow: auto;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-lift);
}

.ct-imp-grid {
  width: max-content;
  min-width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  font-size: 0.84rem;
}

.ct-imp-grid--rows-0 { grid-template-rows: repeat(3, auto); }
.ct-imp-grid--rows-1 { grid-template-rows: repeat(4, auto); }
.ct-imp-grid--rows-2 { grid-template-rows: repeat(5, auto); }
.ct-imp-grid--rows-3 { grid-template-rows: repeat(6, auto); }
.ct-imp-grid--rows-4 { grid-template-rows: repeat(7, auto); }
.ct-imp-grid--rows-5 { grid-template-rows: repeat(8, auto); }
.ct-imp-grid--rows-6 { grid-template-rows: repeat(9, auto); }

.ct-imp-gcol {
  display: contents;
}

.ct-imp-cell {
  padding: 0.48rem 0.65rem;
  color: var(--ct-color-graphite);
  border-bottom: 1px solid var(--ct-color-border-soft);
  border-left: 1px solid var(--ct-color-border-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A long value is cut, as a spreadsheet does; the cell still fills its
   column. */
.ct-imp-cell__text {
  max-width: 11rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ct-imp-gcol > .ct-imp-cell:last-child {
  border-bottom: 0;
}

.ct-imp-cell--tag {
  padding: 0.65rem 0.45rem 0.5rem;
  display: flex;
  align-items: flex-end;
  overflow: visible;
  background: var(--ct-color-white);
  border-bottom: 0;
}

.ct-imp-cell--letter {
  padding: 0.18rem 0.75rem;
  color: var(--ct-color-faint);
  background: var(--ct-color-sheet-margin);
  border-top: 1px solid var(--ct-color-border-soft);
  font-size: 0.68rem;
  font-weight: 600;
}

.ct-imp-cell--head {
  padding: 0.5rem 0.65rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-sheet-head);
  border-bottom-color: var(--ct-color-line);
  font-weight: 650;
}

.ct-imp-gcol--rn > .ct-imp-cell {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 2.5rem;
  min-width: 2.5rem;
  color: var(--ct-color-faint);
  background: var(--ct-color-sheet-margin);
  border-right: 1px solid var(--ct-color-border-soft);
  border-left: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
}

.ct-imp-gcol--rn + .ct-imp-gcol > .ct-imp-cell {
  border-left: 0;
}

/* A column she does not use stays readable, hatched instead of faded. */
.ct-imp-gcol--off > .ct-imp-cell:not(.ct-imp-cell--tag) {
  color: var(--ct-color-muted);
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--ct-color-hatch) 7px 8px);
}

.ct-imp-gcol--off > .ct-imp-cell--head {
  font-weight: 550;
}

.ct-imp-gcol--doubt > .ct-imp-cell {
  background: color-mix(in srgb, var(--ct-color-attention-soft) 85%, var(--ct-color-white));
}

.ct-imp-gcol--doubt > .ct-imp-cell--head,
.ct-imp-gcol--doubt > .ct-imp-cell--letter {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
}

.ct-imp-pickwrap {
  position: relative;
  max-width: 100%;
  display: inline-flex;
}

.ct-imp-pickwrap > svg {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  color: var(--ct-color-forest);
  pointer-events: none;
  stroke-width: 2.4;
  transform: translateY(-50%);
}

.ct-imp-tag {
  max-width: 100%;
  padding: 0.3rem 1.55rem 0.3rem 0.62rem;
  color: var(--ct-color-action);
  background-color: var(--ct-color-success-soft);
  border: 0;
  border-radius: var(--ct-radius-pill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-color-action) 20%, transparent);
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.77rem;
  font-weight: 650;
}

.ct-imp-tag:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-color-action) 45%, transparent);
}

.ct-imp-tag--off {
  color: var(--ct-color-muted);
  background-color: var(--ct-color-canvas);
  box-shadow: inset 0 0 0 1px var(--ct-color-line);
}

.ct-imp-tag--doubt {
  color: var(--ct-color-attention);
  background-color: var(--ct-color-attention-soft);
  box-shadow:
    inset 0 0 0 1px var(--ct-color-attention-line),
    0 0 0 3px color-mix(in srgb, var(--ct-color-attention-line) 55%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .ct-imp[data-step="2"] .ct-imp-cell--tag {
    animation: ct-imp-tag-in var(--ct-motion-reveal) var(--ct-ease-standard) both;
  }

  .ct-imp[data-step="2"] .ct-imp-gcol:nth-child(2) > .ct-imp-cell--tag {
    animation-delay: calc(var(--ct-motion-stagger) * 4);
  }

  .ct-imp[data-step="2"] .ct-imp-gcol:nth-child(3) > .ct-imp-cell--tag {
    animation-delay: calc(var(--ct-motion-stagger) * 9);
  }

  .ct-imp[data-step="2"] .ct-imp-gcol:nth-child(4) > .ct-imp-cell--tag {
    animation-delay: calc(var(--ct-motion-stagger) * 14);
  }

  .ct-imp[data-step="2"] .ct-imp-gcol:nth-child(5) > .ct-imp-cell--tag {
    animation-delay: calc(var(--ct-motion-stagger) * 19);
  }

  .ct-imp[data-step="2"] .ct-imp-gcol:nth-child(6) > .ct-imp-cell--tag {
    animation-delay: calc(var(--ct-motion-stagger) * 24);
  }

  .ct-imp[data-step="2"] .ct-imp-gcol:nth-child(7) > .ct-imp-cell--tag {
    animation-delay: calc(var(--ct-motion-stagger) * 29);
  }

  .ct-imp[data-step="2"] .ct-imp-gcol:nth-child(n + 8) > .ct-imp-cell--tag {
    animation-delay: calc(var(--ct-motion-stagger) * 34);
  }
}

@keyframes ct-imp-tag-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ct-imp-read {
  color: var(--ct-color-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.ct-imp-read-label {
  color: var(--ct-color-muted);
  font-weight: 600;
}

.ct-imp-read b {
  color: var(--ct-color-forest);
  font-weight: 650;
}

.ct-imp-status {
  padding: 0.95rem 1.05rem;
  display: grid;
  gap: 0.65rem;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-lift);
}

.ct-imp-status-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  color: var(--ct-color-graphite);
  font-size: 0.9rem;
}

.ct-imp-status-title > svg {
  color: var(--ct-color-action);
}

/* "Não usar esta coluna" under the column she chose to say who paid. */
.ct-imp-status-off {
  justify-self: start;
}

.ct-imp-status--none .ct-imp-status-title > svg {
  color: var(--ct-color-muted);
}

.ct-imp-status-title b {
  color: var(--ct-color-forest);
  font-weight: 650;
}

.ct-imp-status-title span {
  color: var(--ct-color-muted);
}

.ct-imp-sv {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  list-style: none;
}

.ct-imp-sv li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.ct-imp-sv li > svg {
  color: var(--ct-color-faint);
}

.ct-imp-sv-her {
  padding: 0.2rem 0.5rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-canvas);
  border-radius: 0.45rem;
  box-shadow: inset 0 0 0 1px var(--ct-color-line);
  font-size: 0.82rem;
  font-weight: 600;
}

.ct-imp-status-pick {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--ct-color-graphite);
  font-size: 0.86rem;
}

/* The bar that stays at the foot of Colunas and Conferir. */
.ct-imp-bar {
  position: sticky;
  bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  z-index: 15;
  margin-top: 1.25rem;
  padding: 0.75rem 0.85rem 0.75rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: color-mix(in srgb, var(--ct-color-white) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--ct-color-forest) 9%, transparent);
  border-radius: 1.15rem;
  box-shadow: var(--ct-shadow-lg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.ct-imp-bar__left {
  min-width: 0;
  flex: 1 1 12rem;
}

.ct-imp-bar__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
}

.ct-imp-bar__name {
  overflow: hidden;
  color: var(--ct-color-forest);
  font-weight: 750;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-imp-bar__stats {
  margin-top: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  color: var(--ct-color-muted);
  font-size: 0.86rem;
}

.ct-imp-bar__stats > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ct-imp-bar__stats svg {
  color: var(--ct-color-forest);
}

.ct-imp-bar-hint svg {
  color: var(--ct-color-action);
}

.ct-imp-bar-hint--warn {
  color: var(--ct-color-attention);
  font-weight: 600;
}

.ct-imp-bar-hint--warn svg {
  color: var(--ct-color-attention);
}

.ct-imp-bar-calm {
  color: var(--ct-color-muted);
}

.ct-imp-bar .ct-offline:not([hidden]) {
  flex-basis: 100%;
  display: block;
}

/* Check: the numbers first, then only what needs her. */
.ct-imp-context {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  color: var(--ct-color-muted);
  font-size: 0.88rem;
}

.ct-imp-context svg {
  color: var(--ct-color-action);
}

.ct-imp-dot {
  width: 0.25rem;
  height: 0.25rem;
  background: var(--ct-color-line-strong);
  border-radius: 50%;
}

.ct-imp-sum {
  max-width: 46rem;
  margin-top: -0.35rem;
  color: var(--ct-color-graphite);
  font-size: 1.06rem;
}

.ct-imp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.75rem;
}

.ct-imp-tile {
  min-width: 0;
  padding: 1rem 1.1rem 1.05rem;
  display: grid;
  align-content: start;
  gap: 0.2rem;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-lift);
}

.ct-imp-tile-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ct-color-muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.ct-imp-tile--good .ct-imp-tile-label::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  background: var(--ct-color-action);
  border-radius: 50%;
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--ct-color-action) 16%, transparent);
}

.ct-imp-tile-value {
  color: var(--ct-color-forest);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  white-space: nowrap;
}

.ct-imp-tile--hero .ct-imp-tile-value {
  font-size: clamp(1.9rem, 3vw, 2.3rem);
  letter-spacing: -0.04em;
}

.ct-imp-tile-sub {
  color: var(--ct-color-muted);
  font-size: 0.82rem;
}

.ct-imp-cur {
  color: var(--ct-color-muted);
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 0.62em;
}

.ct-imp-dec {
  color: var(--ct-color-muted);
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ct-imp-points {
  margin: 0;
  padding: 0.3rem 1.1rem;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-lift);
  list-style: none;
}

.ct-imp-point {
  padding: 0.85rem 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  border-bottom: 1px solid var(--ct-color-border-soft);
}

.ct-imp-point:last-child {
  border-bottom: 0;
}

.ct-imp-point-ic {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-muted);
  background: var(--ct-color-canvas);
  border-radius: 50%;
}

.ct-imp-point-ic svg {
  stroke-width: 1.85;
}

.ct-imp-point--attention .ct-imp-point-ic {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  box-shadow: inset 0 0 0 1px var(--ct-color-attention-line);
}

.ct-imp-point--told .ct-imp-point-ic {
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
}

.ct-imp-point-text {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.ct-imp-point-text b {
  color: var(--ct-color-forest);
  font-size: 0.95rem;
  font-weight: 650;
}

.ct-imp-point-text span {
  color: var(--ct-color-muted);
  font-size: 0.85rem;
}

/* The panel buttons of the check, in the import's small shapes. */
.ct-imp .ct-point-button,
.ct-imp-point .ct-button,
.ct-imp-calm-line .ct-button,
.ct-imp-sec-head .ct-button {
  min-height: 0;
  padding: 0.42rem 0.8rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-line);
  border-radius: var(--ct-radius-pill);
  box-shadow: var(--ct-shadow-xs);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}

.ct-imp-point .ct-button:hover {
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border-color: var(--ct-color-line-strong);
}

.ct-imp-calm-line .ct-button--quiet,
.ct-imp-sec-head .ct-button--quiet {
  padding: 0.4rem 0.55rem;
  color: var(--ct-color-muted);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  font-size: 0.86rem;
  font-weight: 600;
}

.ct-imp-calm-line .ct-button--quiet:hover,
.ct-imp-sec-head .ct-button--quiet:hover {
  color: var(--ct-color-forest);
  background: transparent;
  border-color: transparent;
}

.ct-imp-calm-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: var(--ct-color-graphite);
  font-size: 0.9rem;
}

.ct-imp-calm-line > svg {
  color: var(--ct-color-action);
}

.ct-imp-info {
  margin: 0.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  list-style: none;
}

.ct-imp-info li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  color: var(--ct-color-graphite);
  font-size: 0.88rem;
}

.ct-imp-info li > svg {
  margin-top: 0.15rem;
  color: var(--ct-color-muted);
  stroke-width: 1.85;
}

.ct-imp-info b {
  color: var(--ct-color-forest);
  font-weight: 650;
}

.ct-imp-table-wrap {
  overflow-x: auto;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-lift);
}

.ct-imp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
}

.ct-imp-table th {
  padding: 0.7rem 1rem 0.55rem;
  color: var(--ct-color-muted);
  border-bottom: 1px solid var(--ct-color-line);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
}

.ct-imp-table td {
  padding: 0.62rem 1rem;
  color: var(--ct-color-graphite);
  border-bottom: 1px solid var(--ct-color-border-soft);
}

.ct-imp-table tr:last-child td {
  border-bottom: 0;
}

.ct-imp-table .ct-imp-num,
.ct-imp-table th.ct-imp-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.ct-imp-table .ct-imp-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ct-imp-pill {
  padding: 0.16rem 0.6rem;
  display: inline-flex;
  align-items: center;
  border-radius: var(--ct-radius-pill);
  font-size: 0.76rem;
  font-weight: 650;
  white-space: nowrap;
}

.ct-imp-pill--good {
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
}

.ct-imp-pill--new {
  color: var(--ct-color-waiting);
  background: var(--ct-color-waiting-soft);
}

.ct-imp-pill--moved {
  color: var(--ct-color-graphite);
  background: var(--ct-color-canvas);
  box-shadow: inset 0 0 0 1px var(--ct-color-line);
}

.ct-imp-pill--off {
  color: var(--ct-color-muted);
  background: var(--ct-color-white);
  box-shadow: inset 0 0 0 1px var(--ct-color-line);
}

/* A file that changes nothing. */
.ct-imp-same {
  padding: 1.4rem 1.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.4rem 1rem;
  background: var(--ct-color-white);
  border-radius: 1.2rem;
  box-shadow: var(--ct-lift);
}

.ct-imp-same-ic {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
  border-radius: 50%;
}

.ct-imp-same-title {
  color: var(--ct-color-forest);
  font-size: 1.04rem;
  font-weight: 650;
}

.ct-imp .ct-imp-same-sub {
  margin-top: 0.15rem;
  color: var(--ct-color-muted);
  font-size: 0.9rem;
}

.ct-imp-same-actions {
  grid-column: 2;
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* The panels live outside the page's flow. */
.ct-imp-panels,
.ct-imp-panels > form {
  display: contents;
}

.ct-imp-panel-lede {
  margin-bottom: 0.85rem;
  color: var(--ct-color-muted);
  font-size: 0.88rem;
}

.ct-imp .ct-imp-panel-lede {
  margin-bottom: 0.85rem;
}

.ct-imp-panel-h {
  margin: 0.9rem 0 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ct-color-forest);
  font-size: 0.86rem;
  font-weight: 650;
}

.ct-imp-panel-h span {
  padding: 0.05rem 0.45rem;
  color: var(--ct-color-muted);
  background: var(--ct-color-canvas);
  border-radius: var(--ct-radius-pill);
  font-size: 0.74rem;
}

.ct-imp-bulk:not([hidden]) {
  margin-bottom: 0.4rem;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  background: var(--ct-color-canvas-soft);
  border-radius: 0.85rem;
  box-shadow: inset 0 0 0 1px var(--ct-color-border-soft);
}

.ct-imp-bulk > span {
  margin-right: 0.15rem;
  color: var(--ct-color-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.ct-imp-plist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-imp-prow {
  padding: 0.8rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--ct-color-border-soft);
}

.ct-imp-prow:last-child {
  border-bottom: 0;
}

.ct-imp-prow--avatar {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.ct-imp-plist--compact .ct-imp-prow {
  padding: 0.55rem 0;
}

.ct-imp-prow-main {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.ct-imp-prow-main b {
  color: var(--ct-color-forest);
  font-size: 0.9rem;
  font-weight: 650;
}

.ct-imp-prow-main span {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
}

.ct-imp-prow > .ct-imp-num {
  color: var(--ct-color-graphite);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ct-imp-av {
  width: 2.1rem;
  height: 2.1rem;
  align-self: start;
  display: grid;
  place-items: center;
  color: var(--ct-color-forest);
  background: var(--ct-color-selection);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
}

.ct-imp-av--1 {
  color: var(--ct-color-waiting);
  background: var(--ct-color-waiting-soft);
}

.ct-imp-av--2 {
  color: var(--ct-color-graphite);
  background: var(--ct-color-icon-tile);
}

.ct-imp-seg {
  padding: 0.18rem;
  display: inline-flex;
  gap: 0.1rem;
  background: var(--ct-color-canvas);
  border-radius: var(--ct-radius-pill);
  box-shadow: inset 0 0 0 1px var(--ct-color-border-soft);
}

.ct-imp-seg-pick {
  position: relative;
  padding: 0.3rem 0.7rem;
  color: var(--ct-color-muted);
  border-radius: var(--ct-radius-pill);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
  transition:
    background-color var(--ct-motion-fast) var(--ct-ease-standard),
    color var(--ct-motion-fast) var(--ct-ease-standard),
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-imp-seg-pick:hover {
  color: var(--ct-color-forest);
}

.ct-imp-seg-pick:has(.ct-imp-choice:checked) {
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  box-shadow: var(--ct-shadow-segment);
}

.ct-imp-seg-pick--paid:has(.ct-imp-choice:checked),
.ct-imp-seg-pick--same:has(.ct-imp-choice:checked),
.ct-imp-seg-pick--match:has(.ct-imp-choice:checked) {
  color: var(--ct-color-action);
}

/* Done: what happened, the rhythm, the next step. */
.ct-imp-done {
  max-width: 46rem;
  padding: 1.6rem;
  display: grid;
  gap: 1.1rem;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-line);
  border-radius: var(--ct-radius-xl);
  box-shadow: var(--ct-shadow-card);
}

.ct-imp-done-ring {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
  border-radius: 50%;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ct-color-success-soft) 60%, transparent);
}

.ct-imp-done-title {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.ct-imp-done-lede {
  color: var(--ct-color-graphite);
  font-size: 1.04rem;
}

.ct-imp-done-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.65rem;
}

.ct-imp-done-stat {
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.15rem;
  background: var(--ct-color-white);
  border-radius: 0.95rem;
  box-shadow: var(--ct-lift);
}

.ct-imp-done-stat-label {
  color: var(--ct-color-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.ct-imp-done-stat-value {
  color: var(--ct-color-forest);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.ct-imp-done-stat-sub {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
}

.ct-imp-rhythm-card {
  margin: 0;
  padding: 0.95rem 1.05rem;
  display: grid;
  gap: 0.6rem;
  background: var(--ct-color-canvas-soft);
  border-radius: 1rem;
  box-shadow: inset 0 0 0 1px var(--ct-color-border-soft);
}

.ct-imp-rhythm {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ct-imp-rhythm-pick {
  position: relative;
  padding: 0.42rem 0.9rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border-radius: var(--ct-radius-pill);
  box-shadow: inset 0 0 0 1px var(--ct-color-line);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 650;
  transition:
    background-color var(--ct-motion-fast) var(--ct-ease-standard),
    color var(--ct-motion-fast) var(--ct-ease-standard),
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-imp-rhythm-pick:hover {
  box-shadow: inset 0 0 0 1px var(--ct-color-line-strong);
}

.ct-imp-rhythm-pick:has(.ct-imp-choice:checked) {
  color: var(--ct-color-white);
  background: var(--ct-color-forest);
  box-shadow: var(--ct-shadow-pill);
}

.ct-imp-rhythm-sub {
  color: var(--ct-color-muted);
  font-size: 0.84rem;
}

.ct-imp-next {
  padding: 1.15rem 1.3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  color: var(--ct-color-on-dark);
  background: linear-gradient(150deg, var(--ct-color-forest-deep), var(--ct-color-forest));
  border-radius: var(--ct-radius-lg);
}

.ct-imp-next h2 {
  margin: 0;
  color: var(--ct-color-white);
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}

.ct-imp .ct-imp-next p {
  margin-top: 0.15rem;
  color: var(--ct-color-on-dark-muted);
  font-size: 0.9rem;
}

.ct-imp-done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@container page (max-width: 50rem) {
  .ct-imp-kinds {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-imp-reading {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 1rem;
  }
}

@media (max-width: 44rem) {
  .ct-imp-steps .ct-step__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ct-imp-what {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-imp-kind {
    padding: 0.7rem 0.85rem;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    column-gap: 0.85rem;
  }

  .ct-imp-kind .ct-imp-ka-art {
    width: 3.2rem;
    height: auto;
    margin: 0;
    grid-row: 1 / span 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }

  .ct-imp-kind .ct-imp-ka-to {
    display: none;
  }

  .ct-imp-kind > b,
  .ct-imp-kind > span:not(.ct-imp-ka-art) {
    grid-column: 2;
  }

  .ct-imp-kind .ct-imp-likely {
    margin-top: 0.15rem;
    justify-self: start;
  }

  .ct-imp-doubt .ct-band {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ct-imp-doubt .ct-band > :nth-child(3) {
    grid-column: 1 / -1;
  }

  .ct-imp-doubt-actions {
    justify-content: flex-start;
  }

  .ct-imp-error .ct-band {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ct-imp-error .ct-band > :nth-child(3) {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .ct-imp-same {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-imp-same-actions {
    grid-column: 1;
  }

  .ct-imp-cart-pick {
    min-width: 0;
    flex: 1 1 100%;
  }

  /* Her spreadsheet becomes a card per column. */
  .ct-imp-sheet {
    overflow: visible;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .ct-imp-grid,
  .ct-imp-grid[class] {
    width: auto;
    min-width: 0;
    grid-auto-flow: row;
    grid-template-rows: none;
    gap: 0.5rem;
  }

  .ct-imp-gcol {
    padding: 0.75rem 0.85rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "letter head"
      "letter sample"
      "tag tag";
    align-items: center;
    column-gap: 0.55rem;
    background: var(--ct-color-white);
    border-radius: 0.9rem;
    box-shadow: var(--ct-lift);
  }

  .ct-imp-gcol--rn {
    display: none;
  }

  .ct-imp-gcol--doubt {
    background: var(--ct-color-attention-soft);
    box-shadow: inset 0 0 0 1px var(--ct-color-attention-line);
  }

  .ct-imp-gcol > .ct-imp-cell {
    min-width: 0;
    padding: 0;
    display: none;
    background: none;
    border: 0;
  }

  .ct-imp-gcol--off > .ct-imp-cell:not(.ct-imp-cell--tag),
  .ct-imp-gcol--doubt > .ct-imp-cell,
  .ct-imp-gcol--doubt > .ct-imp-cell--head {
    background: none;
  }

  .ct-imp-grid .ct-imp-gcol > .ct-imp-cell--tag {
    margin-top: 0.5rem;
    grid-area: tag;
    display: block;
  }

  .ct-imp-grid .ct-imp-gcol > .ct-imp-cell--letter {
    width: 1.7rem;
    height: 1.7rem;
    grid-area: letter;
    display: grid;
    place-items: center;
    color: var(--ct-color-muted);
    background: var(--ct-color-canvas);
    border-radius: 0.45rem;
    box-shadow: inset 0 0 0 1px var(--ct-color-line);
    font-size: 0.72rem;
    font-weight: 700;
  }

  .ct-imp-grid .ct-imp-gcol > .ct-imp-cell--head {
    grid-area: head;
    display: block;
    color: var(--ct-color-forest);
    font-size: 0.9rem;
    font-weight: 700;
  }

  .ct-imp-grid .ct-imp-gcol > .ct-imp-cell--first {
    grid-area: sample;
    display: block;
    color: var(--ct-color-muted);
    font-size: 0.8rem;
  }

  .ct-imp-gcol .ct-imp-cell__text {
    max-width: none;
  }

  .ct-imp-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ct-imp-tile--hero {
    grid-column: 1 / -1;
  }

  .ct-imp-drop {
    padding: 1.8rem 1rem 1.5rem;
  }

  .ct-imp-drop-actions .ct-imp-btn {
    width: 100%;
  }

  .ct-imp-point {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ct-imp-point > .ct-button {
    grid-column: 2;
    justify-self: start;
  }

  .ct-imp-prow,
  .ct-imp-prow--avatar {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-imp-prow .ct-imp-av {
    display: none;
  }

  .ct-imp-table th:nth-child(2),
  .ct-imp-table td:nth-child(2) {
    display: none;
  }

  .ct-imp-table td,
  .ct-imp-table th {
    padding-inline: 0.75rem;
  }

  .ct-imp-pill {
    white-space: normal;
  }

  /* On a phone the bar sits above the tab bar. */
  .ct-imp-bar {
    bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px));
    padding: 0.65rem 0.7rem 0.65rem 0.9rem;
    gap: 0.6rem;
  }

  /* A hint too long for the row goes above the buttons, whole. */
  .ct-imp-bar__left {
    flex: 1 1 auto;
  }

  .ct-imp-bar__actions {
    margin-left: auto;
  }

  .ct-imp-bar__name {
    display: none;
  }

  .ct-imp-bar__stats {
    gap: 0.2rem 0.7rem;
    font-size: 0.78rem;
    overflow-wrap: normal;
  }

  .ct-imp-bar__stats > span:nth-child(n + 2) {
    display: none;
  }

  .ct-imp-bar .ct-imp-btn {
    padding: 0.6rem 0.9rem;
  }

  .ct-imp-next {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Visão geral (US-09.52) ----------
   Prototype screen 2, round 2: the greeting with the day, the numbers on
   top, who needs a person and what only she can fix; before collecting, the
   four steps and one dark card for the next one. Hairline rings instead of
   borders, quiet currency signs and cents, and the collecting dot as the only
   moving thing. */

.ct-vg {
  max-width: 66rem;
  display: grid;
  gap: 1.75rem;
}

/* Paragraphs keep no default margin here; each block sets its own. */
:where(.ct-vg, .ct-vg-noaccess) p {
  margin: 0;
}

:is(.ct-vg, .ct-vg-noaccess) :is(h1, h2) {
  text-wrap: balance;
}

.ct-vg-top {
  display: grid;
  gap: 0.9rem;
}

.ct-vg .ct-page-title {
  font-size: clamp(1.9rem, 3.5vw, 2.55rem);
  font-weight: 680;
  letter-spacing: -0.042em;
  line-height: 1.06;
}

.ct-vg .ct-page-eyebrow {
  margin-bottom: 0.55rem;
}

.ct-vg .ct-page-lede {
  max-width: 40rem;
  margin-top: 0.55rem;
  font-size: 1.06rem;
}

/* The page's buttons take the round-2 finish: a hairline ghost, a quiet text
   button and a primary with a soft lift. */
:is(.ct-vg, .ct-vg-noaccess) .ct-button {
  font-size: 0.92rem;
}

:is(.ct-vg, .ct-vg-noaccess) .ct-button--small {
  font-size: 0.84rem;
}

.ct-vg .ct-button--primary {
  background: linear-gradient(180deg, var(--ct-color-action-top), var(--ct-color-action));
  border-color: transparent;
  box-shadow: var(--ct-shadow-primary);
}

.ct-vg .ct-button--primary:hover {
  background: linear-gradient(180deg, var(--ct-color-action), var(--ct-color-action-deep));
  border-color: transparent;
}

:is(.ct-vg, .ct-vg-noaccess) .ct-button--secondary {
  border-color: var(--ct-color-border);
  box-shadow: var(--ct-shadow-xs);
}

:is(.ct-vg, .ct-vg-noaccess) .ct-button--secondary:hover {
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border-color: var(--ct-color-border-strong);
}

:is(.ct-vg, .ct-vg-noaccess) .ct-button--quiet {
  min-height: 0;
  padding: 0.4rem 0.55rem;
  color: var(--ct-color-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

:is(.ct-vg, .ct-vg-noaccess) .ct-button--quiet:hover {
  color: var(--ct-color-forest);
  background: transparent;
  border-color: transparent;
}

/* Status: collecting, the réguas switched on and the next send. */
.ct-vg-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.ct-vg-st {
  padding: 0.3rem 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border-radius: var(--ct-radius-pill);
  box-shadow: var(--ct-ring);
  font-size: 0.84rem;
  font-weight: 550;
  white-space: nowrap;
}

.ct-vg-st > svg {
  flex: none;
  color: var(--ct-color-muted);
  stroke-width: 1.75;
}

.ct-vg-live {
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-color-action) 18%, transparent);
  font-weight: 650;
}

.ct-vg-live--stopped {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  box-shadow: inset 0 0 0 1px var(--ct-color-attention-line);
}

.ct-vg-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, currentColor 18%, transparent);
}

.ct-vg-link {
  text-decoration: none;
  transition:
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard),
    color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-vg-link:hover {
  color: var(--ct-color-forest);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ct-color-forest) 18%, transparent);
}

/* The one moving thing on the page: collecting breathes, slowly. */
@media (prefers-reduced-motion: no-preference) {
  .ct-vg-live:not(.ct-vg-live--stopped) .ct-vg-dot {
    animation: ct-vg-breathe var(--ct-motion-breathe) ease-in-out infinite;
  }
}

@keyframes ct-vg-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, currentColor 26%, transparent);
  }

  50% {
    box-shadow: 0 0 0 0.38rem color-mix(in srgb, currentColor 6%, transparent);
  }
}

/* A paused régua reads as the pause it is. */
.ct-vg .ct-band > .lucide-pause {
  fill: currentColor;
  stroke-width: 0;
}

.ct-vg .ct-state-error strong {
  font-weight: inherit;
}

/* The numbers on top. */
.ct-vg-card {
  min-width: 0;
  padding: 1.2rem 1.35rem 1.25rem;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-lift);
}

.ct-vg-num {
  display: grid;
  align-content: start;
  gap: 0.2rem;
}

.ct-vg-num__label {
  color: var(--ct-color-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.ct-vg-num__value {
  color: var(--ct-color-forest);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  white-space: nowrap;
}

.ct-vg-big {
  font-size: clamp(2.4rem, 4.2vw, 3.1rem);
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.ct-vg-cur {
  color: var(--ct-color-muted);
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 0.62em;
}

.ct-vg-dec {
  color: var(--ct-color-muted);
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ct-vg-num__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  color: var(--ct-color-muted);
  font-size: 0.84rem;
}

.ct-vg-chip {
  padding: 0.1rem 0.55rem;
  display: inline-flex;
  align-items: center;
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
  border-radius: var(--ct-radius-pill);
  font-size: 0.78rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.ct-vg-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(16.5rem, 1fr);
  align-items: stretch;
  gap: 1rem;
}

.ct-vg-main {
  display: flex;
  flex-direction: column;
}

.ct-vg-side {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1rem;
}

/* No payment informed yet: three small tiles side by side, the received one a
   line and a hint, so the rest of the day rises (PM, 2026-10-12). */
.ct-vg-hero--quiet {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ct-vg-hero--quiet .ct-vg-side {
  display: contents;
}

.ct-vg-num__hint {
  margin: 0.55rem 0 0;
  color: var(--ct-color-muted);
  font-size: 0.82rem;
}

.ct-vg-side .ct-vg-card {
  display: flex;
  flex-direction: column;
}

.ct-vg-side .ct-vg-num__sub {
  margin-bottom: 0.85rem;
}

/* Em aberto: what is to come beside what is overdue. */
.ct-vg-aging {
  height: 6px;
  margin-top: auto;
  display: flex;
  gap: 2px;
  overflow: hidden;
  border-radius: var(--ct-radius-pill);
}

.ct-vg-aging svg {
  min-width: 0;
  height: 100%;
  display: block;
}

.ct-vg-aging__due,
.ct-vg-key--due {
  background: var(--ct-color-series);
}

.ct-vg-aging__late,
.ct-vg-key--late {
  background: var(--ct-color-late);
}

.ct-vg-aging-key {
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
  color: var(--ct-color-muted);
  font-size: 0.8rem;
  list-style: none;
}

.ct-vg-aging-key li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ct-vg-aging-key b {
  margin-left: auto;
  color: var(--ct-color-forest);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.ct-vg-key {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 2px;
}

/* Recebido por semana: one series, so the title names it and no legend box
   is needed. Each bar is its own hit target, with its value on hover and on
   keyboard focus. */
.ct-vg-chart {
  margin: auto 0 0;
  padding-top: 1.2rem;
  display: grid;
  gap: 0.7rem;
}

.ct-vg-chart__title {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.ct-vg-plot {
  --ct-vg-plot-h: 9.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
}

.ct-vg-ticks {
  position: relative;
  min-width: 3.6rem;
  height: var(--ct-vg-plot-h);
  color: var(--ct-color-muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.ct-vg-ticks span {
  position: absolute;
  right: 0;
  white-space: nowrap;
  transform: translateY(-50%);
}

.ct-vg-ticks span:nth-child(1) {
  top: 0;
}

.ct-vg-ticks span:nth-child(2) {
  top: 50%;
}

.ct-vg-ticks span:nth-child(3) {
  top: 100%;
}

.ct-vg-bars {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0.25rem;
}

.ct-vg-bars::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--ct-vg-plot-h);
  background:
    linear-gradient(var(--ct-color-border-soft), var(--ct-color-border-soft)) top / 100% 1px no-repeat,
    linear-gradient(var(--ct-color-border-soft), var(--ct-color-border-soft)) center / 100% 1px no-repeat,
    linear-gradient(var(--ct-color-border), var(--ct-color-border)) bottom / 100% 1px no-repeat;
  pointer-events: none;
}

.ct-vg-bar {
  position: relative;
  padding: 0;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0.4rem;
  cursor: default;
  font: inherit;
}

.ct-vg-bar__col {
  position: relative;
  width: 100%;
  height: var(--ct-vg-plot-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* An empty SVG box: its height attribute carries the value, so no inline
   style is needed. */
.ct-vg-bar__fill {
  width: min(1.5rem, 62%);
  min-height: 2px;
  flex: none;
  display: block;
  background: var(--ct-color-series);
  border-radius: 4px 4px 0 0;
  transition: background-color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-vg-bar--now .ct-vg-bar__fill {
  background: color-mix(in srgb, var(--ct-color-series) 45%, var(--ct-color-white));
}

.ct-vg-bar:hover .ct-vg-bar__fill,
.ct-vg-bar:focus-visible .ct-vg-bar__fill {
  background: var(--ct-color-action);
}

/* The direct label takes no width of its own: it spills evenly over its
   week instead of widening it. */
.ct-vg-bar__val {
  width: 0;
  margin-bottom: 0.3rem;
  flex: none;
  display: flex;
  justify-content: center;
  color: var(--ct-color-forest);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ct-vg-bar__x {
  color: var(--ct-color-muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ct-vg-bar--now .ct-vg-bar__x {
  color: var(--ct-color-forest);
  font-weight: 650;
}

.ct-vg-tip {
  position: absolute;
  bottom: calc(100% + 0.35rem);
  left: 50%;
  z-index: 5;
  min-width: max-content;
  padding: 0.45rem 0.6rem;
  display: grid;
  gap: 0.05rem;
  color: var(--ct-color-on-dark-tip);
  background: var(--ct-color-forest);
  border-radius: 0.55rem;
  box-shadow: var(--ct-shadow-vg-card);
  font-size: 0.74rem;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.2rem);
  transition:
    opacity var(--ct-motion-tip) var(--ct-ease-standard),
    transform var(--ct-motion-tip) var(--ct-ease-standard);
}

.ct-vg-tip b {
  color: var(--ct-color-white);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.ct-vg-bar:hover .ct-vg-tip,
.ct-vg-bar:focus-visible .ct-vg-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* The tips of the edge weeks open inward, so they never leave the card. */
.ct-vg-bar:nth-child(-n + 2) .ct-vg-tip {
  left: 0;
  transform: translate(0, 0.2rem);
}

.ct-vg-bar:nth-last-child(-n + 2) .ct-vg-tip {
  right: 0;
  left: auto;
  transform: translate(0, 0.2rem);
}

.ct-vg-bar:nth-child(-n + 2):hover .ct-vg-tip,
.ct-vg-bar:nth-child(-n + 2):focus-visible .ct-vg-tip,
.ct-vg-bar:nth-last-child(-n + 2):hover .ct-vg-tip,
.ct-vg-bar:nth-last-child(-n + 2):focus-visible .ct-vg-tip {
  transform: translate(0, 0);
}

.ct-vg-chart-empty {
  margin: 1.1rem 0 0;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ct-color-muted);
  border: 1px dashed var(--ct-color-border-strong);
  border-radius: 0.75rem;
  font-size: 0.88rem;
}

.ct-vg-chart-empty svg {
  flex: none;
}

/* Atendimento humano: the oldest cases first. */
.ct-vg-sec-head {
  margin-bottom: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ct-vg-sec-head h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}

.ct-vg-queue-split {
  margin: -0.35rem 0 0.65rem;
  color: var(--ct-color-muted);
  font-size: 0.84rem;
}

.ct-vg-q__holder {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: 0.8rem;
  font-weight: 600;
}

.ct-vg-queue-count {
  min-width: 1.55rem;
  height: 1.4rem;
  padding: 0 0.45rem;
  display: inline-grid;
  place-items: center;
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  border-radius: var(--ct-radius-pill);
  box-shadow: inset 0 0 0 1px var(--ct-color-attention-line);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
}

.ct-vg-all {
  margin-left: auto;
}

.ct-vg-qlist {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-lift);
}

.ct-vg-q {
  padding: 0.95rem 1.15rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem 1rem;
  border-bottom: 1px solid var(--ct-color-border-soft);
  transition: background-color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-vg-q:last-child {
  border-bottom: 0;
}

.ct-vg-q:hover {
  background: var(--ct-color-canvas-soft);
}

.ct-vg-av {
  width: 2.3rem;
  height: 2.3rem;
  align-self: start;
  display: grid;
  place-items: center;
  color: var(--ct-color-forest);
  background: var(--ct-color-selection);
  border-radius: 50%;
  font-size: 0.76rem;
  font-weight: 700;
}

.ct-vg-av--1 {
  color: var(--ct-color-waiting);
  background: var(--ct-color-waiting-soft);
}

.ct-vg-av--2 {
  color: var(--ct-color-graphite);
  background: var(--ct-color-icon-tile);
}

.ct-vg-q__main {
  min-width: 0;
  display: grid;
  gap: 0.28rem;
}

.ct-vg-q__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.ct-vg-q__name {
  overflow: hidden;
  color: var(--ct-color-forest);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-vg-q__when {
  color: var(--ct-color-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ct-vg-q__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
}

.ct-vg-reason {
  padding: 0.12rem 0.62rem 0.12rem 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-canvas-soft);
  border-radius: var(--ct-radius-pill);
  box-shadow: inset 0 0 0 1px var(--ct-color-border);
  font-size: 0.76rem;
  font-weight: 650;
}

.ct-vg-reason svg {
  flex: none;
  color: var(--ct-color-muted);
  stroke-width: 1.75;
}

.ct-vg-q__amount {
  color: var(--ct-color-forest);
  font-size: 0.84rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.ct-vg-q__sum {
  color: var(--ct-color-graphite);
  font-size: 0.9rem;
}

.ct-vg-qempty {
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--ct-color-success-soft);
  border-radius: 1rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-color-action) 14%, transparent);
}

.ct-vg-qempty > svg {
  box-sizing: content-box;
  padding: 0.45rem;
  flex: none;
  color: var(--ct-color-action);
  background: var(--ct-color-white);
  border-radius: 50%;
  box-shadow: var(--ct-ring);
}

.ct-vg-qempty b {
  display: block;
  color: var(--ct-color-forest);
}

.ct-vg-qempty span {
  color: var(--ct-color-muted);
  font-size: 0.9rem;
}

/* What only she can fix, and who promised to pay. */
.ct-vg-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: stretch;
  gap: 1rem;
}

.ct-vg-list {
  padding: 1.05rem 1.2rem 0.6rem;
}

.ct-vg-card__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.ct-vg-rows {
  margin: 0;
  padding: 0;
  display: grid;
  list-style: none;
}

.ct-vg-rows li {
  border-top: 1px solid var(--ct-color-border-soft);
}

.ct-vg-rows li:first-child {
  border-top: 0;
}

.ct-vg-fix {
  padding: 0.7rem 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
}

.ct-vg-fix__ic {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  border-radius: 0.6rem;
  box-shadow: inset 0 0 0 1px var(--ct-color-attention-line);
}

.ct-vg-fix__ic svg {
  stroke-width: 1.75;
}

.ct-vg-fix__text {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.ct-vg-fix__text b {
  color: var(--ct-color-forest);
  font-size: 0.92rem;
}

.ct-vg-fix__text span {
  color: var(--ct-color-muted);
  font-size: 0.84rem;
}

/* Every customer a row speaks of, folded until she asks: each name finds the
   customer in Clientes. */
.ct-vg-fix__who {
  margin-top: 0.2rem;
  font-size: 0.84rem;
}

.ct-vg-fix__who summary {
  width: fit-content;
  color: var(--ct-color-forest);
  font-weight: 600;
  cursor: pointer;
}

.ct-vg-fix__who ul {
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  list-style: none;
  max-height: 12rem;
  overflow-y: auto;
}

.ct-vg-fix__who li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ct-vg-fix__who a {
  color: var(--ct-color-forest);
}

.ct-vg-promise {
  padding: 0.62rem 0;
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.ct-vg-promise__day {
  color: var(--ct-color-muted);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.ct-vg-promise__name {
  overflow: hidden;
  color: var(--ct-color-forest);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-vg-promise__val {
  color: var(--ct-color-forest);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* While the overview loads, the rest keeps its shape. */
.ct-vg-skel {
  display: grid;
  gap: 0.8rem;
}

.ct-vg-skel__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(16.5rem, 1fr);
  gap: 1rem;
}

.ct-vg-skel__main {
  height: 17rem;
}

.ct-vg-skel__side {
  display: grid;
  gap: 1rem;
}

.ct-vg-skel__tile {
  height: 8rem;
}

.ct-vg-skel__title {
  width: 12rem;
  height: 1.2rem;
  margin-top: 1rem;
  border-radius: 0.75rem;
}

/* Before collecting: one dark card for the next step, with a preview of where
   it leads. */
.ct-vg-next {
  max-width: 54rem;
  padding: 1.6rem 1.7rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem);
  align-items: center;
  gap: 1.5rem 2rem;
  color: var(--ct-color-vg-on-dark);
  background: linear-gradient(150deg, var(--ct-color-next), var(--ct-color-forest));
  border-radius: 1.1rem;
  box-shadow: var(--ct-shadow-vg-card);
}

.ct-vg-next__body {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 0.5rem;
}

.ct-vg-next__n {
  color: var(--ct-color-mint);
  font-size: 0.8rem;
  font-weight: 650;
}

.ct-vg-next h2 {
  margin: 0;
  color: var(--ct-color-white);
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}

.ct-vg-next p {
  max-width: 32rem;
}

.ct-vg-next__actions {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.ct-vg .ct-vg-next .ct-button--primary {
  color: var(--ct-color-forest);
  background: var(--ct-color-mint);
  border-color: transparent;
  box-shadow: none;
}

.ct-vg .ct-vg-next .ct-button--primary:hover {
  color: var(--ct-color-forest);
  background: var(--ct-color-mint-hover);
}

/* A step whose screen is not served yet: said plainly, nothing to press. */
.ct-vg-soon {
  padding: 0.4rem 0.8rem;
  color: var(--ct-color-vg-on-dark);
  border: 1px dashed var(--ct-color-vg-on-dark-muted);
  border-radius: var(--ct-radius-pill);
  font-size: 0.86rem;
  font-weight: 600;
}

.ct-vg .ct-vg-next .ct-button--quiet {
  color: var(--ct-color-vg-on-dark);
}

.ct-vg .ct-vg-next .ct-button--quiet:hover {
  color: var(--ct-color-white);
}

.ct-vg-wait {
  margin-top: 0.2rem;
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--ct-color-vg-on-dark);
  background: color-mix(in srgb, var(--ct-color-white) 8%, transparent);
  border-radius: var(--ct-radius-md);
  font-size: 0.88rem;
}

.ct-vg-wait svg {
  margin-top: 0.12rem;
  flex: none;
  color: var(--ct-color-mint);
}

.ct-vg-pv {
  min-width: 0;
  padding: 0.95rem 1rem;
  background: color-mix(in srgb, var(--ct-color-white) 6%, transparent);
  border-radius: 0.9rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-color-white) 8%, transparent);
}

.ct-vg-pv-steps {
  position: relative;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  list-style: none;
}

.ct-vg-pv-steps::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  bottom: 0.45rem;
  left: 0.3rem;
  width: 2px;
  background: linear-gradient(var(--ct-color-mint), var(--ct-color-late));
  border-radius: 2px;
  opacity: 0.55;
}

.ct-vg-pv-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.7rem;
  color: var(--ct-color-vg-on-dark-muted);
  font-size: 0.8rem;
}

.ct-vg-pv-steps b {
  grid-column: 2;
  color: var(--ct-color-white);
  font-size: 0.84rem;
  font-weight: 650;
}

.ct-vg-pv-steps span:last-child {
  grid-column: 2;
}

.ct-vg-pv-dot {
  position: relative;
  z-index: 1;
  width: 0.62rem;
  height: 0.62rem;
  margin-top: 0.3rem;
  grid-row: 1 / span 2;
  background: var(--ct-color-mint);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ct-color-next);
}

.ct-vg-pv-dot--after {
  background: var(--ct-color-late-soft);
}

.ct-vg-pv-chat {
  padding: 0.7rem;
  display: flex;
  background: var(--ct-color-chat);
  border-radius: 0.7rem;
}

.ct-vg-bubble {
  min-width: 0;
  max-width: 100%;
  padding: 0.42rem 0.6rem 0.3rem;
  overflow-wrap: anywhere;
  color: var(--ct-color-chat-ink);
  background: var(--ct-color-white);
  border-radius: 0 0.6rem 0.6rem;
  box-shadow: var(--ct-shadow-bubble);
  font-size: 0.78rem;
  line-height: 1.4;
}

.ct-vg-bubble__time {
  margin-top: 0.15rem;
  display: block;
  color: var(--ct-color-chat-meta);
  font-size: 0.66rem;
  text-align: right;
}

.ct-vg-pv-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ct-color-vg-on-dark-muted);
  font-size: 0.76rem;
}

.ct-vg-pv-table th {
  padding: 0 0 0.4rem;
  color: var(--ct-color-mint);
  font-weight: 650;
  text-align: left;
}

.ct-vg-pv-table td {
  max-width: 7rem;
  padding: 0.35rem 0;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--ct-color-white) 8%, transparent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-vg-pv-table th:not(:first-child),
.ct-vg-pv-table td:not(:first-child) {
  padding-left: 0.6rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ct-vg-pv-form {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  list-style: none;
}

.ct-vg-pv-form li {
  display: grid;
  gap: 0.3rem;
  color: var(--ct-color-vg-on-dark-muted);
  font-size: 0.78rem;
}

.ct-vg-pv-form i {
  height: 1.7rem;
  display: block;
  background: color-mix(in srgb, var(--ct-color-white) 8%, transparent);
  border-radius: 0.45rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-color-white) 10%, transparent);
}

.ct-vg-calm {
  margin-top: -0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ct-color-muted);
  font-size: 0.9rem;
}

.ct-vg-calm svg {
  flex: none;
  color: var(--ct-color-action);
}

/* Someone with no company to open. */
.ct-vg-noaccess .ct-state-center {
  margin-top: clamp(2rem, 10vh, 6rem);
  gap: 0.8rem;
}

.ct-vg-noaccess .ct-state-center h2 {
  font-size: 1.6rem;
}

@container page (max-width: 50rem) {
  .ct-vg-hero,
  .ct-vg-skel__hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-vg-hero--quiet {
    gap: 0.75rem;
  }

  .ct-vg-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .ct-vg-next {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 44rem) {
  .ct-vg {
    gap: 1.4rem;
  }

  .ct-vg-card {
    padding: 1.05rem 1.1rem 1.1rem;
  }

  .ct-vg-side {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .ct-vg-pv {
    display: none;
  }

  .ct-vg-plot {
    --ct-vg-plot-h: 6.2rem;
  }

  .ct-vg-ticks {
    min-width: 2.9rem;
  }

  .ct-vg-bar__x {
    font-size: 0.62rem;
  }

  .ct-vg-bar:nth-child(even):not(.ct-vg-bar--now) .ct-vg-bar__x {
    visibility: hidden;
  }

  .ct-vg-q {
    padding: 0.95rem;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ct-vg-q__go {
    grid-column: 2;
    justify-self: start;
  }

  .ct-vg-fix {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ct-vg-fix .ct-button {
    grid-column: 2;
    justify-self: start;
  }

  .ct-vg-promise {
    grid-template-columns: 5.4rem minmax(0, 1fr) auto;
    gap: 0.5rem;
  }

  .ct-vg-promise__name {
    white-space: normal;
  }

  .ct-vg-next {
    padding: 1.2rem 1.15rem 1.25rem;
  }
}

/* The way back to the régua she opened Importar planilha from (US-09.5):
   every state of the import offers it until Pronto, which says it in full.
   Clientes offers the same when a régua sent her to fix whom it cannot reach
   (US-09.139). */
.ct-imp-way-back,
.ct-cl2-way-back {
  margin: 0 0 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-action);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
}

.ct-imp-way-back:hover,
.ct-cl2-way-back:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Réguas (US-09.5) ----------
   Prototype screen 1, approved by Francisco over four rounds: the réguas
   list with the path non-payers follow, the type chooser and the four-step
   builder. The régua map is the one bold element, drawn as a metro line with
   branches; everything around it keeps the shell's quiet look. Positions on
   a line come from classes (`ct-rg-p-*`, `ct-rg-q-*`), never inline styles. */

/* A toast never covers the bar of the step she is on: it rises above it. */
.ct-console:has(.ct-rg-actionbar) .ct-toast-message {
  bottom: calc(6.4rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 44rem) {
  .ct-console:has(.ct-rg-actionbar) .ct-toast-message {
    bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
  }
}

/* One block, as the prototype's page: its margins collapse the same way. */
.ct-rg {
  min-width: 0;
  display: block;
}

.ct-rg-num {
  font-variant-numeric: tabular-nums;
}

.ct-rg-muted {
  color: var(--ct-color-muted);
}

.ct-rg-small {
  font-size: 0.86rem;
}

.ct-rg .ct-page-header {
  margin: 0.4rem 0 1.4rem;
}

.ct-rg .ct-page-header__row {
  align-items: center;
}

.ct-rg .ct-page-title {
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 750;
  letter-spacing: -0.035em;
}

.ct-rg-crumbs .ct-crumbs__here {
  color: var(--ct-color-muted);
}

/* Buttons and small labels */
.ct-rg-btn {
  padding: 0.66rem 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--ct-color-forest);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ct-radius-md);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--ct-motion-fast) var(--ct-ease-standard),
    border-color var(--ct-motion-fast) var(--ct-ease-standard),
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard),
    transform var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-rg-btn svg {
  flex: 0 0 auto;
}

.ct-rg-btn--primary {
  color: var(--ct-color-white);
  background: linear-gradient(180deg, var(--ct-color-action-top), var(--ct-color-action));
  box-shadow: var(--ct-shadow-primary);
}

.ct-rg-btn--primary:hover {
  color: var(--ct-color-white);
  background: linear-gradient(180deg, var(--ct-color-action), var(--ct-color-action-hover));
}

.ct-rg-btn--primary:active {
  transform: translateY(1px);
}

.ct-rg-btn--primary:disabled {
  background: var(--ct-color-border-strong);
  box-shadow: none;
  cursor: not-allowed;
}

.ct-rg-btn--ghost {
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border-color: var(--ct-color-border);
  box-shadow: var(--ct-shadow-xs);
}

.ct-rg-btn--ghost:hover {
  color: var(--ct-color-forest);
  border-color: var(--ct-color-border-strong);
}

.ct-rg-btn--sm {
  padding: 0.42rem 0.8rem;
  border-radius: var(--ct-radius-pill);
  font-size: 0.84rem;
}

.ct-rg-btn--quiet {
  padding: 0.4rem 0.55rem;
  color: var(--ct-color-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.ct-rg-btn--quiet:hover {
  color: var(--ct-color-forest);
}

.ct-rg-btn--danger {
  color: var(--ct-color-white);
  background: var(--ct-color-risk);
  box-shadow: var(--ct-shadow-danger);
}

.ct-rg-btn--danger:hover {
  color: var(--ct-color-white);
  background: var(--ct-color-risk-hover);
}

.ct-rg-btn--wide {
  width: 100%;
}

.ct-rg-pill {
  padding: 0.24rem 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--ct-radius-pill);
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.ct-rg-pill--sum {
  color: var(--ct-color-forest);
  background: var(--ct-color-selection);
}

/* Who of them receives nothing now: a calm amber line, opened in place. */
.ct-rg-quiet {
  margin: -0.3rem 0 1rem;
  font-size: 0.84rem;
}

.ct-rg-quiet > summary {
  max-width: 100%;
  padding: 0.3rem 0.75rem;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  border: 1px solid var(--ct-color-attention-line);
  border-radius: 0.9rem;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.ct-rg-quiet > summary::-webkit-details-marker {
  display: none;
}

.ct-rg-quiet > summary > svg {
  flex: none;
  margin-top: 0.2rem;
}

.ct-rg-quiet__open {
  flex: none;
}

.ct-rg-quiet > summary:hover {
  border-color: var(--ct-color-attention);
}

.ct-rg-quiet__open {
  color: var(--ct-color-attention-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ct-rg-quiet[open] .ct-rg-quiet__open {
  display: none;
}

.ct-rg-quiet ul {
  margin: 0.55rem 0 0;
  padding: 0.75rem 0.95rem;
  display: grid;
  gap: 0.45rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-attention-soft);
  border: 1px solid var(--ct-color-attention-line);
  border-radius: var(--ct-radius-md);
  list-style: none;
  line-height: 1.45;
}

/* Beside the line, the way to fix whom it cannot reach because of their
   WhatsApp (US-09.139): a quiet link, never an alarm. */
.ct-rg-quiet-line {
  margin: -0.3rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.9rem;
  font-size: 0.84rem;
}

.ct-rg-quiet-line > .ct-rg-quiet {
  margin: 0;
}

.ct-rg-quiet__fix {
  padding: calc(0.3rem + 1px) 0;
  color: var(--ct-color-action);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ct-rg-status {
  padding: 0.2rem 0.62rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--ct-radius-pill);
  font-size: 0.76rem;
  font-weight: 650;
  white-space: nowrap;
}

.ct-rg-status--draft,
.ct-rg-status--soon {
  color: var(--ct-color-muted);
  background: var(--ct-color-icon-tile);
}

.ct-rg-status--scheduled {
  color: var(--ct-color-deal);
  background: var(--ct-color-deal-soft);
}

.ct-rg-type-tag {
  padding: 0.18rem 0.62rem;
  color: var(--ct-color-muted);
  border: 1px dashed var(--ct-color-border-strong);
  border-radius: var(--ct-radius-pill);
  font-size: 0.76rem;
  font-weight: 650;
  white-space: nowrap;
}

/* Whom a régua takes: a carteira's name may be long, so it wraps. */
.ct-rg-takes-tag {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ct-rg-tag {
  padding: 0.12rem 0.5rem;
  color: var(--ct-color-muted);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-pill);
  font-size: 0.7rem;
  font-weight: 650;
  white-space: nowrap;
}

.ct-rg-tag--review {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  border-color: var(--ct-color-attention-line);
}

.ct-rg-tag--draft {
  color: var(--ct-color-forest);
  background: var(--ct-color-selection);
  border-color: transparent;
}

/* The path non-payers follow */
.ct-rg-chain {
  margin-bottom: 1rem;
  padding: 1.15rem 1.35rem 1.25rem;
  display: grid;
  gap: 0.8rem;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-xl);
  box-shadow: var(--ct-shadow-xs);
}

.ct-rg-chain__title {
  margin: 0;
  color: var(--ct-color-muted);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0;
}

.ct-rg-cline {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  list-style: none;
}

.ct-rg-cstop {
  min-width: 0;
  padding: 0.55rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--ct-color-canvas-soft);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
}

.ct-rg-cstop b {
  display: block;
  color: var(--ct-color-forest);
  font-size: 0.9rem;
}

.ct-rg-cstop small {
  display: block;
  color: var(--ct-color-muted);
  font-size: 0.76rem;
}

.ct-rg-cstop .ct-rg-cextra {
  margin-top: 0.1rem;
  font-size: 0.72rem;
}

.ct-rg-cdot {
  width: 0.8rem;
  height: 0.8rem;
  flex: 0 0 auto;
  background: var(--ct-color-action);
  border-radius: 50%;
  box-shadow:
    0 0 0 3px var(--ct-color-success-soft),
    0 0 0 4px color-mix(in srgb, var(--ct-color-action) 25%, transparent);
}

.ct-rg-cstop--draft,
.ct-rg-cstop--off {
  background: var(--ct-color-white);
  border-style: dashed;
}

.ct-rg-cstop--draft .ct-rg-cdot,
.ct-rg-cstop--off .ct-rg-cdot {
  background: var(--ct-color-border-strong);
  box-shadow: 0 0 0 3px var(--ct-color-icon-tile);
}

.ct-rg-cstop--people {
  background: var(--ct-color-attention-soft);
  border-color: var(--ct-color-attention-line);
}

.ct-rg-cstop--closed {
  background: var(--ct-color-icon-tile);
  border-color: var(--ct-color-border);
}

.ct-rg-cicon {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-attention);
  background: var(--ct-color-white);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ct-color-attention-line);
}

.ct-rg-cstop--closed .ct-rg-cicon {
  color: var(--ct-color-muted);
  box-shadow: 0 0 0 1px var(--ct-color-border);
}

.ct-rg-clink {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-muted);
  font-size: 0.74rem;
  font-weight: 650;
}

.ct-rg-clink__line {
  width: 1.5rem;
  border-top: 2px dashed var(--ct-color-border-strong);
}

.ct-rg-clink svg {
  color: var(--ct-color-border-strong);
}

/* The réguas, by type */
.ct-rg-group {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.55rem;
}

.ct-rg-group__title {
  margin: 0;
  padding-left: 0.2rem;
  color: var(--ct-color-muted);
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0;
}

.ct-rg-rlist {
  overflow: hidden;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-xl);
  box-shadow: var(--ct-shadow-xs);
}

.ct-rg-row {
  position: relative;
  width: 100%;
  padding: 1.05rem 1.35rem;
  display: grid;
  grid-template-columns: minmax(11rem, 1.25fr) minmax(7rem, 1fr) 5.5rem 8.5rem minmax(8.5rem, 0.9fr) 7.2rem 1rem;
  align-items: center;
  gap: 1.1rem;
  border-bottom: 1px solid var(--ct-color-border-soft);
  transition: background-color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-rg-row:last-child {
  border-bottom: 0;
}

.ct-rg-row:hover {
  background: var(--ct-color-canvas-soft);
}

/* The whole row opens the régua; the switch sits above that layer. */
.ct-rg-row__open {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ct-rg-row__open:focus-visible {
  outline-offset: -0.1875rem;
}

.ct-rg-row > .ct-rg-switch,
.ct-rg-row > .ct-rg-switch-form {
  position: relative;
  z-index: 2;
}

.ct-rg-row__name {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
}

.ct-rg-row__name b {
  color: var(--ct-color-forest);
  font-size: 1rem;
}

/* Whom it takes, on its own line under the name: the customers' column is
   too narrow for a carteira's name. */
.ct-rg-row__takes {
  flex-basis: 100%;
  min-width: 0;
  color: var(--ct-color-muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

/* Who waits in a régua switched off (US-09.108): amber, never red. */
.ct-rg-row__waiting {
  flex-basis: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ct-color-attention);
  font-size: 0.78rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.ct-rg-row__waiting svg {
  flex: none;
}

/* The réguas no path can lead to until switched on once (US-09.108). */
.ct-rg-never-on {
  margin: 0 0 0.75rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  list-style: none;
  color: var(--ct-color-muted);
  font-size: 0.82rem;
}

.ct-rg-never-on li {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.ct-rg-never-on svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--ct-color-attention);
}

.ct-rg-never-on a {
  color: var(--ct-color-forest);
  font-weight: 650;
}

.ct-rg-row__num,
.ct-rg-row__end {
  min-width: 0;
  display: grid;
}

.ct-rg-row__num b {
  color: var(--ct-color-forest);
  font-size: 0.95rem;
}

.ct-rg-row__num small,
.ct-rg-row__end small {
  color: var(--ct-color-muted);
  font-size: 0.74rem;
}

.ct-rg-row__end b {
  overflow: hidden;
  color: var(--ct-color-forest);
  font-size: 0.86rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-rg-row__go {
  display: grid;
  place-items: center;
  color: var(--ct-color-faint);
}

.ct-rg-row.ct-rg-row--soon {
  grid-template-columns: minmax(11rem, 1.25fr) minmax(0, 3fr);
  cursor: default;
}

.ct-rg-row--soon:hover {
  background: transparent;
}

.ct-rg-row--soon b {
  color: var(--ct-color-muted);
}

.ct-rg-row__note {
  color: var(--ct-color-muted);
  font-size: 0.82rem;
}

/* The small line of a régua's messages */
.ct-rg-mini {
  position: relative;
  min-width: 0;
  height: 1.3rem;
  display: block;
}

.ct-rg-mini__rail {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--ct-rg-p);
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--ct-color-mint) 0%,
    var(--ct-color-action) var(--ct-rg-q),
    var(--ct-color-late-soft) var(--ct-rg-q),
    var(--ct-color-late) 100%
  );
  border-radius: 3px;
  transform: translateY(-50%);
}

.ct-rg-mini__due {
  position: absolute;
  top: 0.05rem;
  bottom: 0.05rem;
  left: var(--ct-rg-p);
  width: 0;
  border-left: 1.5px dashed color-mix(in srgb, var(--ct-color-forest) 50%, transparent);
}

.ct-rg-mini__due--end {
  border-left-style: solid;
  border-left-color: color-mix(in srgb, var(--ct-color-deal) 60%, transparent);
}

.ct-rg-mini__dot {
  position: absolute;
  top: 50%;
  left: var(--ct-rg-p);
  width: 0.66rem;
  height: 0.66rem;
  background: var(--ct-color-action);
  border: 2px solid var(--ct-color-white);
  border-radius: 50%;
  box-shadow: var(--ct-ring-dot);
  transform: translate(-50%, -50%);
}

.ct-rg-mini__dot--after,
.ct-rg-mini--entry .ct-rg-mini__dot {
  background: var(--ct-color-late);
}

.ct-rg-mini--campaign .ct-rg-mini__rail {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ct-color-deal) 45%, var(--ct-color-white)), var(--ct-color-deal));
}

.ct-rg-mini--campaign .ct-rg-mini__dot {
  background: var(--ct-color-deal);
}

/* Ligada or Desligada */
.ct-rg-switch {
  padding: 0.3rem 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ct-color-muted);
  background: transparent;
  border: 0;
  border-radius: var(--ct-radius-pill);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.ct-rg-switch-form {
  margin: 0;
  display: inline-flex;
}

/* A scheduled campaign says when it starts, on a second line, so nothing
   of it is cut in the list's column. */
.ct-rg-switch__label {
  display: inline-grid;
  line-height: 1.2;
  text-align: left;
}

.ct-rg-switch__label small {
  font-size: 0.72rem;
  font-weight: 600;
}

.ct-rg-switch__track {
  position: relative;
  width: 2.3rem;
  height: 1.35rem;
  flex: 0 0 auto;
  background: var(--ct-color-faint);
  border-radius: var(--ct-radius-pill);
  transition:
    background-color var(--ct-motion-gentle) var(--ct-ease-standard),
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-rg-switch__thumb {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--ct-color-white);
  border-radius: 50%;
  box-shadow: var(--ct-shadow-thumb);
  transition: transform var(--ct-motion-gentle) var(--ct-ease-standard);
}

.ct-rg-switch--on {
  color: var(--ct-color-action);
}

.ct-rg-switch--on .ct-rg-switch__track {
  background: var(--ct-color-action);
}

.ct-rg-switch--on .ct-rg-switch__thumb {
  transform: translateX(0.95rem);
}

.ct-rg-switch:hover .ct-rg-switch__track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-color-action) 15%, transparent);
}

.ct-rg-switch--still {
  cursor: default;
}

/* Whether a régua sends on weekends and holidays, under its messages' title */
.ct-rg-holidays {
  margin: -0.35rem 0 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.75rem;
}

.ct-rg-holidays .ct-rg-switch {
  margin-left: -0.35rem;
  white-space: normal;
}

.ct-rg-holidays p {
  margin: 0;
}

.ct-rg-switch--still:hover .ct-rg-switch__track {
  box-shadow: none;
}

/* Que tipo de régua? */
.ct-rg-types {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ct-rg-type {
  padding: 1.35rem 1.4rem 1.4rem;
  display: grid;
  align-content: start;
  gap: 0.85rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border: 1.5px solid var(--ct-color-border);
  border-radius: var(--ct-radius-xl);
  box-shadow: var(--ct-shadow-xs);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--ct-motion-fast) var(--ct-ease-standard),
    box-shadow var(--ct-motion-gentle) var(--ct-ease-standard),
    transform var(--ct-motion-gentle) var(--ct-ease-standard);
}

.ct-rg-type:hover {
  border-color: var(--ct-color-action);
  box-shadow: var(--ct-shadow-raised);
  transform: translateY(-2px);
}

.ct-rg-type__name {
  color: var(--ct-color-forest);
  font-size: 1.15rem;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.ct-rg-type__hint {
  color: var(--ct-color-graphite);
  font-size: 0.9rem;
}

.ct-rg-type__eg {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
}

.ct-rg-tl {
  padding: 0.9rem 0.2rem;
  display: flex;
  align-items: center;
}

.ct-rg-tl__rail {
  min-width: 0.6rem;
  height: 3px;
  flex: 1 1 auto;
  background: var(--ct-color-border);
  border-radius: 3px;
}

.ct-rg-tl__dot {
  width: 0.8rem;
  height: 0.8rem;
  flex: 0 0 auto;
  background: var(--ct-color-action);
  border: 2px solid var(--ct-color-white);
  border-radius: 50%;
  box-shadow: var(--ct-ring-dot);
}

.ct-rg-tl__dot--after {
  background: var(--ct-color-late);
}

.ct-rg-tl__dot--camp {
  background: var(--ct-color-deal);
}

.ct-rg-tl__mark {
  flex: 0 0 auto;
  padding: 0.06rem 0.5rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-forest);
  border-radius: var(--ct-radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.ct-rg-tl--campaign .ct-rg-tl__mark {
  color: var(--ct-color-deal);
  border-color: var(--ct-color-deal);
}

/* The builder: its title, the draft band and the steps */
.ct-rg-head {
  margin: 0.45rem 0 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
}

.ct-rg-title {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ct-rg-title__input {
  min-width: 6ch;
  max-width: 100%;
  margin: 0;
  padding: 0 0.975rem 0 0.1rem;
  color: var(--ct-color-forest);
  background: transparent;
  border: 0;
  border-bottom: 2px dashed transparent;
  border-radius: 0;
  field-sizing: content;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  /* A name longer than the line ends in an ellipsis; the whole name is in
     the crumbs above and in the field while she edits it. */
  text-overflow: ellipsis;
}

.ct-rg-title:hover .ct-rg-title__input {
  border-bottom-color: var(--ct-color-border-strong);
}

.ct-rg-title__input:focus {
  border-bottom-color: var(--ct-color-action);
  outline: none;
  box-shadow: none;
}

.ct-rg-edit {
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ct-color-muted);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: 50%;
  box-shadow: var(--ct-shadow-xs);
  cursor: pointer;
}

.ct-rg-edit:hover {
  color: var(--ct-color-forest);
  border-color: var(--ct-color-border-strong);
}

.ct-rg-draft-band {
  margin: -0.5rem 0 1.2rem;
  padding: 0.65rem 0.85rem 0.65rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-selection);
  border-radius: var(--ct-radius-md);
  font-size: 0.88rem;
}

.ct-rg-draft-band > svg {
  flex: 0 0 auto;
}

.ct-rg-draft-band > span {
  flex: 1 1 16rem;
}

.ct-rg-draft-band form {
  margin: 0;
}

.ct-rg-builder > .ct-band {
  margin: -0.5rem 0 1.2rem;
}

.ct-rg-stepper {
  margin: -0.3rem 0 1.35rem;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
}

.ct-rg-stp {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ct-rg-stp:last-child {
  flex: 0 0 auto;
}

.ct-rg-stp:not(:last-child)::after {
  content: "";
  min-width: 0.75rem;
  height: 2px;
  flex: 1 1 auto;
  background: var(--ct-color-border);
  border-radius: 2px;
}

.ct-rg-stp--done:not(:last-child)::after {
  background: color-mix(in srgb, var(--ct-color-action) 50%, var(--ct-color-white));
}

.ct-rg-stp__go {
  padding: 0.25rem 0.45rem 0.25rem 0.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ct-color-muted);
  background: transparent;
  border: 0;
  border-radius: var(--ct-radius-pill);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-rg-stp__go:hover {
  color: var(--ct-color-forest);
}

.ct-rg-stp__n {
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ct-color-muted);
  background: var(--ct-color-white);
  border: 1.5px solid var(--ct-color-border-strong);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  transition:
    background-color var(--ct-motion-fast) var(--ct-ease-standard),
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-rg-stp--done .ct-rg-stp__n {
  color: var(--ct-color-white);
  background: var(--ct-color-action);
  border-color: var(--ct-color-action);
}

.ct-rg-stp--current .ct-rg-stp__n {
  color: var(--ct-color-white);
  background: var(--ct-color-forest);
  border-color: var(--ct-color-forest);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ct-color-mint) 45%, transparent);
}

.ct-rg-stp--current .ct-rg-stp__go {
  color: var(--ct-color-forest);
  font-weight: 700;
}

.ct-rg-stp--error:not(.ct-rg-stp--current) .ct-rg-stp__n {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  border-color: var(--ct-color-attention);
}

.ct-rg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22.5rem;
  align-items: start;
  gap: 1.5rem;
}

.ct-rg-grid--solo {
  grid-template-columns: minmax(0, 1fr);
}

.ct-rg-flow {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.ct-rg-q {
  min-width: 0;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-xl);
  box-shadow: var(--ct-shadow-xs);
}

.ct-rg-q--what {
  container: what / inline-size;
}

.ct-rg-q form {
  margin: 0;
}

/* The carteira she picks, as a form of its own, keeps its distance from the choices. */
.ct-rg-q form.ct-rg-detail {
  margin-top: 0.8rem;
}

.ct-rg-detail__label {
  color: var(--ct-color-forest);
  font-size: 0.9rem;
  font-weight: 650;
}

/* Focused when she opens "Uma carteira": it stops clear of the summary bar
 * that stays at the bottom of the screen. */
.ct-rg-detail select {
  scroll-margin-bottom: 8rem;
}

.ct-rg-q__head {
  margin-bottom: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 0.8rem;
}

.ct-rg-q h2 {
  margin: 0 auto 0 0;
  color: var(--ct-color-forest);
  font-size: 1.18rem;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.ct-rg-q__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ct-rg-apply {
  margin-bottom: 0.8rem;
}

/* Quem recebe */
.ct-rg-arrive {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.45rem;
  background: var(--ct-color-canvas-soft);
  border: 1px solid var(--ct-color-border-soft);
  border-radius: var(--ct-radius-md);
}

.ct-rg-arrive__label {
  color: var(--ct-color-forest);
  font-size: 0.86rem;
  font-weight: 650;
}

.ct-rg-arrive__list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  list-style: none;
}

.ct-rg-arrive__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ct-color-graphite);
  font-size: 0.88rem;
}

.ct-rg-arrive__list svg {
  flex: 0 0 auto;
  color: var(--ct-color-action);
}

/* Who comes from other réguas by themselves: computed, never chosen. */
.ct-rg-q__sent {
  margin: 1rem 0 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--ct-color-graphite);
  font-size: 0.88rem;
}

.ct-rg-q__sent svg {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--ct-color-action);
}

/* A choice that cannot be switched on: amber, and what to do instead. */
.ct-rg-q__problem {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-attention-soft);
  border: 1px solid var(--ct-color-attention-line);
  border-radius: var(--ct-radius-md);
  font-size: 0.9rem;
}

.ct-rg-q__problem svg {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--ct-color-attention);
}

/* Who moves between réguas when this one switches on. */
.ct-rg-q__moves {
  margin: 1rem 0 0;
  padding: 0 0 0 1.1rem;
  display: grid;
  gap: 0.35rem;
  color: var(--ct-color-graphite);
  font-size: 0.88rem;
}

/* As many columns as choices, so a fourth choice never sits alone on a row. */
.ct-rg-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.7rem;
}

.ct-rg-choice {
  position: relative;
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: inherit;
  background: var(--ct-color-canvas-soft);
  border: 1.5px solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--ct-motion-fast) var(--ct-ease-standard),
    background-color var(--ct-motion-fast) var(--ct-ease-standard),
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-rg-choice:hover {
  border-color: var(--ct-color-border-strong);
}

.ct-rg-choice[aria-checked="true"] {
  background: var(--ct-color-success-soft);
  border-color: var(--ct-color-action);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-color-action) 12%, transparent);
}

.ct-rg-choice b {
  color: var(--ct-color-forest);
  font-size: 0.95rem;
}

.ct-rg-choice span {
  color: var(--ct-color-muted);
  font-size: 0.82rem;
}

.ct-rg-choice__mark {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0.18rem;
  color: var(--ct-color-white);
  background: var(--ct-color-action);
  border-radius: 50%;
  stroke-width: 3.4;
}

.ct-rg-detail {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
}

.ct-rg-field {
  min-width: 0;
  padding: 0.45rem 0.6rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border-strong);
  border-radius: var(--ct-radius-sm);
}

.ct-rg-field:hover {
  border-color: var(--ct-color-forest);
}

.ct-rg-field--n {
  width: 4.2rem;
  text-align: center;
}

.ct-rg-field--money {
  width: 7.5rem;
}

.ct-rg-field--date {
  width: 9.6rem;
}

.ct-rg-field--search,
.ct-rg-field--wide {
  width: 100%;
}

/* A date to fix is a calm attention state, not a risk. */
.ct-rg-field[aria-invalid="true"] {
  border-color: var(--ct-color-attention);
  box-shadow: 0 0 0 3px var(--ct-color-attention-line);
}

.ct-rg-picker {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ct-rg-picker__list {
  max-height: 13rem;
  overflow: auto;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-sm);
}

.ct-rg-picker__none {
  padding: 0.7rem;
}

.ct-rg-pick[hidden] {
  display: none;
}

.ct-rg-pick {
  padding: 0.5rem 0.7rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--ct-color-border-soft);
  cursor: pointer;
  font-size: 0.88rem;
}

.ct-rg-pick:last-child {
  border-bottom: 0;
}

.ct-rg-pick input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--ct-color-action);
}

.ct-rg-pick small {
  color: var(--ct-color-muted);
}

.ct-rg-pick-new {
  align-self: flex-start;
}

.ct-rg-valid {
  margin-top: 1rem;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.7rem;
  border-top: 1px solid var(--ct-color-border-soft);
}

.ct-rg-valid__label {
  color: var(--ct-color-forest);
  font-size: 0.86rem;
  font-weight: 650;
}

.ct-rg-valid__dates {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: var(--ct-color-muted);
  font-size: 0.88rem;
}

.ct-rg-valid__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-muted);
  font-size: 0.82rem;
}

.ct-rg-valid__hint svg {
  color: var(--ct-color-faint);
}

/* Which instalments a choice speaks of, on its own line under it. */
.ct-rg-valid__note {
  flex-basis: 100%;
  margin: 0;
}

/* Who receives only the identity message for now. */
.ct-rg-unconfirmed {
  margin: 0.55rem 0 0;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.ct-rg-unconfirmed svg {
  flex: none;
  margin-top: 0.15rem;
}

.ct-rg-field-error {
  margin: 0;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ct-color-attention);
  font-size: 0.85rem;
  font-weight: 600;
}

.ct-rg-seg {
  width: fit-content;
  max-width: 100%;
  padding: 0.2rem;
  display: inline-flex;
  gap: 0.15rem;
  background: var(--ct-color-canvas);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-pill);
}

.ct-rg-seg button {
  padding: 0.34rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-muted);
  background: transparent;
  border: 0;
  border-radius: var(--ct-radius-pill);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 650;
  white-space: nowrap;
  transition:
    background-color var(--ct-motion-fast) var(--ct-ease-standard),
    color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-rg-seg button[aria-checked="true"] {
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  box-shadow: var(--ct-shadow-soft);
}

/* On a phone, a choice with a long label shares the line evenly and lets the
   label wrap, instead of running past the edge. */
@container page (max-width: 36rem) {
  .ct-rg-seg--wrap {
    width: 100%;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .ct-rg-seg--wrap button {
    justify-content: center;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
}

.ct-rg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ct-rg-chips-note {
  margin: 0.45rem 0 0;
  max-width: 36rem;
}

.ct-rg-chip {
  padding: 0.4rem 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-pill);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color var(--ct-motion-fast) var(--ct-ease-standard),
    background-color var(--ct-motion-fast) var(--ct-ease-standard),
    color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-rg-chip:hover {
  color: var(--ct-color-graphite);
  border-color: var(--ct-color-border-strong);
}

.ct-rg-chip[aria-checked="true"] {
  color: var(--ct-color-white);
  background: var(--ct-color-forest);
  border-color: var(--ct-color-forest);
  box-shadow: var(--ct-shadow-chip);
}

.ct-rg-chip__note {
  padding: 0.05rem 0.42rem;
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  border-radius: var(--ct-radius-pill);
  font-size: 0.68rem;
  font-weight: 650;
}

.ct-rg-chip[aria-checked="true"] .ct-rg-chip__note {
  color: var(--ct-color-attention-on-dark);
  background: var(--ct-color-on-dark-soft);
}

.ct-rg-chip--ghost,
.ct-rg-chip--ghost:hover {
  color: var(--ct-color-action);
  background: transparent;
  border-style: dashed;
}

.ct-rg-chip--ghost:hover {
  border-color: var(--ct-color-action);
}

.ct-rg-chip--static {
  padding: 0.22rem 0.65rem;
  cursor: default;
  font-size: 0.8rem;
}

.ct-rg-chip--static button {
  padding: 0;
  color: var(--ct-color-muted);
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 1;
}

/* Adicionar mensagem */
.ct-rg-add {
  position: relative;
}

.ct-rg-add > summary {
  list-style: none;
}

.ct-rg-add > summary::-webkit-details-marker {
  display: none;
}

.ct-rg-pop {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 12;
  min-width: 13rem;
  margin: 0;
  padding: 0.35rem;
  display: grid;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  box-shadow: var(--ct-shadow-lg);
}

.ct-rg-pop button {
  padding: 0.5rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ct-color-graphite);
  background: transparent;
  border: 0;
  border-radius: var(--ct-radius-sm);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 550;
  text-align: left;
}

.ct-rg-pop button:hover,
.ct-rg-pop button:focus-visible {
  color: var(--ct-color-forest);
  background: var(--ct-color-canvas);
}

.ct-rg-pop__dot {
  width: 0.6rem;
  height: 0.6rem;
  background: var(--ct-color-action);
  border-radius: 50%;
}

.ct-rg-pop__dot--after {
  background: var(--ct-color-late);
}

.ct-rg-pop__none {
  padding: 0.5rem 0.7rem;
}

/* The route map */
.ct-rg-map {
  --ct-rg-trunk: 1.15rem;
  --ct-rg-lane-x: 3rem;
  --ct-rg-line-y: 4.6rem;
  position: relative;
}

.ct-rg-axis {
  position: relative;
  height: 9.25rem;
  margin-right: 17.2rem;
}

.ct-rg-map--line .ct-rg-axis {
  height: 8.1rem;
  margin-right: 1.5rem;
}

.ct-rg-rail {
  position: absolute;
  top: var(--ct-rg-line-y);
  left: 0;
  width: var(--ct-rg-p);
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--ct-color-mint) 0%,
    var(--ct-color-action) var(--ct-rg-q),
    var(--ct-color-late-soft) var(--ct-rg-q),
    var(--ct-color-late) 100%
  );
  border-radius: 6px;
  box-shadow: var(--ct-rail-gloss);
  transform: translateY(-50%);
}

.ct-rg-map--entry .ct-rg-rail {
  background: linear-gradient(90deg, var(--ct-color-late-soft), var(--ct-color-late));
}

.ct-rg-map--campaign .ct-rg-rail {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ct-color-deal) 40%, var(--ct-color-white)), var(--ct-color-deal));
}

.ct-rg-tail {
  position: absolute;
  top: var(--ct-rg-line-y);
  right: 0;
  left: var(--ct-rg-p);
  border-top: 2px dashed var(--ct-color-border-strong);
  transform: translateY(-1px);
}

.ct-rg-due {
  position: absolute;
  top: 0;
  left: var(--ct-rg-p);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transform: translateX(-50%);
}

/* The campaign's end sits at the right of the line, so its flag opens to the
   left of the stem. */
.ct-rg-due--end {
  align-items: flex-end;
  transform: translateX(-100%);
}

.ct-rg-due__flag {
  padding: 0.08rem 0.55rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-forest);
  border-radius: var(--ct-radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.ct-rg-due--end .ct-rg-due__flag {
  color: var(--ct-color-deal);
  border-color: var(--ct-color-deal);
}

.ct-rg-due__stem {
  width: 0;
  height: 3.2rem;
  border-left: 2px dashed color-mix(in srgb, var(--ct-color-forest) 45%, transparent);
}

.ct-rg-st {
  position: absolute;
  top: var(--ct-rg-line-y);
  left: var(--ct-rg-p);
  z-index: 3;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ct-color-white);
  background: var(--ct-color-action);
  border: 3px solid var(--ct-color-white);
  border-radius: 50%;
  box-shadow: var(--ct-shadow-station);
  transform: translate(-50%, -50%);
  transition:
    transform var(--ct-motion-fast) var(--ct-ease-standard),
    box-shadow var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-rg-st:hover {
  color: var(--ct-color-white);
  transform: translate(-50%, -50%) scale(1.08);
}

.ct-rg-st--after,
.ct-rg-map--entry .ct-rg-st:not(.ct-rg-st--review) {
  background: var(--ct-color-late);
}

.ct-rg-map--campaign .ct-rg-st:not(.ct-rg-st--review) {
  background: var(--ct-color-deal);
}

.ct-rg-st--review,
.ct-rg-st--review:hover {
  color: var(--ct-color-attention);
  background: var(--ct-color-white);
  box-shadow:
    0 0 0 2px var(--ct-color-attention),
    var(--ct-shadow-station-review);
}

.ct-rg-st[aria-current="true"] {
  transform: translate(-50%, -50%) scale(1.16);
  box-shadow:
    0 0 0 3px var(--ct-color-forest),
    0 0 0 8px color-mix(in srgb, var(--ct-color-mint) 50%, transparent),
    var(--ct-shadow-station-on);
}

.ct-rg-st-label {
  position: absolute;
  top: 6.15rem;
  left: var(--ct-rg-p);
  z-index: 4;
  padding: 0.05rem 0.4rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border-radius: 0.4rem;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}

.ct-rg-st-label--up {
  top: 1.5rem;
}

.ct-rg-st-label small {
  display: block;
  color: var(--ct-color-muted);
  font-size: 0.71rem;
  font-weight: 500;
}

.ct-rg-brace {
  position: absolute;
  top: 8.35rem;
  left: var(--ct-rg-trunk);
  z-index: 1;
  width: calc(var(--ct-rg-p) - var(--ct-rg-trunk));
  height: 0.9rem;
  border: 2px dotted var(--ct-color-border-strong);
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 0.8rem 0;
}

.ct-rg-brace span {
  position: absolute;
  bottom: -0.62rem;
  left: 1.4rem;
  padding: 0 0.45rem;
  color: var(--ct-color-muted);
  background: var(--ct-color-white);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* The end of the line: wait, then go where the customer goes. */
.ct-rg-end {
  z-index: 3;
  display: flex;
  align-items: center;
}

.ct-rg-map--full .ct-rg-end {
  position: absolute;
  top: var(--ct-rg-line-y);
  right: 0.2rem;
  width: 17rem;
  transform: translateY(-50%);
}

.ct-rg-wait {
  flex: 0 0 auto;
  padding: 0.12rem 0.2rem 0.12rem 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--ct-color-muted);
  background: var(--ct-color-white);
  border: 1px dashed var(--ct-color-border-strong);
  border-radius: var(--ct-radius-pill);
}

.ct-rg-wait--fixed {
  padding: 0.12rem 0.55rem 0.12rem 0.45rem;
  color: var(--ct-color-forest);
  font-size: 0.76rem;
  font-weight: 650;
}

.ct-rg-end__link {
  flex: 0 0 0.7rem;
  border-top: 2px dashed var(--ct-color-border-strong);
}

.ct-rg-end__pill {
  --ct-rg-c: var(--ct-color-forest);
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.42rem 0.65rem 0.48rem;
  display: grid;
  gap: 0.05rem;
  border: 1.5px solid;
  border-radius: 0.9rem;
  box-shadow: var(--ct-shadow-soft);
  transition: box-shadow var(--ct-motion-gentle) var(--ct-ease-standard);
}

.ct-rg-end__pill--people {
  --ct-rg-c: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  border-color: var(--ct-color-attention-line);
}

.ct-rg-end__pill--regua {
  --ct-rg-c: var(--ct-color-action);
  background: var(--ct-color-success-soft);
  border-color: color-mix(in srgb, var(--ct-color-action) 30%, var(--ct-color-white));
}

.ct-rg-end__pill--back {
  --ct-rg-c: var(--ct-color-forest);
  background: var(--ct-color-white);
  border-color: var(--ct-color-border);
}

.ct-rg-end__pill--closed {
  --ct-rg-c: var(--ct-color-muted);
  background: var(--ct-color-icon-tile);
  border-color: var(--ct-color-border);
}

.ct-rg-end__label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ct-rg-c);
  font-size: 0.7rem;
  font-weight: 650;
}

.ct-rg-end__fixed {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-forest);
  font-size: 0.86rem;
  font-weight: 700;
}

/* Choices that draw their own arrow */
.ct-rg-select {
  position: relative;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
}

.ct-rg-select select {
  min-width: 0;
  max-width: 100%;
  appearance: none;
  cursor: pointer;
}

.ct-rg-select > svg {
  position: absolute;
  right: 0.1rem;
  color: var(--ct-color-forest);
  pointer-events: none;
}

.ct-rg-select--bare select {
  padding: 0.1rem 0.95rem 0.1rem 0.1rem;
  color: var(--ct-color-forest);
  background: transparent;
  border: 0;
  font-size: 0.76rem;
  font-weight: 650;
}

.ct-rg-end__pill .ct-rg-select {
  width: 100%;
}

.ct-rg-end__pill .ct-rg-select select {
  width: 100%;
  padding: 0 1.05rem 0 0;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 700;
  text-overflow: ellipsis;
}

.ct-rg-end__pill .ct-rg-select > svg {
  right: 0;
}

.ct-rg-select--pill select {
  padding: 0.3rem 1.65rem 0.3rem 0.75rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border: 1px solid color-mix(in srgb, var(--ct-rg-c, var(--ct-color-forest)) 32%, var(--ct-color-white));
  border-radius: var(--ct-radius-pill);
  box-shadow: var(--ct-shadow-xs);
  font-size: 0.83rem;
  font-weight: 650;
}

.ct-rg-select--pill select:hover {
  border-color: var(--ct-rg-c, var(--ct-color-forest));
}

.ct-rg-select--pill > svg {
  right: 0.55rem;
}

/* The paths, from the brace "a qualquer momento" */
.ct-rg-lanes {
  position: relative;
  padding-top: 0.45rem;
  display: grid;
}

.ct-rg-lanes::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--ct-rg-trunk);
  height: 0.45rem;
  border-left: 2px dotted var(--ct-color-border-strong);
}

.ct-rg-lane {
  --ct-rg-c: var(--ct-route-auto);
  position: relative;
  min-height: 3.25rem;
  padding: 0.4rem 0 0.4rem var(--ct-rg-lane-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
}

.ct-rg-lane--pay {
  --ct-rg-c: var(--ct-route-pay);
}

.ct-rg-lane--talk {
  --ct-rg-c: var(--ct-route-talk);
}

.ct-rg-lane--promise {
  --ct-rg-c: var(--ct-route-promise);
}

.ct-rg-lane--deal {
  --ct-rg-c: var(--ct-route-deal);
}

.ct-rg-lane::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ct-rg-trunk);
  border-left: 2px dotted var(--ct-color-border-strong);
}

.ct-rg-lane--last::after {
  bottom: 50%;
}

.ct-rg-lane::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.85rem);
  left: var(--ct-rg-trunk);
  z-index: 1;
  width: calc(var(--ct-rg-lane-x) - var(--ct-rg-trunk));
  height: 0.85rem;
  border-bottom: 2px solid var(--ct-rg-c);
  border-left: 2px solid var(--ct-rg-c);
  border-bottom-left-radius: 0.85rem;
}

.ct-rg-lane__tag {
  position: relative;
  z-index: 3;
  padding: 0.32rem 0.78rem 0.32rem 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: color-mix(in srgb, var(--ct-rg-c) 72%, var(--ct-color-forest));
  background: color-mix(in srgb, var(--ct-rg-c) 9%, var(--ct-color-white));
  border: 1px solid color-mix(in srgb, var(--ct-rg-c) 26%, var(--ct-color-white));
  border-radius: var(--ct-radius-pill);
  font-size: 0.84rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition:
    box-shadow var(--ct-motion-gentle) var(--ct-ease-standard),
    background-color var(--ct-motion-fast) var(--ct-ease-standard);
}

a.ct-rg-lane__tag:hover {
  color: color-mix(in srgb, var(--ct-rg-c) 72%, var(--ct-color-forest));
  background: color-mix(in srgb, var(--ct-rg-c) 15%, var(--ct-color-white));
}

.ct-rg-lane[data-on="true"] .ct-rg-lane__tag {
  background: color-mix(in srgb, var(--ct-rg-c) 14%, var(--ct-color-white));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-rg-c) 20%, transparent);
}

.ct-rg-lane__body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
}

.ct-rg-lane__track {
  min-width: 1.25rem;
  height: 2px;
  flex: 1 1 1.5rem;
  background: color-mix(in srgb, var(--ct-rg-c) 50%, var(--ct-color-white));
  border-radius: 2px;
}

.ct-rg-lane__track--short {
  flex: 0 0 1.4rem;
}

.ct-rg-lane__end {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ct-color-forest);
  font-size: 0.86rem;
  font-weight: 650;
  white-space: nowrap;
}

.ct-rg-lock {
  display: inline-grid;
  color: var(--ct-color-border-strong);
}

.ct-rg-term {
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ct-color-white);
  background: var(--ct-rg-c);
  border-radius: 50%;
  box-shadow:
    0 0 0 3px var(--ct-color-white),
    0 0 0 4px color-mix(in srgb, var(--ct-rg-c) 30%, transparent);
}

.ct-rg-term--ok {
  background: var(--ct-color-action);
}

.ct-rg-term--no {
  color: var(--ct-color-late);
  background: var(--ct-color-white);
  box-shadow: 0 0 0 1.5px var(--ct-color-late-soft);
}

/* The reminder of a promise: a small station on its lane, in the colour of
   the régua's line, as the prototype draws it. */
.ct-rg-st--mini {
  position: relative;
  top: auto;
  left: auto;
  width: 1.9rem;
  height: 1.9rem;
  background: var(--ct-rg-c);
  transform: none;
}

.ct-rg-st--mini:hover {
  transform: scale(1.08);
}

.ct-rg-st--mini[aria-current="true"] {
  transform: scale(1.12);
  box-shadow:
    0 0 0 3px var(--ct-color-forest),
    0 0 0 7px color-mix(in srgb, var(--ct-color-late) 25%, transparent);
}

.ct-rg-mini-label {
  color: var(--ct-color-forest);
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
}

.ct-rg-fork {
  position: relative;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.45rem;
}

.ct-rg-fork::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  bottom: 0.85rem;
  left: 0;
  border-left: 2px solid color-mix(in srgb, var(--ct-rg-c) 50%, var(--ct-color-white));
}

.ct-rg-fork__row {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: var(--ct-color-forest);
  font-size: 0.85rem;
  font-weight: 650;
}

.ct-rg-fork__row::before {
  content: "";
  position: absolute;
  top: 0.83rem;
  left: -1.3rem;
  width: 1rem;
  border-top: 2px solid color-mix(in srgb, var(--ct-rg-c) 50%, var(--ct-color-white));
}

.ct-rg-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  color: var(--ct-color-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.ct-rg-lane--auto {
  min-height: 2.6rem;
}

.ct-rg-lane--auto .ct-rg-lane__tag {
  color: var(--ct-color-muted);
  font-weight: 600;
}

.ct-rg-lane--auto .ct-rg-lane__end {
  color: var(--ct-color-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.ct-rg-more {
  margin: 0.25rem 0 0 var(--ct-rg-lane-x);
  padding: 0.3rem 0.4rem;
  display: inline-block;
  color: var(--ct-color-muted);
  border-radius: var(--ct-radius-sm);
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
}

.ct-rg-more:hover {
  color: var(--ct-color-forest);
  background: var(--ct-color-canvas);
}

/* The route pulse: a path drawn along what the customer does. */
.ct-rg-route {
  --ct-rg-rc: var(--ct-color-forest);
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transition: opacity var(--ct-motion-route-fade) var(--ct-ease-standard);
}

.ct-rg-route--fade {
  opacity: 0;
}

.ct-rg-map[data-sim="nada"] .ct-rg-route {
  --ct-rg-rc: var(--ct-color-late);
}

.ct-rg-map[data-sim="paga"] .ct-rg-route {
  --ct-rg-rc: var(--ct-route-pay);
}

.ct-rg-map[data-sim="responde"] .ct-rg-route {
  --ct-rg-rc: var(--ct-route-talk);
}

.ct-rg-map[data-sim="promete"] .ct-rg-route {
  --ct-rg-rc: var(--ct-route-promise);
}

.ct-rg-map[data-sim="acordo"] .ct-rg-route {
  --ct-rg-rc: var(--ct-route-deal);
}

.ct-rg-route__line,
.ct-rg-route__glow {
  fill: none;
  stroke: var(--ct-rg-rc);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ct-rg-route__line {
  stroke-width: 3.5;
}

.ct-rg-route__glow {
  stroke-opacity: 0.16;
  stroke-width: 11;
}

.ct-rg-route__dot {
  fill: var(--ct-color-white);
  stroke: var(--ct-rg-rc);
  stroke-width: 3.5;
}

@media (prefers-reduced-motion: no-preference) {
  .ct-rg-route__line,
  .ct-rg-route__glow {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: ct-rg-draw var(--ct-motion-route) var(--ct-ease-route) forwards;
  }
}

@keyframes ct-rg-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* The line on a phone: a list of steps, and the paths under the line. */
.ct-rg-vmap {
  --ct-rg-trunk: 1.15rem;
  --ct-rg-lane-x: 3rem;
  display: none;
}

.ct-rg-vsteps {
  position: relative;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  list-style: none;
}

.ct-rg-vsteps::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  bottom: 1.6rem;
  left: 1.15rem;
  width: 4px;
  background: linear-gradient(var(--ct-color-mint), var(--ct-color-action) 35%, var(--ct-color-late-soft) 45%, var(--ct-color-late));
  border-radius: 4px;
  transform: translateX(-50%);
}

.ct-rg-vstep {
  position: relative;
  width: 100%;
  padding: 0.5rem 0.7rem 0.5rem 0;
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  text-decoration: none;
}

.ct-rg-vstep:hover {
  color: var(--ct-color-graphite);
}

.ct-rg-vstep[aria-current="true"] {
  border-color: var(--ct-color-forest);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-color-mint) 45%, transparent);
}

.ct-rg-vdot {
  width: 2rem;
  height: 2rem;
  margin-left: 0.15rem;
  display: grid;
  place-items: center;
  justify-self: center;
  color: var(--ct-color-white);
  background: var(--ct-color-action);
  border: 3px solid var(--ct-color-white);
  border-radius: 50%;
  box-shadow: var(--ct-ring-station);
}

.ct-rg-vstep--after .ct-rg-vdot {
  background: var(--ct-color-late);
}

.ct-rg-vtext b {
  display: block;
  color: var(--ct-color-forest);
  font-size: 0.9rem;
}

.ct-rg-vtext small {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
}

.ct-rg-vline {
  width: 100%;
  padding: 0.55rem 0.85rem;
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-canvas-soft);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
}

.ct-rg-vline:hover {
  color: var(--ct-color-forest);
  border-color: var(--ct-color-border-strong);
}

.ct-rg-vlanes-title {
  margin: 1.1rem 0 0.1rem;
  display: none;
  color: var(--ct-color-muted);
  font-size: 0.84rem;
  font-weight: 650;
}

@container what (width > 46rem) {
  .ct-rg-map[data-sim="nada"] .ct-rg-end__pill {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--ct-rg-c) 18%, transparent),
      var(--ct-shadow-soft);
  }
}

@container what (max-width: 46rem) {
  .ct-rg-map--line,
  .ct-rg-map--full .ct-rg-axis,
  .ct-rg-map--full .ct-rg-route {
    display: none;
  }

  .ct-rg-vmap,
  .ct-rg-map--full .ct-rg-vlanes-title {
    display: block;
  }

  .ct-rg-map--full .ct-rg-vline {
    display: grid;
  }

  .ct-rg-map--full .ct-rg-end {
    position: static;
    width: 100%;
    max-width: 22rem;
    margin: 0.7rem 0 0 0.3rem;
    transform: none;
  }

  /* Narrow lanes: the tag on top, what happens under it. */
  .ct-rg-map--full .ct-rg-lane {
    min-height: 0;
    padding: 0.45rem 0 0.55rem var(--ct-rg-lane-x);
    display: grid;
    justify-items: start;
    gap: 0.4rem;
  }

  .ct-rg-map--full .ct-rg-lane::before {
    top: 0.57rem;
  }

  .ct-rg-map--full .ct-rg-lane--last::after {
    bottom: auto;
    height: 1.42rem;
  }

  .ct-rg-map--full .ct-rg-lane__track {
    display: none;
  }

  .ct-rg-map--full .ct-rg-lane__body {
    padding-left: 0.25rem;
    gap: 0.45rem 0.55rem;
  }

  .ct-rg-map--full .ct-rg-fork {
    width: 100%;
  }
}

/* The step being edited */
.ct-rg-editor {
  margin-top: 1.3rem;
  padding-top: 1.3rem;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: start;
  gap: 1.2rem 1.6rem;
  border-top: 1px solid var(--ct-color-border-soft);
}

.ct-rg-editor > noscript {
  grid-column: 1 / -1;
}

.ct-rg-ed-side {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 1rem;
}

.ct-rg-ed-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ct-rg-ed-title h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ct-color-forest);
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}

.ct-rg-ed-title h3 svg {
  color: var(--ct-color-late);
}

.ct-rg-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.ct-rg-ed-field {
  display: grid;
  gap: 0.45rem;
}

.ct-rg-ed-label {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.ct-rg-stage {
  min-width: 0;
  padding: 0.85rem 0.9rem 0.9rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  background-color: var(--ct-chat-bg);
  background-image: radial-gradient(var(--ct-chat-dot) 1px, transparent 1px);
  background-size: 14px 14px;
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-chat-ring);
}

.ct-rg-stage .ct-rg-seg {
  background: var(--ct-chat-seg);
  border-color: var(--ct-chat-seg-line);
}

.ct-rg-stage .ct-rg-seg button {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
}

.ct-rg-stage-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* Whose message the stage shows, and the day it goes to them. */
.ct-rg-stage-for {
  margin: 0 0 -0.35rem;
  font-weight: 600;
}

.ct-rg-msg-name {
  color: var(--ct-color-forest);
  font-size: 0.82rem;
  font-weight: 650;
}

@container what (max-width: 40rem) {
  .ct-rg-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-rg-stage .ct-rg-seg {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ct-rg-stage .ct-rg-seg button {
    justify-content: center;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
}

/* WhatsApp bubbles, in the editor and on the phone */
.ct-rg-bubble {
  min-width: 0;
  max-width: 88%;
  padding: 0.42rem 0.6rem 0.3rem;
  align-self: flex-start;
  overflow-wrap: anywhere;
  color: var(--ct-chat-ink);
  background: var(--ct-color-white);
  border-radius: 0 0.6rem 0.6rem 0.6rem;
  box-shadow: var(--ct-chat-shadow);
  font-size: 0.84rem;
  line-height: 1.4;
}

.ct-rg-bubble--out {
  align-self: flex-end;
  background: var(--ct-chat-out);
  border-radius: 0.6rem 0 0.6rem 0.6rem;
}

.ct-rg-bubble__time {
  margin-top: 0.15rem;
  display: block;
  color: var(--ct-chat-meta);
  font-size: 0.66rem;
  text-align: right;
}

.ct-rg-stage .ct-rg-bubble {
  max-width: 100%;
  font-size: 0.9rem;
}

.ct-rg-v {
  padding: 0 0.15rem;
  background: color-mix(in srgb, var(--ct-color-mint) 45%, transparent);
  border-radius: 0.25rem;
}

/* Confira antes de ativar */
/* A running régua's draft: what publishing changes, one sentence each. */
.ct-rg-changes h3 {
  margin: 0 0 0.55rem;
  color: var(--ct-color-forest);
  font-size: 1.02rem;
}

.ct-rg-changes ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  list-style: none;
}

.ct-rg-changes li {
  padding: 0.7rem 0.9rem;
  display: grid;
  gap: 0.2rem;
  background: var(--ct-color-canvas-soft);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  line-height: 1.45;
}

.ct-rg-strip-title {
  margin: 1.1rem 0 0.2rem;
  color: var(--ct-color-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

/* What the company has not done yet, a short line each (2026-10-13). */
.ct-rg-gaps {
  display: grid;
  gap: 0.2rem;
}

.ct-rg-gaps > b {
  margin-bottom: 0.15rem;
}

/* The icon by the first line, not the band's middle; a line she can act on
   carries its way, beside it or under it on a phone. */
.ct-band:has(.ct-rg-gaps) {
  align-items: start;
}

.ct-band:has(.ct-rg-gaps) > svg {
  margin-top: 0.1rem;
}

.ct-rg-gaps__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

.ct-rg-first {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
}

.ct-rg-first b {
  color: var(--ct-color-forest);
  font-size: 1.15rem;
  letter-spacing: -0.015em;
}

.ct-rg-first span {
  color: var(--ct-color-muted);
  font-size: 0.88rem;
}

.ct-rg-first span.ct-rg-first__moved {
  flex-basis: 100%;
  color: var(--ct-color-muted);
  font-size: 0.86rem;
}

/* Whom a first switch-on takes, repeated where she confirms it (D-065). */
.ct-rg-whom {
  margin: 0.55rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ct-color-graphite);
  font-size: 0.9rem;
  font-weight: 600;
}

.ct-rg-whom svg {
  flex: 0 0 auto;
  color: var(--ct-color-action);
}

.ct-rg-q > .ct-band {
  margin-bottom: 0.9rem;
}

.ct-rg-strip-form {
  margin: 0;
}

.ct-rg-strip {
  margin-top: 1.1rem;
  padding: 0.2rem 0.1rem 0.3rem;
  display: grid;
  grid-auto-columns: minmax(1.7rem, 1fr);
  grid-auto-flow: column;
  align-items: end;
  gap: 0.35rem;
  overflow-x: auto;
}

.ct-rg-bar {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.ct-rg-bar__col {
  width: 100%;
  max-width: 2.4rem;
  height: 5.2rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, var(--ct-color-canvas) 70%, transparent);
  border-radius: 0.5rem;
}

.ct-rg-bar__fill {
  width: 100%;
  height: var(--ct-rg-p);
  min-height: 4px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ct-color-action) 55%, var(--ct-color-white)),
    color-mix(in srgb, var(--ct-color-action) 75%, var(--ct-color-white))
  );
  border-radius: 0.5rem 0.5rem 0.3rem 0.3rem;
}

.ct-rg-bar__fill--zero {
  background: var(--ct-color-border);
}

.ct-rg-bar:hover .ct-rg-bar__fill:not(.ct-rg-bar__fill--zero),
.ct-rg-bar[aria-pressed="true"] .ct-rg-bar__fill:not(.ct-rg-bar__fill--zero) {
  background: var(--ct-color-action);
}

.ct-rg-bar[aria-pressed="true"] .ct-rg-bar__col {
  outline: 2px solid var(--ct-color-action);
  outline-offset: 2px;
}

.ct-rg-bar__dn {
  color: var(--ct-color-forest);
  font-size: 0.74rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ct-rg-bar__wk {
  color: var(--ct-color-muted);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

.ct-rg-week-gap {
  width: 0.4rem;
}

.ct-rg-day-list {
  margin-top: 0.9rem;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
}

.ct-rg-day-list h3,
.ct-rg-day-list h4 {
  margin: 0;
  padding: 0.65rem 0.85rem;
  color: var(--ct-color-forest);
  border-bottom: 1px solid var(--ct-color-border-soft);
  font-size: 0.9rem;
}

.ct-rg-day-item {
  padding: 0.5rem 0.85rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  border-bottom: 1px solid var(--ct-color-border-soft);
  font-size: 0.85rem;
}

.ct-rg-day-item:last-child {
  border-bottom: 0;
}

.ct-rg-day-item small {
  color: var(--ct-color-muted);
}

.ct-rg-swap {
  margin-top: 1.2rem;
  padding: 0.95rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem 1rem;
  background: var(--ct-color-canvas-soft);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
}

.ct-rg-swap h3 {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: 0.95rem;
}

.ct-rg-swap__flow {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ct-rg-swap__flow > svg {
  color: var(--ct-color-muted);
}

.ct-rg-regua-tag {
  padding: 0.22rem 0.7rem;
  color: var(--ct-color-muted);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-pill);
  font-size: 0.8rem;
  font-weight: 650;
}

.ct-rg-regua-tag--new {
  color: var(--ct-color-forest);
  background: var(--ct-color-selection);
  border-color: transparent;
}

.ct-rg-avatars {
  margin-left: 0.4rem;
  display: inline-flex;
  align-items: center;
}

.ct-rg-avatars span {
  width: 1.7rem;
  height: 1.7rem;
  margin-left: -0.45rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-forest);
  background: var(--ct-color-icon-tile);
  border: 2px solid var(--ct-color-white);
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 700;
}

.ct-rg-avatars span:first-child {
  margin-left: 0;
}

.ct-rg-review-note {
  margin-top: 0.9rem;
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--ct-color-attention-ink);
  background: var(--ct-color-attention-soft);
  border: 1px solid var(--ct-color-attention-line);
  border-radius: var(--ct-radius-md);
  font-size: 0.86rem;
}

.ct-rg-review-note svg {
  margin-top: 0.1rem;
  flex: 0 0 auto;
}

.ct-rg-check-error {
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem 0.9rem;
  color: var(--ct-color-attention-ink);
  background: var(--ct-color-attention-soft);
  border: 1px solid var(--ct-color-attention-line);
  border-radius: var(--ct-radius-md);
}

.ct-rg-check-error > svg {
  color: var(--ct-color-attention);
}

.ct-rg-check-error b {
  display: block;
  color: var(--ct-color-attention-ink);
}

.ct-rg-check-error span {
  font-size: 0.88rem;
}

/* What publishing changes (the migration preview) */
.ct-rg-migration {
  margin-top: 1.2rem;
  display: grid;
}

.ct-rg-migration > h3 {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: 0.95rem;
}

.ct-rg-migration .ct-rg-day-list {
  margin-top: 0.6rem;
}

/* The rest of a long list, a click away */
.ct-rg-rest > summary {
  padding: 0.55rem 0.85rem;
  color: var(--ct-color-action);
  font-size: 0.85rem;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.ct-rg-rest > summary::-webkit-details-marker {
  display: none;
}

.ct-rg-rest > summary:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ct-rg-rest[open] > summary {
  border-bottom: 1px solid var(--ct-color-border-soft);
}

/* The WhatsApp preview, beside the check */
.ct-rg-aside {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
}

.ct-rg-aside-card {
  padding: 1.05rem;
  display: grid;
  gap: 0.8rem;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-xl);
  box-shadow: var(--ct-shadow-soft);
}

.ct-rg-aside-card h3 {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.ct-rg-aside-card form {
  margin: 0;
}

.ct-rg-aside-card p {
  margin: 0;
}

.ct-rg-aside-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.6rem;
}

.ct-rg-id-tag {
  padding: 0.18rem 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: var(--ct-radius-pill);
  font-size: 0.74rem;
  font-weight: 650;
  white-space: nowrap;
}

.ct-rg-id-tag--ok {
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
}

.ct-rg-id-tag--no {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
}

.ct-rg-sim-label {
  margin-bottom: -0.35rem;
  color: var(--ct-color-muted);
  font-size: 0.8rem;
  font-weight: 650;
}

/* How many messages the phone below holds, and on which days. */
.ct-rg-send-days {
  margin: 0;
}

.ct-rg-sim {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ct-rg-sim button {
  padding: 0.32rem 0.75rem;
  color: var(--ct-color-muted);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-pill);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  transition:
    background-color var(--ct-motion-fast) var(--ct-ease-standard),
    color var(--ct-motion-fast) var(--ct-ease-standard),
    border-color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-rg-sim button:hover {
  color: var(--ct-color-forest);
  border-color: var(--ct-color-border-strong);
}

.ct-rg-sim button[aria-checked="true"] {
  color: var(--ct-color-white);
  background: var(--ct-color-forest);
  border-color: var(--ct-color-forest);
}

.ct-rg-device {
  position: relative;
  padding: 0.55rem;
  background: var(--ct-device);
  border-radius: 2.7rem;
  box-shadow:
    inset 0 0 0 1px var(--ct-device-ring),
    inset 0 0 0 3px var(--ct-device-edge),
    var(--ct-shadow-lg);
}

.ct-rg-screen {
  overflow: hidden;
  background: var(--ct-chat-bg);
  border-radius: 2.2rem;
}

.ct-rg-device-bar {
  position: relative;
  padding: 0.7rem 1.5rem 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ct-chat-ink);
  background: var(--ct-chat-head);
  font-size: 0.74rem;
  font-weight: 650;
}

.ct-rg-island {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  width: 5.6rem;
  height: 1.45rem;
  background: var(--ct-device-island);
  border-radius: 1rem;
  transform: translateX(-50%);
}

.ct-rg-device-icons {
  display: grid;
}

.ct-rg-wa-head {
  padding: 0.35rem 0.8rem 0.6rem 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--ct-chat-head);
  border-bottom: 1px solid var(--ct-chat-line);
}

.ct-rg-wa-back {
  display: grid;
  color: var(--ct-chat-back);
}

.ct-rg-av {
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ct-color-white);
  background: linear-gradient(160deg, var(--ct-color-forest-light), var(--ct-color-forest));
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
}

.ct-rg-wa-name b {
  display: block;
  color: var(--ct-chat-ink);
  font-size: 0.85rem;
  line-height: 1.2;
}

.ct-rg-wa-name small {
  color: var(--ct-chat-meta);
  font-size: 0.7rem;
}

.ct-rg-chat {
  height: clamp(14rem, calc(100vh - 38rem), 23rem);
  padding: 0.8rem 0.65rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  overflow-x: hidden;
  overflow-y: auto;
  background-image: radial-gradient(var(--ct-chat-dot) 1px, transparent 1px);
  background-size: 14px 14px;
  scroll-behavior: smooth;
}

.ct-rg-chat .ct-rg-bubble {
  font-size: 0.8rem;
}

.ct-rg-chat:focus-visible {
  outline-offset: -0.1875rem;
}

/* Nothing to send: a WhatsApp-style notice in the middle of the chat. */
.ct-rg-chat-empty {
  max-width: 86%;
  margin: auto;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-chat-meta);
  background: var(--ct-chat-notice);
  border-radius: 0.6rem;
  box-shadow: var(--ct-chat-shadow);
  font-size: 0.76rem;
  line-height: 1.4;
  text-align: center;
}

.ct-rg-sep {
  margin: 0.3rem 0;
  padding: 0.15rem 0.55rem;
  align-self: center;
  color: var(--ct-chat-meta);
  background: var(--ct-chat-sep);
  border-radius: 0.5rem;
  box-shadow: var(--ct-chat-shadow);
  font-size: 0.68rem;
}

.ct-rg-wa-input {
  padding: 0.45rem 0.7rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ct-chat-meta);
  background: var(--ct-chat-head);
}

.ct-rg-wa-input span {
  padding: 0.38rem 0.8rem;
  flex: 1 1 auto;
  color: var(--ct-chat-hint);
  background: var(--ct-color-white);
  border-radius: 1.2rem;
  font-size: 0.78rem;
}

.ct-rg-caption {
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-selection);
  border-radius: var(--ct-radius-md);
  font-size: 0.84rem;
}

.ct-rg-caption svg {
  margin-top: 0.12rem;
  flex: 0 0 auto;
}

/* The bar at the bottom of the builder */
.ct-rg-actionbar {
  position: sticky;
  bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  z-index: 15;
  margin-top: 1.25rem;
  padding: 0.75rem 0.85rem 0.75rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: color-mix(in srgb, var(--ct-color-white) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--ct-color-forest) 9%, transparent);
  border-radius: 1.15rem;
  box-shadow: var(--ct-shadow-lg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.ct-rg-ab-left {
  min-width: 0;
}

.ct-rg-ab-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
}

.ct-rg-ab-name {
  overflow: hidden;
  color: var(--ct-color-forest);
  font-weight: 750;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-rg-ab-stats {
  margin-top: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  color: var(--ct-color-muted);
  font-size: 0.86rem;
}

.ct-rg-ab-stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ct-rg-ab-stats svg {
  color: var(--ct-color-forest);
}

/* Confirmations: switching off, switching on and publishing */
.ct-rg-dialog {
  width: calc(100% - 2rem);
  max-width: 28rem;
  padding: 1.5rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border: 0;
  border-radius: var(--ct-radius-xl);
  box-shadow: var(--ct-shadow-lg);
}

.ct-rg-dialog[open] {
  display: grid;
  gap: 1.1rem;
}

.ct-rg-dialog::backdrop {
  background: var(--ct-scrim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.ct-rg-dialog h2 {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.ct-rg-facts {
  display: grid;
  gap: 0.6rem;
}

.ct-rg-fact {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.93rem;
}

.ct-rg-fact svg {
  flex: 0 0 auto;
  color: var(--ct-color-action);
}

/* Who keeps arriving: one line, and where they come from a click away. */
.ct-rg-fact--routes {
  align-items: flex-start;
}

.ct-rg-fact--routes > svg {
  margin-top: 0.1rem;
}

.ct-rg-routes {
  margin-top: 0.3rem;
}

.ct-rg-routes summary {
  width: fit-content;
  color: var(--ct-color-forest);
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
}

.ct-rg-routes ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.25rem;
  color: var(--ct-color-muted);
  font-size: 0.86rem;
}

/* The pause is drawn filled, as the shell's own pause. */
.ct-rg-fact .lucide-pause {
  fill: currentColor;
  stroke-width: 0;
}

.ct-rg-dialog__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

/* After switching on */
.ct-rg-done {
  max-width: 46rem;
  margin-top: 1rem;
  padding: 1.6rem;
  display: grid;
  gap: 1.1rem;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-xl);
  box-shadow: var(--ct-shadow-soft);
}

.ct-rg-done p {
  margin: 0;
}

.ct-rg-done__title {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: 1.7rem;
  letter-spacing: -0.035em;
}

.ct-rg-done__ring {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
  border-radius: 50%;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ct-color-success-soft) 60%, transparent);
}

/* A first switch-on still starting (US-09.130): the ring turns, calmly. */
.ct-rg-done__ring--going {
  color: var(--ct-color-waiting);
  background: var(--ct-color-waiting-soft);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ct-color-waiting-soft) 60%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .ct-rg-done__ring--going svg {
    animation: ct-imp-spin var(--ct-motion-spin) linear infinite;
  }
}

.ct-rg-next-step {
  padding: 1.15rem 1.3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  color: var(--ct-color-on-dark-text);
  background: linear-gradient(150deg, var(--ct-color-forest-deep), var(--ct-color-forest));
  border-radius: var(--ct-radius-lg);
}

.ct-rg-next-step h2 {
  margin: 0;
  color: var(--ct-color-white);
  font-size: 1.05rem;
}

.ct-rg-done__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Beside the menu the list has a little less room: tighter columns keep
   "No fim" readable. */
@container page (max-width: 66rem) {
  .ct-rg-row {
    grid-template-columns: minmax(10rem, 1.2fr) minmax(6rem, 0.8fr) 5rem 8rem minmax(9.5rem, 1fr) 7rem 1rem;
    gap: 0.8rem;
  }

  .ct-rg-row__end b {
    white-space: normal;
  }
}

@container page (max-width: 58.5rem) {
  .ct-rg-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 1rem;
  }

  .ct-rg-row .ct-rg-mini {
    max-width: 22rem;
    grid-column: 1 / -1;
  }

  .ct-rg-row__go {
    display: none;
  }

  .ct-rg-row > .ct-rg-switch,
  .ct-rg-row > .ct-rg-switch-form {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }

  .ct-rg-row.ct-rg-row--soon {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container page (max-width: 56rem) {
  .ct-rg-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-rg-aside {
    position: static;
  }
}

@container page (max-width: 46rem) {
  .ct-rg-types {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 44rem) {
  /* Three weeks of business days do not fit a phone's width: they wrap, five
     a row, so no day is cut off. */
  .ct-rg-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: row;
    row-gap: 0.7rem;
    overflow: visible;
  }

  .ct-rg-week-gap {
    display: none;
  }

  /* The ready-made names fit beside the pencil on a phone in the console's
     own font, as they do in the prototype's. */
  .ct-rg-title__input {
    font-size: clamp(1.5rem, 6.7vw, 1.75rem);
  }

  .ct-rg-choices {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-rg-q {
    padding: 1.1rem 1rem 1.2rem;
  }

  .ct-rg-add .ct-rg-btn--sm {
    padding: 0.42rem 0.7rem;
  }

  .ct-rg-actionbar {
    padding: 0.65rem 0.7rem 0.65rem 0.9rem;
    gap: 0.6rem;
  }

  .ct-rg-ab-stats {
    gap: 0.2rem 0.7rem;
    font-size: 0.78rem;
  }

  .ct-rg-ab-stats span:nth-child(2),
  .ct-rg-ab-stats span:nth-child(3) {
    display: none;
  }

  .ct-rg-actionbar .ct-rg-btn {
    padding: 0.6rem 0.9rem;
  }

  .ct-rg-ab-name {
    font-size: 0.92rem;
  }

  .ct-rg-stp__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ct-rg-stepper {
    margin-bottom: 1.1rem;
  }

  .ct-rg-swap {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-rg-check-error {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ct-rg-check-error .ct-rg-btn {
    grid-column: 1 / -1;
  }

  .ct-rg-next-step {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-rg-row {
    padding: 0.95rem 1rem;
  }

  .ct-rg-chain {
    padding: 1rem;
  }

  .ct-rg-map,
  .ct-rg-vmap {
    --ct-rg-lane-x: 2.6rem;
  }

  /* The tab bar steps aside inside the builder, which has its own bar. */
  .ct-console:has(.ct-rg-actionbar) .ct-tabbar {
    display: none;
  }

  .ct-console:has(.ct-rg-actionbar) .ct-frame {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ct-motion-gentle: var(--ct-motion-reduced);
    --ct-motion-route: var(--ct-motion-reduced);
    --ct-motion-route-hold: var(--ct-motion-reduced);
    --ct-motion-route-fade: var(--ct-motion-reduced);
  }

  .ct-rg-chat {
    scroll-behavior: auto;
  }
}

/* Positions on a line, in whole percent: `ct-rg-p-*` is where a station,
   a flag or a dot sits, or how tall a bar is; `ct-rg-q-*` is where the line
   turns from before the date to after it. */
.ct-rg-p-0 { --ct-rg-p: 0%; }
.ct-rg-p-1 { --ct-rg-p: 1%; }
.ct-rg-p-2 { --ct-rg-p: 2%; }
.ct-rg-p-3 { --ct-rg-p: 3%; }
.ct-rg-p-4 { --ct-rg-p: 4%; }
.ct-rg-p-5 { --ct-rg-p: 5%; }
.ct-rg-p-6 { --ct-rg-p: 6%; }
.ct-rg-p-7 { --ct-rg-p: 7%; }
.ct-rg-p-8 { --ct-rg-p: 8%; }
.ct-rg-p-9 { --ct-rg-p: 9%; }
.ct-rg-p-10 { --ct-rg-p: 10%; }
.ct-rg-p-11 { --ct-rg-p: 11%; }
.ct-rg-p-12 { --ct-rg-p: 12%; }
.ct-rg-p-13 { --ct-rg-p: 13%; }
.ct-rg-p-14 { --ct-rg-p: 14%; }
.ct-rg-p-15 { --ct-rg-p: 15%; }
.ct-rg-p-16 { --ct-rg-p: 16%; }
.ct-rg-p-17 { --ct-rg-p: 17%; }
.ct-rg-p-18 { --ct-rg-p: 18%; }
.ct-rg-p-19 { --ct-rg-p: 19%; }
.ct-rg-p-20 { --ct-rg-p: 20%; }
.ct-rg-p-21 { --ct-rg-p: 21%; }
.ct-rg-p-22 { --ct-rg-p: 22%; }
.ct-rg-p-23 { --ct-rg-p: 23%; }
.ct-rg-p-24 { --ct-rg-p: 24%; }
.ct-rg-p-25 { --ct-rg-p: 25%; }
.ct-rg-p-26 { --ct-rg-p: 26%; }
.ct-rg-p-27 { --ct-rg-p: 27%; }
.ct-rg-p-28 { --ct-rg-p: 28%; }
.ct-rg-p-29 { --ct-rg-p: 29%; }
.ct-rg-p-30 { --ct-rg-p: 30%; }
.ct-rg-p-31 { --ct-rg-p: 31%; }
.ct-rg-p-32 { --ct-rg-p: 32%; }
.ct-rg-p-33 { --ct-rg-p: 33%; }
.ct-rg-p-34 { --ct-rg-p: 34%; }
.ct-rg-p-35 { --ct-rg-p: 35%; }
.ct-rg-p-36 { --ct-rg-p: 36%; }
.ct-rg-p-37 { --ct-rg-p: 37%; }
.ct-rg-p-38 { --ct-rg-p: 38%; }
.ct-rg-p-39 { --ct-rg-p: 39%; }
.ct-rg-p-40 { --ct-rg-p: 40%; }
.ct-rg-p-41 { --ct-rg-p: 41%; }
.ct-rg-p-42 { --ct-rg-p: 42%; }
.ct-rg-p-43 { --ct-rg-p: 43%; }
.ct-rg-p-44 { --ct-rg-p: 44%; }
.ct-rg-p-45 { --ct-rg-p: 45%; }
.ct-rg-p-46 { --ct-rg-p: 46%; }
.ct-rg-p-47 { --ct-rg-p: 47%; }
.ct-rg-p-48 { --ct-rg-p: 48%; }
.ct-rg-p-49 { --ct-rg-p: 49%; }
.ct-rg-p-50 { --ct-rg-p: 50%; }
.ct-rg-p-51 { --ct-rg-p: 51%; }
.ct-rg-p-52 { --ct-rg-p: 52%; }
.ct-rg-p-53 { --ct-rg-p: 53%; }
.ct-rg-p-54 { --ct-rg-p: 54%; }
.ct-rg-p-55 { --ct-rg-p: 55%; }
.ct-rg-p-56 { --ct-rg-p: 56%; }
.ct-rg-p-57 { --ct-rg-p: 57%; }
.ct-rg-p-58 { --ct-rg-p: 58%; }
.ct-rg-p-59 { --ct-rg-p: 59%; }
.ct-rg-p-60 { --ct-rg-p: 60%; }
.ct-rg-p-61 { --ct-rg-p: 61%; }
.ct-rg-p-62 { --ct-rg-p: 62%; }
.ct-rg-p-63 { --ct-rg-p: 63%; }
.ct-rg-p-64 { --ct-rg-p: 64%; }
.ct-rg-p-65 { --ct-rg-p: 65%; }
.ct-rg-p-66 { --ct-rg-p: 66%; }
.ct-rg-p-67 { --ct-rg-p: 67%; }
.ct-rg-p-68 { --ct-rg-p: 68%; }
.ct-rg-p-69 { --ct-rg-p: 69%; }
.ct-rg-p-70 { --ct-rg-p: 70%; }
.ct-rg-p-71 { --ct-rg-p: 71%; }
.ct-rg-p-72 { --ct-rg-p: 72%; }
.ct-rg-p-73 { --ct-rg-p: 73%; }
.ct-rg-p-74 { --ct-rg-p: 74%; }
.ct-rg-p-75 { --ct-rg-p: 75%; }
.ct-rg-p-76 { --ct-rg-p: 76%; }
.ct-rg-p-77 { --ct-rg-p: 77%; }
.ct-rg-p-78 { --ct-rg-p: 78%; }
.ct-rg-p-79 { --ct-rg-p: 79%; }
.ct-rg-p-80 { --ct-rg-p: 80%; }
.ct-rg-p-81 { --ct-rg-p: 81%; }
.ct-rg-p-82 { --ct-rg-p: 82%; }
.ct-rg-p-83 { --ct-rg-p: 83%; }
.ct-rg-p-84 { --ct-rg-p: 84%; }
.ct-rg-p-85 { --ct-rg-p: 85%; }
.ct-rg-p-86 { --ct-rg-p: 86%; }
.ct-rg-p-87 { --ct-rg-p: 87%; }
.ct-rg-p-88 { --ct-rg-p: 88%; }
.ct-rg-p-89 { --ct-rg-p: 89%; }
.ct-rg-p-90 { --ct-rg-p: 90%; }
.ct-rg-p-91 { --ct-rg-p: 91%; }
.ct-rg-p-92 { --ct-rg-p: 92%; }
.ct-rg-p-93 { --ct-rg-p: 93%; }
.ct-rg-p-94 { --ct-rg-p: 94%; }
.ct-rg-p-95 { --ct-rg-p: 95%; }
.ct-rg-p-96 { --ct-rg-p: 96%; }
.ct-rg-p-97 { --ct-rg-p: 97%; }
.ct-rg-p-98 { --ct-rg-p: 98%; }
.ct-rg-p-99 { --ct-rg-p: 99%; }
.ct-rg-p-100 { --ct-rg-p: 100%; }
.ct-rg-q-0 { --ct-rg-q: 0%; }
.ct-rg-q-1 { --ct-rg-q: 1%; }
.ct-rg-q-2 { --ct-rg-q: 2%; }
.ct-rg-q-3 { --ct-rg-q: 3%; }
.ct-rg-q-4 { --ct-rg-q: 4%; }
.ct-rg-q-5 { --ct-rg-q: 5%; }
.ct-rg-q-6 { --ct-rg-q: 6%; }
.ct-rg-q-7 { --ct-rg-q: 7%; }
.ct-rg-q-8 { --ct-rg-q: 8%; }
.ct-rg-q-9 { --ct-rg-q: 9%; }
.ct-rg-q-10 { --ct-rg-q: 10%; }
.ct-rg-q-11 { --ct-rg-q: 11%; }
.ct-rg-q-12 { --ct-rg-q: 12%; }
.ct-rg-q-13 { --ct-rg-q: 13%; }
.ct-rg-q-14 { --ct-rg-q: 14%; }
.ct-rg-q-15 { --ct-rg-q: 15%; }
.ct-rg-q-16 { --ct-rg-q: 16%; }
.ct-rg-q-17 { --ct-rg-q: 17%; }
.ct-rg-q-18 { --ct-rg-q: 18%; }
.ct-rg-q-19 { --ct-rg-q: 19%; }
.ct-rg-q-20 { --ct-rg-q: 20%; }
.ct-rg-q-21 { --ct-rg-q: 21%; }
.ct-rg-q-22 { --ct-rg-q: 22%; }
.ct-rg-q-23 { --ct-rg-q: 23%; }
.ct-rg-q-24 { --ct-rg-q: 24%; }
.ct-rg-q-25 { --ct-rg-q: 25%; }
.ct-rg-q-26 { --ct-rg-q: 26%; }
.ct-rg-q-27 { --ct-rg-q: 27%; }
.ct-rg-q-28 { --ct-rg-q: 28%; }
.ct-rg-q-29 { --ct-rg-q: 29%; }
.ct-rg-q-30 { --ct-rg-q: 30%; }
.ct-rg-q-31 { --ct-rg-q: 31%; }
.ct-rg-q-32 { --ct-rg-q: 32%; }
.ct-rg-q-33 { --ct-rg-q: 33%; }
.ct-rg-q-34 { --ct-rg-q: 34%; }
.ct-rg-q-35 { --ct-rg-q: 35%; }
.ct-rg-q-36 { --ct-rg-q: 36%; }
.ct-rg-q-37 { --ct-rg-q: 37%; }
.ct-rg-q-38 { --ct-rg-q: 38%; }
.ct-rg-q-39 { --ct-rg-q: 39%; }
.ct-rg-q-40 { --ct-rg-q: 40%; }
.ct-rg-q-41 { --ct-rg-q: 41%; }
.ct-rg-q-42 { --ct-rg-q: 42%; }
.ct-rg-q-43 { --ct-rg-q: 43%; }
.ct-rg-q-44 { --ct-rg-q: 44%; }
.ct-rg-q-45 { --ct-rg-q: 45%; }
.ct-rg-q-46 { --ct-rg-q: 46%; }
.ct-rg-q-47 { --ct-rg-q: 47%; }
.ct-rg-q-48 { --ct-rg-q: 48%; }
.ct-rg-q-49 { --ct-rg-q: 49%; }
.ct-rg-q-50 { --ct-rg-q: 50%; }
.ct-rg-q-51 { --ct-rg-q: 51%; }
.ct-rg-q-52 { --ct-rg-q: 52%; }
.ct-rg-q-53 { --ct-rg-q: 53%; }
.ct-rg-q-54 { --ct-rg-q: 54%; }
.ct-rg-q-55 { --ct-rg-q: 55%; }
.ct-rg-q-56 { --ct-rg-q: 56%; }
.ct-rg-q-57 { --ct-rg-q: 57%; }
.ct-rg-q-58 { --ct-rg-q: 58%; }
.ct-rg-q-59 { --ct-rg-q: 59%; }
.ct-rg-q-60 { --ct-rg-q: 60%; }
.ct-rg-q-61 { --ct-rg-q: 61%; }
.ct-rg-q-62 { --ct-rg-q: 62%; }
.ct-rg-q-63 { --ct-rg-q: 63%; }
.ct-rg-q-64 { --ct-rg-q: 64%; }
.ct-rg-q-65 { --ct-rg-q: 65%; }
.ct-rg-q-66 { --ct-rg-q: 66%; }
.ct-rg-q-67 { --ct-rg-q: 67%; }
.ct-rg-q-68 { --ct-rg-q: 68%; }
.ct-rg-q-69 { --ct-rg-q: 69%; }
.ct-rg-q-70 { --ct-rg-q: 70%; }
.ct-rg-q-71 { --ct-rg-q: 71%; }
.ct-rg-q-72 { --ct-rg-q: 72%; }
.ct-rg-q-73 { --ct-rg-q: 73%; }
.ct-rg-q-74 { --ct-rg-q: 74%; }
.ct-rg-q-75 { --ct-rg-q: 75%; }
.ct-rg-q-76 { --ct-rg-q: 76%; }
.ct-rg-q-77 { --ct-rg-q: 77%; }
.ct-rg-q-78 { --ct-rg-q: 78%; }
.ct-rg-q-79 { --ct-rg-q: 79%; }
.ct-rg-q-80 { --ct-rg-q: 80%; }
.ct-rg-q-81 { --ct-rg-q: 81%; }
.ct-rg-q-82 { --ct-rg-q: 82%; }
.ct-rg-q-83 { --ct-rg-q: 83%; }
.ct-rg-q-84 { --ct-rg-q: 84%; }
.ct-rg-q-85 { --ct-rg-q: 85%; }
.ct-rg-q-86 { --ct-rg-q: 86%; }
.ct-rg-q-87 { --ct-rg-q: 87%; }
.ct-rg-q-88 { --ct-rg-q: 88%; }
.ct-rg-q-89 { --ct-rg-q: 89%; }
.ct-rg-q-90 { --ct-rg-q: 90%; }
.ct-rg-q-91 { --ct-rg-q: 91%; }
.ct-rg-q-92 { --ct-rg-q: 92%; }
.ct-rg-q-93 { --ct-rg-q: 93%; }
.ct-rg-q-94 { --ct-rg-q: 94%; }
.ct-rg-q-95 { --ct-rg-q: 95%; }
.ct-rg-q-96 { --ct-rg-q: 96%; }
.ct-rg-q-97 { --ct-rg-q: 97%; }
.ct-rg-q-98 { --ct-rg-q: 98%; }
.ct-rg-q-99 { --ct-rg-q: 99%; }
.ct-rg-q-100 { --ct-rg-q: 100%; }

/* ---------- Número da empresa (US-09.49) ----------
 * Redone with Francisco on 2026-10-07 (D-050, D-052): each number is a card
 * with its state in one word and a light, its two meters and, beside it, its
 * WhatsApp profile on a phone as customers see it. The daily limit, Meta's
 * for the whole company, sits once above the cards. Green when it sends,
 * blue-grey while Meta checks it, amber when it needs her; never red. */

.ct-nm {
  display: grid;
  gap: 1.25rem;
}

.ct-nm-cards {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  list-style: none;
}

.ct-nm-card__in {
  padding: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16.5rem;
  gap: clamp(1.5rem, 4vw, 3rem);
  background: var(--ct-color-white);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-frame);
}

.ct-nm-card__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The state: one word and its light. */
.ct-nm-state {
  margin: 0;
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--ct-radius-pill);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-nm-state--ok {
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
}

.ct-nm-state--wait {
  color: var(--ct-color-waiting);
  background: var(--ct-color-waiting-soft);
}

.ct-nm-state--attention {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
}

.ct-nm-state__light {
  position: relative;
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  background: currentColor;
  border-radius: 50%;
}

/* A number that sends breathes slowly; nothing else on the page moves. */
@media (prefers-reduced-motion: no-preference) {
  .ct-nm-state--ok .ct-nm-state__light::after {
    position: absolute;
    inset: -0.3rem;
    content: "";
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    animation: ct-nm-breathe calc(var(--ct-motion-cycle) * 1.75) var(--ct-ease-standard) infinite;
  }
}

@keyframes ct-nm-breathe {
  0% {
    opacity: 0.32;
    transform: scale(0.45);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.ct-nm-phone {
  margin: 0.85rem 0 0;
  color: var(--ct-color-forest);
  font-size: clamp(1.9rem, 4.2vw, 2.75rem);
  font-weight: var(--ct-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.ct-nm-line {
  max-width: 34rem;
  margin: 0.45rem 0 0;
  color: var(--ct-color-muted);
}

/* Before Meta's number is read, the state's sentence leads the card. */
.ct-nm-lead {
  max-width: 34rem;
  margin: 0.85rem 0 0;
  color: var(--ct-color-forest);
  font-size: var(--ct-font-size-xl);
  font-weight: var(--ct-font-weight-semibold);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.ct-nm-card--attention .ct-nm-line {
  color: var(--ct-color-graphite);
}

.ct-nm-do {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.ct-nm-note {
  margin: 0;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
}

.ct-nm-asked {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--ct-color-forest);
  font-size: var(--ct-font-size-sm);
}

.ct-nm-asked svg {
  margin-top: 0.2rem;
  flex: 0 0 auto;
  color: var(--ct-color-action);
}

/* The meters: tap one to read what it means. */
.ct-nm-meters {
  width: 100%;
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 0.75rem;
}

.ct-nm-meter {
  background: var(--ct-color-canvas-soft);
  border-radius: var(--ct-radius-md);
  box-shadow: var(--ct-ring);
}

.ct-nm-meter > summary,
.ct-nm-why > summary,
.ct-nm-soon > summary {
  cursor: pointer;
  list-style: none;
}

.ct-nm-meter > summary::-webkit-details-marker,
.ct-nm-why > summary::-webkit-details-marker,
.ct-nm-soon > summary::-webkit-details-marker {
  display: none;
}

.ct-nm-meter > summary {
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.35rem;
  border-radius: var(--ct-radius-md);
}

.ct-nm-meter > summary:hover {
  background: var(--ct-color-white);
  box-shadow: var(--ct-lift-hover-small);
}

.ct-nm-meter > summary:focus-visible,
.ct-nm-why > summary:focus-visible,
.ct-nm-soon > summary:focus-visible {
  outline: none;
  box-shadow: var(--ct-focus-ring);
}

.ct-nm-meter__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-medium);
}

.ct-nm-meter__label svg {
  color: var(--ct-color-faint);
}

.ct-nm-meter__value {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ct-color-forest);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-nm-meter__why {
  margin: 0;
  padding: 0 1rem 0.9rem;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
  line-height: 1.5;
}

.ct-nm-muted {
  color: var(--ct-color-muted);
  font-weight: var(--ct-font-weight-medium);
}

/* Quality as signal bars: three when customers receive the messages well. */
.ct-nm-bars {
  height: 1rem;
  display: inline-flex;
  align-items: flex-end;
  gap: 0.18rem;
}

.ct-nm-bars__bar {
  width: 0.3rem;
  background: var(--ct-color-border);
  border-radius: 0.15rem;
}

.ct-nm-bars__bar:nth-child(1) {
  height: 40%;
}

.ct-nm-bars__bar:nth-child(2) {
  height: 70%;
}

.ct-nm-bars__bar:nth-child(3) {
  height: 100%;
}

.ct-nm-bars--ok .ct-nm-bars__bar--on {
  background: var(--ct-color-series);
}

.ct-nm-bars--attention .ct-nm-bars__bar--on {
  background: var(--ct-color-late);
}

.ct-nm-name {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-weight: var(--ct-font-weight-semibold);
}

.ct-nm-name svg {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

.ct-nm-name--ok svg {
  color: var(--ct-color-action);
}

.ct-nm-name--wait {
  color: var(--ct-color-waiting);
}

/* "Trocar número": the experience to come, marked "Em breve". */
.ct-nm-soon {
  margin-top: 1.25rem;
}

.ct-nm-soon > summary {
  width: fit-content;
  padding: 0.35rem 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ct-color-forest);
  border-radius: var(--ct-radius-sm);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-nm-soon > summary svg {
  color: var(--ct-color-muted);
}

.ct-nm-tag {
  padding: 0.05rem 0.5rem;
  color: var(--ct-color-waiting);
  background: var(--ct-color-waiting-soft);
  border-radius: var(--ct-radius-pill);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-nm-soon__body {
  max-width: 34rem;
  margin-top: 0.5rem;
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.6rem;
  background: var(--ct-color-canvas-soft);
  border-radius: var(--ct-radius-md);
  box-shadow: var(--ct-ring);
  font-size: var(--ct-font-size-sm);
}

.ct-nm-soon__body p {
  margin: 0;
}

/* The profile on a phone, as a customer sees it. */
.ct-nm-card__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.ct-nm-wa {
  width: 100%;
  max-width: 16.5rem;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.ct-nm-wa__device {
  padding: 0.45rem;
  background: var(--ct-device);
  border-radius: 2.1rem;
  box-shadow:
    inset 0 0 0 1px var(--ct-device-ring),
    inset 0 0 0 3px var(--ct-device-edge),
    var(--ct-shadow-card);
}

.ct-nm-wa__screen {
  padding: 0.7rem 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: var(--ct-chat-head);
  border-radius: 1.7rem;
  text-align: center;
}

.ct-nm-wa__top {
  align-self: stretch;
  padding: 0 0.8rem;
  display: flex;
  color: var(--ct-chat-back);
}

.ct-nm-wa__photo {
  width: 5.5rem;
  height: 5.5rem;
  margin-top: 0.15rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ct-color-white);
  background: linear-gradient(160deg, var(--ct-color-forest-light), var(--ct-color-forest));
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: 700;
}

.ct-nm-wa__photo img,
.ct-nm-wa__photo canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ct-nm-wa__name {
  max-width: 90%;
  margin: 0.7rem 0 0;
  color: var(--ct-chat-ink);
  font-size: 1.02rem;
  font-weight: var(--ct-font-weight-semibold);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ct-nm-wa__kind,
.ct-nm-wa__phone {
  margin: 0.15rem 0 0;
  color: var(--ct-chat-meta);
  font-size: 0.76rem;
}

.ct-nm-wa__about {
  align-self: stretch;
  margin: 0.85rem 0.6rem 0;
  padding: 0.7rem 0.8rem;
  background: var(--ct-color-white);
  border-radius: 0.8rem;
  box-shadow: var(--ct-chat-shadow);
  text-align: left;
}

.ct-nm-wa__about p {
  margin: 0;
  color: var(--ct-chat-ink);
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.ct-nm-wa figcaption {
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-xs);
  text-align: center;
}

/* The daily limit, once for the company. */
.ct-nm-limit {
  padding: 1rem 1.25rem;
  display: grid;
  gap: 0.6rem;
  background: var(--ct-color-white);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-frame);
}

.ct-nm-limit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.ct-nm-limit__head h2 {
  margin: 0;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-medium);
}

.ct-nm-limit__figure {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: var(--ct-font-size-xl);
  font-weight: var(--ct-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.ct-nm-limit__figure span {
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-medium);
  letter-spacing: 0;
}

.ct-nm-limit__track {
  width: 100%;
  height: 0.4rem;
  display: block;
}

.ct-nm-limit__rest {
  fill: var(--ct-color-border-soft);
}

.ct-nm-limit__fill {
  fill: var(--ct-color-series);
}

.ct-nm-limit--full .ct-nm-limit__fill {
  fill: var(--ct-color-late);
}

.ct-nm-limit__note {
  margin: 0;
  color: var(--ct-color-attention);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-medium);
}

.ct-nm-why > summary {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-action);
  border-radius: var(--ct-radius-sm);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-nm-why p {
  max-width: 40rem;
  margin: 0.4rem 0 0;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
}

/* Since when her collections go out from her own number, said first. */
.ct-nm-from {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--ct-color-forest);
  font-size: var(--ct-font-size-lg);
  font-weight: var(--ct-font-weight-semibold);
  line-height: 1.35;
}

.ct-nm-from svg {
  flex: 0 0 auto;
  margin-top: 0.2rem;
  color: var(--ct-color-action);
}

/* The way from CashTeam's number to hers: three steps, the one she is at lit. */
.ct-nm-steps {
  width: 100%;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
}

.ct-nm-step {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
  line-height: 1.35;
}

.ct-nm-step__mark {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ct-color-border-strong);
  border-radius: 50%;
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ct-nm-step__label {
  padding-top: 0.15rem;
}

.ct-nm-step--done .ct-nm-step__mark {
  color: var(--ct-color-white);
  background: var(--ct-color-action);
  border-color: var(--ct-color-action);
}

.ct-nm-step--current,
.ct-nm-step--attention {
  font-weight: var(--ct-font-weight-semibold);
}

.ct-nm-step--current {
  color: var(--ct-color-forest);
}

.ct-nm-step--current .ct-nm-step__mark {
  color: var(--ct-color-white);
  background: var(--ct-color-waiting);
  border-color: var(--ct-color-waiting);
}

.ct-nm-step--attention {
  color: var(--ct-color-attention-ink);
}

.ct-nm-step--attention .ct-nm-step__mark {
  color: var(--ct-color-attention-ink);
  background: var(--ct-color-attention-soft);
  border-color: var(--ct-color-attention);
}

/* No number of hers yet: the way to it, and the one thing to do. */
.ct-nm-start {
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--ct-color-white);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-frame);
}

.ct-nm-start h2 {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: var(--ct-font-size-xl);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.ct-nm-start > p {
  max-width: 38rem;
  margin: 0.5rem 0 0;
  color: var(--ct-color-muted);
}

/* Which number to use, said before Meta's window opens. */
.ct-nm-start > .ct-nm-before {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--ct-color-attention-ink);
  background: var(--ct-color-attention-soft);
  border-radius: var(--ct-radius-md);
  font-size: var(--ct-font-size-sm);
}

.ct-nm-before svg {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

.ct-nm-start > .ct-nm-asked {
  margin-top: 1rem;
}

.ct-nm-start > .ct-nm-do {
  margin-top: 1.25rem;
}

/* Meta's window: its button sits in the row beside CashTeam's help, and what
   the page says when the window closes early takes the line below them. */
.ct-nm-meta {
  display: contents;
}

.ct-nm-meta > .ct-nm-note,
.ct-nm-status,
.ct-nm-do__after {
  flex-basis: 100%;
  order: 2;
}

.ct-nm-status {
  max-width: 34rem;
  margin: 0;
  color: var(--ct-color-attention-ink);
  font-size: var(--ct-font-size-sm);
}

.ct-nm-status:empty {
  display: none;
}

/* A number Meta has not read yet has no profile beside it. */
.ct-nm-card__in--alone {
  grid-template-columns: minmax(0, 1fr);
}

/* Editing the profile, beside the phone that shows it. */
.ct-nm-edit {
  display: grid;
  grid-template-columns: minmax(0, 34rem) 16.5rem;
  align-items: start;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.ct-nm-edit__form {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: 1.35rem;
  background: var(--ct-color-white);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-frame);
}

.ct-nm-field {
  display: grid;
  gap: 0.45rem;
}

.ct-nm-field[hidden] {
  display: none;
}

.ct-nm-field__label {
  color: var(--ct-color-forest);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-nm-photo {
  justify-items: start;
}

.ct-nm-photo .ct-sr-only:focus-visible + label {
  box-shadow: var(--ct-focus-ring);
}

.ct-nm-input {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.8rem 0.95rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-canvas-soft);
  border: 1px solid var(--ct-color-border-strong);
  border-radius: var(--ct-radius-md);
  font: inherit;
}

textarea.ct-nm-input {
  resize: vertical;
}

.ct-nm-input:focus-visible {
  outline: none;
  border-color: var(--ct-color-action);
  box-shadow: var(--ct-focus-ring);
}

.ct-nm-input[aria-invalid="true"] {
  border-color: var(--ct-color-risk);
}

.ct-nm-hint {
  margin: 0;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-xs);
}

.ct-nm-problem {
  margin: 0;
  padding: 0.7rem 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  border-radius: var(--ct-radius-md);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-medium);
}

.ct-nm-problem svg {
  margin-top: 0.15rem;
  flex: 0 0 auto;
}

.ct-nm-edit__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ct-nm-edit__side {
  position: sticky;
  top: 1.5rem;
  display: flex;
  justify-content: center;
}

@media (max-width: 44rem) {
  .ct-nm-card__in,
  .ct-nm-edit {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On a phone, the three steps read one under another. */
  .ct-nm-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .ct-nm-card__side {
    padding-top: 1.25rem;
    border-top: 1px solid var(--ct-color-border-soft);
  }

  /* On a phone, the phone that shows her changes comes first. */
  .ct-nm-edit__side {
    position: static;
    order: -1;
  }

  .ct-nm-edit__actions .ct-button {
    flex: 1 1 auto;
  }
}

.ct-nm-card--attention .ct-nm-card__in {
  box-shadow:
    0 0 0 1px var(--ct-color-attention-line),
    var(--ct-shadow-frame);
}

/* A quiet button that starts a row lines up with the text above it. */
.ct-nm-do > form:first-child .ct-button--quiet {
  margin-inline-start: -0.75rem;
}

.ct-nm-name__state {
  color: var(--ct-color-waiting);
  font-weight: var(--ct-font-weight-medium);
}

.ct-nm-change {
  max-width: 34rem;
  margin: 1rem 0 0;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: var(--ct-font-size-sm);
}

.ct-nm-change svg {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

.ct-nm-change--wait {
  color: var(--ct-color-waiting);
}

.ct-nm-change--attention {
  color: var(--ct-color-attention);
}

.ct-nm-change b {
  color: var(--ct-color-forest);
}

.ct-nm-change a {
  color: var(--ct-color-action);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-nm-soon__open {
  transition: transform var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-nm-soon[open] .ct-nm-soon__open {
  transform: rotate(180deg);
}

.ct-nm-card__main > .ct-nm-note,
.ct-nm-card__main > .ct-nm-asked {
  max-width: 34rem;
  margin-top: 0.75rem;
}

/* ---------- Empresa (US-09.50) ----------
 * How the company charges whoever pays late, framed with Francisco on
 * 2026-10-07 (D-051): three rows already filled with the common answer, and
 * beside them an example receipt that follows what she answers. */

.ct-em {
  display: grid;
  gap: 1.25rem;
}

.ct-em-who {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
}

.ct-em-who b {
  color: var(--ct-color-forest);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-em-who svg {
  color: var(--ct-color-action);
}

.ct-em-who__from {
  padding: 0.05rem 0.5rem;
  background: var(--ct-color-canvas-soft);
  border-radius: var(--ct-radius-pill);
  box-shadow: var(--ct-ring);
  font-size: var(--ct-font-size-xs);
}

.ct-em-form {
  position: relative;
  max-width: 36rem;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  display: grid;
  gap: 0;
  background: var(--ct-color-white);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-frame);
}

.ct-em-row {
  min-width: 0;
  margin: 0;
  padding: 1.1rem 0;
  display: grid;
  gap: 0.55rem;
  border: 0;
  border-bottom: 1px solid var(--ct-color-border-soft);
}

.ct-em-row:first-of-type {
  padding-top: 0.25rem;
}

.ct-em-row__title {
  margin: 0;
  padding: 0;
  float: left;
  width: 100%;
  color: var(--ct-color-forest);
  font-size: var(--ct-font-size-md);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-em-row__title + * {
  clear: both;
}

.ct-em-row__text {
  margin: 0;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
}

.ct-em-row__value {
  margin: 0;
  color: var(--ct-color-graphite);
}

.ct-em-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ct-em-opt {
  min-height: 2.5rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-canvas-soft);
  border-radius: var(--ct-radius-pill);
  box-shadow: var(--ct-ring);
  cursor: pointer;
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-medium);
}

.ct-em-opt input {
  margin: 0;
  accent-color: var(--ct-color-action);
}

.ct-em-opt:has(input:checked) {
  color: var(--ct-color-forest);
  background: var(--ct-color-success-soft);
  box-shadow: var(--ct-shadow-chosen-small);
}

.ct-em-opt:has(input:focus-visible) {
  box-shadow: var(--ct-focus-ring);
}

.ct-em-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ct-em-input {
  width: 4.75rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.7rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-border-strong);
  border-radius: var(--ct-radius-md);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ct-em-input:focus-visible {
  outline: none;
  border-color: var(--ct-color-action);
  box-shadow: var(--ct-focus-ring);
}

.ct-em-input[aria-invalid="true"] {
  border-color: var(--ct-color-attention);
}

.ct-em-unit {
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
}

.ct-em-common {
  margin: 0;
  color: var(--ct-color-action);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-em-problem {
  margin: 0;
  padding: 0.55rem 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  border-radius: var(--ct-radius-md);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-medium);
}

.ct-em-problem svg {
  margin-top: 0.15rem;
  flex: 0 0 auto;
}

.ct-em-start {
  margin: 0 0 0.35rem;
  padding: 0.55rem 0.75rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-success-soft);
  border-radius: var(--ct-radius-md);
  font-size: var(--ct-font-size-sm);
}

.ct-em-later {
  margin: 1rem 0 0;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
}

.ct-em-later + .ct-em-later {
  margin-top: 0.35rem;
}

.ct-em-later a {
  color: var(--ct-color-action);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-em-actions {
  margin-top: 1.1rem;
  display: flex;
  justify-content: flex-end;
}

/* The example receipt, the visual piece: under the answers, before she
 * saves, where the page is narrow; beside them, following her down the page,
 * where it is wide. */
.ct-em-side {
  margin-top: 1.25rem;
}

.ct-em-receipt {
  padding: 1rem 1.1rem 0.95rem;
  display: grid;
  gap: 0.6rem;
  background: var(--ct-color-canvas-soft);
  border-radius: var(--ct-radius-md);
  box-shadow: var(--ct-ring);
}

@container page (min-width: 58.5rem) {
  .ct-em-side {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + 2.5rem);
    width: 20rem;
    margin: 0;
  }

  .ct-em-receipt {
    position: sticky;
    top: 1.5rem;
    padding: 1.25rem 1.25rem 1.1rem;
    background: var(--ct-color-white);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-frame);
  }
}

.ct-em-receipt__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ct-color-action);
}

.ct-em-receipt__head h2 {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: var(--ct-font-size-md);
}

.ct-em-receipt__for {
  margin: 0;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
}

.ct-em-lines {
  margin: 0.35rem 0 0;
  display: grid;
  gap: 0.45rem;
}

.ct-em-lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.ct-em-lines > div[hidden] {
  display: none;
}

.ct-em-lines dt {
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
}

.ct-em-lines dd {
  margin: 0;
  color: var(--ct-color-graphite);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ct-em-lines__total {
  margin-top: 0.3rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--ct-color-line-strong);
}

.ct-em-lines__total dt {
  color: var(--ct-color-forest);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-em-lines__total dd {
  color: var(--ct-color-forest);
  font-size: var(--ct-font-size-xl);
  font-weight: var(--ct-font-weight-semibold);
  letter-spacing: -0.02em;
}

.ct-em-lines__off dd {
  color: var(--ct-color-muted);
}

/* What a line showed with the terms the company has, under what it shows. */
.ct-em-was {
  display: block;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-medium);
  letter-spacing: 0;
  text-align: right;
}

.ct-em-was[hidden] {
  display: none;
}

.ct-em-lines__cash dt,
.ct-em-lines__cash dd {
  color: var(--ct-color-action);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-em-receipt__note {
  margin: 0.2rem 0 0;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-xs);
}

@media (max-width: 44rem) {
  .ct-em-actions .ct-button {
    flex: 1 1 auto;
  }
}

/* "Não cobramos" chosen: no number, and no common value beside it. */
.ct-em-choice:has(input[value="nao"]:checked) .ct-em-amount,
.ct-em-row:has(input[value="nao"]:checked) .ct-em-common {
  display: none;
}

/* ---------- Conversa (US-09.2 with US-09.22) ----------
   An app inside the frame, as WhatsApp is: the list and the conversation
   scroll on their own and what she writes stays at the bottom. CashTeam's
   messages carry the agent's violet, hers the brand green, the régua's are
   quiet; a long wait turns amber, never red. */
.ct-console:has(.ct-cv) .ct-frame {
  height: calc(100dvh - 1rem);
  min-height: 0;
}

.ct-main:has(> .ct-cv) {
  max-width: none;
  min-height: 0;
  padding: clamp(0.75rem, 1.6vw, 1.25rem);
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
}

.ct-cv {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-ring);
}

/* The list */
.ct-cv-list {
  min-height: 0;
  padding-bottom: 0.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--ct-color-border-soft);
}

.ct-cv-list__head {
  padding: 1.1rem 1.15rem 0.35rem;
}

.ct-cv-list__title {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ct-cv-list__lede {
  margin: 0.15rem 0 0;
  color: var(--ct-color-muted);
  font-size: 0.88rem;
}

/* The search and the filters: the list's own, kept in every link. */
.ct-cv-search {
  margin: 0.55rem 1.15rem 0;
  position: relative;
  display: flex;
  gap: 0.4rem;
}

.ct-cv-search__icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  color: var(--ct-color-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.ct-cv-search__input {
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.75rem 0 2.3rem;
  flex: 1 1 auto;
  color: var(--ct-color-graphite);
  background: var(--ct-color-canvas-soft);
  border: 1px solid var(--ct-color-border);
  border-radius: 0.8rem;
  font: inherit;
  font-size: 0.92rem;
  appearance: none;
}

.ct-cv-search__input:focus-visible {
  background: var(--ct-color-white);
  outline: 2px solid var(--ct-color-action);
  outline-offset: 1px;
}

.ct-cv-search__go {
  height: 2.5rem;
  padding: 0 0.9rem;
  flex: none;
  color: var(--ct-color-white);
  background: var(--ct-color-action);
  border: 0;
  border-radius: 0.8rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.ct-cv-search__go:hover {
  background: var(--ct-color-action-hover);
}

.ct-cv-search__go:focus-visible {
  outline: 2px solid var(--ct-color-forest);
  outline-offset: 2px;
}

.ct-cv-filters {
  margin: 0.6rem 1.15rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
}

.ct-cv-filter {
  min-height: 2rem;
  padding: 0.2rem 0.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border-radius: var(--ct-radius-pill);
  box-shadow: inset 0 0 0 1px var(--ct-color-border);
  font-size: 0.82rem;
  font-weight: 550;
  text-decoration: none;
}

.ct-cv-filter:hover {
  background: var(--ct-color-canvas-soft);
}

.ct-cv-filter[aria-current="true"] {
  color: var(--ct-color-white);
  background: var(--ct-color-forest);
  box-shadow: none;
}

.ct-cv-filter:focus-visible {
  outline: 2px solid var(--ct-color-action);
  outline-offset: 2px;
}

.ct-cv-none {
  margin: 1.2rem 1.15rem 0.4rem;
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  color: var(--ct-color-muted);
  font-size: 0.9rem;
}

.ct-cv-none p {
  margin: 0;
}

.ct-cv-none b {
  color: var(--ct-color-graphite);
}

.ct-cv-none a {
  color: var(--ct-color-action);
  font-weight: 600;
}

/* A number that stopped receiving: a calm word, with the decision elsewhere. */
.ct-cv-stopped-tag {
  padding: 0.12rem 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  border-radius: var(--ct-radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.ct-cv-list__group {
  margin: 0.95rem 1.15rem 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ct-color-muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.ct-cv-count,
.ct-count {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.38rem;
  display: inline-grid;
  place-items: center;
  color: var(--ct-color-white);
  background: var(--ct-color-action);
  border-radius: var(--ct-radius-pill);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
}

/* More of the list, a page at a time */
.ct-cv-list__more {
  margin: 0.4rem 1rem 1rem;
  padding: 0.55rem;
  display: block;
  color: var(--ct-color-forest);
  border-radius: var(--ct-radius-pill);
  box-shadow: var(--ct-ring);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.ct-cv-list__more:hover {
  background: color-mix(in srgb, var(--ct-color-forest) 5%, transparent);
}

.ct-cv-items {
  margin: 0;
  padding: 0 0.45rem;
  display: grid;
  gap: 0.1rem;
  list-style: none;
}

.ct-cv-item {
  padding: 0.7rem 0.7rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  color: inherit;
  border-radius: 0.8rem;
  text-decoration: none;
  transition: background-color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-cv-item:hover {
  background: var(--ct-color-canvas-soft);
}

.ct-cv-item[aria-current="page"] {
  background: var(--ct-color-selection);
}

.ct-cv-avatar {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ct-color-forest);
  background: var(--ct-color-icon-tile);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
}

.ct-cv-avatar--lg {
  width: 2.6rem;
  height: 2.6rem;
}

.ct-cv-item__body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.18rem;
}

.ct-cv-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.ct-cv-item__top b {
  min-width: 0;
  overflow: hidden;
  color: var(--ct-color-graphite);
  font-size: 0.93rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-cv-item__top time {
  flex: none;
  color: var(--ct-color-muted);
  font-size: 0.74rem;
}

.ct-cv-item__line {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ct-color-muted);
  font-size: 0.84rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ct-cv-item__line--why {
  color: var(--ct-color-graphite);
}

.ct-cv-item__tags {
  margin-top: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.ct-cv-wait,
.ct-cv-holder {
  padding: 0.12rem 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--ct-color-waiting);
  background: var(--ct-color-waiting-soft);
  border-radius: var(--ct-radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.ct-cv-wait--long {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
}

.ct-cv-holder {
  color: var(--ct-color-forest);
  background: var(--ct-color-selection);
}

.ct-cv-done {
  margin: 0.6rem 1.15rem 0.2rem;
  padding: 0.85rem 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ct-color-muted);
  background: var(--ct-color-success-soft);
  border-radius: 0.9rem;
  font-size: 0.86rem;
}

.ct-cv-done p {
  margin: 0;
}

.ct-cv-done b {
  color: var(--ct-color-forest);
}

.ct-cv-done__mark {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ct-color-action);
  background: var(--ct-color-white);
  border-radius: 50%;
}

/* The conversation */
.ct-cv-pane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--ct-color-canvas);
}

.ct-cv-pane--empty {
  display: grid;
  grid-template-rows: none;
  place-content: center;
  justify-items: center;
  gap: 0.8rem;
  padding: 2rem;
  color: var(--ct-color-muted);
  text-align: center;
}

.ct-cv-pane--empty p {
  max-width: 22rem;
  margin: 0;
}

.ct-cv-pane--empty b {
  color: var(--ct-color-forest);
}

.ct-cv-pane__mark {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-action);
  background: var(--ct-color-white);
  border-radius: 50%;
  box-shadow: var(--ct-ring);
}

.ct-cv-head {
  min-width: 0;
  padding: 0.75rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--ct-color-white);
  border-bottom: 1px solid var(--ct-color-border-soft);
}

.ct-cv-back {
  width: 2.5rem;
  height: 2.5rem;
  margin-left: -0.4rem;
  display: none;
  flex: none;
  place-items: center;
  color: var(--ct-color-forest);
  border-radius: 50%;
}

.ct-cv-back:hover {
  background: var(--ct-color-canvas);
}

.ct-cv-head__who {
  min-width: 0;
  flex: 1 1 auto;
}

.ct-cv-head__who h1 {
  margin: 0;
  overflow: hidden;
  color: var(--ct-color-graphite);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-cv-head__who p {
  margin: 0.1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  color: var(--ct-color-muted);
  font-size: 0.8rem;
}

.ct-cv-head__done {
  flex: none;
}

.ct-cv-head__done .ct-button {
  min-height: 2.5rem;
  padding: 0.55rem 0.95rem;
  font-size: 0.88rem;
}

/* The customer's situation */
.ct-cv-card {
  padding: 0.65rem 1.1rem 0.75rem;
  background: var(--ct-color-white);
  border-bottom: 1px solid var(--ct-color-border-soft);
}

.ct-cv-card__owes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  cursor: pointer;
  list-style: none;
}

.ct-cv-card__owes::-webkit-details-marker {
  display: none;
}

.ct-cv-card__owes span {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.ct-cv-card__owes b {
  color: var(--ct-color-forest);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* What makes up the amount explains it; it does not alarm. */
.ct-cv-card__owes small {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
  font-weight: 550;
}

.ct-cv-card__owes::after {
  width: 0.45rem;
  height: 0.45rem;
  margin-left: auto;
  align-self: center;
  border-right: 2px solid var(--ct-color-faint);
  border-bottom: 2px solid var(--ct-color-faint);
  content: "";
  transform: rotate(45deg) translateY(-0.15rem);
  transition: transform var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-cv-card[open] > .ct-cv-card__owes::after {
  transform: rotate(-135deg) translateY(-0.1rem);
}

.ct-cv-card__more {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1.1rem;
}

.ct-cv-card__pills {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
}

.ct-cv-pill {
  padding: 0.18rem 0.6rem;
  color: var(--ct-color-muted);
  background: var(--ct-color-canvas);
  border-radius: var(--ct-radius-pill);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
}

.ct-cv-pill--overdue {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
}

.ct-cv-pill--paid {
  color: var(--ct-color-forest);
  background: var(--ct-color-success-soft);
}

.ct-cv-card__facts {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.ct-cv-fact {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-muted);
  font-size: 0.8rem;
}

.ct-cv-fact--ok svg {
  color: var(--ct-color-action);
}

.ct-cv-fact--call {
  color: var(--ct-color-forest);
  font-weight: 600;
  text-decoration: none;
}

.ct-cv-fact--call:hover {
  text-decoration: underline;
}

.ct-cv-fact--call svg {
  color: var(--ct-color-action);
}

.ct-cv-fact--wait svg {
  color: var(--ct-color-waiting);
}

/* The messages */
.ct-cv-thread {
  min-height: 0;
  margin: 0;
  padding: 1rem clamp(0.75rem, 3vw, 2rem) 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.ct-cv-day,
.ct-cv-event {
  margin: 0.5rem 0 0.25rem;
  align-self: center;
}

/* The older messages of a long conversation, and back to the newest */
.ct-cv-older {
  margin: 0.25rem 0 0.5rem;
  align-self: center;
}

.ct-cv-older a {
  padding: 0.3rem 0.85rem;
  display: inline-flex;
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border-radius: var(--ct-radius-pill);
  box-shadow: var(--ct-ring);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.ct-cv-older a:hover {
  text-decoration: underline;
}

.ct-cv-day span,
.ct-cv-event span {
  padding: 0.22rem 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-muted);
  background: color-mix(in srgb, var(--ct-color-white) 82%, transparent);
  border-radius: var(--ct-radius-pill);
  box-shadow: var(--ct-ring);
  font-size: 0.74rem;
  font-weight: 550;
  text-align: center;
}

.ct-cv-event span {
  background: transparent;
  box-shadow: none;
}

.ct-cv-event svg {
  flex: none;
  color: var(--ct-color-action);
}

.ct-cv-msg {
  display: flex;
  justify-content: flex-end;
}

.ct-cv-msg--customer {
  justify-content: flex-start;
}

.ct-cv-bubble {
  max-width: min(34rem, 80%);
  padding: 0.45rem 0.75rem 0.35rem;
  background: var(--ct-color-white);
  border-radius: 1rem 0.35rem 1rem 1rem;
  box-shadow: var(--ct-ring);
}

.ct-cv-msg--customer .ct-cv-bubble {
  border-radius: 0.35rem 1rem 1rem 1rem;
}

.ct-cv-msg--person .ct-cv-bubble {
  background: var(--ct-color-selection);
}

.ct-cv-msg--agent .ct-cv-bubble {
  background: var(--ct-color-agent-soft);
}

.ct-cv-msg--regua .ct-cv-bubble {
  background: var(--ct-color-canvas-soft);
}

.ct-cv-bubble__who {
  margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--ct-color-muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.ct-cv-msg--person .ct-cv-bubble__who {
  color: var(--ct-color-action);
}

.ct-cv-msg--agent .ct-cv-bubble__who {
  color: var(--ct-color-agent);
}

.ct-cv-bubble p {
  margin: 0;
  color: var(--ct-color-graphite);
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.ct-cv-bubble__meta {
  margin-top: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  color: var(--ct-color-muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.ct-cv-delivery {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.ct-cv-delivery--read {
  color: var(--ct-color-waiting);
}

.ct-cv-delivery--failed {
  color: var(--ct-color-attention);
  font-weight: 600;
}

/* What a message carries */
.ct-cv-photo {
  width: min(15rem, 62vw);
  margin: 0.15rem 0 0.35rem;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--ct-color-icon-tile);
  border-radius: 0.7rem;
}

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

.ct-cv-file {
  min-width: min(14rem, 62vw);
  margin: 0.15rem 0 0.35rem;
  padding: 0.55rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ct-color-forest);
  background: color-mix(in srgb, var(--ct-color-forest) 5%, transparent);
  border-radius: 0.65rem;
  text-decoration: none;
}

.ct-cv-file:hover {
  background: color-mix(in srgb, var(--ct-color-forest) 9%, transparent);
}

/* A video says it came; it does not open here */
.ct-cv-file--video,
.ct-cv-file--video:hover {
  background: color-mix(in srgb, var(--ct-color-forest) 5%, transparent);
}

.ct-cv-file span {
  min-width: 0;
  display: grid;
}

.ct-cv-file b {
  overflow: hidden;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-cv-file small {
  color: var(--ct-color-muted);
  font-size: 0.74rem;
}

/* What CashTeam heard beside a customer's audio; amber when unsure or in another language */
.ct-cv-heard {
  margin: 0.15rem 0 0.35rem;
  color: var(--ct-color-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.ct-cv-heard--unsure {
  color: var(--ct-color-attention);
}

.ct-cv-audio {
  min-width: min(14rem, 62vw);
  padding: 0.25rem 0 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.ct-cv-audio audio {
  max-width: 15rem;
  height: 2.4rem;
}

.ct-cv-audio__play {
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ct-color-white);
  background: var(--ct-color-action);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.ct-cv-audio__play:hover {
  background: var(--ct-color-forest);
}

.ct-cv-audio__icon-pause,
.ct-cv-audio--playing .ct-cv-audio__icon-play {
  display: none;
}

.ct-cv-audio--playing .ct-cv-audio__icon-pause {
  display: block;
}

.ct-cv-audio__track {
  height: 0.25rem;
  flex: 1 1 auto;
  display: block;
  overflow: hidden;
  background: color-mix(in srgb, var(--ct-color-forest) 12%, transparent);
  border-radius: var(--ct-radius-pill);
}

.ct-cv-audio__fill {
  height: 100%;
  display: block;
  background: var(--ct-color-action);
  transform: scaleX(var(--ct-cv-played, 0));
  transform-origin: left center;
}

.ct-cv-audio__time {
  flex: none;
  color: var(--ct-color-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* The shortcuts under what the customer said */
.ct-cv-asks {
  padding: 0.15rem 0 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ct-cv-asks form {
  display: contents;
}

.ct-cv-ask {
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ct-color-action);
  background: var(--ct-color-white);
  border: 1px solid color-mix(in srgb, var(--ct-color-action) 38%, transparent);
  border-radius: var(--ct-radius-pill);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  transition: background-color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-cv-ask:hover {
  background: var(--ct-color-selection);
}

.ct-cv-ask small {
  color: var(--ct-color-muted);
  font-size: 0.78rem;
  font-weight: 550;
}

.ct-cv-ask--quiet {
  color: var(--ct-color-muted);
  border-color: var(--ct-color-border);
}

/* What she can do under the conversation */
.ct-cv-take,
.ct-cv-closed {
  padding: 0.85rem 1.1rem;
  background: var(--ct-color-white);
  border-top: 1px solid var(--ct-color-border-soft);
}

.ct-cv-take {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ct-cv-take__words {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.ct-cv-take p,
.ct-cv-closed > p {
  margin: 0;
  color: var(--ct-color-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.ct-cv-take b {
  color: var(--ct-color-forest);
}

.ct-cv-take__mark {
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ct-color-agent);
  background: var(--ct-color-agent-soft);
  border-radius: 50%;
}

.ct-cv-take form {
  flex: none;
}

/* A payment or a promise in one tap, under "Assumir a conversa" */
.ct-cv-take:has(.ct-cv-take__records) {
  flex-wrap: wrap;
}

.ct-cv-take__records {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ct-cv-ready {
  margin-top: 0.65rem;
  display: grid;
  justify-items: start;
  gap: 0.6rem;
}

.ct-cv-ready blockquote {
  margin: 0;
  padding: 0.65rem 0.9rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-canvas);
  border-left: 3px solid var(--ct-color-mint);
  border-radius: 0.6rem;
  font-size: 0.9rem;
}

/* Where she writes */
.ct-cv-composer {
  padding: 0.6rem clamp(0.6rem, 2vw, 1rem) 0.7rem;
  background: var(--ct-color-canvas);
  border-top: 1px solid var(--ct-color-border-soft);
}

.ct-cv-compose,
.ct-cv-recording {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
}

.ct-cv-recording {
  align-items: center;
}

.ct-cv-more {
  position: relative;
  flex: none;
}

.ct-cv-more__toggle {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  anchor-name: --ct-cv-more;
}

.ct-cv-more__toggle:hover,
.ct-cv-more:has(.ct-cv-more__menu:popover-open) .ct-cv-more__toggle {
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
}

.ct-cv-more__toggle svg {
  transition: transform var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-cv-more:has(.ct-cv-more__menu:popover-open) .ct-cv-more__toggle svg {
  transform: rotate(45deg);
}

/* Shown only open; a browser without the menu's support keeps it hidden,
   and the shortcuts still offer the same actions. */
.ct-cv-more__menu {
  min-width: 15rem;
  padding: 0.35rem;
  display: none;
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border: 0;
  border-radius: 0.9rem;
  box-shadow: var(--ct-shadow-lg);
}

.ct-cv-more__menu:popover-open {
  display: grid;
}

/* Beside "+", where the browser anchors it; otherwise the page places it. */
@supports (anchor-name: --ct-cv-more) {
  .ct-cv-more__menu {
    position-anchor: --ct-cv-more;
    inset: auto;
    bottom: anchor(top);
    left: anchor(left);
    margin: 0 0 0.5rem;
  }
}

.ct-cv-more__item {
  padding: 0.65rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ct-color-graphite);
  background: none;
  border: 0;
  border-radius: 0.6rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 550;
  text-align: left;
}

.ct-cv-more__item:hover {
  background: var(--ct-color-canvas);
}

.ct-cv-more__item svg {
  color: var(--ct-color-action);
}

.ct-cv-field {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.3rem 0.5rem 0.3rem 1rem;
  display: grid;
  gap: 0.35rem;
  background: var(--ct-color-white);
  border-radius: 1.4rem;
  box-shadow: var(--ct-ring);
}

.ct-cv-field:focus-within {
  box-shadow: var(--ct-ring), var(--ct-focus-ring);
}

.ct-cv-field textarea {
  width: 100%;
  min-height: 2.15rem;
  max-height: 10.5rem;
  padding: 0.45rem 0;
  color: var(--ct-color-graphite);
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  field-sizing: content;
  resize: none;
}

.ct-cv-attached {
  margin: 0.2rem 0 0 -0.6rem;
  padding: 0.3rem 0.35rem 0.3rem 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-canvas);
  border-radius: 0.85rem;
  font-size: 0.8rem;
  font-weight: 550;
}

.ct-cv-attached__thumb {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 0.45rem;
}

.ct-cv-attached__thumb + svg {
  display: none;
}

.ct-cv-attached__name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-cv-attached__drop {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ct-color-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.ct-cv-attached__drop:hover {
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
}

.ct-cv-round {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ct-color-white);
  background: var(--ct-color-action);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--ct-motion-fast) var(--ct-ease-standard);
}

.ct-cv-round:hover {
  background: var(--ct-color-forest);
}

.ct-cv-round--quiet {
  color: var(--ct-color-muted);
  background: transparent;
}

.ct-cv-round--quiet:hover {
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
}

.ct-cv-recording__dot {
  width: 0.65rem;
  height: 0.65rem;
  flex: none;
  background: var(--ct-color-action);
  border-radius: 50%;
}

.ct-cv-recording__words {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--ct-color-forest);
  font-size: 0.92rem;
  font-weight: 600;
}

.ct-cv-recording__words time {
  margin-left: 0.3rem;
  color: var(--ct-color-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 550;
}

@media (prefers-reduced-motion: no-preference) {
  .ct-cv-recording__dot {
    animation: ct-cv-breathe var(--ct-motion-cycle) var(--ct-ease-standard) infinite;
  }
}

@keyframes ct-cv-breathe {
  50% {
    opacity: 0.35;
  }
}

.ct-cv-problem {
  margin: 0.45rem 0.3rem 0;
  color: var(--ct-color-attention);
  font-size: 0.84rem;
  font-weight: 550;
}

/* An audio that did not go, in place of the field: why, and the way on */
.ct-cv-kept {
  padding: 0.7rem 0.8rem;
  display: grid;
  gap: 0.6rem;
  background: var(--ct-color-attention-soft);
  border-radius: 0.9rem;
  box-shadow: var(--ct-ring);
}

.ct-cv-kept__words {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: 0.88rem;
  line-height: 1.45;
}

.ct-cv-kept__words:focus:not(:focus-visible) {
  outline: none;
}

.ct-cv-kept__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* The company's number cannot send now, said where she writes */
.ct-cv-sender,
.ct-cv-stopped {
  padding: 0.7rem clamp(0.6rem, 2vw, 1rem);
  background: var(--ct-color-white);
  border-top: 1px solid var(--ct-color-border-soft);
}

.ct-cv-sender + .ct-cv-take {
  padding-top: 0.25rem;
  border-top: 0;
}

.ct-cv-stopped {
  display: grid;
  gap: 0.65rem;
}

.ct-cv-stopped__records {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* While an audio she kept waits, only what sends it or throws it away */
.ct-cv-pane[data-ct-cv-keeping] :is(.ct-cv-head__done, .ct-cv-asks, .ct-cv-composer__note) {
  display: none;
}

/* Paying and promising, in the side panel */
.ct-cv-panel {
  display: grid;
  gap: 0.5rem;
}

.ct-cv-panel p {
  margin: 0 0 0.4rem;
  color: var(--ct-color-muted);
  font-size: 0.9rem;
}

.ct-cv-panel label {
  margin-top: 0.35rem;
  color: var(--ct-color-graphite);
  font-size: 0.86rem;
  font-weight: 650;
}

.ct-cv-panel input[type="date"],
.ct-cv-money {
  width: 100%;
  min-height: 3rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-canvas-soft);
  border: 1px solid var(--ct-color-border-strong);
  border-radius: var(--ct-radius-md);
  font: inherit;
}

.ct-cv-panel input[type="date"] {
  padding: 0.7rem 0.95rem;
}

.ct-cv-money {
  padding: 0 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ct-cv-money:focus-within,
.ct-cv-panel input[type="date"]:focus {
  border-color: var(--ct-color-action);
  outline: none;
  box-shadow: var(--ct-focus-ring);
}

.ct-cv-money span {
  color: var(--ct-color-muted);
  font-weight: 600;
}

.ct-cv-money input {
  min-width: 0;
  min-height: 2.9rem;
  flex: 1 1 auto;
  color: inherit;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.ct-cv-panel .ct-cv-quote {
  margin: 0.15rem 0 0.2rem;
  color: var(--ct-color-graphite);
  font-size: 0.86rem;
}

.ct-cv-panel label small {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
  font-weight: 550;
}

.ct-cv-panel .ct-button {
  margin-top: 0.75rem;
}

/* A photo, large */
.ct-cv-viewer {
  max-width: 94vw;
  max-height: 94dvh;
  padding: 3.25rem 0 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.ct-cv-viewer::backdrop {
  background: color-mix(in srgb, var(--ct-color-forest) 78%, transparent);
}

.ct-cv-viewer img {
  max-width: 94vw;
  max-height: calc(94dvh - 3.25rem);
  display: block;
  border-radius: 0.8rem;
  box-shadow: var(--ct-shadow-lg);
}

/* Above the photo, never over it. */
.ct-cv-viewer__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: var(--ct-color-forest);
  background: var(--ct-color-white);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--ct-shadow-md);
  cursor: pointer;
}

/* What she just did, said above where she acts: it covers nothing. */
.ct-cv-notice {
  margin: 0 clamp(0.6rem, 2vw, 1rem) 0.5rem;
  padding: 0.55rem 0.5rem 0.55rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-success-soft);
  border-radius: 0.75rem;
  box-shadow: var(--ct-ring);
  font-size: 0.86rem;
  font-weight: 550;
}

.ct-cv-notice svg {
  flex: none;
  color: var(--ct-color-action);
}

.ct-cv-notice span {
  min-width: 0;
  flex: 1 1 auto;
}

.ct-cv-notice--again {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
}

.ct-cv-notice--again svg {
  color: var(--ct-color-attention);
}

.ct-cv-notice__close {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  display: grid;
  place-items: center;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.ct-cv-notice__close:hover {
  background: var(--ct-color-white);
}

.ct-cv-take__how {
  color: var(--ct-color-graphite);
}

.ct-cv-composer__note {
  margin: 0 0.3rem 0.5rem;
  color: var(--ct-color-muted);
  font-size: 0.8rem;
}

/* The count beside Conversas in the menu */
.ct-side__item .ct-count {
  margin-left: auto;
}

html[data-menu="mini"] .ct-side__item {
  position: relative;
}

html[data-menu="mini"] .ct-side__item .ct-count {
  position: absolute;
  top: 0.15rem;
  right: 0.55rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  font-size: 0.62rem;
}

.ct-tabbar__item .ct-count {
  position: absolute;
  top: 0.1rem;
  left: calc(50% + 0.35rem);
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.28rem;
  font-size: 0.64rem;
  box-shadow: 0 0 0 2px var(--ct-color-white);
}

@media (max-width: 44rem) {
  .ct-console:has(.ct-cv) .ct-frame {
    height: auto;
    min-height: 100vh;
  }

  .ct-main:has(> .ct-cv) {
    padding: 1.4rem 1rem 1rem;
    overflow: visible;
  }

  .ct-cv {
    display: block;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .ct-cv-list {
    overflow: visible;
    border-right: 0;
  }

  /* The list grows with its conversations, so the frame's room for the tab
     bar comes after the last one. */
  .ct-main:has(> .ct-cv:not(.ct-cv--open)) {
    min-height: auto;
    flex: none;
  }

  .ct-cv-list__head,
  .ct-cv-list__group,
  .ct-cv-done,
  .ct-cv-search,
  .ct-cv-filters,
  .ct-cv-none {
    margin-inline: 0;
    padding-inline: 0;
  }

  .ct-cv-done {
    padding: 0.85rem 0.95rem;
  }

  .ct-cv-items {
    margin-inline: -0.7rem;
  }

  .ct-cv-pane--empty,
  .ct-cv--open .ct-cv-list {
    display: none;
  }

  /* A conversation fills the phone; the tab bar steps aside, as WhatsApp
     does, and the arrow goes back to the list. */
  .ct-console:has(.ct-cv--open) .ct-tabbar {
    display: none;
  }

  .ct-console:has(.ct-cv--open) .ct-frame {
    height: 100dvh;
    min-height: 0;
    padding-bottom: 0;
  }

  .ct-main:has(> .ct-cv--open) {
    padding: 0.75rem 0 0;
    gap: 0.5rem;
    overflow: hidden;
  }

  .ct-main:has(> .ct-cv--open) > .ct-main__top {
    margin: 0;
    padding-inline: 1rem;
  }

  .ct-cv--open {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .ct-cv--open .ct-cv-pane {
    flex: 1 1 auto;
    min-height: 0;
  }

  .ct-cv-back {
    display: grid;
  }

  .ct-cv-head {
    padding: 0.45rem 0.75rem;
    gap: 0.55rem;
  }

  .ct-cv-avatar--lg {
    width: 2.3rem;
    height: 2.3rem;
  }

  .ct-cv-head__long {
    display: none;
  }

  .ct-cv-card {
    padding: 0.55rem 0.9rem 0.6rem;
  }

  .ct-cv-card__owes b {
    font-size: 1.12rem;
  }

  .ct-cv-take {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }

  .ct-cv-take .ct-button {
    width: 100%;
  }

  /* Stacked under "Assumir a conversa", in the same column. */
  .ct-cv-take:has(.ct-cv-take__records) {
    flex-wrap: nowrap;
  }

  .ct-cv-take__records {
    flex: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ct-cv-kept__actions .ct-button {
    flex: 1 1 auto;
  }

  .ct-cv-take,
  .ct-cv-closed,
  .ct-cv-composer,
  .ct-cv-stopped {
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  }

  .ct-cv-bubble {
    max-width: 86%;
  }

  .ct-cv-more__menu {
    min-width: min(16rem, calc(100vw - 2rem));
  }

  .ct-cv-notice {
    margin-inline: 0.6rem;
  }
}

.ct-cv-thread:focus-visible {
  outline: 2px solid var(--ct-color-action);
  outline-offset: -2px;
}

/* ---------- Clientes (US-09.1) ----------
   The record reads from the top: what is owed and what comes next, what
   needs her, the instalments, the money kept apart, the numbers, the terms,
   and the story ending on the next message. Amber only where she is needed;
   nothing is red. The list, its tabs and the panel it opens are below. */

.ct-cl-uncovered {
  margin: 0.75rem 1.15rem 0;
  font-size: 0.85rem;
}

/* "Ver quem são" never breaks inside, so its mark and the next link follow it whole. */
.ct-cl-uncovered__who {
  white-space: nowrap;
}

.ct-cl-avatar {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ct-color-forest);
  background: var(--ct-color-icon-tile);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
}

.ct-cl-avatar--lg {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.86rem;
}

/* A word for each situation; amber only where she is needed. */
/* A second badge, in "Sem régua", sits beside the first and wraps under it. */
.ct-cl2-row__situation .ct-cl-badge + .ct-cl-badge {
  margin-left: 0.3rem;
}

.ct-cl-badge {
  min-height: 1.4rem;
  padding: 0.05rem 0.55rem;
  display: inline-flex;
  align-items: center;
  flex: none;
  border-radius: var(--ct-radius-pill);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.ct-cl-badge--attention {
  color: var(--ct-color-attention);
  background: var(--ct-color-attention-soft);
  box-shadow: inset 0 0 0 1px var(--ct-color-attention-line);
}

.ct-cl-badge--quiet {
  color: var(--ct-color-muted);
  background: var(--ct-color-canvas);
}

.ct-cl-badge--promise {
  color: var(--ct-color-waiting);
  background: var(--ct-color-waiting-soft);
}

.ct-cl-badge--late {
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  box-shadow: inset 0 0 0 1px var(--ct-color-border);
}

.ct-cl-badge--ok {
  color: var(--ct-color-action);
  background: var(--ct-color-success-soft);
}

.ct-cl-pages {
  margin: 1rem 1.15rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  color: var(--ct-color-muted);
  font-size: 0.84rem;
}

.ct-cl-pages__link {
  color: var(--ct-color-action);
  font-weight: 600;
}

.ct-cl-empty {
  margin: 1.4rem 1.15rem;
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  color: var(--ct-color-muted);
  font-size: 0.92rem;
}

.ct-cl-empty p {
  margin: 0;
}

.ct-cl-empty b {
  color: var(--ct-color-graphite);
}

.ct-cl-head {
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 1px solid var(--ct-color-border-soft);
}

.ct-cl-head__who {
  min-width: 0;
  flex: 1 1 auto;
}

.ct-cl-head__who h1 {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ct-cl-head__facts {
  margin: 0.2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  color: var(--ct-color-muted);
  font-size: 0.82rem;
}

.ct-cl-tag {
  padding: 0.05rem 0.55rem;
  color: var(--ct-color-forest);
  background: var(--ct-color-canvas);
  border-radius: var(--ct-radius-pill);
  font-weight: 600;
}

.ct-cl-doc {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.ct-cl-doc--ok {
  color: var(--ct-color-action);
}

/* What not having confirmed means, on its own short line under the facts (TD-09.1.3). */
.ct-cl-doc__why {
  flex-basis: 100%;
}

/* The record's tab: the panel around it scrolls, so it does not. */
.ct-cl-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 1.25rem;
}

/* Today: the one big number, and the next message beside it. */
/* Nothing in the record's column clips: a clipped block would give up its
   height when the column is short and scrolls. */
.ct-cl-today {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  background: var(--ct-color-canvas-soft);
  border-radius: 1rem;
  box-shadow: var(--ct-ring);
}

/* The customer at a glance: one card, one short line per fact. */
.ct-cl-sum {
  display: grid;
  gap: 0.55rem;
  padding: 1rem 1.15rem 0.95rem;
  background: var(--ct-color-canvas-soft);
  border-radius: 1rem;
  box-shadow: var(--ct-ring);
}

.ct-cl-sum__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.ct-cl-sum__state {
  color: var(--ct-color-forest);
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ct-cl-sum__state--late {
  color: var(--ct-color-late);
}

.ct-cl-sum__total {
  color: var(--ct-color-muted);
  font-size: 0.9rem;
}

.ct-cl-sum__total b {
  color: var(--ct-color-forest);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

/* Late in amber, still to fall due in grey: never red. */
.ct-cl-sum__bar,
.ct-cl-sum__progress {
  display: block;
  width: 100%;
  height: 0.4rem;
  border-radius: 999px;
  overflow: hidden;
}

.ct-share__rest {
  fill: var(--ct-color-border-soft);
}

.ct-cl-sum__bar .ct-share__first {
  fill: var(--ct-color-late);
}

.ct-cl-sum__progress .ct-share__first {
  fill: var(--ct-color-forest);
}

.ct-cl-sum__split {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  color: var(--ct-color-muted);
  font-size: 0.85rem;
}

.ct-cl-sum__split b {
  color: var(--ct-color-graphite);
  font-variant-numeric: tabular-nums;
}

.ct-cl-sum__contested {
  color: var(--ct-color-attention);
  font-weight: 600;
}

.ct-cl-sum p {
  margin: 0;
}

/* An icon, and its facts beside it, one under the other. */
.ct-cl-sum__row {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  column-gap: 0.5rem;
  row-gap: 0.1rem;
  align-items: start;
  color: var(--ct-color-graphite);
  font-size: 0.88rem;
  line-height: 1.4;
}

.ct-cl-sum__row > svg {
  margin-top: 0.15rem;
  color: var(--ct-color-muted);
}

.ct-cl-sum__row > :not(svg) {
  grid-column: 2;
}

.ct-cl-sum__contract {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
}

.ct-cl-sum__label {
  color: var(--ct-color-muted);
  font-weight: 600;
}

.ct-cl-sum__dots {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  max-width: 100%;
}

.ct-cl-sum__dots i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--ct-color-mint);
}

.ct-cl-sum__dots i.ct-cl-sum__dot--paid {
  background: var(--ct-color-forest);
  box-shadow: none;
}

.ct-cl-sum__dots .ct-cl-sum__progress {
  width: 6rem;
}

.ct-cl-sum__link {
  color: var(--ct-color-forest);
  font-weight: 600;
}

.ct-cl-sum .ct-cl-asof {
  color: var(--ct-color-muted);
  font-size: 0.76rem;
}

.ct-cl-owes,
.ct-cl-next {
  padding: 1rem 1.15rem 1.05rem;
  display: grid;
  align-content: start;
  gap: 0.2rem;
}

.ct-cl-next {
  border-left: 1px solid var(--ct-color-border-soft);
}

.ct-cl-today__label {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.ct-cl-owes__value {
  color: var(--ct-color-forest);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.ct-cl-owes__value--none {
  font-size: 1.35rem;
}

.ct-cl-owes small,
.ct-cl-next small {
  color: var(--ct-color-muted);
  font-size: 0.82rem;
}

.ct-cl-owes .ct-cl-owes__contested {
  color: var(--ct-color-attention);
  font-weight: 600;
}

.ct-cl-owes .ct-cl-asof {
  margin-top: 0.35rem;
  font-size: 0.76rem;
}

.ct-cl-next b {
  color: var(--ct-color-graphite);
  font-size: 1.05rem;
}

.ct-cl-next--none b {
  color: var(--ct-color-muted);
}

.ct-cl-next__link {
  margin-top: 0.3rem;
  justify-self: start;
  color: var(--ct-color-action);
  font-size: 0.85rem;
  font-weight: 600;
}

/* What needs her */
.ct-cl-notes {
  display: grid;
  gap: 0.55rem;
}

.ct-cl-note {
  padding: 0.75rem 0.9rem;
  display: flex;
  gap: 0.65rem;
  color: var(--ct-color-graphite);
  border-radius: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ct-cl-note svg {
  margin-top: 0.12rem;
  flex: none;
}

.ct-cl-note p {
  margin: 0;
}

.ct-cl-note a {
  color: var(--ct-color-action);
  font-weight: 600;
}

.ct-cl-note--attention {
  background: var(--ct-color-attention-soft);
  box-shadow: inset 0 0 0 1px var(--ct-color-attention-line);
}

.ct-cl-note--attention svg {
  color: var(--ct-color-attention);
}

.ct-cl-note--quiet {
  background: var(--ct-color-canvas);
}

.ct-cl-note--quiet svg {
  color: var(--ct-color-muted);
}

/* Sections */
.ct-cl-section {
  display: grid;
  gap: 0.55rem;
}

.ct-cl-section__title {
  margin: 0;
  color: var(--ct-color-forest);
  font-size: 0.95rem;
  font-weight: 700;
}

.ct-cl-section__none {
  margin: 0;
  color: var(--ct-color-muted);
  font-size: 0.88rem;
}

.ct-cl-mixed {
  margin: 0;
  display: flex;
  gap: 0.45rem;
  color: var(--ct-color-graphite);
  font-size: 0.86rem;
  line-height: 1.45;
}

.ct-cl-mixed svg {
  margin-top: 0.18rem;
  flex: none;
  color: var(--ct-color-muted);
}

.ct-cl-inst {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0.85rem;
  box-shadow: var(--ct-ring);
  list-style: none;
}

.ct-cl-inst__row {
  padding: 0.65rem 0.9rem;
  display: grid;
  grid-template-columns: 3.4rem minmax(7.5rem, 1fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: 0.4rem 0.9rem;
  font-size: 0.9rem;
}

.ct-cl-inst__row + .ct-cl-inst__row {
  border-top: 1px solid var(--ct-color-border-soft);
}

.ct-cl-inst__row--contested {
  background: var(--ct-color-attention-soft);
}

.ct-cl-inst__due {
  color: var(--ct-color-graphite);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.ct-cl-inst__amount {
  display: grid;
  color: var(--ct-color-graphite);
  font-variant-numeric: tabular-nums;
}

.ct-cl-inst__amount small {
  color: var(--ct-color-muted);
  font-size: 0.76rem;
}

.ct-cl-inst__regua {
  min-width: 0;
  color: var(--ct-color-muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.ct-cl-money {
  margin: 0;
  display: grid;
  gap: 0.4rem;
}

.ct-cl-money div {
  padding: 0.55rem 0.9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  background: var(--ct-color-canvas-soft);
  border-radius: 0.75rem;
  box-shadow: var(--ct-ring);
}

.ct-cl-money dt {
  color: var(--ct-color-muted);
  font-size: 0.86rem;
}

.ct-cl-money dd {
  margin: 0;
  color: var(--ct-color-graphite);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ct-cl-numbers {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  list-style: none;
}

.ct-cl-number {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.ct-cl-number svg {
  margin-top: 0.2rem;
  flex: none;
  color: var(--ct-color-action);
}

.ct-cl-number--stopped svg {
  color: var(--ct-color-attention);
}

.ct-cl-number__body {
  display: grid;
}

.ct-cl-number a {
  color: var(--ct-color-graphite);
  font-weight: 600;
  text-decoration: none;
}

.ct-cl-number a:hover {
  text-decoration: underline;
}

.ct-cl-number small {
  color: var(--ct-color-muted);
  font-size: 0.8rem;
}

.ct-cl-terms {
  margin: 0;
  color: var(--ct-color-graphite);
  font-size: 0.9rem;
}

.ct-cl-terms a {
  color: var(--ct-color-action);
  font-weight: 600;
}

/* The story: a conversation, the company's messages on the right, what was
   done between them as a line; the next message is drawn but not sent. */
.ct-cl-story {
  gap: 0.35rem;
}

.ct-cl-older summary {
  width: fit-content;
  padding: 0.3rem 0.8rem;
  color: var(--ct-color-action);
  border-radius: var(--ct-radius-pill);
  box-shadow: inset 0 0 0 1px var(--ct-color-border);
  font-size: 0.85rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.ct-cl-older summary::-webkit-details-marker {
  display: none;
}

.ct-cl-older summary:focus-visible {
  outline: 2px solid var(--ct-color-action);
  outline-offset: 2px;
}

.ct-cl-day {
  display: grid;
  gap: 0.35rem;
}

.ct-cl-day__label {
  margin: 0.6rem 0 0.15rem;
  padding: 0.15rem 0.7rem;
  justify-self: center;
  color: var(--ct-color-muted);
  background: var(--ct-color-canvas);
  border-radius: var(--ct-radius-pill);
  font-size: 0.76rem;
  font-weight: 600;
}

.ct-cl-steps {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  list-style: none;
}

.ct-cl-msg {
  display: flex;
}

.ct-cl-msg--company {
  justify-content: flex-end;
}

.ct-cl-bubble {
  max-width: min(34rem, 82%);
  padding: 0.5rem 0.75rem 0.4rem;
  display: grid;
  gap: 0.2rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-white);
  border-radius: 0.9rem;
  box-shadow: var(--ct-ring);
  font-size: 0.9rem;
}

.ct-cl-msg--customer .ct-cl-bubble {
  border-bottom-left-radius: 0.3rem;
}

.ct-cl-msg--company .ct-cl-bubble {
  background: var(--ct-color-success-soft);
  border-bottom-right-radius: 0.3rem;
}

.ct-cl-msg--regua .ct-cl-bubble {
  background: var(--ct-color-canvas-soft);
}

.ct-cl-msg--agent .ct-cl-bubble {
  background: var(--ct-color-agent-soft);
}

.ct-cl-bubble__who {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ct-color-muted);
  font-size: 0.75rem;
  font-weight: 650;
}

.ct-cl-msg--agent .ct-cl-bubble__who {
  color: var(--ct-color-agent);
}

.ct-cl-bubble p {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.ct-cl-bubble__meta {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.35rem;
  color: var(--ct-color-muted);
  font-size: 0.72rem;
}

.ct-cl-delivery {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.ct-cl-delivery--read {
  color: var(--ct-color-waiting);
}

.ct-cl-delivery--failed {
  color: var(--ct-color-attention);
}

.ct-cl-msg--next .ct-cl-bubble {
  background: var(--ct-color-white);
  box-shadow: none;
  outline: 1.5px dashed var(--ct-color-border-strong);
  outline-offset: -1.5px;
}

.ct-cl-event {
  padding: 0.3rem 0.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  color: var(--ct-color-graphite);
  font-size: 0.86rem;
}

.ct-cl-event__line {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.ct-cl-event__line svg {
  margin-top: 0.2rem;
  flex: none;
  color: var(--ct-color-muted);
}

.ct-cl-event__dot {
  width: 0.45rem;
  height: 0.45rem;
  margin: 0.45rem 0.2rem 0 0.15rem;
  flex: none;
  background: var(--ct-color-border-strong);
  border-radius: 50%;
}

.ct-cl-event time {
  color: var(--ct-color-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.ct-cl-event--contested .ct-cl-event__line svg,
.ct-cl-event--wrong_person .ct-cl-event__line svg,
.ct-cl-event--opted_out .ct-cl-event__line svg,
.ct-cl-event--refused_number .ct-cl-event__line svg {
  color: var(--ct-color-attention);
}

.ct-cl-event--confirmed .ct-cl-event__line svg {
  color: var(--ct-color-action);
}

.ct-cl-panel {
  display: grid;
  gap: 0.5rem;
}

.ct-cl-panel + .ct-cl-panel {
  margin-top: 0.75rem;
}

.ct-cl-panel p {
  margin: 0 0 0.35rem;
  color: var(--ct-color-muted);
  font-size: 0.9rem;
}

.ct-cl-panel label,
.ct-cl-panel legend {
  margin-top: 0.35rem;
  color: var(--ct-color-graphite);
  font-size: 0.86rem;
  font-weight: 650;
}

.ct-cl-panel label small {
  color: var(--ct-color-muted);
  font-weight: 550;
}

.ct-cl-panel input[type="date"],
.ct-cl-panel input[name="outro"],
.ct-cl-panel textarea,
.ct-cl-panel__field,
.ct-cl-panel__money,
.ct-cl-panel__percent {
  width: 100%;
  min-height: 3rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-canvas-soft);
  border: 1px solid var(--ct-color-border-strong);
  border-radius: var(--ct-radius-md);
  font: inherit;
}

.ct-cl-panel input[type="date"],
.ct-cl-panel input[name="outro"],
.ct-cl-panel textarea,
.ct-cl-panel__field {
  padding: 0.7rem 0.95rem;
}

.ct-cl-panel textarea {
  resize: vertical;
}

/* Editar dados and Corrigir parcelas (Francisco, 2026-10-08). */
.ct-cl-panel .ct-cl-panel__hint {
  margin: 0;
  font-size: var(--ct-font-size-sm);
}

.ct-cl-panel__numbers {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.ct-cl-panel__numbers label {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.ct-cl-panel__note {
  margin: 0.25rem 0;
  padding: 0.7rem 0.85rem;
  color: var(--ct-color-graphite);
  background: var(--ct-color-canvas-soft);
  border-radius: var(--ct-radius-md);
  font-size: var(--ct-font-size-sm);
  line-height: 1.45;
}

.ct-cl-fix {
  display: grid;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ct-color-border-soft, var(--ct-color-border));
}

.ct-cl-fix + .ct-cl-fix {
  margin-top: 1rem;
}

.ct-cl-fix h3 {
  margin: 0;
  font-size: var(--ct-font-size-md);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-cl-fix__cancel > summary {
  width: fit-content;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--ct-color-muted);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.ct-cl-inst__fixed {
  grid-column: 2 / -1;
  color: var(--ct-color-muted);
  font-size: 0.8rem;
}

.ct-cl-panel__money,
.ct-cl-panel__percent {
  padding: 0 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ct-cl-panel__money span,
.ct-cl-panel__percent span {
  color: var(--ct-color-muted);
  font-weight: 600;
}

/* The field's frame takes the focus ring, so the number inside has no second one. */
.ct-cl-panel__money:focus-within,
.ct-cl-panel__percent:focus-within {
  outline: 0.1875rem solid var(--ct-color-agent);
  outline-offset: 0.1875rem;
  box-shadow: var(--ct-focus-ring);
}

.ct-cl-panel__money input:focus-visible,
.ct-cl-panel__percent input:focus-visible {
  box-shadow: none;
}

.ct-cl-panel__money input,
.ct-cl-panel__percent input {
  min-width: 0;
  min-height: 2.9rem;
  flex: 1 1 auto;
  color: inherit;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.ct-cl-panel__money:focus-within,
.ct-cl-panel__percent:focus-within,
.ct-cl-panel input[type="date"]:focus,
.ct-cl-panel input[name="outro"]:focus,
.ct-cl-panel textarea:focus {
  border-color: var(--ct-color-action);
  outline: none;
  box-shadow: var(--ct-focus-ring);
}

.ct-cl-panel__row {
  display: grid;
  gap: 0.3rem;
}

.ct-cl-panel__choices {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  border: 0;
}

.ct-cl-choice {
  padding: 0.65rem 0.8rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  border-radius: var(--ct-radius-md);
  box-shadow: inset 0 0 0 1px var(--ct-color-border);
  cursor: pointer;
}

.ct-cl-panel .ct-cl-choice {
  margin-top: 0;
  font-weight: 500;
}

.ct-cl-choice:has(input:checked) {
  background: var(--ct-color-selection);
  box-shadow: inset 0 0 0 1.5px var(--ct-color-action);
}

.ct-cl-choice input {
  margin-top: 0.2rem;
  accent-color: var(--ct-color-action);
}

.ct-cl-choice span {
  display: grid;
  gap: 0.1rem;
}

.ct-cl-choice small {
  color: var(--ct-color-muted);
  font-size: 0.82rem;
}

.ct-cl-panel .ct-button {
  margin-top: 0.6rem;
}

/* A phone: the list, or the record with the way back to it. */
@media (max-width: 44rem) {
  .ct-cl-note {
    flex-wrap: wrap;
  }

  .ct-cl-uncovered {
    margin-inline: 0;
  }

  .ct-cl-pages,
  .ct-cl-empty {
    margin-inline: 0;
    padding-inline: 0;
  }

  .ct-cl-head {
    padding: 0 0 0.85rem;
    flex-wrap: wrap;
  }

  .ct-cl-head__who {
    flex: 1 1 0;
  }

  .ct-cl-today {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-cl-next {
    border-top: 1px solid var(--ct-color-border-soft);
    border-left: 0;
  }

  .ct-cl-inst__row {
    grid-template-columns: 3.1rem minmax(0, 1fr);
  }

  .ct-cl-inst__row > .ct-cl-badge,
  .ct-cl-inst__regua {
    grid-column: 2;
    justify-self: start;
  }

  .ct-cl-bubble {
    max-width: 88%;
  }
}

/* Clientes, 2026-10-08 (Francisco: "parecia a tela de conversas… tá ruim de
   usar"): a customer list she knows, under two tabs, Clientes and Carteiras.
   The record slides over the list, which stays where she left it; one main
   button, the rest in "Mais ações"; the instalments and the story in two
   tabs. The one motion on the page is the panel arriving. Amber only where
   she is needed; nothing is red. */
.ct-cl2 {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

/* Above the title, only as wide as its words. */
.ct-cl2 > .ct-cl2-way-back {
  justify-self: start;
  margin: 0;
}

.ct-cl2-top {
  display: grid;
  gap: 0.85rem;
}

.ct-cl2-top__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ct-cl2-top__title {
  margin: 0;
  font-size: var(--ct-font-size-xl);
  font-weight: var(--ct-font-weight-semibold);
  letter-spacing: -0.01em;
}

.ct-cl2-add {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.ct-cl2-tabs,
.ct-cl2-subtabs {
  display: flex;
  gap: 1.4rem;
  box-shadow: inset 0 -1px 0 var(--ct-color-border);
}

.ct-cl2-tab,
.ct-cl2-subtab {
  padding: 0.45rem 0.1rem 0.6rem;
  color: var(--ct-color-muted);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.ct-cl2-tab:hover,
.ct-cl2-subtab:hover {
  color: var(--ct-color-graphite);
}

.ct-cl2-tab[aria-current="page"],
.ct-cl2-subtab[aria-current="page"] {
  color: var(--ct-color-forest);
  border-bottom-color: var(--ct-color-action);
}

.ct-cl2-tools {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ct-cl2-search {
  position: relative;
  flex: 1 1 18rem;
}

.ct-cl2-search__icon {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ct-color-muted);
  pointer-events: none;
}

.ct-cl2-search__input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.9rem 0 2.4rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--ct-color-white);
  box-shadow: var(--ct-ring), var(--ct-shadow-xs);
  font: inherit;
}

.ct-cl2-filter {
  display: grid;
  gap: 0.25rem;
  font-size: var(--ct-font-size-sm);
  color: var(--ct-color-muted);
  font-weight: 600;
}

.ct-cl2-filter select {
  min-height: 2.75rem;
  min-width: 11rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--ct-color-white);
  box-shadow: var(--ct-ring), var(--ct-shadow-xs);
  color: var(--ct-color-graphite);
  font: inherit;
  font-weight: 550;
}

.ct-cl2-lede {
  margin: 0;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
}

.ct-cl2-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-ring);
}

.ct-cl2-table th,
.ct-cl2-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--ct-color-border-soft, var(--ct-color-border));
}

.ct-cl2-table thead th {
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-xs);
  font-weight: 650;
  background: var(--ct-color-canvas-soft);
}

.ct-cl2-table tbody tr:last-child > * {
  border-bottom: 0;
}

.ct-cl2-num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ct-cl2-row {
  position: relative;
}

.ct-cl2-row:hover > * {
  background: var(--ct-color-canvas-soft);
}

.ct-cl2-row[aria-current="true"] > * {
  background: var(--ct-color-selection);
}

.ct-cl2-row__who {
  font-weight: 550;
}

.ct-cl2-row__link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ct-color-graphite);
  text-decoration: none;
}

/* The whole row opens the record. */
.ct-cl2-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ct-cl2-row__link:focus-visible {
  outline: none;
}

.ct-cl2-row:has(.ct-cl2-row__link:focus-visible) > * {
  box-shadow: inset 0 0 0 2px var(--ct-color-action);
}

.ct-cl2-row__carteira {
  color: var(--ct-color-muted);
}

.ct-cl2-none {
  color: var(--ct-color-muted);
}

/* An amount that counts no fine or interest: they cannot be quoted yet. */
.ct-cl2-partial {
  display: block;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-xs);
  font-weight: 500;
}

/* The record, over the list. */
.ct-cl2-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
}

.ct-cl2-sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--ct-scrim);
}

.ct-cl2-panel {
  position: relative;
  width: min(38rem, 100%);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 1.35rem 2rem;
  display: grid;
  align-content: start;
  gap: 1rem;
  background: var(--ct-color-white);
  box-shadow: var(--ct-shadow-lg);
  animation: ct-cl2-arrive var(--ct-motion-standard) var(--ct-ease-standard);
}

@keyframes ct-cl2-arrive {
  from {
    transform: translateX(1.5rem);
    opacity: 0;
  }
}

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

.ct-cl2-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.ct-cl2-panel__head h2 {
  margin: 0;
  font-size: var(--ct-font-size-lg);
  font-weight: var(--ct-font-weight-semibold);
}

/* Her name takes the focus when the record opens, for a screen reader to say
   it; it is not a control, so it shows no ring, as the page's main does not. */
.ct-cl2-panel__head h2:focus {
  outline: none;
  box-shadow: none;
}

.ct-cl2-panel__close {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: var(--ct-color-muted);
}

.ct-cl2-panel__close:hover {
  background: var(--ct-color-canvas-soft);
  color: var(--ct-color-graphite);
}

.ct-cl2-acts {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.ct-cl2-act {
  display: contents;
}

.ct-cl2-more {
  position: relative;
}

.ct-cl2-more > summary {
  list-style: none;
  cursor: pointer;
}

.ct-cl2-more > summary::-webkit-details-marker {
  display: none;
}

.ct-cl2-more__list {
  position: absolute;
  z-index: 2;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 17rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--ct-color-white);
  border-radius: 0.85rem;
  box-shadow: var(--ct-ring), var(--ct-shadow-md);
}

.ct-cl2-more__item {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: 0.6rem;
  background: none;
  color: var(--ct-color-graphite);
  font: inherit;
  font-weight: 550;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ct-cl2-more__item:hover,
.ct-cl2-more__item:focus-visible {
  background: var(--ct-color-canvas-soft);
}

/* Carteiras */
.ct-cl2-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: 1rem;
}

.ct-cl2-card {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: 1.2rem 1.35rem 1.25rem;
  background: var(--ct-color-white);
  border-radius: 1rem;
  box-shadow: var(--ct-ring);
}

.ct-cl2-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.ct-cl2-card__head h2 {
  margin: 0;
  font-size: var(--ct-font-size-lg);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-cl2-card__money {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.ct-cl2-card__money dt {
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-xs);
  font-weight: 650;
}

.ct-cl2-card__money dd {
  margin: 0.15rem 0 0;
  font-size: var(--ct-font-size-lg);
  font-weight: var(--ct-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ct-cl2-card__late {
  color: var(--ct-color-attention);
}

.ct-cl2-card__money small {
  display: block;
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-xs);
  font-weight: 500;
}

.ct-cl2-card__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.55rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ct-color-border-soft, var(--ct-color-border));
}

.ct-cl2-card__row > svg {
  margin-top: 0.15rem;
  color: var(--ct-color-muted);
}

.ct-cl2-card__row p {
  margin: 0;
  line-height: 1.45;
}

.ct-cl2-card__links {
  display: grid;
  gap: 0.25rem;
  justify-items: end;
}

.ct-cl2-card__link {
  color: var(--ct-color-action);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 44rem) {
  .ct-cl2-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ct-cl2-search,
  .ct-cl2-tools__go {
    grid-column: 1 / -1;
  }

  .ct-cl2-filter select {
    min-width: 0;
    width: 100%;
  }

  /* A phone shows each customer as a card: who and what they owe on top,
     their carteira and situation below. */
  .ct-cl2-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .ct-cl2-table,
  .ct-cl2-table tbody {
    display: block;
  }

  /* What she owes and her situation never shrink. When the name or the
     carteira beside one would keep less than its useful room, that one goes
     to a line of its own, under it (PR77-B1). */
  .ct-cl2-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--ct-color-border-soft, var(--ct-color-border));
  }

  /* The carteira always starts a line. */
  .ct-cl2-row::after {
    content: "";
    order: 3;
    flex-basis: 100%;
  }

  .ct-cl2-row > * {
    padding: 0 !important;
    border-bottom: 0 !important;
    background: none !important;
  }

  /* The name's useful room: 4.8rem beside the avatar. */
  .ct-cl2-row__who {
    order: 1;
    flex: 1 1 8rem;
    min-width: 0;
  }

  /* The avatar and the name never go past their cell, so a word wider than
     the room left beside the amount breaks rather than run under it
     (PR77-B1). */
  .ct-cl2-row__link {
    max-width: 100%;
  }

  /* A long name takes two lines at most beside what she owes; the record,
     a tap away, says it whole (TD-09.1.1). The amount keeps all the room it
     needs, whatever its size: the name takes what is left, and only a word
     wider than that breaks (PR77-B1). */
  .ct-cl2-row__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: break-word;
    line-height: 1.3;
  }

  .ct-cl2-row__owes {
    order: 2;
    flex: none;
    margin-left: auto;
  }

  /* The carteira's useful room: 4rem of words. */
  .ct-cl2-row__carteira {
    order: 4;
    flex: 1 1 6.7rem;
    min-width: 0;
    padding-left: 2.7rem !important;
    font-size: var(--ct-font-size-sm);
    overflow-wrap: break-word;
  }

  .ct-cl2-row__situation {
    order: 5;
    flex: none;
    margin-left: auto;
  }

  /* A long situation wraps inside its pill, so the pill keeps beside the
     carteira on most phones and is never wider than the row (TD-09.1.1). A
     word wider than the pill, such as a responder's e-mail name, breaks
     inside it, so every word stays in sight (PR77-B2). A pill of several
     lines keeps them inside its rounded shape: its corners are those of a
     one-line pill, half its least height, with room above and below the
     lines that a one-line pill does not use (PR77-B3). */
  .ct-cl2-row__situation .ct-cl-badge {
    max-width: 8.5rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-radius: 0.7rem;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  /* On a phone a second badge goes under the first, so the name keeps its width. */
  .ct-cl2-row__situation:has(.ct-cl-badge + .ct-cl-badge) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
  }

  .ct-cl2-row__situation .ct-cl-badge + .ct-cl-badge {
    margin-left: 0;
  }

  .ct-cl2-panel {
    width: 100%;
    padding: 1rem 1rem 2rem;
    animation-name: ct-cl2-rise;
  }

  @keyframes ct-cl2-rise {
    from {
      transform: translateY(1.5rem);
      opacity: 0;
    }
  }

  .ct-cl2-card__money {
    grid-template-columns: 1fr 1fr;
  }

  .ct-cl2-card__row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  /* A row's action goes under its words, not into the icon's column. */
  .ct-cl2-card__row > :not(svg, p) {
    grid-column: 2;
    justify-self: start;
  }

  .ct-cl2-card__row > .ct-button {
    margin-inline-start: -1rem;
  }

  .ct-cl2-card__links {
    justify-items: start;
  }

  /* "Mais ações" opens across the whole row of actions, wherever the button
     wrapped to, so no choice is cut off at the edge of the phone. */
  .ct-cl2-acts {
    position: relative;
  }

  .ct-cl2-more {
    position: static;
  }

  .ct-cl2-more__list {
    right: 0;
    min-width: 0;
  }
}

/* "Mudar de carteira" (US-09.107): marking customers on the list, and the
   bar that moves them, shown once one is marked. */
/* Above the row's link, which opens the record from the rest of the row:
   marking a customer never opens her record. */
.ct-cl2-row__mark {
  position: relative;
  z-index: 1;
  width: 2.75rem;
  text-align: center;
}

.ct-cl2-row__mark input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--ct-color-action);
  cursor: pointer;
}

@media (max-width: 44rem) {
  /* On a phone the mark sits left of every line of the row, which keeps
     its room. */
  .ct-cl2-row:has(.ct-cl2-row__mark) {
    padding-left: 3.4rem;
  }

  .ct-cl2-row__mark {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.9rem;
    display: flex;
    align-items: center;
    width: auto;
  }
}

.ct-cl-mover-bar {
  position: sticky;
  bottom: 1rem;
  z-index: 5;
  margin-top: 1rem;
  padding: 0.7rem 0.75rem 0.7rem 1.1rem;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-line);
  border-radius: 1rem;
  box-shadow: var(--ct-shadow-card);
}

.ct-cl2:has(input[name="cliente"]:checked) .ct-cl-mover-bar {
  display: flex;
}

.ct-cl-mover-bar__count {
  color: var(--ct-color-graphite);
  font-weight: 650;
}

/* Its pages: the carteira, then what changes and why. */
.ct-cl-mover {
  max-width: 44rem;
  display: grid;
  gap: 1.1rem;
}

.ct-cl-mover__back {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ct-color-muted);
  font-weight: 600;
  text-decoration: none;
}

.ct-cl-mover__form {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}

.ct-cl-mover__choices,
.ct-cl-mover__reasons {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  border: 0;
}

.ct-cl-mover__ask {
  margin-bottom: 0.4rem;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.ct-cl-mover__choice {
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-line);
  border-radius: 0.9rem;
  cursor: pointer;
}

.ct-cl-mover__choice:has(input:checked) {
  border-color: var(--ct-color-action);
  box-shadow: 0 0 0 1px var(--ct-color-action);
}

.ct-cl-mover__choice:has(input:disabled) {
  color: var(--ct-color-muted);
  cursor: default;
}

.ct-cl-mover__choice span {
  display: grid;
}

.ct-cl-mover__choice small {
  color: var(--ct-color-muted);
}

.ct-cl-mover__card {
  padding: 1.1rem 1.2rem;
  display: grid;
  gap: 0.8rem;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-line);
  border-radius: 1rem;
  box-shadow: var(--ct-shadow-card);
}

.ct-cl-mover__sum {
  margin: 0;
  font-size: 1.05rem;
}

.ct-cl-mover__who {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  list-style: none;
}

.ct-cl-mover__who li {
  display: grid;
  gap: 0.1rem;
  color: var(--ct-color-muted);
  overflow-wrap: anywhere;
}

.ct-cl-mover__who b {
  color: var(--ct-color-graphite);
}

.ct-cl-mover__stay {
  margin: 0;
  color: var(--ct-color-muted);
}

.ct-cl-mover__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ct-cl-mover__chip {
  padding: 0.45rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--ct-color-white);
  border: 1px solid var(--ct-color-line);
  border-radius: 999px;
  cursor: pointer;
}

.ct-cl-mover__chip:has(input:checked) {
  border-color: var(--ct-color-action);
  box-shadow: 0 0 0 1px var(--ct-color-action);
}

/* "Qual é o motivo?" only once she chose "Outro". */
.ct-cl-mover__other {
  display: none;
  gap: 0.3rem;
}

.ct-cl-mover__reasons:has(input[value="outro"]:checked) .ct-cl-mover__other {
  display: grid;
}

.ct-cl-mover__other input {
  min-height: 2.6rem;
  padding: 0 0.75rem;
  border: 1px solid var(--ct-color-line);
  border-radius: 0.6rem;
  font: inherit;
}

/* A change while she read: amber, never red. */
.ct-cl-mover__changed {
  margin: 0;
  padding: 0.7rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ct-color-attention-ink);
  background: var(--ct-color-attention-soft);
  border: 1px solid var(--ct-color-attention-line);
  border-radius: 0.8rem;
}

@media (max-width: 44rem) {
  /* The tab bar steps aside while customers are marked; the move bar takes its place. */
  .ct-console:has(.ct-cl2 input[name="cliente"]:checked) .ct-tabbar {
    display: none;
  }

  .ct-cl-mover-bar {
    bottom: 0.75rem;
  }
}