/* Honest Cards skin — the WARM register on top of base.css: blush wash, maroon serif questions,
   a floral card that turns over, ruled letter paper, and the keepsake list. */

/* ---------------------------------------------------------------------------------------------
   The blush register, declared in BOTH themes.

   This skin used to exist only in light. Half its tokens were then quietly overruled at night by
   base.css's generic dark `.warm` block (`:root[data-theme="dark"] .warm` outranks a bare
   `.page.warm`) while the other half — and every hardcoded surface below — stayed pale. The result
   was a deck painted on cream paper with near-white ink on it: the title "Honest Cards" measured
   **1.01:1** in dark, which is not "hard to read", it is not there.

   So every surface this game paints is a token with a light value and a dark one, the way
   --grad-soft already is in base.css. The character is unchanged: blush paper, maroon serif,
   gilt. At night the same three roles become deep wine paper, a rose serif, and a lifted gilt —
   the deck read by lamplight rather than a different deck.

   The hint tier changed colour too, and not because of the theme: --ink-faint was #B49A96, which
   is **2.11:1** on this game's own ruled letter paper. Every "turn it over together", every
   placeholder, every keepsake timestamp was decoration rather than text, in the light theme, in
   the game Evan and his partner actually played. The two tiers below are 7.6:1 and 5.6:1.
--------------------------------------------------------------------------------------------- */
.page.warm {
  --cd-paper: #FDF4F1;
  --cd-card: #FFFBF9;
  --cd-line: #EFDCD6;
  --cd-soft: #6A4A47;     /* 7.61:1 on the card face, 6.28:1 on the darkest wash stop */
  --cd-faint: #7A605C;    /* was #B49A96 — 2.11:1 on the ruled paper. This is 5.59 / 4.61 */
  --maroon: #7C2B42;      /* 8.95:1 on the card face */
  --maroon-soft: #9C4A60; /* was #A8546A — 4.07:1 on the ruled paper. This is 5.73 / 4.73 */
  --gilt: #C6A469;
}
@media (prefers-color-scheme: dark) {
  /* Specificity note: this has to outrank base.css's `:root[data-theme="dark"] .warm`, which is
     why the `.page` stays in the selector. Every token the light block declares is redeclared
     here — a partial dark block is how the mixed half-light half-dark deck happened. */
  :root:not([data-theme="light"]) .page.warm {
    --cd-paper: #241A1E;
    --cd-card: #2F2229;
    --cd-line: #4A3540;
    --cd-soft: #CDB2B8;     /* 7.71:1 on the card face */
    --cd-faint: #B098A0;    /* 5.68:1 on the card face, 4.76:1 on a rule line */
    --maroon: #F7C9D6;      /* the serif question, 10.34:1 */
    --maroon-soft: #E4A0B2; /* 7.22:1 */
    --gilt: #D9B87A;
  }
}
:root[data-theme="dark"] .page.warm {
  --cd-paper: #241A1E;
  --cd-card: #2F2229;
  --cd-line: #4A3540;
  --cd-soft: #CDB2B8;
  --cd-faint: #B098A0;
  --maroon: #F7C9D6;
  --maroon-soft: #E4A0B2;
  --gilt: #D9B87A;
}

/* ---------------------------------------------------------------------------------------------
   The bridge, and the only place this game touches a shell token.

   Everything above is the deck's own palette under the deck's own names. But the markup is not
   only the deck's: the pack grid, the ghost and primary buttons, the textarea, the toggle rows and
   the "what next" tiles all come from client/ui/base.css, and those read --paper-raised, --line,
   --ink-soft and --ink-faint. Deleting this block would not make the game independent of the
   shell; it would paint base.css's cool-grey components onto blush paper, at night included —
   which is the same class of mistake as the half-dark deck this file's header describes.

   So the shell tokens are ASSIGNED FROM the deck's, scoped to `.page.warm` and never wider. The
   values are identical to what shipped, the rendering is unchanged, and there is now exactly one
   line to read to know what this game does to the register it is drawn in.
--------------------------------------------------------------------------------------------- */
.page.warm {
  --paper: var(--cd-paper);
  --paper-raised: var(--cd-card);
  --line: var(--cd-line);
  --line-strong: var(--cd-line);
  --ink-soft: var(--cd-soft);
  --ink-faint: var(--cd-faint);
}

/* The painted surfaces. These live on :root rather than on .page.warm because <body> paints the
   wash and a custom property inherits downward only — declared on #app, body could never read it.
   The names are this game's own, so :root is safe here in a way it would not be for --paper. */
:root {
  --cd-wash: radial-gradient(120% 80% at 50% 0%, #FFF7F4 0%, #FDF1ED 55%, #FBEAE6 100%) fixed, #FDF4F1;
  --cd-preview: linear-gradient(160deg, #FFF3EF 0%, #FBE7E6 60%, #EFE4F2 100%);
  --cd-ruled: repeating-linear-gradient(180deg, #FFFBF9 0 33px, #FFFBF9 33px, #F3E3DE 34px);
  --cd-locked: #F3EAE0;   /* --maroon on it is 7.74:1 */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cd-wash: radial-gradient(120% 80% at 50% 0%, #2B1E23 0%, #241A1E 55%, #1E1519 100%) fixed, #241A1E;
    --cd-preview: linear-gradient(160deg, #2E2026 0%, #281C22 60%, #241C2E 100%);
    --cd-ruled: repeating-linear-gradient(180deg, #2F2229 0 33px, #2F2229 33px, #402D36 34px);
    --cd-locked: #3A2A2E;   /* --maroon on it is 9.21:1 */
  }
}
:root[data-theme="dark"] {
  --cd-wash: radial-gradient(120% 80% at 50% 0%, #2B1E23 0%, #241A1E 55%, #1E1519 100%) fixed, #241A1E;
  --cd-preview: linear-gradient(160deg, #2E2026 0%, #281C22 60%, #241C2E 100%);
  --cd-ruled: repeating-linear-gradient(180deg, #2F2229 0 33px, #2F2229 33px, #402D36 34px);
  --cd-locked: #3A2A2E;
}
body { background: var(--cd-wash); }

/* ---------- shared warm type ---------- */
.cd-eyebrow { font: 700 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--maroon-soft); }
.cd-serif { font-family: var(--serif); color: var(--maroon); }
.cd-hint { font: 13px/1.5 var(--mono); color: var(--cd-faint); letter-spacing: .02em; }
.cd-nudge { font: 13px var(--mono); color: var(--cd-faint); letter-spacing: .04em; }

/* ---------- PACK ---------- */
.cd-pack { width: min(700px, calc(100vw - 32px)); padding-top: 34px; }
.cd-pack .pack__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .cd-pack .pack__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cd-pack .pack-card { background: var(--cd-card); border-color: var(--cd-line); }
.cd-pack .pack-card .t { font-family: var(--serif); font-weight: 700; color: var(--maroon); }
.cd-pack .pack-card .n { color: var(--cd-faint); }
.cd-pack__options { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(440px, 100%); margin-top: 6px; }
.cd-pack__options .toggle-row { width: 100%; }
.cd-rounds { display: flex; align-items: center; gap: 12px; }
.cd-rounds .eyebrow { color: var(--maroon-soft); }

/* ---------- CARD ---------- */
.cd-round { min-height: calc(100svh - var(--bar-h, 0px)); justify-content: center; gap: 18px; }
.cd-meta { font: 700 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--maroon-soft); display: flex; gap: 14px; align-items: center; }
.cd-meta .timer { color: var(--maroon); letter-spacing: .04em; }
.cd-meta .timer.is-low { color: var(--red); }

.cd-card {
  position: relative; width: min(340px, 78vw); aspect-ratio: 700 / 1075;
  border-radius: 14px; box-shadow: 0 18px 44px rgba(124, 43, 66, .16), 0 2px 6px rgba(124, 43, 66, .08);
  background: var(--cd-card); border: 0; padding: 0; perspective: 1400px; transition: transform .12s ease;
}
.cd-card:not(.is-open):hover { transform: translateY(-3px); }
.cd-card.is-open { cursor: default; }
.cd-face { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; }
.cd-back { width: 100%; height: 100%; }
.cd-back svg { width: 100%; height: 100%; }
.cd-face--front {
  background: var(--cd-card); border: 1px solid var(--cd-line); display: flex; flex-direction: column;
  padding: 18px 20px 16px; text-align: center; animation: cdTurn .4s ease both;
}
/* Transform only, never opacity: a screenshot or a throttled tab can freeze an animation at frame 0,
   and the art must be fully legible even then. */
@keyframes cdTurn { from { transform: scale(.955); } to { transform: none; } }
.cd-stamp { font: 700 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--maroon-soft); padding-bottom: 12px; border-bottom: 1px solid var(--cd-line); }
.cd-q { font-family: var(--serif); font-weight: 700; color: var(--maroon); font-size: clamp(19px, 2.4vw, 23px); line-height: 1.32; text-wrap: balance; margin: 0; flex: 1; display: flex; align-items: center; justify-content: center; }
.cd-kind { font: 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cd-faint); padding-top: 12px; border-top: 1px solid var(--cd-line); }
.cd-flip-hint { font: 13px var(--mono); color: var(--cd-faint); }

.cd-textarea { width: min(460px, 100%); min-height: 118px; background: var(--cd-card); border-color: var(--cd-line); }
.cd-textarea:focus { border-color: var(--maroon-soft); }
.cd-lockin.is-locked { background: var(--cd-locked); color: var(--maroon); border: 1px solid var(--cd-line); }
.cd-act { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cd-act-hint { font: 13px var(--mono); color: var(--cd-faint); }

/* ---------- SHARED (the card opens) ---------- */
.cd-shared { min-height: calc(100svh - var(--bar-h, 0px)); justify-content: center; gap: 16px; }
.cd-q--sm { font-size: clamp(18px, 2.2vw, 22px); max-width: 26ch; display: block; flex: 0 0 auto; }
.cd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; }
.cd-said { text-align: left; padding: 14px 16px; border-radius: var(--r8); background: var(--cd-card); border: 1px solid var(--cd-line); border-top: 3px solid var(--cd-line); display: flex; flex-direction: column; gap: 6px; }
.cd-said[data-color="pink"] { border-top-color: var(--pink); }
.cd-said[data-color="blue"] { border-top-color: var(--blue); }
.cd-said-name { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cd-soft); }
.cd-said-text { margin: 0; font-size: 16px; line-height: 1.5; word-break: break-word; }
.cd-said-text.is-quiet { color: var(--cd-faint); font-style: italic; }
.cd-act-done { font-family: var(--serif); font-size: 20px; color: var(--maroon); margin: 0; }
@media (max-width: 560px) { .cd-pair { grid-template-columns: 1fr; } }

/* ---------- LETTER ---------- */
.cd-letter { min-height: calc(100svh - var(--bar-h, 0px)); justify-content: center; gap: 14px; }
.cd-letter__head { font-family: var(--serif); font-weight: 700; color: var(--maroon); font-size: clamp(22px, 3.2vw, 30px); line-height: 1.25; text-wrap: balance; max-width: 20ch; margin: 0; }
.cd-paper {
  width: min(560px, 100%); min-height: 260px; padding: 14px 18px; border: 1px solid var(--cd-line); border-radius: var(--r4);
  background: var(--cd-ruled);
  font-family: var(--serif); font-size: 17px; line-height: 34px; color: var(--maroon); resize: vertical; outline: none;
}
.cd-paper::placeholder { color: var(--cd-faint); font-style: italic; }
.cd-paper:focus { border-color: var(--maroon-soft); }
.cd-letters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; }
.cd-letters .cd-said-text { font-family: var(--serif); line-height: 1.6; }
@media (max-width: 560px) { .cd-letters { grid-template-columns: 1fr; } }

/* ---------- RESULT (the keepsake) ---------- */
.cd-result { padding-top: 36px; gap: 18px; }
.cd-result__title { font-family: var(--serif); font-weight: 700; color: var(--maroon); font-size: clamp(30px, 5vw, 42px); line-height: 1.12; letter-spacing: -.01em; margin: 0; }
.cd-closing { font-family: var(--serif); font-size: 19px; color: var(--maroon-soft); font-style: italic; max-width: 34ch; }
.cd-keepsake { width: 100%; text-align: left; display: flex; flex-direction: column; }
.cd-keep { display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; padding: 14px 0; border-bottom: 1px solid var(--cd-line); }
.cd-keep:last-child { border-bottom: 0; }
.cd-keep .n { font: 12px var(--mono); color: var(--cd-faint); }
.cd-keep .p { grid-column: 2; font-family: var(--serif); font-weight: 700; color: var(--maroon); font-size: 16px; margin: 0 0 4px; }
.cd-keep .a { grid-column: 2; font-size: 15px; line-height: 1.5; }
.cd-keep .a b { font-weight: 700; }
/* The two of them, named inside a keepsake line. --pink-label / --blue-label are the same two
   hues, and they flip: the literals here were dark-on-dark at night. */
.cd-keep .a.pink b { color: var(--pink-label); } .cd-keep .a.blue b { color: var(--blue-label); }
.cd-keep .did { grid-column: 2; font: 12px var(--mono); color: var(--cd-faint); letter-spacing: .06em; }
.cd-result .nextup__alt.pinkish { background: var(--pink-tint); } .cd-result .nextup__alt.bluish { background: var(--blue-tint); }
.cd-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- START preview ---------- */
.cd-preview { display: flex; align-items: center; justify-content: center; gap: 18px; width: 84%; }
.cd-preview .cd-back { width: 132px; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-2); }
.cd-preview__slips { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cd-preview__slip { height: 46px; border-radius: 6px; background: var(--cd-card); border: 1px solid var(--cd-line); border-top: 3px solid var(--pink); }
.cd-preview__slip + .cd-preview__slip { border-top-color: var(--blue); }
.start__preview { background: var(--cd-preview); }

/* ---------- room for the activity bar (docs/R2-INTERFACE.md S5) ----------
   These top paddings exist to hold a scene off the top of the WINDOW. With the 44px bar there,
   the bar already does that, and the two together push the first line of a scene ~9%% of an
   iPhone's screen down before anything is said. Trimmed by 20px, so the gap a person sees is the
   gap that was designed. Nothing moves on a page with no bar. */
body.has-activitybar .cd-pack { padding-top: 14px; }
body.has-activitybar .cd-result { padding-top: 16px; }