/* companion.css
 *
 * The Margin — Star Compass's reading companion.
 *
 * Not a chat widget. A margin. When the guest is reading their chart, a hairline
 * runs down the right edge of the page with one slow point of light on it. Opening
 * it makes the page contract and a column of the same paper unfolds beside the
 * reading, so the chart and the conversation are visible at the same moment.
 *
 * Everything here is built from the site's own tokens (defined on :root in
 * index.html), with hex fallbacks so it stays correct even if loaded first. There
 * are no new colours, no gradients that the site does not already use, and no
 * shadow stronger than the site's own 0.05 alpha paper shadow.
 *
 * Structure:
 *   1. tokens + motion
 *   2. the rail        (closed, desktop)
 *   3. the dock        (closed, mobile)
 *   4. the veil        (overlay + sheet modes)
 *   5. the column      (open)
 *   6. the ribbon      (context header)
 *   7. the conversation
 *   8. the composer
 *   9. the threads layer
 *  10. the panel invitations (woven into the reading itself)
 *  11. modes: push / overlay / sheet
 *  12. Hindi + reduced motion
 */

/* ==== 1. tokens + motion ==================================================== */

/* Registered so the ribbon's colour can glide from one chapter to the next
   instead of snapping. Browsers without @property simply swap instantly. */
@property --scc-tint {
  syntax: "<color>";
  inherits: true;
  initial-value: #fdfaf6;
}
@property --scc-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #3cc0c5;
}

:root {
  /* The column's width is set by reading comfort, not by a share of the viewport:
     at 15.5px DM Sans with 34px gutters, 520px is roughly 62 characters a line.
     The second term of the min() is the page's protection: 860px is what the
     reading needs to keep its side navigation and a readable column, so by
     default the companion never asks for more than the page can give. A guest
     who resizes the column by hand sets --scc-w-user, which wins; the page
     still guards itself in push mode (see the body rule in section 11). */
  /* What the reading needs to stay itself: 232px of side navigation, its 28px
     gutter, and enough left for a readable column. Named once, because two
     rules depend on it agreeing (the default width below, and the page's own
     padding in push mode), and a silent disagreement between them is exactly
     how a companion starts covering the navigation again. */
  --scc-keep: 860px;

  /* Reading comfort sets the width: at 15.5px DM Sans with 34px gutters, 520px
     is roughly 62 characters a line. In overlay and sheet modes this is the
     whole story, because the column floats and the page underneath is not being
     asked to give anything up. Push mode narrows it further, below. */
  --scc-w-default: clamp(360px, 38vw, 520px);
  --scc-w: clamp(320px, var(--scc-w-user, var(--scc-w-default)), 92vw);

  /* One decelerating curve for everything that opens or closes. No overshoot,
     nothing springs. The site's own motion never bounces either. */
  --scc-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --scc-in: 460ms;
  --scc-out: 320ms;
}

.scc-root {
  font-family: var(--sc-sans, "DM Sans", system-ui, sans-serif);
  color: var(--sc-ink, #3a2f2a);
}

/* Small uppercase caption, the site's own eyebrow, reused everywhere here. */
.scc-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--sc-muted, #a89688);
  text-transform: uppercase;
  line-height: 1.4;
}

/* Devanagari takes neither the Latin stack, the wide tracking, nor uppercasing,
   and 500 is the heaviest Devanagari weight the page actually loads. The site
   makes the same allowance for its own .dvi captions. */
body[data-prose="hi"] .scc-eyebrow {
  font-family: var(--sc-deva-sans, "Noto Sans Devanagari", sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

/* Announced to screen readers, never drawn. */
.scc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==== 2. the rail (closed, desktop) ========================================= */

.scc-rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 220;
  width: 46px;
  display: none; /* revealed by the mode rules once a chart exists */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 700ms ease 300ms, transform 700ms var(--scc-ease) 300ms;
}

/* A whisper of the companion's own teal behind the rail, so the right edge
   reads as a place where something lives, not as empty margin. Static, faded
   at both ends, and no stronger than the side navigation's own block tints. */
.scc-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to left,
    rgba(200, 232, 234, 0.55),
    rgba(200, 232, 234, 0)
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 14%,
    #000 86%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 14%,
    #000 86%,
    transparent
  );
  pointer-events: none;
}

/* The hairline itself, faded away at both ends so it never reads as a border. */
.scc-rail::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 0;
  width: 1px;
  background: var(--sc-hair-strong, rgba(58, 47, 42, 0.14));
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 22%,
    #000 78%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 22%,
    #000 78%,
    transparent
  );
  transition: background 220ms ease;
}

.scc-rail:hover::before {
  background: var(--sc-teal-soft, #c8e8ea);
}

/* One point of light, drifting. Nine seconds up and down. It is the only thing
   in the whole companion that moves on its own, and it never pulses outward. */
.scc-rail-light {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--sc-teal-deep, #3cc0c5);
  box-shadow: 0 0 10px 2px rgba(60, 192, 197, 0.4);
  animation: scc-drift 9s ease-in-out infinite;
}

@keyframes scc-drift {
  0%,
  100% {
    transform: translateY(-7px);
    opacity: 0.38;
  }
  50% {
    transform: translateY(7px);
    opacity: 0.78;
  }
}

.scc-rail-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--sc-serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--sc-soft, #6b5c56);
  white-space: nowrap;
  transition: color 220ms ease, transform 220ms var(--scc-ease);
}

.scc-rail-chev {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  color: var(--sc-muted, #a89688);
  opacity: 0.55;
  transition: transform 220ms var(--scc-ease), opacity 220ms ease;
}

.scc-rail:hover .scc-rail-text {
  color: var(--sc-ink, #3a2f2a);
  transform: translateX(-2px);
}

.scc-rail:hover .scc-rail-chev {
  transform: translateX(-3px);
  opacity: 0.9;
}

.scc-rail:focus-visible {
  outline: 2px solid var(--sc-teal-deep, #3cc0c5);
  outline-offset: -6px;
  border-radius: 12px;
}

/* Devanagari is never slanted. */
body[data-prose="hi"] .scc-rail-text {
  font-family: var(--sc-deva-sans, "Noto Sans Devanagari", sans-serif);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* ---- the introduction ----
   Once, after a chart is calculated, a small paper card unfolds beside the rail
   to say the companion exists. It arrives on the site's own easing, waits, and
   folds away; it never pulses, and opening the companion dismisses it at once. */
.scc-intro {
  position: fixed;
  top: 50%;
  right: 60px;
  z-index: 221;
  display: none;
  align-items: center;
  gap: 11px;
  max-width: 280px;
  padding: 14px 18px;
  border: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
  border-radius: 14px;
  background: var(--sc-paper, #fdfaf6);
  box-shadow: 0 12px 40px rgba(58, 47, 42, 0.08);
  cursor: pointer;
  text-align: left;
  opacity: 0;
  transform: translateY(-50%) translateX(14px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 420ms ease, transform 460ms var(--scc-ease),
    visibility 0s linear 460ms;
}

.scc-intro.show {
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 420ms ease, transform 460ms var(--scc-ease), visibility 0s;
}

/* The card belongs to the rail, so it appears only where the rail does. */
@media (min-width: 721px) {
  .scc-intro {
    display: flex;
  }
}

.scc-intro-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--sc-teal-deep, #3cc0c5);
}

.scc-intro-text {
  font-family: var(--sc-serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--sc-ink, #3a2f2a);
}

body[data-prose="hi"] .scc-intro-text {
  font-family: var(--sc-deva-sans, "Noto Sans Devanagari", sans-serif);
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
}

.scc-intro-arrow {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--sc-teal-deep, #3cc0c5);
  transition: transform 180ms var(--scc-ease);
}

/* It offers itself to the cursor: the same arrow-nudge the reading's own
   "ask about this" lines use, and a hairline that warms toward the companion's
   teal. No fill, no lift — it is still only an introduction. */
.scc-intro:hover {
  border-color: var(--sc-teal-soft, #c8e8ea);
}

.scc-intro:hover .scc-intro-arrow {
  transform: translateX(3px);
}

.scc-intro:focus-visible {
  outline: 2px solid var(--sc-teal-deep, #3cc0c5);
  outline-offset: 2px;
}

/* ==== 3. the dock (closed, mobile) ========================================== */

/* Cream, soft-shadowed, exactly the species of the site's own floating menu
   button — so the phone gains no new kind of object. It steps out of the way
   while the guest is scrolling down through the reading. */
.scc-dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 220;
  display: none;
  align-items: center;
  gap: 9px;
  padding: 11px 20px 11px 16px;
  border: none;
  border-radius: 99px;
  background: var(--sc-cream, #faf1df);
  color: var(--sc-ink, #3a2f2a);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
  transform: translate(-50%, 0);
  opacity: 0;
  transition: transform 320ms var(--scc-ease), opacity 320ms ease;
}

body.scc-ready .scc-dock {
  opacity: 1;
}

body.scc-dock-hidden .scc-dock {
  transform: translate(-50%, 90px);
  opacity: 0;
}

.scc-dock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--sc-teal-deep, #3cc0c5);
}

/* ==== 4. the veil =========================================================== */

/* Cream, not black. In overlay and sheet modes the reading stays visible behind
   the column, softened, the way paper looks through vellum. */
.scc-veil {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: rgba(253, 250, 246, 0.55);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--scc-out) ease;
}

/* Clickable while open, so tapping the reading behind it closes the companion.
   Push mode turns this back off, since there the page is not covered at all. */
body.scc-open .scc-veil {
  opacity: 1;
  pointer-events: auto;
  transition-duration: var(--scc-in);
}

/* ==== 5. the column ========================================================= */

.scc-panel {
  --scc-tint: var(--sc-paper, #fdfaf6);
  --scc-accent: var(--sc-teal-deep, #3cc0c5);

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 240;
  width: var(--scc-w);
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sc-paper, #fdfaf6);
  border-left: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
  /* The site's own paper shadow, thrown sideways. Nothing heavier. */
  box-shadow: -24px 0 60px rgba(58, 47, 42, 0.06);

  opacity: 0;
  transform: translateX(24px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 220ms ease, transform var(--scc-out) var(--scc-ease),
    visibility 0s linear var(--scc-out), --scc-tint 520ms ease,
    --scc-accent 520ms ease;
}

body.scc-open .scc-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  /* The space opens a breath before the content arrives, so the column reads as
     unfolding out of the page rather than landing on top of it. */
  transition: opacity 380ms ease 60ms, transform 380ms var(--scc-ease) 60ms,
    visibility 0s, --scc-tint 520ms ease, --scc-accent 520ms ease;
}

/* The grabber, mobile only. */
.scc-grab {
  display: none;
  width: 36px;
  height: 4px;
  border-radius: 99px;
  margin: 10px auto 0;
  flex: 0 0 auto;
  background: var(--sc-hair-strong, rgba(58, 47, 42, 0.14));
}

/* The column's left edge can be taken and moved. At rest it is nothing at all;
   under the pointer it shows one accent line, the same grammar as the side
   navigation's active link. Desktop only; the sheet has its own grabber. */
.scc-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 12px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: col-resize;
  display: none;
  touch-action: none;
}

.scc-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--scc-accent);
  opacity: 0;
  transition: opacity 180ms ease;
}

.scc-handle:hover::before,
body.scc-resizing .scc-handle::before {
  opacity: 0.55;
}

/* Reaching the edge by keyboard has to look different from brushing it with a
   cursor, or the one control that can only be found by tabbing is the one
   control that never says it has been found. The line goes solid and full
   strength, which is also the site's own way of marking an active edge. */
.scc-handle:focus-visible::before {
  opacity: 1;
  width: 3px;
  box-shadow: 0 0 0 1px var(--sc-paper, #fdfaf6);
}

@media (min-width: 721px) {
  .scc-handle {
    display: block;
  }
}

/* While the guest is dragging the edge, everything follows the pointer with no
   easing, and no text gets swept up along the way. */
body.scc-resizing,
body.scc-resizing * {
  user-select: none !important;
}

body.scc-resizing,
body.scc-resizing .scc-panel {
  transition: none !important;
}

/* ==== 6. the ribbon ========================================================= */

/* The header takes on the colour of the chapter the guest is reading and washes
   it down into paper. Scrolling from Timing into Spirit glides sage into mist. */
.scc-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 26px 20px 34px;
  border-bottom: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
  background: linear-gradient(
    to bottom,
    var(--scc-tint),
    var(--sc-paper, #fdfaf6)
  );
}

.scc-where {
  flex: 1 1 auto;
  min-width: 0;
}

.scc-where .scc-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

/* Same 6px dot the reading's own side navigation uses for each chapter. */
.scc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--scc-accent);
}

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

.scc-title {
  font-family: var(--sc-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 300;
  font-style: italic;
  font-size: 27px;
  line-height: 1.12;
  color: var(--sc-ink, #3a2f2a);
  letter-spacing: 0.005em;
}

body[data-prose="hi"] .scc-title {
  font-family: var(--sc-deva-serif, "Noto Serif Devanagari", serif);
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
}

.scc-head-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  margin-top: -4px;
}

/* Icon buttons carry no fill until hovered — the site has no filled circles
   anywhere except its planet glyphs. */
.scc-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--sc-soft, #6b5c56);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.scc-icon:hover {
  background: rgba(58, 47, 42, 0.05);
  color: var(--sc-ink, #3a2f2a);
}

.scc-icon:focus-visible {
  outline: 2px solid var(--scc-accent);
  outline-offset: 1px;
}

.scc-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ==== 7. the conversation =================================================== */

.scc-thread {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 34px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(58, 47, 42, 0.18) transparent;
}

.scc-thread::-webkit-scrollbar {
  width: 4px;
}
.scc-thread::-webkit-scrollbar-track {
  background: transparent;
}
.scc-thread::-webkit-scrollbar-thumb {
  background-color: rgba(58, 47, 42, 0.15);
  border-radius: 99px;
}

/* No bubbles. The guest's question is set as a quiet italic line and the guide's
   answer as body prose, the way the site already splits its two voices between
   Cormorant (descriptions) and DM Sans (the reading itself). Each turn is named
   by an eyebrow, the site's own device. */
.scc-turn {
  margin-bottom: 30px;
}

.scc-turn:last-child {
  margin-bottom: 0;
}

.scc-turn-label {
  margin-bottom: 9px;
}

.scc-turn.guide .scc-turn-label {
  color: var(--scc-accent);
}

/* ---- who is speaking, readable at a glance ----
   Each exchange opens with the guest's question, flush to the column's edge and
   ticked with a hairline in the colour of the room they are reading. The guide's
   answer is then set as a gloss on it: stepped in, with its name hanging back in
   the gutter so the two names still line up. Scrolling quickly, the eye follows
   two left edges and a row of coloured ticks, and never has to read a word to
   know who is speaking. No bubbles: the reading has none either. */
.scc-turn.you {
  padding-left: 16px;
  border-left: 2px solid var(--scc-accent);
}

.scc-turn.guide {
  padding-left: 40px;
}

.scc-turn.guide .scc-turn-label {
  margin-left: -22px;
}

.scc-turn.you .scc-say {
  font-family: var(--sc-serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--sc-ink, #3a2f2a);
}

body[data-prose="hi"] .scc-turn.you .scc-say {
  font-family: var(--sc-deva-serif, "Noto Serif Devanagari", serif);
  font-style: normal;
  font-size: 17px;
  line-height: 1.75;
}

.scc-turn.guide .scc-say {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--sc-ink, #3a2f2a);
}

body[data-prose="hi"] .scc-turn.guide .scc-say {
  font-family: var(--sc-deva-sans, "Noto Sans Devanagari", sans-serif);
  line-height: 1.9;
}

.scc-say p {
  margin: 0 0 14px;
}
.scc-say p:last-child {
  margin-bottom: 0;
}
.scc-say ul,
.scc-say ol {
  margin: 0 0 14px;
  padding-left: 20px;
}
.scc-say li {
  margin-bottom: 5px;
}
.scc-say strong {
  font-weight: 600;
}
.scc-say code {
  font-family: var(--sc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--sc-mist, #e8efec);
}

.scc-turn.arriving .scc-say {
  animation: scc-fade 200ms ease both;
}

@keyframes scc-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* While the guide is gathering its answer: one hairline, breathing. No spinner,
   no bouncing dots, no blinking block. */
.scc-waiting {
  height: 1px;
  width: 74px;
  margin-top: 8px;
  background: var(--scc-accent);
  animation: scc-breathe 1.6s ease-in-out infinite;
}

@keyframes scc-breathe {
  0%,
  100% {
    opacity: 0.15;
    width: 42px;
  }
  50% {
    opacity: 0.5;
    width: 96px;
  }
}

/* A question the guide never got to answer. Set as a quiet aside, not as a turn
   in its own right, so it reads as a note about the conversation. */
.scc-stopped {
  margin: -18px 0 0;
  padding-left: 40px;
  font-family: var(--sc-serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sc-muted, #a89688);
}

body[data-prose="hi"] .scc-stopped {
  font-family: var(--sc-deva-sans, "Noto Sans Devanagari", sans-serif);
  font-style: normal;
  font-size: 14px;
}

/* ---- the opening state ---- */

.scc-open-state {
  padding-top: 4px;
}

.scc-greeting {
  font-family: var(--sc-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 20px;
  line-height: 1.62;
  color: var(--sc-soft, #6b5c56);
  margin: 0 0 26px;
}

body[data-prose="hi"] .scc-greeting {
  font-family: var(--sc-deva-serif, "Noto Serif Devanagari", serif);
  font-size: 17.5px;
  line-height: 1.85;
}

.scc-greeting .scc-name {
  font-style: italic;
  color: var(--scc-accent);
}

body[data-prose="hi"] .scc-greeting .scc-name {
  font-style: normal;
}

/* The openers are a list with a quiet left indicator, the grammar of the
   reading's own side navigation. Not chips, not pills, not buttons. */
.scc-openers {
  border-top: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
}

.scc-opener {
  display: block;
  width: 100%;
  text-align: left;
  padding: 15px 8px 15px 0;
  border: none;
  border-bottom: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--sc-ink, #3a2f2a);
  cursor: pointer;
  transition: color 180ms ease, padding-left 180ms var(--scc-ease);
}

body[data-prose="hi"] .scc-opener {
  font-family: var(--sc-deva-sans, "Noto Sans Devanagari", sans-serif);
  line-height: 1.7;
}

.scc-opener:hover,
.scc-opener:focus-visible {
  color: var(--scc-accent);
  padding-left: 5px;
  outline: none;
}

.scc-opener:last-child {
  color: var(--sc-soft, #6b5c56);
  font-style: italic;
}

body[data-prose="hi"] .scc-opener:last-child {
  font-style: normal;
}

/* ==== 8. the composer ======================================================= */

.scc-compose {
  flex: 0 0 auto;
  padding: 14px 26px 16px 34px;
  border-top: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
  background: var(--sc-paper, #fdfaf6);
}

.scc-compose-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

/* No box. The line above it is the whole affordance. */
.scc-input {
  flex: 1 1 auto;
  min-height: 26px;
  max-height: 160px;
  resize: none;
  padding: 3px 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sc-ink, #3a2f2a);
}

body[data-prose="hi"] .scc-input {
  font-family: var(--sc-deva-sans, "Noto Sans Devanagari", sans-serif);
}

.scc-input:focus {
  outline: none;
}

.scc-input::placeholder {
  font-family: var(--sc-serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 16px;
  color: var(--sc-muted, #a89688);
}

body[data-prose="hi"] .scc-input::placeholder {
  font-family: var(--sc-deva-sans, "Noto Sans Devanagari", sans-serif);
  font-style: normal;
  font-size: 14.5px;
}

.scc-send {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--sc-hair-strong, rgba(58, 47, 42, 0.14));
  border-radius: 50%;
  background: transparent;
  color: var(--sc-muted, #a89688);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease,
    opacity 180ms ease;
}

/* It only fills once there is something to send. */
.scc-send.ready {
  background: var(--scc-accent);
  border-color: var(--scc-accent);
  color: var(--sc-paper, #fdfaf6);
}

.scc-send:disabled {
  opacity: 0.4;
  cursor: default;
}

.scc-send:focus-visible {
  outline: 2px solid var(--scc-accent);
  outline-offset: 2px;
}

.scc-send svg {
  width: 17px;
  height: 17px;
  display: block;
}

.scc-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 11px;
  min-height: 14px;
}

/* Whose chart is loaded, always visible, so nobody is ever talking about the
   wrong person's sky. */
.scc-reading-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scc-stop {
  flex: 0 0 auto;
  display: none;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sc-muted, #a89688);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.scc-stop:hover {
  color: var(--sc-rose-deep, #b5708a);
}

body.scc-busy .scc-stop {
  display: inline;
}

/* ==== 9. the threads layer ================================================== */

/* Slides over the conversation from the left, inside the column. The guest never
   leaves the companion to look at their past. */
.scc-threads {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: var(--sc-paper, #fdfaf6);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--scc-out) var(--scc-ease),
    visibility 0s linear var(--scc-out);
}

.scc-panel.threads-open .scc-threads {
  transform: none;
  visibility: visible;
  transition: transform var(--scc-in) var(--scc-ease), visibility 0s;
}

.scc-threads-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 26px 26px 18px 22px;
  border-bottom: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
  background: linear-gradient(
    to bottom,
    var(--scc-tint),
    var(--sc-paper, #fdfaf6)
  );
}

.scc-threads-title {
  font-family: var(--sc-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 300;
  font-style: italic;
  font-size: 25px;
  color: var(--sc-ink, #3a2f2a);
}

body[data-prose="hi"] .scc-threads-title {
  font-family: var(--sc-deva-serif, "Noto Serif Devanagari", serif);
  font-style: normal;
  font-size: 22px;
}

.scc-threads-tools {
  flex: 0 0 auto;
  padding: 16px 34px 4px;
}

.scc-search {
  width: 100%;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--sc-ink, #3a2f2a);
}

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

.scc-search::placeholder {
  color: var(--sc-muted, #a89688);
}

.scc-new {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 16px 0 15px;
  border: none;
  border-bottom: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--sc-ink, #3a2f2a);
  cursor: pointer;
  text-align: left;
  transition: color 180ms ease;
}

.scc-new:hover {
  color: var(--scc-accent);
}

.scc-new svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--scc-accent);
}

.scc-threads-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 34px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(58, 47, 42, 0.18) transparent;
}

.scc-threads-list::-webkit-scrollbar {
  width: 4px;
}
.scc-threads-list::-webkit-scrollbar-thumb {
  background-color: rgba(58, 47, 42, 0.15);
  border-radius: 99px;
}

/* Threads gather under the chapter of the reading they were asked from, because
   that is how a guest's questions actually cluster. Same dot, same eyebrow, same
   grouping the reading's own navigation uses. */
.scc-group {
  margin-top: 22px;
}

.scc-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.scc-thread-row {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 52px 11px 14px;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}

.scc-thread-row:hover {
  background: rgba(58, 47, 42, 0.03);
}

.scc-thread-row:focus-visible {
  outline: 2px solid var(--scc-accent);
  outline-offset: -2px;
  border-radius: 8px;
}

.scc-thread-row.current {
  border-left-color: var(--scc-accent);
}

.scc-thread-name {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--sc-ink, #3a2f2a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-prose="hi"] .scc-thread-name {
  font-family: var(--sc-deva-sans, "Noto Sans Devanagari", sans-serif);
}

.scc-thread-row.current .scc-thread-name {
  font-weight: 600;
}

.scc-thread-meta {
  display: block;
  margin-top: 4px;
}

/* Inline rename, no dialog. */
.scc-rename {
  width: 100%;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--scc-accent);
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--sc-ink, #3a2f2a);
}

.scc-rename:focus {
  outline: none;
}

.scc-row-actions {
  position: absolute;
  top: 8px;
  right: 0;
  display: flex;
  gap: 1px;
  opacity: 0;
  transition: opacity 160ms ease;
}

.scc-thread-row:hover .scc-row-actions,
.scc-thread-row:focus-within .scc-row-actions {
  opacity: 1;
}

.scc-row-act {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--sc-muted, #a89688);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.scc-row-act:hover {
  background: rgba(58, 47, 42, 0.05);
  color: var(--sc-ink, #3a2f2a);
}

/* A second click within a few seconds confirms. No modal ever appears. */
.scc-row-act.confirming {
  color: var(--sc-rose-deep, #b5708a);
}

.scc-row-act svg {
  width: 13px;
  height: 13px;
  display: block;
}

.scc-threads-empty {
  padding: 26px 0;
  font-family: var(--sc-serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sc-muted, #a89688);
}

body[data-prose="hi"] .scc-threads-empty {
  font-family: var(--sc-deva-serif, "Noto Serif Devanagari", serif);
  font-style: normal;
  font-size: 15px;
}

/* Which guide answers. Kept, because it is a real choice, but moved out of the
   conversation and set as a quiet preference at the foot of the threads. */
.scc-guide-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 34px 18px;
  border-top: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
}

.scc-models {
  display: flex;
  gap: 4px;
}

.scc-model {
  padding: 3px 2px;
  border: none;
  border-bottom: 1.5px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: var(--sc-muted, #a89688);
  cursor: pointer;
  margin-right: 10px;
  transition: color 160ms ease, border-color 160ms ease;
}

.scc-model:hover {
  color: var(--sc-soft, #6b5c56);
}

.scc-model.active {
  color: var(--sc-ink, #3a2f2a);
  border-bottom-color: var(--sc-teal-deep, #3cc0c5);
}

/* ==== 10. the panel invitations ============================================= */

/* Woven into the reading itself, at the foot of each panel: one quiet line that
   opens the companion already pointed at what the guest just read. */
.scc-ask {
  margin-top: 26px;
  padding-top: 15px;
  border-top: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
}

.scc-ask-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--sc-serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--sc-soft, #6b5c56);
  cursor: pointer;
  transition: color 180ms ease;
}

body[data-prose="hi"] .scc-ask-btn {
  font-family: var(--sc-deva-sans, "Noto Sans Devanagari", sans-serif);
  font-style: normal;
  font-size: 14px;
}

.scc-ask-btn:hover {
  color: var(--chap-accent, var(--sc-teal-deep, #3cc0c5));
}

.scc-ask-arrow {
  font-style: normal;
  font-size: 13px;
  transition: transform 180ms var(--scc-ease);
  display: inline-block;
}

.scc-ask-btn:hover .scc-ask-arrow {
  transform: translateX(4px);
}

/* The companion's own door in the reading's side navigation. */
.sc-side-group.companion {
  --side-block-bg: #e4f2f2;
}
.sc-side-group.companion .dot {
  background: var(--sc-teal-deep, #3cc0c5);
}

button.sc-side-link {
  width: 100%;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* ==== 11. modes ============================================================= */

/* --- sheet (phones): the column rises from the bottom edge --- */
@media (max-width: 720px) {
  body.scc-ready .scc-dock {
    display: inline-flex;
  }

  .scc-panel {
    top: auto;
    height: 88dvh;
    width: 100vw;
    border-left: none;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -18px 50px rgba(58, 47, 42, 0.12);
    transform: translateY(100%);
    transition: transform var(--scc-out) var(--scc-ease),
      visibility 0s linear var(--scc-out), --scc-tint 520ms ease,
      --scc-accent 520ms ease;
    opacity: 1;
  }

  body.scc-open .scc-panel {
    transform: translateY(0);
    transition: transform var(--scc-in) var(--scc-ease), visibility 0s,
      --scc-tint 520ms ease, --scc-accent 520ms ease;
  }

  /* While the guest is dragging the sheet, it follows the finger with no easing.
     Scoped through body.scc-open so it outranks the open-state transition it
     has to cancel; without that the sheet would lag the finger by 460ms. */
  body.scc-open .scc-panel.dragging {
    transition: none;
  }

  .scc-grab {
    display: block;
  }

  .scc-head {
    padding: 14px 18px 16px 24px;
    cursor: grab;
    touch-action: none;
  }

  .scc-title {
    font-size: 24px;
  }

  .scc-thread {
    padding: 24px 24px 8px;
  }

  /* The same two edges, drawn tighter so the narrower column keeps its measure. */
  .scc-turn.you {
    padding-left: 13px;
  }

  .scc-turn.guide,
  .scc-stopped {
    padding-left: 27px;
  }

  .scc-turn.guide .scc-turn-label {
    margin-left: -14px;
  }

  .scc-compose {
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom)) 24px;
  }

  .scc-threads-head {
    padding: 20px 18px 16px 16px;
  }
  .scc-threads-tools,
  .scc-threads-list,
  .scc-guide-row {
    padding-left: 24px;
    padding-right: 24px;
  }

  body.scc-open {
    overflow: hidden;
  }

  /* The reading's own floating menu button steps aside while the sheet is up. */
  body.scc-open .sc-menu-btn {
    opacity: 0;
    pointer-events: none;
  }

  /* And the companion's own pill steps aside while the reading's full-screen
     menu is up, rather than floating over it. */
  body.sc-menu-open .scc-dock {
    opacity: 0;
    pointer-events: none;
  }
}

/* --- overlay (tablets and most laptops): the column floats on a cream veil,
       the reading stays visible through it rather than being blacked out --- */
@media (min-width: 721px) {
  body.scc-ready .scc-rail {
    display: flex;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  body.scc-open .scc-rail {
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms var(--scc-ease);
  }

  .scc-panel {
    border-radius: 22px 0 0 22px;
  }
}

/* --- push (desktops): the page genuinely makes room ---
   From 1220px up there is space to share, so this is the default: the reading
   keeps --scc-keep (side navigation and a readable column) and the companion
   takes only what is left. Nothing is ever covered. The one exception is
   deliberate: a guest who drags the column wider than the page can afford is
   choosing overlap, and the min() lets the column advance while the page holds
   its ground. */
@media (min-width: 1220px) {
  /* Only here does the page's share bound the column's own default width. In
     overlay mode this term would have quietly held the column at its 360px
     floor across the whole 721 to 1219 range, for no gain: nothing is being
     protected when the column is floating over the page anyway. */
  :root {
    --scc-w-default: clamp(360px, min(38vw, 100vw - var(--scc-keep)), 520px);
  }

  body {
    transition: padding-right var(--scc-in) var(--scc-ease);
  }

  body.scc-open {
    padding-right: min(var(--scc-w), calc(100vw - var(--scc-keep)));
  }

  /* Nothing floats, so there is no veil and no rounded corner: the column is
     part of the page's own geometry. */
  body.scc-open .scc-veil {
    opacity: 0;
    pointer-events: none;
  }

  .scc-panel {
    border-radius: 0;
  }
}

/* Between 1220px and about 1400px the page gives away everything it can and the
   reading is left at exactly --scc-keep. That is enough for the prose and the
   navigation, but not for two charts side by side, and the rule that would
   normally stack them watches the window, which has not changed. So while the
   companion is open at these widths the charts stack, the way they already do
   when the window itself is this narrow. It lasts only as long as the
   companion is open, and the reading returns to itself when it closes. */
@media (min-width: 1220px) and (max-width: 1420px) {
  body.scc-open .sc-charts {
    grid-template-columns: 1fr;
  }
}

/* ==== 12. Hindi + reduced motion ============================================ */

/* Everything the companion owns holds still, including the small hover transitions,
   rather than a hand-kept list of selectors that quietly falls behind the CSS. */
@media (prefers-reduced-motion: reduce) {
  .scc-root,
  .scc-root *,
  .scc-ask,
  .scc-ask *,
  body {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .scc-rail-light,
  .scc-waiting,
  .scc-turn.arriving .scc-say {
    animation: none !important;
  }

  .scc-rail-light {
    opacity: 0.6;
    transform: none;
  }

  .scc-waiting {
    opacity: 0.35;
    width: 74px;
  }
}

/* ---- who is in the room -------------------------------------------------------
 *
 * A quiet row under the ribbon: one chip per person the guest has calculated,
 * group chips first. It borrows --scc-accent, so it glides from one chapter's
 * colour to the next along with everything else in the panel, and it is absent
 * entirely until there is a library to choose from.
 */
.scc-people {
  flex: 0 0 auto;
  padding: 12px 26px 12px 34px;
  border-bottom: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
  background: var(--sc-paper, #fdfaf6);
}

.scc-people-empty {
  display: none;
}

/* the label and the gear share a line of their own, above everything */
.scc-people-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.scc-people-label {
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sc-ink-soft, rgba(58, 47, 42, 0.5));
}

/* groups sit on their own line above the names, so neither has to share a
   baseline with the other when the row wraps */
.scc-people-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}

.scc-people-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  /* a long library scrolls within its own row rather than growing the panel */
  max-height: 96px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(58, 47, 42, 0.18) transparent;
}

.scc-person,
.scc-group,
.scc-people-manage {
  flex: 0 0 auto;
  max-width: 100%;
  padding: 5px 12px;
  border: 1px solid var(--sc-hair-strong, rgba(58, 47, 42, 0.16));
  border-radius: 999px;
  background: transparent;
  color: var(--sc-ink, #3a2f2a);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.35;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.scc-person:hover,
.scc-group:hover,
.scc-people-manage:hover {
  border-color: var(--scc-accent);
  color: var(--scc-accent);
}

.scc-person.on,
.scc-group.on {
  color: #fff;
  border-color: var(--scc-accent);
  background: var(--scc-accent);
}

/* a group with only some of its people in the room */
.scc-group.part {
  border-style: dashed;
  border-color: var(--scc-accent);
  color: var(--scc-accent);
}

.scc-group {
  font-size: 12px;
  border-style: dashed;
}

.scc-group.on,
.scc-group.part {
  border-style: solid;
}

.scc-group::before {
  content: "◆";
  margin-right: 5px;
  font-size: 9px;
  vertical-align: 1px;
  opacity: 0.55;
}

.scc-people-manage {
  flex: 0 0 auto;
  padding: 3px 9px;
  font-size: 12px;
  line-height: 1.35;
  border-style: dashed;
  color: var(--sc-ink-soft, rgba(58, 47, 42, 0.5));
}

.scc-person:focus-visible,
.scc-group:focus-visible,
.scc-people-manage:focus-visible {
  outline: 2px solid var(--scc-accent);
  outline-offset: 2px;
}

.scc-people-note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sc-ink-soft, rgba(58, 47, 42, 0.55));
}

@media (max-width: 700px) {
  .scc-people {
    padding: 10px 18px;
  }
}
/* ---- the people manager ------------------------------------------------------
 *
 * A small modal for tending the library: rename, group, remove. Same palette and
 * radii as the chat panel, sized to sit comfortably on a phone.
 */
.sc-people-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(40, 55, 55, 0.34);
  backdrop-filter: blur(2px);
}

.sc-people-overlay.open {
  display: flex;
}

.sc-people-card {
  width: 100%;
  max-width: 440px;
  max-height: min(86vh, 640px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--sc-paper, #fdfaf6);
  box-shadow: 0 24px 60px rgba(40, 60, 60, 0.28);
}

.sc-people-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--scc-accent, #3cc0c5),
    var(--scc-accent, #3cc0c5)
  );
}

.sc-people-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.sc-people-close {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

.sc-people-close:hover {
  background: rgba(255, 255, 255, 0.34);
}

.sc-people-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
}

.sc-people-section {
  margin: 14px 0 8px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--scc-accent, #3cc0c5);
}

.sc-people-section:first-child {
  margin-top: 0;
}

.sc-people-empty {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6b7a78;
}

.sc-people-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
}

.sc-people-main {
  flex: 1 1 auto;
  min-width: 0;
}

.sc-people-name {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #33413f;
}

.sc-people-name:hover {
  border-color: var(--sc-hair, rgba(58, 47, 42, 0.07));
}

.sc-people-name:focus {
  outline: none;
  border-color: var(--sc-hair-strong, rgba(58, 47, 42, 0.16));
  background: #fff;
}

.sc-people-meta {
  padding: 0 8px;
  font-size: 12px;
  color: #8a9997;
}

.sc-people-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 8px 0;
}

.sc-people-tag {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--sc-hair-strong, rgba(58, 47, 42, 0.16));
  background: transparent;
  color: var(--scc-accent, #3cc0c5);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.sc-people-tag.active {
  color: #fff;
  border-color: var(--scc-accent, #3cc0c5);
  background: var(--scc-accent, #3cc0c5);
}

.sc-people-count {
  flex: 0 0 auto;
  align-self: center;
  font-size: 12px;
  color: #8a9997;
}

.sc-people-del {
  flex: 0 0 auto;
  align-self: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--sc-hair, rgba(58, 47, 42, 0.07));
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  color: #a8918f;
  font-size: 12px;
  line-height: 1;
}

.sc-people-del:hover {
  color: #fff;
  border-color: #c98b8b;
  background: #c98b8b;
}

.sc-people-add {
  border-bottom: none;
  gap: 8px;
}

.sc-people-add-btn {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--sc-hair-strong, rgba(58, 47, 42, 0.16));
  background: transparent;
  color: var(--scc-accent, #3cc0c5);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.sc-people-add-btn:hover {
  background: var(--sc-hair, rgba(58, 47, 42, 0.07));
}

.sc-people-foot {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #8a9997;
}

.sc-people-size {
  white-space: nowrap;
  opacity: 0.85;
}

@media (max-width: 520px) {
  .sc-people-card {
    max-width: 100%;
    max-height: 90vh;
  }
}