/* ============================================================
   KEEP CALM - refined poster creation flow (21-refined).
   Contained, calm hierarchy: centered ~1140px container, modest
   type scale, pill buttons. The page now lives inside the REAL
   site chrome (wt-mini bar + masthead + kc-footer from
   cdo-watchtower.css), so everything here is scoped to
   #refined-create-root and never restyles the chrome.
   Light default; html[data-mode="batman"] is dark. All ink/muted/
   accent pairs verified >= 4.5:1 (text) and >= 3:1 (UI borders)
   in BOTH modes against the site page backgrounds.
   ============================================================ */
:root {
  --rc-bg: #f7f4ee;           /* matches --wt-page-bg (light shell) */
  --rc-panel: #ffffff;
  --rc-panel-deep: #eef1ec;
  --rc-ink: #171a18;
  --rc-muted: #596159;
  --rc-rule: #cbd2cb;
  --rc-control: #596159;      /* control borders: 5.87:1 on bg */
  --rc-accent: #2c5f4e;
  --rc-accent-soft: #a2d1bf;
  --rc-accent-ink: #08120d;
  --rc-on-accent: #fffdf9;    /* label on the DARK primary fill: 7.6:1 on #2c5f4e (same pair as the header Donate button) */
  --rc-placeholder: #6f7772;  /* dimmed suggestion text: 4.61:1 on the white input */
  --rc-error: #b42318;        /* error text: 5.9:1 on the light page bg */
}

html[data-mode="batman"] {
  --rc-bg: #12150f;           /* matches the dark body behind the shell */
  --rc-panel: #1b211e;
  --rc-panel-deep: #121714;
  --rc-ink: #f3f0e8;
  --rc-muted: #aab2aa;
  --rc-rule: #303a34;
  --rc-control: #667169;      /* 3.47:1 on bg */
  --rc-accent: #9ed4bf;
  --rc-accent-soft: #9ed4bf;
  --rc-accent-ink: #07110c;
  --rc-on-accent: #07110c;    /* label on the primary fill: in dark mode the primary IS the light mint, so ink stays dark (>= 9:1) */
  --rc-placeholder: #8a938c;  /* dimmed suggestion text: 5.17:1 on the dark input */
  --rc-error: #ff6b6b;        /* bright coral (owner's pick): 6.6:1 on the dark page bg */
}

/* Scoped reset: ONLY inside the creator (the real chrome opts into
   box-sizing per component and must not be restyled from here).
   ROOT-CAUSE FIX (owner 2026-07-15, invisible button text): these resets
   used plain #refined-create-root selectors, and an ID beats ANY class, so
   "color: inherit" was overriding every button's own class color
   (.rc-primary's dark ink lost to the inherited light page ink = mint text
   on the mint fill in dark mode). :where() keeps the reset at ZERO
   specificity, so a component's own colors always win and this cannot
   recur no matter what buttons are added later. */
#refined-create-root, #refined-create-root *, #music-create-root, #music-create-root * { box-sizing: border-box; }
#refined-create-root, #music-create-root { font-family: "Montserrat", system-ui, sans-serif; color: var(--rc-ink); }
:where(#refined-create-root, #music-create-root) button, :where(#refined-create-root, #music-create-root) input, :where(#refined-create-root, #music-create-root) select, :where(#refined-create-root, #music-create-root) textarea { font: inherit; }
:where(#refined-create-root, #music-create-root) button { color: inherit; }
.rc-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* ---------- page container: contained, never edge-to-edge ---------- */
#refined-create-root, #music-create-root { min-height: 70vh; }
/* Kaʻo 2026-07-22: the share step's header rhythm is the house standard for
   EVERY creation page and step (it used to be the only step that tightened,
   which left the phrase/video/song steps sitting ~21px lower on wide screens). */
.rc-page { width: min(1140px, 100%); margin: 0 auto; padding: clamp(18px, 2.2vw, 26px) 0 72px; }
.rc-loading { padding: 80px 24px; text-align: center; color: var(--rc-muted); font-family: "Montserrat", system-ui, sans-serif; }
.rc-live { position: fixed; left: 50%; bottom: 18px; z-index: 100; transform: translateX(-50%); min-width: 1px; max-width: min(560px, calc(100vw - 32px)); padding: 0; border-radius: 8px; background: var(--rc-ink); color: var(--rc-bg); font-family: "Montserrat", system-ui, sans-serif; font-size: 14px; font-weight: 700; text-align: center; }
.rc-live:not(:empty) { padding: 10px 16px; }

/* ---------- screen headers ---------- */
.rc-screen-head { margin: 0 auto clamp(14px, 2vw, 20px); text-align: center; }
.rc-screen-head h1 { margin: 0; font-family: inherit; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; }
.rc-screen-head p { margin: 8px 0 0; color: var(--rc-muted); font-size: 16px; line-height: 1.45; }
/* Text links follow the design system (owner 2026-07-15): accent (light
   green in dark mode), BOLD, underline only on hover. */
.rc-link { padding: 0; border: 0; background: transparent; color: var(--rc-accent); font-size: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.rc-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.rc-heading { margin: 0 0 14px; font-size: 20px; line-height: 1.25; font-weight: 700; }

/* ---------- compose ---------- */
.rc-compose { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.rc-compose__poster { display: flex; justify-content: center; }
.rc-compose__panel { min-width: 0; padding-top: 4px; }
/* No box around the label + field (owner note): the prefix sits left,
   the input to its right, and the hint UNDER the field, aligned with it. */
.rc-entry { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: center; }
.rc-entry__prefix { color: var(--rc-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; }
/* Typed words DISPLAY in caps (the poster is all caps); the underlying value
   stays exactly as typed for the engine. Placeholder is a clearly dimmed,
   all-caps bank suggestion (contrast-checked per mode). */
.rc-entry input { min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--rc-control); border-radius: 8px; outline: none; background: var(--rc-panel); color: var(--rc-ink); font-size: 17px; font-weight: 500; text-transform: uppercase; }
.rc-entry input::placeholder { color: var(--rc-placeholder); opacity: 1; text-transform: uppercase; }
.rc-entry input:focus-visible { border-color: var(--rc-accent); outline: 3px solid var(--rc-accent); outline-offset: 2px; }
.rc-helper { grid-column: 2; min-height: 22px; margin: 0; color: var(--rc-muted); font-size: 14px; line-height: 1.4; }
/* The under-field region doubles as the ERROR line (owner 2026-07-15):
   bright coral in dark mode, deep red in light, both AA on the page bg. */
.rc-helper--error { color: var(--rc-error); font-weight: 600; }
/* Clear air between the three sections. Order (owner 2026-07-15):
   sentence field -> moods -> colors. */
.rc-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.rc-fieldset--moods { margin: clamp(30px, 3.4vw, 42px) 0; }
.rc-fieldset--moods .rc-heading { margin-bottom: 14px; }
/* Colors + Create on ONE row (owner 2026-07-15): swatches left, the primary
   CTA right in the row's empty space, so the button sits higher and the page
   is tighter. Wraps when tight; <=860px drops the button below, full width. */
.rc-compose__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; margin-bottom: 30px; }
.rc-swatches { display: flex; flex-wrap: wrap; gap: 16px; }
/* Simple solid circles; the ONLY selected marker is the ring (owner note). */
.rc-swatch { --swatch-dark: var(--swatch-base); width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--swatch-base); cursor: pointer; }
html[data-mode="batman"] .rc-swatch { background: var(--swatch-dark); }
.rc-swatch[aria-pressed="true"] { outline: 3px solid var(--rc-ink); outline-offset: 3px; }
html[data-mode="batman"] .rc-swatch[aria-pressed="true"] { outline-color: #ffffff; }
.rc-swatch:focus-visible, html[data-mode="batman"] .rc-swatch:focus-visible { outline: 3px solid var(--rc-accent); outline-offset: 3px; }
.rc-moods { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-mood { min-height: 40px; padding: 8px 15px; border: 1px solid var(--rc-rule); border-radius: 999px; background: var(--rc-panel-deep); font-size: 14px; line-height: 1.2; font-weight: 600; cursor: pointer; }
.rc-mood span { margin-right: 5px; }
.rc-mood:hover { border-color: var(--rc-control); }
.rc-mood[aria-pressed="true"] { border-color: var(--rc-accent); background: var(--rc-accent-soft); color: var(--rc-accent-ink); box-shadow: 0 0 0 1px var(--rc-accent); }
.rc-compose__actions { display: flex; justify-content: flex-end; margin-left: auto; }

/* ---------- buttons: pills, modest ---------- */
.rc-primary, .rc-secondary { min-height: 46px; border: 2px solid transparent; border-radius: 999px; padding: 11px 26px; font-size: 15px; font-weight: 700; cursor: pointer; }
/* Primary CTAs use the site's DARK primary button color, the same pair as the
   header Donate button (owner 2026-07-18): dark green fill + near-white ink in
   LIGHT mode, and the light mint fill + dark ink in DARK mode (the accent flips
   with the theme, exactly like .wt-mini .kc-donate-btn). Hard-coded fallbacks
   keep the label readable even if a variable goes undefined (both pairs verified
   >= 7.6:1). Never the soft mint fill in light mode (the old invisible/washed-out
   button bug). */
.rc-primary { background: var(--rc-accent, #2c5f4e); color: var(--rc-on-accent, #fffdf9); }
.rc-primary:hover:not(:disabled) { filter: brightness(1.05); }
.rc-primary:disabled { cursor: not-allowed; opacity: 0.45; }
.rc-primary--fit { min-width: 150px; }
.rc-secondary { border-color: var(--rc-accent); background: transparent; color: var(--rc-accent); }
.rc-secondary:hover { background: color-mix(in srgb, var(--rc-accent) 10%, transparent); }

/* ---------- poster slots (engine renders .kc-flip inside) ---------- */
.rc-poster-slot { width: min(100%, 380px); }
.rc-poster-slot .kc-flip, .rc-blank-poster { width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; }
.rc-poster-slot .kc-flip { max-width: none; margin: 0; }
.rc-poster-slot .kc-flip__inner { width: 100%; height: 100%; }
.rc-poster-slot .kc-flip__face { border-radius: 10px; }
.rc-poster-slot .kc-fc__url { font-weight: 600; }
.rc-no-transition .kc-flip__inner { transition: none !important; }
/* Compose-step preview only (owner 2026-07-16): the back is not designed
   yet, so this poster does not flip and the card-wide pointer cursor would
   promise a tap that does nothing. The tone button keeps its own cursor. */
.rc-poster-slot .kc-flip.rc-no-flip { cursor: default; }
/* Empty state: lockup pinned to the TOP so the space below visibly waits
   for the person's words; KeepCalm.org stays on the bottom edge. */
/* padding-top uses % (of width), NOT cqw: the container's own cqw would
   resolve against the viewport (container-type only serves descendants). */
.rc-blank-poster { container-type: inline-size; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: hidden; padding-top: 8%; background: var(--rc-poster-color); color: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); }
html[data-mode="batman"] .rc-blank-poster { background: var(--rc-poster-color-dark, var(--rc-poster-color)); color: #111111; }
.rc-blank-poster img { width: 26cqw; height: 21cqw; object-fit: contain; margin-bottom: 3cqw; }
html[data-mode="batman"] .rc-blank-poster img { filter: brightness(0); }
.rc-blank-poster strong { font-size: 17cqw; line-height: 0.98; font-weight: 800; }
.rc-blank-poster > span { margin-top: 3cqw; font-size: 6cqw; font-weight: 700; letter-spacing: 0.2em; }
.rc-blank-poster small { position: absolute; bottom: 4.3cqw; font-size: 4.4cqw; font-weight: 600; }

/* ---------- created: front/back duo + back-message radios ---------- */
.rc-created-main, .rc-song-main { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.rc-posters-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; max-width: 560px; }
.rc-labeled-poster > span { display: block; margin: 0 0 8px; color: var(--rc-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-align: center; }
.rc-poster-slot--duo { width: 100%; }
.rc-created-side { min-width: 0; }
.rc-back-choices { margin: 0; padding: 24px 0 0; border: 0; }
/* Primary CTA above the fold (owner 2026-07-15 mockup): right-aligned
   directly under the back-sentence options. Balanced breathing room (owner
   2026-07-16): the gap ABOVE the button must equal the gap below it to the
   video row (.rc-video-section's clamp), so the margin is that same clamp
   minus the 22px the last back-sentence radio already contributes. */
.rc-created-cta { display: flex; justify-content: flex-end; margin-top: calc(clamp(24px, 3.5vw, 40px) - 22px); }
.rc-radio { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; margin: 0 0 22px; cursor: pointer; }
.rc-radio input { position: absolute; opacity: 0; pointer-events: none; }
.rc-radio__ring { width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--rc-control); border-radius: 50%; background: transparent; }
.rc-radio input:checked + .rc-radio__ring { border-color: var(--rc-ink); box-shadow: inset 0 0 0 4px var(--rc-bg); background: var(--rc-ink); }
.rc-radio input:focus-visible + .rc-radio__ring { outline: 3px solid var(--rc-accent); outline-offset: 3px; }
.rc-radio__text { font-size: 17px; line-height: 1.45; font-weight: 500; }

/* ---------- video grid: 6 per row, selected = ring ---------- */
.rc-video-section { margin-top: clamp(24px, 3.5vw, 40px); }
.rc-scenes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.rc-scene { position: relative; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: var(--rc-panel-deep) center / cover no-repeat; cursor: pointer; }
.rc-scene img, .rc-scene video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Restored fade-in (the tiles-as-videos batch dropped it): a tile's clip is
   invisible until it actually plays, then fades in over the still (the
   button's background image), matching kc-cards' .kc-bc__video is-playing
   fade. Scoped to no-preference so reduced-motion visitors (whose clips never
   autoplay) keep seeing the video element's own poster still. */
@media (prefers-reduced-motion: no-preference) {
  .rc-scene video { opacity: 0; transition: opacity 0.5s ease; }
  .rc-scene video.is-playing { opacity: 1; }
}
.rc-scene[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--rc-bg), 0 0 0 6px var(--rc-ink); }
.rc-scene:focus-visible { outline: 3px solid var(--rc-accent); outline-offset: 3px; }
.rc-scenes-status { min-height: 22px; margin: 0; color: var(--rc-muted); font-size: 14px; }

/* ---------- bottom action rows ---------- */
.rc-page-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(24px, 3.5vw, 40px); }
.rc-page-actions__group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The one exception (owner 2026-07-15): "< Back" is accent + REGULAR weight,
   underline on hover. */
.rc-back-link { padding: 10px 0; border: 0; background: transparent; color: var(--rc-accent); font-size: 16px; font-weight: 400; text-decoration: none; cursor: pointer; }
.rc-back-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- song step ---------- */
.rc-song-panel { min-width: 0; padding-top: 6px; }
.rc-song-choices { margin: 0; padding: 0; border: 0; }
.rc-song-list { display: grid; gap: 26px; }
.rc-song { display: grid; gap: 10px; }
.rc-song .rc-radio { margin: 0; }
.rc-song__meta { display: grid; gap: 3px; font-size: 17px; line-height: 1.4; font-weight: 500; }
.rc-song__meta b { font-weight: 800; }
.rc-song__playrow { display: flex; align-items: center; gap: 12px; margin-left: 38px; font-size: 16px; font-weight: 600; }
/* Play control = the sitewide music button (kc-cardmusic.js "Snap"):
   triangle at rest; while playing (aria-pressed) the triangle swaps for 3
   equalizer bars and the progress RING fades in and fills with the song.
   Restyled to this flow's mint/ink pair: bars + ring use the button's own
   ink (>= 9:1 on the mint fill in both modes). */
.rc-song__play { position: relative; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--rc-accent-soft, #9ed4bf); color: var(--rc-accent-ink, #07110c); cursor: pointer; }
.rc-song__playic { display: grid; place-items: center; }
.rc-song__playic svg { width: 22px; height: 22px; margin-left: 2px; }
.rc-song__play:hover { filter: brightness(1.05); }
.rc-song__play .rc-mring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.rc-mring__track { fill: none; stroke: rgba(7, 17, 12, 0.25); stroke-width: 2.2; }
.rc-mring__prog { fill: none; stroke: var(--rc-accent-ink, #07110c); stroke-width: 2.6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0.08s linear; }
.rc-song__eq { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.rc-song__eq i { width: 3px; border-radius: 2px; background: currentColor; height: 14%; transition: height 0.05s linear; }
.rc-song__play[aria-pressed="true"] .rc-song__playic { display: none; }
.rc-song__play[aria-pressed="true"] .rc-song__eq { display: flex; }
.rc-song__play[aria-pressed="true"] .rc-mring { opacity: 1; }
.rc-new-song { margin-top: 24px; padding: 20px; border: 1px solid var(--rc-rule); border-radius: 12px; background: var(--rc-panel-deep); }
/* Option 2's Generate form sits inside the song row, indented to the radio
   text column (same offset as the play row). The "donate" word in the row
   label is a real link; underline it so it reads as one inside the label. */
.rc-song .rc-new-song { margin: 2px 0 0 38px; }
.rc-donate-link { text-decoration: underline; text-underline-offset: 2px; }
/* Subject gets the wider column: its default option, "Let your words decide",
   is longer than any genre label. The chevron padding below is an owner rule
   and stays, so the column grows instead (Kao 2026-07-22). */
.rc-new-song__fields { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; margin-bottom: 16px; }
.rc-new-song label { display: grid; gap: 7px; font-size: 14px; font-weight: 700; }
/* Custom select chevron pulled WELL in from the edge (owner 2026-07-15,
   flagged twice): the arrow sits ~20px inside the border, with matching
   right padding so option text never runs under it. */
.rc-new-song select { width: 100%; height: 44px; padding: 0 48px 0 12px; border: 1px solid var(--rc-control); border-radius: 8px; background: var(--rc-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171a18' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 20px center / 14px; color: var(--rc-ink); font-size: 15px; appearance: none; -webkit-appearance: none; text-overflow: ellipsis; }
html[data-mode="batman"] .rc-new-song select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f0e8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
/* Optional "what should the song be about" field: a header prompt (inherits the
   .rc-new-song label weight) over a free-text box. Sanitized + moderated
   server-side; woven into the lyrics only if acceptable. */
.rc-new-song__about { margin-bottom: 16px; }
.rc-new-song__about-h { font-weight: 700; }
.rc-new-song__about textarea { width: 100%; min-height: 52px; padding: 10px 12px; border: 1px solid var(--rc-control); border-radius: 8px; background: var(--rc-panel); color: var(--rc-ink); font-size: 15px; font-weight: 500; line-height: 1.4; resize: vertical; }
.rc-new-song__about textarea::placeholder { color: var(--rc-placeholder); }
.rc-new-song__about textarea:focus-visible { outline: 3px solid var(--rc-accent); outline-offset: 2px; }
/* live "n/200" character counter under the about box (both themes via tokens) */
.rc-new-song__count { justify-self: end; color: var(--rc-muted); font-size: 12px; font-weight: 500; }
/* The Make-your-own Generate button is the SECONDARY (outline) action, so the
   step's one filled CTA stays "Share poster". Match the primary's fixed width. */
.rc-secondary--fit { min-width: 150px; }
.rc-song-status { min-height: 22px; margin: 12px 0 0; color: var(--rc-muted); font-size: 14px; }
/* Option 1 while the poster's own song is still being written (generated
   default, polled): a small 3-bar "writing" pulse beside the labeled
   crafting line, with the temporary bank song offered quietly below. The
   bars use the accent (decorative; the text carries the meaning) and the
   sitewide reduced-motion kill switch freezes them. */
.rc-crafting { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.rc-crafting__eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; flex: none; }
.rc-crafting__eq i { width: 3px; height: 30%; border-radius: 2px; background: var(--rc-accent); animation: rc-craft-bar 1.1s ease-in-out infinite; }
.rc-crafting__eq i:nth-child(2) { animation-delay: 0.18s; }
.rc-crafting__eq i:nth-child(3) { animation-delay: 0.36s; }
@keyframes rc-craft-bar { 0%, 100% { height: 30%; } 50% { height: 95%; } }
.rc-crafting__meanwhile { margin-top: 8px; color: var(--rc-muted); font-size: 14px; }
/* sign-in gate card injected by kc-create.js (kcx-*): style it to match */
[data-fc-song-gate] .kcx-card { margin-top: 14px; padding: 18px; border: 1px solid var(--rc-rule); border-radius: 10px; background: var(--rc-panel); }
[data-fc-song-gate] .kcx-h1 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
[data-fc-song-gate] .kcx-sub { margin: 0 0 14px; color: var(--rc-muted); font-size: 14px; line-height: 1.5; }
[data-fc-song-gate] .kcx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 22px; border: 2px solid transparent; border-radius: 999px; background: var(--rc-accent, #2c5f4e); color: var(--rc-on-accent, #fffdf9); font-size: 14px; font-weight: 700; text-decoration: none; }
[data-fc-song-gate] .kcx-btn--ghost { border-color: var(--rc-accent); background: transparent; color: var(--rc-accent); }

/* ---------- share ----------
   TOP row (owner 2026-07-16): poster LEFT, the whole share section RIGHT
   (destination grid + download / embed accordions + Make another), kept
   COMPACT so the full-width "Buy the merch" section below starts near the
   fold. Everything stays fully functional, just denser. */
.rc-share-main { display: grid; grid-template-columns: minmax(270px, 300px) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; }
/* .rc-page--share overrides removed: those values are now the base for every step */
.rc-share-poster { display: flex; justify-content: center; min-width: 0; }
.rc-share-poster .rc-poster-slot { width: 100%; }
/* Unboxed + left-aligned (owner 2026-07-15): no other step sits in a bordered
   container, so the share panel is plain page content now. */
.rc-share-panel { min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; }
.rc-share-panel h2 { margin: 0; font-size: 20px; font-weight: 700; }
.rc-share-panel > p { margin: 6px 0 12px; color: var(--rc-muted); font-size: 15px; line-height: 1.45; }
.rc-share-panel > .rc-primary { width: 100%; }
.rc-share-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.rc-share-destination { min-height: 58px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--rc-rule); border-radius: 10px; background: var(--rc-panel-deep); cursor: pointer; }
.rc-share-destination:hover { border-color: var(--rc-control); }
.rc-share-destination span { display: grid; place-items: center; color: var(--rc-accent); }
.rc-share-destination span svg { width: 18px; height: 18px; }
.rc-share-destination strong { color: var(--rc-accent); font-size: 12px; font-weight: 700; }
.rc-share-status { min-height: 18px; margin: 8px 0 0; color: var(--rc-muted); font-size: 13px; }
.rc-share-detail { margin-top: 8px; border: 1px solid var(--rc-rule); border-radius: 10px; background: var(--rc-panel-deep); text-align: left; }
.rc-share-detail summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; border-radius: 10px; }
.rc-share-detail summary::-webkit-details-marker { display: none; }
.rc-share-detail summary span { flex: none; position: relative; width: 16px; height: 16px; }
.rc-share-detail summary span::before, .rc-share-detail summary span::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); }
.rc-share-detail summary span::before { width: 14px; height: 2px; }
.rc-share-detail summary span::after { width: 2px; height: 14px; }
.rc-share-detail[open] summary span::after { display: none; }
.rc-share-detail > div { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 14px 12px; }
.rc-share-detail button, .rc-share-detail a { min-height: 38px; display: inline-flex; align-items: center; padding: 8px 13px; border: 1px solid var(--rc-control); border-radius: 8px; background: transparent; color: var(--rc-ink); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.rc-share-detail textarea { width: 100%; min-height: 56px; padding: 9px; border: 1px solid var(--rc-rule); border-radius: 8px; background: var(--rc-panel); color: var(--rc-ink); font-size: 13px; resize: vertical; }
.rc-make-another { width: 100%; margin-top: 12px; border-color: var(--rc-control); color: var(--rc-ink); }

/* ---------- share-poster corner music (top-left) ----------
   Sitewide poster-music look (translucent circle, note at rest, 3 white
   Snap bars + progress ring while playing), driven by the flow's own audio
   engine. On both faces so it rotates with the poster; tone-dark posters
   flip it to the dark-glass variant, matching .kc-cardmusic__btn. Always
   visible here (this is a primary control on the share step, and invisible
   buttons are banned), unlike the hover-revealed wall version. */
.rc-cardmusic { position: absolute; top: 8px; left: 8px; z-index: 5; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.22); color: #ffffff; cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; }
.kc-flip:hover .rc-cardmusic, .rc-cardmusic:focus-visible { opacity: 1; }
@media (hover: none) { .rc-cardmusic { opacity: 0.92; } }
.rc-cardmusic:hover { background: rgba(255, 255, 255, 0.36); }
.kc-flip.kc-tone-dark .rc-cardmusic { background: rgba(0, 0, 0, 0.16); color: #111111; }
.kc-flip.kc-tone-dark .rc-cardmusic:hover { background: rgba(0, 0, 0, 0.30); }
.rc-cardmusic__note { display: flex; }
.rc-cardmusic__note svg { width: 20px; height: 20px; display: block; transform: translate(0.5px, -1px); }
.rc-cardmusic .rc-song__eq { display: none; align-items: flex-end; gap: 3px; height: 15px; }
.rc-cardmusic .rc-song__eq i { width: 3px; border-radius: 2px; background: currentColor; height: 14%; transition: height 0.05s linear; }
.rc-cardmusic .rc-mring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.rc-cardmusic .rc-mring__track { stroke: rgba(255, 255, 255, 0.28); stroke-width: 2.2; }
.rc-cardmusic .rc-mring__prog { stroke: #ffe6b8; stroke-width: 2.4; }
.kc-flip.kc-tone-dark .rc-cardmusic .rc-mring__track { stroke: rgba(0, 0, 0, 0.25); }
.kc-flip.kc-tone-dark .rc-cardmusic .rc-mring__prog { stroke: #14181c; }
.rc-cardmusic[aria-pressed="true"] .rc-cardmusic__note { display: none; }
.rc-cardmusic[aria-pressed="true"] .rc-song__eq { display: flex; }
.rc-cardmusic[aria-pressed="true"] .rc-mring { opacity: 1; }
/* The wall reveals its corner buttons on hover; on the share step all FOUR
   corner controls are HOVER buttons here like everywhere else (Kaʻo):
   hidden on desktop until the poster is hovered or a control has keyboard
   focus; always visible on touch, where there is no hover to discover them. */
.rc-share-poster .kc-flip:hover .kc-cardglobe__btn, .rc-share-poster .kc-flip:hover .kc-cardtone__btn, .rc-share-poster .kc-flip:hover .kc-cardflip__btn,
.rc-share-poster .kc-cardglobe__btn:focus-visible, .rc-share-poster .kc-cardtone__btn:focus-visible, .rc-share-poster .kc-cardflip__btn:focus-visible { opacity: 1; }
@media (hover: none) { .rc-share-poster .kc-cardglobe__btn, .rc-share-poster .kc-cardtone__btn, .rc-share-poster .kc-cardflip__btn { opacity: 0.92; } }

/* ---------- share: "Buy the merch" (REAL products) ----------
   FULL content width below the poster + share row (owner 2026-07-16): six
   BIG tiles across on desktop of this poster's ACTUAL Shopify mockups, each
   linking to its real product page. Until a product's mockup has synced, its
   tile is an honest loading state (soft pulse, "Creating…"), never a pretend
   product. White product shots sit on a fixed neutral panel so they read in
   dark mode too, same stance as /store/. */
.rc-products { margin-top: clamp(22px, 3vw, 34px); }
.rc-products__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rc-products h2 { margin: 0; font-size: 22px; font-weight: 700; }
.rc-products__all { font-size: 14px; white-space: nowrap; }
.rc-products__all[hidden] { display: none; }
.rc-products__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.rc-products__grid[hidden] { display: none; }
/* The single column is pinned to the tile's own width (minmax(0,100%)) and
   the mockup is absolutely positioned in a square art box, so a mockup of
   ANY aspect ratio letterboxes inside it and can never widen the tile
   (percentage sizes in auto grid tracks resolve cyclically otherwise). */
.rc-product { display: grid; grid-template-columns: minmax(0, 100%); justify-items: center; align-content: start; gap: 8px; padding: 10px 10px 12px; border: 1px solid var(--rc-rule); border-radius: 12px; background: var(--rc-panel-deep); color: var(--rc-ink); text-align: center; text-decoration: none; }
.rc-product:hover { border-color: var(--rc-control); }
.rc-product strong { font-size: 13px; font-weight: 700; line-height: 1.3; }
.rc-product__art { position: relative; width: 100%; aspect-ratio: 1 / 1; color: var(--rc-accent); }
.rc-product__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; background: #f4f2ec; }
/* Loading tile: dashed border + a soft sweeping pulse in the art box. The
   reduced-motion block at the bottom stills the sweep (iteration-count 1). */
.rc-product--loading { border-style: dashed; }
.rc-product--loading strong { color: var(--rc-muted); font-weight: 600; }
.rc-product__pulse { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(100deg, var(--rc-panel-deep) 40%, var(--rc-rule) 50%, var(--rc-panel-deep) 60%); background-size: 200% 100%; animation: rc-prod-pulse 1.6s linear infinite; }
@keyframes rc-prod-pulse { to { background-position: -200% 0; } }
.rc-products__status { min-height: 20px; margin: 12px 0 0; color: var(--rc-muted); font-size: 14px; line-height: 1.5; }

/* ---------- focus (visible in both modes) ---------- */
#refined-create-root button:focus-visible, #refined-create-root a:focus-visible, #refined-create-root input:focus-visible, #refined-create-root select:focus-visible, #refined-create-root textarea:focus-visible, #refined-create-root summary:focus-visible,
#music-create-root button:focus-visible, #music-create-root a:focus-visible, #music-create-root input:focus-visible, #music-create-root select:focus-visible, #music-create-root textarea:focus-visible, #music-create-root summary:focus-visible { outline: 3px solid var(--rc-accent); outline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .rc-compose { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 28px; }
  .rc-created-main, .rc-song-main { grid-template-columns: 1fr; }
  .rc-posters-duo { width: 100%; justify-self: center; }
  .rc-created-side { width: 100%; max-width: 640px; justify-self: center; }
  .rc-back-choices { width: 100%; max-width: 640px; justify-self: center; padding-top: 28px; }
  .rc-scenes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rc-share-main { grid-template-columns: minmax(250px, 290px) minmax(0, 1fr); }
  .rc-share-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rc-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 860px) {
  .rc-page { padding: 26px 0 56px; }
  .rc-screen-head p { font-size: 15px; }
  .rc-compose { grid-template-columns: 1fr; gap: 26px; }
  .rc-compose__poster { order: 0; }
  .rc-compose__panel { order: 1; }
  .rc-poster-slot { width: min(100%, 320px); }
  .rc-compose__actions { width: 100%; }
  .rc-compose__actions .rc-primary { width: 100%; }
  .rc-posters-duo { gap: 12px; max-width: 520px; }
  .rc-radio { grid-template-columns: 22px 1fr; gap: 12px; }
  .rc-radio__text { font-size: 16px; }
  .rc-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rc-page-actions__group { flex: 1; justify-content: flex-end; }
  .rc-song__playrow { margin-left: 36px; }
  .rc-song .rc-new-song { margin-left: 36px; }
  .rc-new-song__fields { grid-template-columns: 1fr; }
  .rc-share-main { grid-template-columns: 1fr; }
  .rc-share-poster .rc-poster-slot { width: min(100%, 320px); }
  .rc-share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rc-share-detail > div { flex-direction: column; align-items: stretch; }
  .rc-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- small phones (390 / 360 / 320 wide) ----------
   The shell supplies 24px side padding; everything below reflows to one
   sensible column and every tap target reaches 44px. */
@media (max-width: 560px) {
  .rc-entry { grid-template-columns: 1fr; }
  .rc-helper { grid-column: 1; }
  .rc-entry input { height: 48px; }
  .rc-mood { min-height: 44px; padding: 10px 15px; }
  .rc-swatch { width: 44px; height: 44px; }
  .rc-swatches { gap: 14px; }
  .rc-radio { min-height: 44px; }
  .rc-back-link { padding: 12px 0; }
  .rc-share-detail summary { min-height: 44px; padding: 13px 14px; }
  .rc-share-detail button, .rc-share-detail a { min-height: 44px; }
  .rc-heading { font-size: 18px; }
  .rc-posters-duo { gap: 10px; }
  .rc-radio__text { font-size: 15px; }
  .rc-song__meta { font-size: 15px; }
  .rc-song__playrow { margin-left: 34px; }
  .rc-song-list { gap: 22px; }
  .rc-new-song { padding: 16px; }
  .rc-song .rc-new-song { margin-left: 0; }
  .rc-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 480px) {
  .rc-page-actions { flex-direction: column-reverse; align-items: stretch; }
  .rc-page-actions__group { flex-direction: column; align-items: stretch; }
  .rc-created-cta .rc-primary { width: 100%; }
  .rc-back-link { text-align: left; }
  .rc-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-share-panel > .rc-primary { min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  #refined-create-root, #refined-create-root *, #refined-create-root *::before, #refined-create-root *::after,
  #music-create-root, #music-create-root *, #music-create-root *::before, #music-create-root *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   /music/create/ (song-first flow): SHARES everything above
   (tokens, buttons, .rc-new-song form, .rc-song player row,
   .rc-cardmusic poster corner). Only the page's own layout and
   the reveal sequencing live here.
   ============================================================ */
.mc-form { max-width: 640px; margin: 0 auto; }
.mc-form .rc-new-song { margin: 0; }
.mc-form__actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.mc-result { max-width: 640px; margin: clamp(28px, 4vw, 44px) auto 0; }
.mc-result .rc-song { padding: 20px; border: 1px solid var(--rc-rule); border-radius: 12px; background: var(--rc-panel-deep); }
.mc-result .rc-song__playrow { margin-left: 0; }
.mc-song-title { margin: 0 0 12px; font-size: 20px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
/* the reveal moves screen-reader focus here; it is not interactive, so the
   programmatic focus needs no ring (keyboard :focus-visible keeps the site ring) */
.mc-song-title:focus:not(:focus-visible) { outline: none; }
.mc-poster { margin-top: clamp(28px, 4vw, 44px); }
.mc-poster .rc-poster-slot { margin: 0 auto; }
.mc-poster__note { max-width: 380px; margin: 12px auto 0; color: var(--rc-muted); font-size: 14px; line-height: 1.5; text-align: center; }
.mc-poster__note a { color: var(--rc-accent); font-weight: 700; text-decoration: none; }
.mc-poster__note a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .mc-reveal { animation: mc-reveal 0.45s ease both; }
  @keyframes mc-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ============================================================
   /music/create/ v2 (phrase -> video -> create song, 2026-07-21):
   square-only previews. Every step previews the SQUARE song
   cover; the video and create steps play the selected clip under
   the engine's REAL lockup art (crownArt as .mus-hoverposter__design
   over .mus-hoverposter__scrim, the /music song cards' composite,
   both styled by kc-music-engine.css). No hand-drawn lockups.
   Everything else on the three screens reuses the rc-* system above.
   ============================================================ */
.mc-crop { position: relative; overflow: hidden; border-radius: 10px; background: var(--rc-panel-deep) center / cover no-repeat; }
/* SITE RULE (Kaʻo 2026-07-21): loop-library clips are portrait; wherever
   they render SQUARE, keep the BOTTOM square of the frame (crop the top)
   so people in the clips keep their heads. Square videos get object-position
   bottom center; square stills get background-position bottom center. */
.mc-crop--sq { aspect-ratio: 1 / 1; background-position: bottom center; }
.mc-crop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom center; opacity: 0; transition: opacity 0.5s ease; }
.mc-crop video.is-playing { opacity: 1; }
/* side copy at the poster flow's option-text size, starting on the same
   plane as the top of the art card (the 24px .rc-back-choices offset) */
.mc-side-note { margin: 0 0 22px; padding-top: 24px; font-size: 17px; line-height: 1.45; font-weight: 500; }
/* the video grid itself is .rc-scenes / .rc-scene, the poster flow's exact
   6-across tiles (sizing, gap, radius, selected ring, lazy clip playback);
   the MUSIC flow's tiles add rc-scene--sq: SQUARE and bottom-cropped (the
   site rule above), while the poster flow keeps its tall 3:4 tiles */
.rc-scene--sq { aspect-ratio: 1 / 1; background-position: bottom center; }
.rc-scene--sq video { object-position: bottom center; }
/* the v2 about field: context header + guidance above the textarea */
.mc-about__head { display: block; font-size: 16px; font-weight: 800; }
.mc-about__sub { display: block; margin: 2px 0 8px; color: var(--rc-muted); font-size: 13px; font-weight: 500; line-height: 1.5; }
.mc-about textarea { min-height: 96px; }
/* the caring resources note beside a crisis-flagged result: warm, never an error */
.mc-care { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--rc-rule); border-left: 4px solid var(--rc-accent); border-radius: 10px; background: var(--rc-panel-deep); color: var(--rc-ink); font-size: 14px; line-height: 1.6; }
.mc-care a { color: var(--rc-accent); font-weight: 700; text-decoration: none; }
.mc-care a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* per-card tone (Kaʻo): the poster cards' corner tone control on the square
   song art. JS stamps mc-tone-light / mc-tone-dark on the box; these var
   flips out-rank kc-music-engine.css's html-level theme rules, so the card
   renders its OWN tone in any page theme. mc-tone-light IS the default in
   BOTH themes (Kaʻo 2026-07-22): dark scrim + white design at full opacity;
   mc-tone-dark appears only when the tone button is tapped. Scrim values are
   the locked pairs (black 30% under the white design, white 60% under the
   black). */
.mc-crop.mc-tone-light .mus-crownart { --mus-art-fill: var(--mus-art-dark, #161616); --mus-crown-w: inline; --mus-crown-b: none; --mus-art-ink: #ffffff; }
.mc-crop.mc-tone-light .mus-hoverposter__scrim { background: rgba(0, 0, 0, 0.3); }
.mc-crop.mc-tone-dark .mus-crownart { --mus-art-fill: var(--mus-art-light, #ffffff); --mus-crown-w: none; --mus-crown-b: inline; --mus-art-ink: #161616; }
.mc-crop.mc-tone-dark .mus-hoverposter__scrim { background: rgba(255, 255, 255, 0.6); }
/* the control itself is cdo-watchtower's .kc-cardtone__btn, mounted as a
   SIBLING after the role="img" box (a button inside role="img" is hidden
   from assistive tech); hover / focus reveal like the poster cards */
.mc-duo--solo .rc-labeled-poster, .mc-duo--pair .rc-labeled-poster { position: relative; }
.mc-duo--solo .rc-labeled-poster:hover .kc-cardtone__btn, .mc-duo--pair .rc-labeled-poster:hover .kc-cardtone__btn { opacity: 1; }
/* on the light shade (tone-dark art) the glass flips to the dark variant,
   same as .kc-flip.kc-tone-dark's corner buttons */
.mc-crop.mc-tone-dark ~ .kc-cardtone__btn { background: rgba(0, 0, 0, 0.16); color: #111111; }
.mc-crop.mc-tone-dark ~ .kc-cardtone__btn:hover { background: rgba(0, 0, 0, 0.30); }

/* Cross-link line under either create flow ("Want the song first?" /
   "Want the poster first?"): sits OUTSIDE the JS-owned root, so it is
   styled from here and inherits nothing from the flow. */
.rc-crosslink { margin: 0 auto; padding: 0 16px 40px; max-width: 1140px; color: var(--rc-muted); font-family: "Montserrat", system-ui, sans-serif; font-size: 15px; text-align: center; }
.rc-crosslink a { color: var(--rc-accent); font-weight: 700; text-decoration: none; }
.rc-crosslink a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* square-only music-create previews (Kaʻo: song flow previews the song cover;
   the poster crop no longer shows on the phrase or video steps) */
.rc-poster-slot--square .mus-crownart { width: 100%; }
.rc-blank-poster--square { aspect-ratio: 1 / 1; }
/* FRONT/BACK pair sizing (Kaʻo 2026-07-22): equal 275px squares on desktop
   (the poster-height convention is relaxed on these steps); the left grid
   column widens to hold the pair at full size. The video step's header keeps
   the SAME vertical rhythm as every other step and page (Kaʻo relaxed the
   above-the-fold requirement, so the earlier .rc-page--created tightening is
   gone). Mobile keeps the normal flow and scrolling. */
/* Panel top edge lines up with the TOP OF THE CARDS on the create-song step
   (Kaʻo 2026-07-22): the FRONT/BACK captions sit above the cards, so the
   panel takes their exact height as its offset (12px caption at 1.25 = 15px,
   plus the caption's 8px gap = 23px) instead of its own 6 + 24px. */
#music-create-root .rc-labeled-poster > span { line-height: 1.25; }
#music-create-root .rc-song-main .rc-song-panel { padding-top: 23px; }
#music-create-root .rc-song-main .rc-new-song { margin-top: 0; }
@media (min-width: 1025px) {
  .mc-duo--pair { grid-template-columns: repeat(2, 275px); max-width: none; }
  #music-create-root .rc-created-main, #music-create-root .rc-song-main { grid-template-columns: minmax(0, 568px) minmax(0, 1fr); }
}