/* css/schedule-composer.css — the Maya composer: a sheet on a phone, a modal
   above 900px.
 *
 * Alex chose the slider: *"Yes I'm fine with the slider approach if that's what
 * you meant. Whatever was agreed in the other documents is what we go with."*
 * The other document is maya-inplay.js / SPEC §8 — never a second floating
 * element — so this appears on a tap and leaves when it is done.
 *
 * ⚠️ EVERYTHING HERE IS `.sc-*`, AND NOTHING IN HERE STYLES A `.cc-*`, `.sch-*`
 * OR `.rc-*` CLASS. The thread reuses assistant-panel.css's bubbles and the
 * preview reuses whatever skin the Control Centre's dispatcher mounts inside
 * `.sc-preview-slot`; reaching INTO either from here is how one surface starts
 * quietly restyling another. (The .cc-* / .cpg-* collision of 2026-08-07 is the
 * recorded precedent.)
 *
 * ⚠️ AND NOTHING HERE FIGHTS `.cc-page .btn`. That selector is (0,2,0) and it
 * has beaten a bare class four times in this project. The buttons in the sheet
 * are the design system's own `.btn` / `.btn-primary`, deliberately unmodified
 * — the sheet lays them out with flex and does not restyle them. */

.sc-overlay { display: none; }
.sc-overlay.sc-show {
  display: flex;
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(21, 23, 43, 0.44);
  align-items: flex-end;               /* phone: it rises from the bottom */
  justify-content: center;
}
/* The page under a sheet must not scroll — a phone that scrolls the background
   behind a half-height sheet feels broken in the hand. */
body.sc-locked { overflow: hidden; }

.sc-sheet {
  display: flex; flex-direction: column;
  width: 100%; max-height: 92vh;
  background: var(--surface); color: var(--text);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 40px rgba(21, 23, 43, 0.22);
  animation: sc-rise 180ms cubic-bezier(.2,.7,.3,1);
  overflow: hidden;
}
@keyframes sc-rise { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sc-sheet { animation: none; } }

/* Above 900px it stops being a sheet and becomes an ordinary centred modal —
   the same breakpoint control-centre.css uses to switch the top bar. */
@media (min-width: 901px) {
  .sc-overlay.sc-show { align-items: center; }
  .sc-sheet { max-width: 720px; border-radius: 16px; max-height: 86vh; }
  @keyframes sc-rise { from { transform: scale(.98); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* ── Head ─────────────────────────────────────────────────────────────── */
.sc-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.sc-head-top { display: flex; align-items: center; gap: 10px; }
/* The date, the time and the countdown, as three units that wrap between
   themselves and never inside themselves. See the note at `head` in
   schedule-composer.js: as one text run beside a nowrap countdown, 390px broke
   the date after the month name. */
.sc-head-when {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
}
.sc-day-date, .sc-day-time {
  white-space: nowrap; font-weight: 700; font-size: 15px;
}
/* ⚠️ NO MIDDOT BETWEEN THE DATE AND THE TIME ANY MORE. There was a literal
   " · " here, and it survives a wrap: on the line where the time drops below
   the date, the second line opens with an orphan `·`. A gap says the same
   thing and has nothing to leave behind. */
.sc-x {
  background: none; border: 0; cursor: pointer; color: var(--text-3);
  font-size: 16px; line-height: 1; padding: 6px; margin: -6px -6px -6px 0;
  border-radius: 8px;
}
.sc-x:hover { background: var(--surface-3); color: var(--text); }

.sc-kinds { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.sc-kind {
  position: relative;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  border-radius: 999px; padding: 0 12px; height: 32px; min-height: 0;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
/* 32px painted, 48px of hit area — the target is the minimum, not the paint
   (Apple 44pt / Google 48dp / WCAG 2.5.8 all specify the TARGET). */
.sc-kind::after { content: ''; position: absolute; inset: -8px -2px; }
.sc-kind.sc-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Body ─────────────────────────────────────────────────────────────── */
.sc-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.sc-thread { display: flex; flex-direction: column; gap: 12px; }
.sc-thinking { color: var(--text-3); font-style: italic; }

.sc-preview { display: flex; flex-direction: column; gap: 6px; }
.sc-preview-lab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3);
}
/* The slot is a container and nothing more — what goes inside is the Facebook
   facsimile, the real email in its iframe, or our community post styling, and
   each of those brings its own look. Styling the inside from here would make
   the composer's Facebook post differ from the Control Centre's. */
.sc-preview-slot { min-width: 0; }
.sc-preview-plain {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.55;
}

.sc-field { display: flex; flex-direction: column; gap: 5px; }
.sc-field > span { font-size: 12px; font-weight: 600; color: var(--text-2); }
.sc-field input {
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px;
  font: inherit; font-size: 14px; background: var(--surface); color: var(--text);
  min-height: 44px;
}

.sc-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); min-height: 44px; }
.sc-check input { width: 18px; height: 18px; accent-color: var(--accent); }

.sc-media { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-media-txt { font-size: 13px; color: var(--text-2); flex: 1 1 160px; min-width: 0; }
.sc-media-thumb {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  background: var(--surface-3) center/cover no-repeat;
}
/* Waiting on a file is AMBER, here as everywhere else — red on these surfaces
   means "you can act on this now", and this is a promise, not a fault. */
.sc-media-later {
  background: var(--warn-soft); border-radius: 12px; padding: 10px 12px;
}
.sc-media-later .sc-media-txt { color: #8a5a0c; }

/* ── Foot ─────────────────────────────────────────────────────────────── */
.sc-foot {
  flex-shrink: 0; border-top: 1px solid var(--border-soft);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px; background: var(--surface);
}
.sc-when-wrap { display: flex; flex-direction: column; gap: 6px; }
.sc-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-when-lab { font-size: 12px; font-weight: 600; color: var(--text-3); flex-shrink: 0; }
.sc-when input {
  border: 1px solid var(--border); border-radius: 9px; padding: 7px 9px;
  font: inherit; font-size: 13px; background: var(--surface); color: var(--text);
  min-height: 44px; flex: 1 1 auto; min-width: 0;
}
/* The countdown beside the field, and again in the header. Monospace so it does
   not jiggle the layout as the number ticks down. */
.sc-when-cd, .sc-countdown, .sc-confirm-cd {
  font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--text-3);
  white-space: nowrap;
}
.sc-when-note { font-size: 11.5px; color: var(--text-3); }

/* ── The confirm strip (CC31) ────────────────────────────────────────────
   Amber ground: this is a "are you sure" moment, not an error and not a
   success. It replaces the field while it is up, so there is exactly one thing
   to answer — a picker sitting beside its own confirmation is how you end up
   changing the value you are being asked about. */
.sc-when-confirm {
  background: var(--warn-soft); border-radius: 12px; padding: 11px 13px;
  display: flex; flex-direction: column; gap: 9px;
}
.sc-confirm-q { font-size: 13.5px; color: #8a5a0c; line-height: 1.5; }
.sc-confirm-q b { color: #6d4708; }
.sc-confirm-cd { display: block; color: #8a5a0c; margin-top: 3px; }
.sc-confirm-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-confirm-acts .btn { flex: 1 1 auto; }

/* ── The timing advice (CC30) ────────────────────────────────────────────
   Quiet by design. It is a suggestion with a one-tap accept, and ignoring it
   must cost nothing — so it is a line of text, not a banner. */
.sc-tip {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-2);
}
.sc-tip-line { flex: 1 1 auto; min-width: 0; }
.sc-tip-good .sc-tip-line { color: var(--good); }
.sc-tip-take {
  border: 1px solid var(--border); background: var(--surface); color: var(--accent);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 11px;
  font-weight: 600; cursor: pointer; position: relative;
}
.sc-tip-take::after { content: ''; position: absolute; inset: -10px -4px; }
.sc-tip-take:hover { border-color: var(--accent); }
/* The "why" is a native tooltip carrying the reasoning AND the source, because
   Alex asked for advice that is "solid… good advice" — advice with no visible
   provenance is just another opinion. */
.sc-tip-why {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-3);
  font: inherit; font-size: 10px; font-weight: 700; cursor: help; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.sc-tip-why::after { content: ''; position: absolute; inset: -12px; }

/* The header's proposed line. */
.sc-day-eye {
  display: inline-block; font-family: "JetBrains Mono", monospace;
  font-size: 8.5px; letter-spacing: 0.14em; color: var(--text-4);
  margin-right: 7px; vertical-align: 1px;
}
.sc-zone {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  color: var(--text-3); margin-left: 7px; letter-spacing: .04em;
}

.sc-ask { display: flex; align-items: flex-end; gap: 8px; position: relative; }
.sc-ask textarea {
  flex: 1 1 auto; min-width: 0; resize: none; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 14px; padding: 11px 13px;
  font: inherit; font-size: 15px; line-height: 1.45; max-height: 120px;
  background: var(--surface-2); color: var(--text);
}
/* 16px would be right for iOS zoom, but the surrounding app already sets 15px
   inputs everywhere and a single larger box would look like a mistake. The
   sheet is not zoom-sensitive: it is fixed-position and full width. */
.sc-ask textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sc-send {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--accent); color: #fff; cursor: pointer;
  font-size: 17px; line-height: 1;
}
.sc-send:hover { filter: brightness(1.06); }
/* ⚠️ A DISABLED PRIMARY BUTTON MUST NOT LOOK PRIMARY (R5-1). Found in the 390px
   render: with the ask box disabled under the connect offer, the send arrow sat
   there in full accent purple — the brightest thing on the sheet, and inert.
   `disabled` was true and invisible, which is the same fault as a button that
   can only fail, just quieter. Same treatment for the box itself so the pair
   read as one switched-off control. */
.sc-send:disabled,
.sc-send:disabled:hover {
  background: var(--surface-3); color: var(--text-4);
  cursor: not-allowed; filter: none;
}
.sc-ask textarea:disabled {
  background: var(--surface-2); color: var(--text-3); cursor: not-allowed;
}

.sc-go { display: flex; flex-direction: column; gap: 5px; }
.sc-go .btn { width: 100%; }
/* ⚠️ THIS LINE IS NOT DECORATION. "Put it on Thursday" alone reads as "it is
   going out on Thursday", and it is not — it lands unapproved and waits.
   Alex: "at the end of the day it still needs to be approved manually." */
.sc-go-note { font-size: 11.5px; color: var(--text-3); text-align: center; }

/* ══ THE OFFER, THE FIVE IDEAS, AND THE BRAIN ══════════════════════════════
   CC32 · CC34. Alex: *"Here are five ideas. Which one do you want me to go
   with?"… "If it gives the options with the pills, that would be great."* */
.sc-offer { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; }
.sc-offer-yes {
  align-self: flex-start; position: relative;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer;
}
.sc-offer-yes::after { content: ''; position: absolute; inset: -6px -2px; }
.sc-offer-yes:hover { filter: brightness(1.06); }
.sc-offer-sub { font-size: 11.5px; color: var(--text-3); line-height: 1.45; }
.sc-offer-or { margin-top: 8px; font-size: 12.5px; color: var(--text-3); }
/* A connect that did not happen (R5-1). Warning tone, not red: red on this
   platform means "you can act on this now" (CC-5), and he already is — the
   button is right there. This says the last press did not land. */
.sc-offer-warn {
  margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--warn);
  line-height: 1.45;
}

/* ── Idea chips, INSIDE the message that offered them ─────────────────────
   ⚠️ FULL-WIDTH ROWS, NOT LOZENGES. Alex asked for "pills", and a five-word
   pill is a pill — but these carry a whole subject line plus the reason it was
   suggested, and a row of wrapping lozenges is unreadable at 390px. So: pill
   feel, row layout.

   ⚠️ AND THEY ARE CHECKBOXES NOW, NOT BUTTONS. Ticking two, unticking one and
   ticking a third from an older set is the behaviour Alex described as normal,
   so the affordance has to say "you can pick more than one" before he tries. */
.sc-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.sc-chip {
  display: flex; align-items: flex-start; gap: 9px; text-align: left; width: 100%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 11px; padding: 9px 12px; font: inherit; font-size: 13px;
  line-height: 1.4; cursor: pointer; transition: border-color .12s, background .12s;
  min-height: var(--rk-touch-target, 48px);
}
.sc-chip:hover { border-color: var(--accent-2); background: var(--surface-2); }
.sc-chip-tick {
  flex: 0 0 16px; height: 16px; margin-top: 1px; border-radius: 5px;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  font-size: 10px; line-height: 13px; text-align: center; color: transparent;
}
.sc-chip.sc-on { border-color: var(--accent-2); background: var(--accent-softer); }
.sc-chip.sc-on .sc-chip-tick { background: var(--accent); border-color: var(--accent); color: #fff; }
.sc-chip-body { min-width: 0; }
.sc-chip-line { display: block; }
.sc-chip-why { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 2px; }

/* ⚠️ SPENT, NOT REMOVED. A newer set of ideas greys the older one, but leaves
   it tappable. Deleting it would rewrite what was said; greying shows which
   round a choice came from and still lets him go back to it, which is exactly
   the *"actually, now I've changed my mind"* case. */
.sc-chip.sc-spent { opacity: .5; }
.sc-chip.sc-spent:hover { opacity: 1; }
.sc-chip.sc-spent.sc-on { opacity: 1; }

/* Dead until something is ticked — prevent the impossible choice rather than
   reporting it, the same rule the time control follows. */
.sc-chip-go {
  margin-top: 9px; border: 0; border-radius: 9px; padding: 9px 14px;
  background: var(--accent); color: #fff; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; min-height: var(--rk-touch-target, 48px);
}
.sc-chip-go:hover { filter: brightness(1.06); }
.sc-chip-go.sc-off {
  background: var(--surface-3); color: var(--text-4); cursor: default; filter: none;
}

/* ── A draft: a card in the conversation, not the post ────────────────────
   Outside the speech bubble on purpose. It is an object he can act on, and
   dressing it as something Maya said is what made the old build feel like the
   post had already been decided. */
.sc-draft {
  align-self: flex-start; max-width: 96%; margin: 4px 0 2px;
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--surface); overflow: hidden;
}
.sc-draft-lab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); padding: 9px 12px 0;
}
/* CX20 — what this piece is FOR, in Maya's words, above the copy. Quiet: it is
   context for the read, not a heading competing with the subject line. */
.sc-draft-goal {
  padding: 5px 12px 0; font-size: 11.5px; line-height: 1.4; color: var(--text-2);
}
.sc-goal-k {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin-right: 6px;
}
.sc-draft-body { padding: 4px 12px 10px; font-size: 13px; line-height: 1.5; }
.sc-draft-subj { font-weight: 700; margin-bottom: 3px; }
.sc-draft-acts {
  display: flex; gap: 8px; padding: 9px 12px;
  border-top: 1px solid var(--border-soft); background: var(--surface-2);
}
.sc-draft-btn {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  border-radius: 9px; padding: 7px 13px; font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; min-height: var(--rk-touch-target, 44px);
}
.sc-draft-btn:hover { border-color: var(--accent-2); color: var(--text); }
.sc-draft-btn.sc-pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.sc-draft-btn.sc-pri:hover { filter: brightness(1.06); color: #fff; }

/* The taken one. Green rather than accent, because "this is the one" is a
   state, not an action — the accent belongs to the thing he can still press. */
.sc-draft.sc-taken { border-color: var(--good); }
.sc-draft.sc-taken .sc-draft-lab { color: var(--good); }

/* A code-owned fact in the thread: "You edited the subject line", "Email
   scheduled". Not speech, so not a bubble. */
.sc-note {
  align-self: center; font-size: 11.5px; color: var(--text-3);
  background: var(--surface-3); border-radius: 999px; padding: 4px 12px; margin: 2px 0;
}

/* The knowledge indicator. Quiet, always present, and it is a LINK — the whole
   point is that a coach who never went looking for Maya's brain finds out it
   exists because it is named where her writing appears. */
.sc-brain {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-3); line-height: 1.5;
}
.sc-brain-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--plum);
  flex-shrink: 0; align-self: center;
}
.sc-brain-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ══ Maya, thinking ═══════════════════════════════════════════════════════
   ⚠️ A SHIMMER, NOT A TRANSFORMATION. The first version turned the M into a
   little figure and back on a 4.4s flip. Alex: *"The Maya logo thing isn't
   working. Instead could you give Maya a shimmer? When she's thinking go back
   to the original M but just give it a shimmer while it is."*

   He is right and the reason is worth keeping: at 28px a head-and-shoulders is
   too small to read, so all the eye got was a thing rotating — which says
   "widget busy", not "she is thinking". A light passing over her own avatar
   says the second without changing anything about her.

   The M and its gradient circle are untouched; this only lays a moving
   highlight over the top. */
.sc-ava-think { position: relative; overflow: hidden; }
.sc-ava-think::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,0) 65%);
  transform: translateX(-140%);
  animation: sc-shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sc-shimmer {
  0%   { transform: translateX(-140%); }
  60%  { transform: translateX(140%); }
  100% { transform: translateX(140%); }
}

/* The words beside it breathe very slightly, so the pair reads as one thing
   rather than an animated icon next to static text. */
.sc-thinking { color: var(--text-3); animation: sc-think-fade 2.2s ease-in-out infinite; }
@keyframes sc-think-fade { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ⚠️ MOTION IS A PREFERENCE. Reduced-motion gets a still, slightly lifted
   avatar — a state, with nothing moving. */
@media (prefers-reduced-motion: reduce) {
  .sc-ava-think::after { animation: none; opacity: .25; transform: none; }
  .sc-thinking { animation: none; opacity: .8; }
}

/* ── The kind chips carry state ───────────────────────────────────────────
   Alex: *"there needs to be a switching UX so you can switch between them.
   That's fine but then you have to conclude what you're working on before you
   move to the next one."* A tick means it is on the calendar; a dot means this
   one still holds a draft. No new chrome — the chips were already there. */
.sc-kind-tick { color: var(--good); font-weight: 700; margin-right: 5px; }
.sc-kind-done { border-color: var(--good); }
.sc-kind-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--warn); margin-left: 6px; vertical-align: 1px;
}

/* The conclusion gate. A question in the thread, not a dialog over the modal —
   a browser-style confirm on top of a sheet on top of the Control Centre would
   be the third layer on a 390px screen. */
.sc-gate { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sc-gate-btn {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  border-radius: 9px; padding: 8px 14px; font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; min-height: var(--rk-touch-target, 44px);
}
.sc-gate-btn:hover { border-color: var(--accent-2); color: var(--text); }
.sc-gate-btn.sc-pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.sc-gate-btn.sc-pri:hover { filter: brightness(1.06); color: #fff; }

/* ── Editing inside the preview ───────────────────────────────────────────
   Alex: *"I liked the idea of being able to edit things within the preview."*
   The affordance has to say "you can type here" without turning the preview
   into a form — it is meant to look like the thing that is going out. A dotted
   underline that firms up on hover does that; a box would not. */
.sc-editable {
  border-bottom: 1px dotted var(--border-strong);
  cursor: text; border-radius: 2px; padding-bottom: 1px;
}
.sc-editable:hover { border-bottom-color: var(--accent); }
.sc-editable:focus {
  outline: 2px solid var(--accent); outline-offset: 2px;
  border-bottom-color: transparent; background: var(--accent-softer);
}

/* ⚠️ AMBER, NOT RED. CC-5's rule holds here too: red means "you can act on
   this now" and is reserved for the queue. An unsaved edit is waiting on him,
   which is amber. */
.sc-editbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; border-top: 1px solid var(--border-soft);
  background: var(--warn-soft);
}
.sc-editbar[hidden] { display: none; }
.sc-editbar-lab { flex: 1 1 auto; font-size: 12px; font-weight: 600; color: var(--warn); }
.sc-editbar-btn {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  border-radius: 8px; padding: 6px 13px; font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; min-height: var(--rk-touch-target, 44px);
}
.sc-editbar-btn.sc-pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.sc-editbar-btn.sc-pri:hover { filter: brightness(1.06); }

/* `.sc-preview-swap` was here — a second "Not this one" on the preview header.
   Removed at DP8: it was the same label firing the same action as the taken
   card's own button, both always on screen together. The way back out of a
   taken draft is still one tap, on the card. See the note at the preview markup
   in schedule-composer.js. */
.sc-preview-lab { display: flex; align-items: center; gap: 8px; }

/* Schedule blocked on an unsaved edit: without this it would queue the text
   from BEFORE the edit, and the screen would show one thing while the queue
   held another. */
.sc-go-note.sc-go-warn { color: var(--warn); font-weight: 600; }

/* ══ The shared time control (js/when-picker.js) ═══════════════════════════
   ⚠️ `.wp-*`, NOT `.sc-*`. This control is going to Social, Broadcasts and the
   community wizard once Alex has used it here, and a `.sc-` prefix would mean
   copying the stylesheet with it — which is exactly how the recipient count,
   the kind label and the preview renderers each ended up written three times
   in this project. It lives here for now because the composer is its only
   host; it moves to its own file the day the second surface takes it. */
.wp { display: block; }
.wp-row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 8px 6px 10px; background: var(--surface-2);
}
.wp-lab {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); flex: 0 0 auto;
}
/* The settled time is a BUTTON. Alex: *"when you tap on the actual date, then
   you should be able to edit the date."* The dashed underline is the only
   affordance saying so, so it is not decoration. */
.wp-val {
  flex: 1 1 auto; min-width: 0; text-align: left;
  border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text); cursor: pointer; padding: 4px 0;
  border-bottom: 1.5px dashed var(--border-strong);
}
.wp-val:hover { border-bottom-color: var(--accent); }
.wp-zone { color: var(--text-3); font-weight: 500; margin-left: 6px; font-size: 12px; }
/* `.wp-cd` was here — the row's own countdown. Removed at DP8: with the label,
   the date, a countdown and the calendar button all on one flex row, 390px had
   nothing left to give the date and it broke over three lines. The header
   already carries the countdown. See when-picker.js's note at the row markup. */
.wp-cal {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-2); cursor: pointer; font-size: 13px;
}
.wp-cal:hover { border-color: var(--accent); color: var(--accent); }
.wp-cal-i { width: 16px; height: 16px; display: block; margin: 0 auto; }
.wp.wp-open .wp-cal { border-color: var(--accent); color: var(--accent); }

.wp-panel {
  margin-top: 8px; border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--surface); padding: 11px 12px;
  box-shadow: 0 6px 22px rgba(21, 23, 43, .10);
}
.wp-fields { display: flex; gap: 8px; margin-bottom: 9px; }
.wp-date, .wp-time {
  border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 9px 10px; font: inherit; font-size: 13.5px;
  background: var(--surface); color: var(--text);
  min-height: var(--rk-touch-target, 44px);
}
.wp-date { flex: 1 1 auto; min-width: 0; }
.wp-time { flex: 0 0 108px; }
.wp-date:focus, .wp-time:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The recommendation, at the moment of choosing rather than as furniture. */
.wp-rec {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--accent-soft); background: var(--accent-softer);
  border-radius: 9px; padding: 8px 10px; margin-bottom: 9px;
  font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer;
}
.wp-rec:hover { border-color: var(--accent-2); }
.wp-rec-line { flex: 1 1 auto; }
.wp-rec-take { flex: 0 0 auto; color: var(--accent); font-weight: 700; }
.wp-rec-good { cursor: default; border-color: var(--good-soft); background: var(--good-soft); }

.wp-foot { display: flex; align-items: center; gap: 10px; }
/* ⚠️ THE REASON SITS BESIDE THE BUTTON, NOT UNDER A LIVE ONE. The screenshot
   that produced this whole control had "that time has already passed" printed
   directly above a working **Yes, that time**. */
.wp-why { flex: 1 1 auto; font-size: 11.5px; color: var(--danger); line-height: 1.4; }
.wp-set {
  flex: 0 0 auto; border: 1px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: 9px; padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; min-height: var(--rk-touch-target, 44px);
}
.wp-set:hover { filter: brightness(1.06); }
.wp-set.wp-off {
  background: var(--surface-3); border-color: var(--border); color: var(--text-4);
  cursor: default; filter: none;
}

/* ── The picture row, labelled (CX14) ─────────────────────────────────────
   It used to be two unlabelled buttons floating between the preview and the
   send time, so nothing on screen said which of them it belonged to. The label
   is the fix; the wrapping row keeps it readable at 390px. */
.sc-media { flex-wrap: wrap; align-items: center; }
.sc-media-lab {
  flex: 0 0 100%; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 2px;
}
.sc-media-txt { flex: 1 1 auto; min-width: 0; }

/* ── DP1 · A kind that needs setting up first ──────────────────────────────
   Alex, 2026-08-27: *"If you have got it but you haven't connected your
   Facebook account, then you need to be directed directly to the place to do
   that."* The chip stays on the row — hiding it is how a coach never discovers
   something they pay for (CC-4) — and says quietly that it is not ready yet.

   ⚠️ NOT RED. Red on this platform means one thing: you can act on this now
   (CC-5). An unconnected channel is a fact about their account, not a job
   waiting in the Control Centre, so it is the warning tone and a dot rather
   than an alarm. The dot is a SECOND signal beside the muted text, because
   colour alone is not one. */
.sc-kind-setup { opacity: .72; border-style: dashed; }

/* ⚠️ NOT THE SAME MARK AS `.sc-kind-dot`, AND THAT IS THE POINT (DP8).
   Both of these used to be a 6px filled amber circle in the same position on
   the same chip, meaning two unrelated things: one says "this kind holds an
   unfinished draft", the other says "you have not connected this channel yet".
   The 390px render put them side by side and they were indistinguishable — which
   is CC-5's rule failing in its own terms, because a second signal that looks
   identical to the first is not a second signal.

   So the two are now different in FORM, not only in position:
     · unfinished draft → a filled dot. Something is in there.
     · needs setting up → a chevron. Pressing this takes you somewhere else,
       which is exactly what the chip does (`goSetUp`), so the mark says what
       will happen rather than merely that something is amiss.
   Still the warning tone, never red: red on this platform means "you can act on
   this now" and an unconnected channel is a fact about the account. */
.sc-kind-setup-dot {
  display: inline-block; margin-left: 5px; color: var(--warn);
  font-size: 13px; font-weight: 700; line-height: 1;
}