/**
 * sales-call.css — the call room's own look (Sales Reps P3): the dark stage with its two tiles and controls,
 * shared by the rep's call view (js/sales-reps-call.js, in the app) and the customer's join page
 * (sales-join.html, public), plus the rep's call layout and assist column.
 *
 * Copied from the approved playground (docs/projects/sales-reps/playground-v0.2.html, "rep: call" and the
 * prospect's "Joining the call"), on the platform's tokens (css/design-tokens.css). Everything is prefixed
 * `scl-`. The shared Sales Reps classes (`sr-…`, css/sales-reps.css) and the app-shell primitives (.card,
 * .btn, .badge, .page-head) are used as they are and not redefined here.
 *
 * Sizes (CODING-STANDARDS, Design principles): body text 15px, nothing a person reads under 13px (the mono
 * micro labels), and every control a 48px hit area (painted smaller where a pill reads better, with the
 * target grown by ::after, never a thick button).
 */

/* ── the stage's colors, declared once. An app token where one exists; a value only where none does. ── */
:root {
  --scl-stage: var(--text);              /* the app's dark surface (.btn-dark, toasts): #15172b */
  --scl-tile: #26294a;                   /* no token: a tile raised off the dark stage (the playground's --stage-2) */
  --scl-control-hover: #313563;          /* no token: a stage control under the pointer */
  --scl-control-pressed: #3a3e6e;        /* no token: a stage control held on (aria-pressed) */
  --scl-on-stage: #eef0ff;               /* no token: text on the dark stage (the playground's --on-stage) */
  --scl-link: var(--accent-soft);        /* a link on the stage: #efeaff */
  --scl-ok: var(--good-soft);            /* "Agreed to recording", the microphone level: #e2f3ea */
  --scl-rec: var(--salmon);              /* REC and its dot: #f17d6e */
  --scl-speaking: var(--accent-2);       /* the ring round whoever is talking: #8b6dff */
  --scl-go: var(--accent);               /* the one primary action on the stage */
  --scl-go-hover: var(--accent-deep);   /* the primary under the pointer, as .btn-primary:hover */
  --scl-end: var(--danger);              /* End call, Leave the call: #c0423a */
  --scl-off: #4a2a35;                    /* no token: a muted microphone or stopped camera, dark */
  --scl-off-text: var(--danger-soft);    /* its words: #fbe5e3 */
  --scl-face: linear-gradient(135deg, var(--accent), var(--accent-2));       /* you, with no camera */
  --scl-face-them: linear-gradient(135deg, var(--salmon), var(--rose));      /* them, with no camera */
  --scl-scrim: rgba(0, 0, 0, .35);       /* no token: the name label over a picture */
  --scl-line: rgba(255, 255, 255, .35);  /* no token: an outline on the stage */
  --scl-wash: rgba(255, 255, 255, .1);   /* no token: a light wash on the stage (hover, a note, the level track) */
  --scl-info-soft: #e8efff;              /* no token: an email or a link to something said (the playground's blue chip) */
  --scl-info: #2c4fb3;                   /* no token: its words */
  --scl-waiting: var(--good);            /* "Waiting in the room": somebody is there */
  --scl-ring: var(--salmon);             /* the ring round Ring them while they have not joined (v0.5) */
  /* round 7, playground v0.6's tile row, Get ready and the note on the waiting screen */
  --scl-info-line: #cdd9fb;              /* no token: the edge of a note shown in a waiting room (v0.6 .t6-note) */
  --scl-warn-line: #f0c97a;              /* no token: a tile's edge with 5 minutes left, or a caller waiting (v0.6 .t6.warn) */
  --scl-warn-wash: #fffaf0;              /* no token: that tile's background */
  --scl-over-line: #efb1ab;              /* no token: a tile's edge once the call runs over (v0.6 .t6.over) */
  --scl-over-wash: #fff6f5;              /* no token: that tile's background */
  --scl-wait-glow: rgba(184, 116, 16, .45);   /* no token: the pulse round "In the room since" (v0.6 t6pulse, --warn at 45%) */
  --scl-ready-from: #eef3ff;             /* no token: Get ready's wash, left (v0.6 .r6) */
  --scl-ready-to: #f7f9ff;               /* no token: Get ready's wash, right */
  --scl-ready-line: #b9cbfb;             /* no token: Get ready's edge */
}

/* ── the layout of the rep's call: video and transcript, then the assist column ── */
.scl-callgrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.scl-col, .scl-assist { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* app-shell's `.card + .card { margin-top }` staggers cards that sit in a column with its own gap. */
.scl-callgrid .card + .card, .scl-split .card + .card { margin-top: 0; }

/* ── the stage ── */
.scl-stage { background: var(--scl-stage); border-radius: var(--radius-lg, 18px); overflow: hidden; color: var(--scl-on-stage); min-width: 0; }
.scl-stagehead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px 0; font-size: 14px; min-height: 34px; }
.scl-stagehead .scl-muted { opacity: .8; }
.scl-rec { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .04em; color: var(--scl-rec); }
.scl-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--scl-rec); }
.scl-ok { color: var(--scl-ok); }
.scl-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.scl-tiles.scl-solo { grid-template-columns: minmax(0, 380px); justify-content: center; }
.scl-tile { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 12px; background: var(--scl-tile);
  display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 0; }
.scl-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scl-tile video.scl-mirror { transform: scaleX(-1); }
.scl-tile.scl-speaking { box-shadow: 0 0 0 2px var(--scl-speaking) inset; }
.scl-face { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: var(--surface); background: var(--scl-face); background-size: cover; background-position: center; }
.scl-face.scl-face-them { background: var(--scl-face-them); background-size: cover; background-position: center; }
.scl-name { position: absolute; left: 10px; bottom: 8px; font-size: 13px; background: var(--scl-scrim); padding: 2px 8px; border-radius: 6px;
  max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 1; }
.scl-level { position: absolute; right: 10px; bottom: 10px; width: 54px; height: 6px; border-radius: 99px; background: var(--scl-wash); overflow: hidden; z-index: 1; }
.scl-level > i { display: block; height: 100%; width: 0; background: var(--scl-ok); border-radius: 99px; transition: width .08s linear; }
.scl-ctrl { display: flex; gap: 8px; justify-content: center; padding: 6px 10px 16px; flex-wrap: wrap; }
/* Painted 44px; ::after grows the target to 48px without a thicker pill. */
.scl-ctrl button { position: relative; border: 0; border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 600;
  background: var(--scl-tile); color: var(--scl-on-stage); font-family: inherit; cursor: pointer; min-height: 44px; }
.scl-ctrl button::after { content: ""; position: absolute; inset: -2px; }
.scl-ctrl button:hover { background: var(--scl-control-hover); }
.scl-ctrl button[aria-pressed="true"] { background: var(--scl-control-pressed); }
.scl-ctrl button.scl-off { background: var(--scl-off); color: var(--scl-off-text); }
.scl-ctrl button.scl-go { background: var(--scl-go); color: var(--surface); }
.scl-ctrl button.scl-go:hover { background: var(--scl-go-hover); }
.scl-ctrl button.scl-end { background: var(--scl-end); color: var(--surface); }
.scl-ctrl button[disabled] { opacity: .5; cursor: not-allowed; }
/* The small outlined button on the stage (They said yes, Try again, Tap to hear): painted 34px, a 48px target. */
.scl-consent { position: relative; border: 1px solid var(--scl-line); background: transparent; color: var(--scl-on-stage); border-radius: 999px;
  padding: 6px 13px; min-height: 34px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; }
.scl-consent::after { content: ""; position: absolute; inset: -7px -2px; }
.scl-consent:hover { background: var(--scl-wash); }
.scl-stage-msg { padding: 2px 18px 14px; text-align: center; font-size: 14px; opacity: .9; }
.scl-stage-msg:empty { display: none; }
.scl-stage-msg b { opacity: 1; }

/* ── the live transcript ── */
.scl-transcript { max-height: 360px; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.scl-line { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 10px; font-size: 15px; }
.scl-line .scl-who { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); padding-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.scl-line.scl-rep .scl-who { color: var(--accent-deep); }
.scl-empty { padding: 28px 20px; text-align: center; color: var(--text-3); font-size: 15px; }

/* ── the assist column ── */
.scl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.scl-head h2, .scl-callgrid h2 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.01em; margin: 0; }
.scl-body { padding: 16px 20px; }
.scl-small { font-size: 13px; }
.scl-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.scl-muted-t { color: var(--text-3); }
.scl-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 15px; }
.scl-checks div { display: flex; align-items: center; gap: 8px; color: var(--text-3); min-width: 0; }
.scl-checks .scl-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); flex: 0 0 18px;
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--surface); }
.scl-checks .scl-done { color: var(--text); }
.scl-checks .scl-done .scl-box { background: var(--good); border-color: var(--good); }
.scl-asknext { background: var(--accent-softer); border: 1px solid var(--accent-soft); border-radius: 12px; padding: 12px 14px; }
.scl-asknext .scl-k { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.scl-asknext p { margin: 4px 0 0; font-size: 15px; }
.scl-cards { display: flex; flex-direction: column; gap: 12px; }
.scl-assist [hidden] { display: none !important; }
.scl-assist .sr-acard .scl-src { margin-top: 6px; font-size: 13px; color: var(--text-3); }
.scl-assist .sr-acard.history { border-left: 4px solid var(--accent-deep); }
.scl-off-note { padding: 18px 20px; font-size: 15px; color: var(--text-2); }
.scl-off-note b { color: var(--text); display: block; margin-bottom: 2px; }
details.scl-brief > summary { cursor: pointer; list-style: none; min-height: 48px; }
details.scl-brief > summary::-webkit-details-marker { display: none; }
details.scl-brief > summary h2::after { content: " +"; color: var(--text-3); font-weight: 600; }
details.scl-brief[open] > summary h2::after { content: " \2212"; }
.scl-dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 15px; }
.scl-dl dt { color: var(--text-3); font-size: 13px; padding-top: 2px; }
.scl-dl dd { margin: 0; overflow-wrap: anywhere; }
.scl-dl ul { margin: 0; padding-left: 18px; }
.scl-foot { font-size: 13px; color: var(--text-3); margin: 0; }
.scl-ended { padding: 22px 20px; text-align: center; }
.scl-ended h2 { margin-bottom: 6px; }
.scl-ended .btn { margin-top: 12px; }

/* ── round 7: the call screen as playground v0.6 draws it (repCall6): the tile row, the widget bar, the grid ── */
.scl-stage.scl-small .scl-tile { aspect-ratio: 16 / 7; min-height: 116px; }   /* v0.6 .c5-room.small .tile */
.scl-notyet { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: .85; }
.scl-notyet[hidden] { display: none; }
.scl-waittile .scl-face { display: none; }
.scl-state { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.scl-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--scl-line); }
.scl-state.scl-on i { background: var(--scl-rec); }
.scl-ctrl button.scl-ring { box-shadow: 0 0 0 2px var(--scl-ring); }
.scl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scl-after .scl-body p { margin: 0; font-size: 15px; }

/* The tile row (tileThis6, tileNext6): this call, then the next call. */
.scl-trow6 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; margin: 0 0 14px; }
.scl-t { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.scl-t.scl-warn { border-color: var(--scl-warn-line); background: var(--scl-warn-wash); }
.scl-t.scl-warn .scl-tbar i { background: var(--warn); }
.scl-t.scl-over { border-color: var(--scl-over-line); background: var(--scl-over-wash); }
.scl-t.scl-over .scl-tbar i { background: var(--danger); }
.scl-tk { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scl-tk .badge { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
.scl-tsp { flex: 1; }
.scl-ttop { display: flex; align-items: center; gap: 12px; min-width: 0; }
.scl-tav { flex: 0 0 40px; }
.scl-tmin { min-width: 0; }
.scl-tname { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -.01em; line-height: 1.2; }
.scl-tline { font-size: 14px; color: var(--text-2); }
.scl-tline b { color: var(--text); }
.scl-tdanger { color: var(--danger); }
.scl-tdanger b { color: var(--danger); }
.scl-tthen { font-size: 13px; color: var(--text-3); }
.scl-trow { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.scl-trow.scl-tmid { align-items: center; }
.scl-tbig { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1; }
.scl-tbar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 2px; }
.scl-tbar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.scl-twait { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 3px 10px; }
.scl-twait i { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); animation: scl-tpulse 1.6s infinite; }
.scl-twait.scl-no { color: var(--text-2); background: var(--surface-3); }
.scl-twait.scl-no i { background: var(--text-4); animation: none; }
@keyframes scl-tpulse { 0% { box-shadow: 0 0 0 0 var(--scl-wait-glow); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .scl-twait i { animation: none; } }
.scl-tnote { font-size: 13px; background: var(--scl-info-soft); border: 1px solid var(--scl-info-line); border-radius: 10px; padding: 7px 10px; color: var(--scl-info); overflow-wrap: anywhere; }
.scl-inl { display: inline; padding: 0; min-height: 0; font-size: 13px; color: var(--scl-info); }
.scl-tacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
/* Decision 4, in the tile's own pattern: the suggestion and a button per free rep. */
.scl-thand { border-top: 1px solid var(--scl-warn-line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.scl-thand p { margin: 0; font-size: 14px; color: var(--text-2); }
.scl-thand b { color: var(--text); }

/* The grid: the room, red flags and (ended) After this call and Get ready, then the left widgets; Covered so far, then the
   right widgets. On a phone it is one column in v0.6's order: room, flag, after, ready, covered, left, right. */
.scl-grid6 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 14px; }
.scl-stack6 { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.scl-o { min-width: 0; }
.scl-o[hidden] { display: none; }
.scl-grid6 .card + .card { margin-top: 0; }
.scl-o > .sr-acard + .sr-acard { margin-top: 12px; }

/* Ended, with another call lined up: Get ready (ready6). */
.scl-ready { background: linear-gradient(100deg, var(--scl-ready-from), var(--scl-ready-to)); border-color: var(--scl-ready-line); }
.scl-ready .scl-head { gap: 10px; }
.scl-ready .scp-goal { font-size: 16px; }
.scl-firstly { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--accent-softer); border: 1px solid var(--accent-soft); border-radius: 12px; padding: 10px 12px; font-size: 15px; }
.scl-firstly span { flex: 1 1 180px; }
.scl-good { color: var(--good); font-size: 15px; margin: 0; }
.scp-row.scl-still { cursor: default; }
.scp-row.scl-still:hover .scp-t { color: inherit; }

/* Message the room (roomNoteSheet6). */
.scl-sheetnote { background: var(--accent-softer); border: 1px solid var(--accent-soft); border-radius: 10px; padding: 10px 12px; font-size: 15px; }
.scl-rnq { display: flex; flex-direction: column; gap: 8px; }
.scl-rnq .scp-pill { justify-content: flex-start; text-align: left; min-height: 44px; }

/* The widget bar (bar6) and a widget (widget6, menu6). */
.scw-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 12px; margin: 0 0 14px; font-size: 13px; color: var(--text-2); position: relative; }
.scw-hint { flex: 1 1 260px; min-width: 120px; line-height: 1.45; }
.scw-hint b { color: var(--text); }
.scw-undo { font-size: 13px; }
.scw-link { border: 0; background: none; padding: 0; color: var(--accent-deep); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.scw-pop { position: absolute; z-index: 30; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 12px 32px var(--scl-scrim);
  padding: 6px; min-width: 230px; display: flex; flex-direction: column; }
.scw-pop button { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: none; border-radius: 8px; padding: 9px 10px; font-size: 14px;
  color: var(--text); min-height: 44px; width: 100%; font-family: inherit; cursor: pointer; }
.scw-pop button:hover, .scw-pop button:focus-visible { background: var(--surface-2); }
.scw-pop button[disabled] { color: var(--text-4); cursor: default; background: none; }
.scw-pop .scw-sep { height: 1px; background: var(--border-soft); margin: 4px 2px; }
.scw-pop p { font-size: 13px; color: var(--text-3); padding: 8px 10px; margin: 0; }
.scw-bar .scw-pop { right: 8px; top: calc(100% + 6px); }
.scw-col { display: flex; flex-direction: column; gap: 16px; min-height: 40px; min-width: 0; }
.scw-col .card + .card { margin-top: 0; }
.scw { position: relative; min-width: 0; }
.scw-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 6px; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.scw-folded .scw-head { border-bottom: 0; }
.scw-tt { flex: 1; min-width: 0; padding: 2px 0; }
.scw-tt h2 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.25; margin: 0; letter-spacing: -.01em; }
.scw-sub { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.scw-sub[hidden] { display: none; }
.scw-meta { font-size: 13px; color: var(--text-3); }
.scw-grip { position: relative; width: 32px; height: 40px; border: 0; background: none; border-radius: 8px; cursor: grab; touch-action: none;
  display: flex; align-items: center; justify-content: center; color: var(--text-4); flex: 0 0 32px; }
.scw-grip::after { content: ""; position: absolute; inset: -4px -6px; }
.scw-grip:hover, .scw-grip:focus-visible { color: var(--text-2); background: var(--surface-2); }
.scw-grip svg { width: 12px; height: 18px; fill: currentColor; }
.scw-ib { position: relative; width: 40px; height: 40px; border: 0; background: none; border-radius: 8px; color: var(--text-3); display: flex; align-items: center;
  justify-content: center; font-size: 16px; flex: 0 0 40px; cursor: pointer; font-family: inherit; }
.scw-ib::after { content: ""; position: absolute; inset: -4px; }
.scw-ib:hover, .scw-ib:focus-visible { background: var(--surface-2); color: var(--text); }
.scw-chev { display: inline-block; transition: transform .15s; font-size: 13px; }
.scw-folded .scw-chev { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .scw-chev { transition: none; } }
.scw .scw-pop { right: 8px; top: 52px; }
.scw-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.scw-body[hidden] { display: none; }
.scw-empty { padding: 14px 18px; font-size: 14px; color: var(--text-3); }
.scw-ghost { opacity: .4; }
.scw-dragging { opacity: .55; box-shadow: 0 0 0 2px var(--accent); border-radius: var(--radius, 14px); }
.scw-moved { animation: scw-moved 1.2s ease; }
@keyframes scw-moved { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .scw-moved { animation: none; } }
.scw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

/* What the widgets show (sales-call-panels.js), copied from v0.5's c5- styles onto the app's tokens. */
.scp-stack { display: flex; flex-direction: column; gap: 10px; }
.scp-k { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 4px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scp-m { font-size: 13px; color: var(--text-3); margin: 0; }
.scp-src { font-size: 13px; color: var(--text-3); margin: 2px 0 0; }
.scp-empty { font-size: 15px; color: var(--text-3); margin: 0; }
.scp-line { font-size: 15px; margin: 0; }
.scp-kv { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 7px 14px; font-size: 15px; margin: 0; }
.scp-kv dt { color: var(--text-3); font-size: 13px; padding-top: 2px; }
.scp-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.scp-badge { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; font-family: Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.scp-good { background: var(--good-soft); color: var(--good); }
.scp-warn { background: var(--warn-soft); color: var(--warn); }
.scp-info { background: var(--accent-softer); color: var(--accent-deep); }
.scp-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 0; border: 0; border-top: 1px solid var(--border-soft); background: none;
  text-align: left; width: 100%; color: inherit; font: inherit; font-size: 15px; cursor: pointer; min-height: 48px; }
.scp-row:first-child, .scp-k + .scp-row { border-top: 0; }
.scp-row:hover .scp-t { color: var(--accent-deep); }
.scp-rowt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.scp-t { font-weight: 600; }
.scp-x { font-size: 14px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scp-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; font-family: "JetBrains Mono", ui-monospace, monospace; background: var(--surface-2); color: var(--text-2); }
.scp-k-email_out, .scp-k-email_in { background: var(--scl-info-soft); color: var(--scl-info); }
.scp-k-text_out, .scp-k-text_in { background: var(--good-soft); color: var(--good); }
.scp-k-case { background: var(--warn-soft); color: var(--warn); }
.scp-k-call, .scp-k-checkin, .scp-k-booking { background: var(--accent-softer); color: var(--accent-deep); }
.scp-prep { display: flex; flex-direction: column; gap: 8px; }
.scp-goal { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0; }
.scp-quote { font-size: 15px; color: var(--text-2); margin: 0; }
.scp-li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.scp-li p { margin: 0; }
.scp-grow { min-width: 0; flex: 1 1 auto; }
.scp-stuck { border-left: 3px solid var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 8px 12px; font-size: 15px; }
.scp-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 999px; padding: 3px 10px; font-size: 13px; color: var(--text-2); font-weight: 600; font-family: inherit; }
button.scp-chip { position: relative; cursor: pointer; min-height: 36px; background: var(--scl-info-soft); color: var(--scl-info); align-self: flex-start; }
button.scp-chip::after { content: ""; position: absolute; inset: -6px -2px; }
.scp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.scp-tp { display: block; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 15px; color: inherit; cursor: pointer; min-height: 48px; }
.scp-tp:hover { border-color: var(--accent-2); }
.scp-tp.on { border-color: var(--accent); background: var(--accent-softer); }
.scp-tpk { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 3px; }
.scp-why { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--accent-soft); font-size: 14px; color: var(--text-2); }
.scp-asknext { background: var(--accent-softer); border: 1px solid var(--accent-soft); border-radius: 12px; padding: 12px 14px; }
.scp-asknext .scp-k { color: var(--accent-deep); margin: 0; }
.scp-asknext p { margin: 4px 0 0; font-size: 15px; }
.scp-covered .scl-body { display: flex; flex-direction: column; gap: 10px; }
.scp-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.scp-pt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; text-align: left; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: 9px 11px; color: inherit; font: inherit; font-size: 15px; min-width: 0; min-height: 48px; cursor: pointer; }
.scp-pt:hover { border-color: var(--accent-2); }
.scp-pt b { font-weight: 600; display: block; }
.scp-ps { font-size: 13px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scp-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); margin-top: 2px; }
.scp-pt.st-in .scp-dot { border-color: var(--warn); background: linear-gradient(90deg, var(--warn) 50%, transparent 50%); }
.scp-pt.st-done .scp-dot { border-color: var(--good); background: var(--good); }
.scp-pt.st-done { background: var(--good-soft); border-color: var(--good-soft); }
.scp-pt.st-in { background: var(--warn-soft); border-color: var(--warn-soft); }
.scp-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); }
.scp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.scp-legend i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-strong); }
.scp-legend i.in { border-color: var(--warn); background: linear-gradient(90deg, var(--warn) 50%, transparent 50%); }
.scp-legend i.done { border-color: var(--good); background: var(--good); }
.scp-foot { border-top: 1px solid var(--border-soft); padding-top: 10px; }
.scp-q { font-size: 15px; font-weight: 600; }
.scp-q .scp-m { font-weight: 400; display: inline; }
.scp-ans { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.scp-ans.hi { border-left: 4px solid var(--good); }
.scp-ans.mid { border-left: 4px solid var(--warn); }
.scp-ans.lo { border-left: 4px solid var(--border-strong); background: var(--surface-2); }
.scp-ans.lo .scp-at { color: var(--text-3); }
.scp-at { font-size: 15px; }
.scp-cf { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 13px; color: var(--text-3); flex-wrap: wrap; }
.scp-bar { width: 80px; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; flex: 0 0 80px; }
.scp-bar i { display: block; height: 100%; border-radius: 99px; }
.hi .scp-bar i { background: var(--good); }
.mid .scp-bar i { background: var(--warn); }
.lo .scp-bar i { background: var(--text-4); }
.scp-pct { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; color: var(--text-2); }
.scp-lab { font-weight: 600; }
.hi .scp-lab { color: var(--good); }
.mid .scp-lab { color: var(--warn); }
.lo .scp-lab { color: var(--text-3); }
.scp-hist details { border-top: 1px solid var(--border-soft); }
.scp-hist summary { cursor: pointer; padding: 10px 0; min-height: 44px; font-size: 15px; display: flex; justify-content: space-between; gap: 10px; list-style: none; }
.scp-hist summary::-webkit-details-marker { display: none; }
.scp-in { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.scp-rech { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--good); margin: 4px 0 0; }
.scp-rech.all { color: var(--text-3); }
.scp-of { padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 12px; display: flex; flex-direction: column; gap: 3px; }
.scp-of h3 { font-size: 15px; margin: 0; }
.scp-of.scp-rec { background: var(--good-soft); border-color: var(--good-soft); }
.scp-price { font-size: 15px; margin: 0; font-weight: 600; }
.scp-fit { font-size: 14px; color: var(--good); margin: 2px 0 0; }
.scp-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.scp-pill { position: relative; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 999px; padding: 7px 13px; min-height: 36px; font-size: 14px;
  font-weight: 600; color: var(--text); font-family: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.scp-pill::after { content: ""; position: absolute; inset: -6px -2px; }
.scp-pill:hover { background: var(--surface-2); }
.scp-pill[disabled] { opacity: .5; cursor: default; }
.scp-pkg { border: 1px dashed var(--accent-2); border-radius: 12px; padding: 12px 14px; background: var(--accent-softer); display: flex; flex-direction: column; gap: 4px; }
.scp-pkg p { margin: 0; }
.scp-declined { color: var(--warn); }
.scp-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); display: inline-block; animation: scp-spin .9s linear infinite; vertical-align: -1px; }
@keyframes scp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scp-spin { animation: none; } }
.scp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scp-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.scp-field label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.scp-inp { border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; min-height: 44px; font: inherit; font-size: 15px; background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box; }
.scp-ro { background: var(--surface-2); }
.scp-ta { min-height: 110px; resize: vertical; }
.scp-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.scp-day b { display: block; font-size: 17px; font-family: "Bricolage Grotesque", system-ui, sans-serif; }
.scp-day { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 8px 6px; min-height: 44px; text-align: center; font: inherit; font-size: 14px; cursor: pointer; color: inherit; }
.scp-day.on { border-color: var(--accent); background: var(--accent-softer); color: var(--accent-deep); font-weight: 600; }
.scp-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.scp-slot { border: 1px solid var(--accent); color: var(--accent-deep); background: var(--surface); border-radius: 10px; padding: 8px 4px; min-height: 44px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.scp-slot:hover { background: var(--accent-softer); }
.scp-slot.on { background: var(--accent); color: var(--surface); }
.scp-soon { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--good); }
.scp-h3 { font-size: 17px; margin: 0; }
.scp-err { color: var(--danger); font-size: 14px; margin: 0; min-height: 0; }
.scp-err:empty { display: none; }
.scp-link { border: 0; background: none; color: var(--accent-deep); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; padding: 8px 0; min-height: 36px; cursor: pointer; align-self: flex-start; }
.scp-mail { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); font-size: 15px; white-space: pre-wrap; }
.scp-sayback { background: var(--accent-softer); border: 1px solid var(--accent-soft); border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.scp-quote2 { border-left: 3px solid var(--border-strong); padding: 4px 0 4px 12px; font-size: 15px; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.scp-tm { opacity: .75; font-size: 13px; }
.scp-hcard { border: 1px solid var(--border); border-left: 4px solid var(--accent-deep); border-radius: 12px; padding: 10px 12px; }
.scp-hcard p { margin: 0; font-size: 15px; }
.scp-hcard .scp-k { margin: 0 0 2px; }
.scp-sheet-tx { max-height: 50vh; padding: 0; }

/* The playground's phone width (narrow6, 1100px): one column, in its order. */
@media (max-width: 1100px) {
  .scl-callgrid { grid-template-columns: minmax(0, 1fr); }
  .scl-trow6, .scl-grid6 { grid-template-columns: minmax(0, 1fr); }
  .scl-stack6 { display: contents; }
  .scl-grid6 .scl-o { order: var(--o); }
}
@media (max-width: 620px) { .scw-hint { flex: 1 1 100%; } }
@media (max-width: 520px) {
  .scp-pts, .scp-grid2 { grid-template-columns: minmax(0, 1fr); }
  .scp-kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .scp-kv dd { margin-bottom: 6px; }
  .scp-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scp-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scw-body { padding: 12px 14px 14px; }
  .scl-checks { grid-template-columns: minmax(0, 1fr); }
  .scl-dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .scl-dl dd { margin-bottom: 8px; }
  .scl-ctrl button { padding: 10px 13px; }
}
@media (prefers-reduced-motion: reduce) { .scl-level > i { transition: none; } }