/* Creator pages (/creators, /creator) on the Showroom's parts (styles.css
   "Docs"): the deal as a StatCluster (a plate of carved wells), ruled rows
   under engraved seams, the titanium key as the one bright press, dark raised
   keys for the rest, carved fields and sockets. Same tokens, no new colours. */

/* StatCluster — the plate, its readings sunk into carved wells (showroom.well). */
.section-panel.cluster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px; margin-top: 20px; }
.cluster .cell {
  display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 54px;
  padding: 8px 10px; border-radius: 12px; background: var(--carved); box-shadow: var(--carved-shade);
}
.cluster .v { font-weight: 700; font-size: 18px; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; text-shadow: var(--emboss); }
.cluster .l { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }

/* The titanium key — the one bright press (showroom.titanium on the pill). */
.doc .lum {
  display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 16px;
  padding: 16px 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--titanium-key); color: var(--bg); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), var(--stand);
  font: inherit; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
}
.doc .lum:active { transform: translateY(1px); opacity: 0.85; }
.doc .lum:disabled { opacity: 0.5; cursor: progress; }

/* Dark raised keys (showroom.raised) — never an outline; paired ones share the pill. */
.doc .pair { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.doc .ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 0; border-radius: 999px;
  background: var(--key); box-shadow: var(--key-light), var(--stand); color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.doc .ghost:active { transform: translateY(1px); opacity: 0.85; }
.doc .ghost svg { width: 13px; height: 13px; fill: currentColor; flex: 0 0 auto; }
.doc .ghost.wide { width: 100%; justify-content: center; padding: 14px 16px; font-family: inherit; cursor: pointer; }
.doc .ghost.wide + .ghost.wide { margin-top: 10px; }

/* Ruled rows — every row after the first under an engraved seam. */
.doc .rows { list-style: none; margin: 0; padding: 0; }
.doc .rows > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 10px; margin: 0; padding: 14px 16px; }
.doc .rows > li + li { border-top: 1px solid var(--seam); box-shadow: var(--seam-lip); }
.doc .rows.qa > li { grid-template-columns: minmax(0, 1fr); }
.rows .ix { font-size: 11px; letter-spacing: 0.12em; color: var(--titanium-dim); padding-top: 2px; }
.rows.marks .ix { font-size: 13px; padding-top: 0; }
.rows .t { display: block; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.rows .s { display: block; font-size: 13.5px; line-height: 1.6; color: var(--titanium); }
.rows .t + .s { margin-top: 4px; }
.doc .panel-foot {
  margin: 0; padding: 12px 16px; border-top: 1px solid var(--seam); box-shadow: var(--seam-lip);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); line-height: 1.6;
}

/* Forms — a field is a WELL you type into (showroom.field). */
.creator-form { display: flex; flex-direction: column; gap: 16px; }
.creator-form .row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.creator-form label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.creator-form .hint { text-transform: none; letter-spacing: 0; color: var(--faint); }
.creator-form input[type="text"], .creator-form input[type="email"], .creator-form input[type="url"], .creator-form textarea {
  width: 100%; color: var(--ink); border: 0; border-radius: 12px; padding: 13px 14px; font: inherit; font-size: 15px;
  background: var(--carved); box-shadow: var(--carved-shade);
}
.creator-form input::placeholder, .creator-form textarea::placeholder { color: var(--faint); }
.creator-form textarea { resize: vertical; min-height: 84px; }
.creator-form input:focus-visible, .creator-form textarea:focus-visible, .doc .lum:focus-visible, .doc .ghost:focus-visible {
  outline: 2px solid var(--titanium); outline-offset: 2px;
}
/* Consent — a carved socket; set, it holds a titanium fill (the Marker). */
.creator-form .check {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  text-transform: none; letter-spacing: 0; font-size: 13.5px; line-height: 1.5; color: var(--titanium);
}
.creator-form .check input {
  appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 0; border-radius: 6px;
  background: var(--carved); box-shadow: var(--carved-shade); cursor: pointer;
}
.creator-form .check input:checked { box-shadow: var(--carved-shade), inset 0 0 0 4px #17191D, inset 0 0 0 10px #C7CBD1; }
.creator-form .check input:focus-visible { outline: 2px solid var(--titanium); outline-offset: 2px; }
/* A one-of-two choice (/film): the same carved sockets, round. */
.creator-form fieldset.choice { border: 0; margin: 0; padding: 0; gap: 10px; }
.creator-form .choice legend { padding: 0; margin-bottom: 4px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.creator-form .check input[type="radio"] { border-radius: 999px; }
.form-message { min-height: 1.5em; font-size: 13px; color: var(--titanium); margin: 0; }
.form-message:empty { min-height: 0; }
.form-message.error { color: var(--accent); }

/* The creator's own page — chips are small raised keys. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pill {
  font-size: 9.5px; letter-spacing: 0.17em; text-transform: uppercase; border-radius: 999px; padding: 6px 11px;
  color: var(--titanium); white-space: nowrap; background: var(--key); box-shadow: var(--key-light), var(--stand);
}
.pill.ok { color: var(--ink); }
.pill.warn { color: var(--accent); }
.doc .posts { list-style: none; padding: 0; margin: 0; }
.doc .posts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; margin: 0; }
.doc .posts li + li { border-top: 1px solid var(--seam); box-shadow: var(--seam-lip); }
.posts .url { overflow-wrap: anywhere; font-size: 13px; }
.posts .pill { justify-self: start; align-self: start; }
.posts .meta { grid-column: 1 / -1; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.doc .empty { margin: 0; padding: 14px 16px; color: var(--muted); font-size: 13.5px; }
.section-panel .action-row { padding: 0 16px 16px; }
.section-panel .action-row .lum { margin-top: 0; }

/* `hidden` must win over the keys' display rules. */
.doc [hidden] { display: none !important; }
.action-row:not(:has(> :not([hidden]))) { display: none; }

@media (max-width: 420px) {
  .section-panel.cluster { gap: 6px; padding: 12px; }
  .cluster .cell { padding: 8px; }
  .cluster .v { font-size: 15px; }
  .posts li { grid-template-columns: 1fr; }
}

/* /film — the picture-first page: a 3-step strip, the catch shot, two ways side
   by side, field hints, folded questions.
   Same parts and tokens as above; no new colours. */
.film-hero { margin: 20px 0 0; }
.film-hero img { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; border-radius: 20px; box-shadow: var(--stand); }
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; padding: 16px; }
.way { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--carved); box-shadow: var(--carved-shade); }
.way .t { font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.way .big { font-weight: 700; font-size: 24px; color: var(--ink); text-shadow: var(--emboss); line-height: 1.2; }
.way .big em { display: block; font-style: normal; font-weight: 400; font-size: 12px; letter-spacing: 0.08em; color: var(--titanium); text-shadow: none; }
.way .s { font-size: 13px; line-height: 1.6; color: var(--titanium); }
.way .ghost.wide { margin-top: auto; }
.earn { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.earn td { padding: 7px 0; border-top: 1px solid var(--seam); color: var(--titanium); }
.earn td + td { text-align: right; color: var(--ink); font-weight: 700; }
.faq details { padding: 14px 16px; }
.faq details + details { border-top: 1px solid var(--seam); box-shadow: var(--seam-lip); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--titanium); }
.doc .steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; }
.doc .steps li { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px; border-radius: 12px; background: var(--carved); box-shadow: var(--carved-shade); font-size: 11px; letter-spacing: 0.06em; line-height: 1.4; color: var(--titanium); }
.doc .steps b { font-size: 18px; color: var(--ink); text-shadow: var(--emboss); }
.creator-form .field-hint { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.quick-rules { margin: 0; padding: 12px 14px 12px 30px; border-radius: 12px; background: var(--carved); box-shadow: var(--carved-shade); font-size: 12.5px; line-height: 1.7; color: var(--titanium); }
.quick-rules li { margin: 0; }
/* The two demo videos (2026-10-19): one per way to earn, phone-shaped, sound off. */
.demo { margin: 0; padding: 16px 16px 4px; }
.demo video { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; border-radius: 18px; background: #0d0e10; box-shadow: var(--stand); }
.demo figcaption { margin-top: 10px; text-align: center; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.panel-pay { padding: 0 16px 16px; }

/* ── Phone pass (Danny 10-22) ─────────────────────────────────────────── */
/* The headline wears the site's display face, like the Blog and the homepage. */
.cr-head { container-type: inline-size; }
/* Measured 10-22: "Make Revlo videos." = 12.04 em, "Get free film." = 8.11 em.
   Wide: one line each, the long one filling the column (100 / 12.04 = 8.3cqw).
   Phone: the short line fills it (100 / 8.11 = 12.3cqw, ~44 px at 390, the
   homepage's section size) and the long line wraps onto two. */
.doc h1.display { font-size: min(60px, 8.3cqw); text-transform: none; letter-spacing: -0.02em; line-height: 0.98; margin: 0 0 18px; }
.doc h1.display > span { white-space: nowrap; }
@media (max-width: 560px) {
  .doc h1.display { font-size: 12.3cqw; }
  .doc h1.display > span:first-child { white-space: normal; }
}
/* 44 pt rows: the consent and choice rows, and each question */
.creator-form .check { padding: 12px 0; }
.faq summary { min-height: 44px; align-items: center; padding: 12px 0; }
@media (max-width: 560px) {
  /* three cramped boxes become three readable rows */
  .doc .steps { grid-template-columns: minmax(0, 1fr); }
  .doc .steps li { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; font-size: 13px; }
  .doc .steps b { font-size: 16px; }
}