/* Overlap: the watercolor overlap (the founder's "mosaic style"). Six petals, one per area, colored like stained glass; where two people meet, the
   panes overlap. The page steps back: warm light paper, near-black ink, one display serif and a quiet sans, soft
   radii, no borders where space will do. Color lives in the mark and in the six area colors, used the same way
   everywhere (the small dot by each area name), and nowhere else. */

:root[data-theme="overlap"] {
  --bone: #f6f2ea; --bone-rgb: 246 242 234;
  --card: #fbf9f4; --card-rgb: 251 249 244;
  --ink: #1f1c18; --ink-rgb: 31 28 24;
  --ink-2: #48423a; --muted: #6b6359; --faint: #a39a8e;
  --clay: #9c3f4f; --clay-rgb: 156 63 79; --deep: #48423a;
  --sand: #ece5d8; --tint: #efe9de;
  /* the six areas: the mosaic palette (web/overlap.js); light and dark alternate around the ring */
  --area-values: #2c4f8e; --area-goals: #e2b34a; --area-drives: #b9475a; --area-tastes: #e8a9b6; --area-life: #33847f; --area-world: #a597cf;
  --values: var(--area-values); --goals: var(--area-goals); --drives: var(--area-drives); --tastes: var(--area-tastes); --life: var(--area-life); --world: var(--area-world);
  --green-bg: transparent; --green: #2b6a5f; --green-line: #2b6a5f; --red-bg: transparent; --red: #8e3445; --danger: #a8301f;
  --stage-1: #efe9de; --stage-2: #d9d1c3;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sys: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --label: var(--sys);
  --label-size: 11px; --label-track: .12em;

  --mark-ink: #211d18; --mark-ink-2: #3d5a7a; --mark-accent: #b9475a; --mark-paper: var(--bone); --mark-line: #fffdf7; --mark-loop: #fffdf7;

  --hair: rgb(var(--ink-rgb) / .12); --hair-2: rgb(var(--ink-rgb) / .07);
  --r-xl: 22px; --r-l: 18px; --r-m: 14px; --r-s: 10px; --r-btn: 999px; --r-choice: 26px;
  /* buttons: warm near-black ink, a pill, a little lighter than a slab; pressed deepens */
  --btn-ink: #2b2621; --btn-ink-down: #14110e;
  --sh-1: none; --sh-2: 0 1px 2px rgb(var(--ink-rgb) / .05), 0 16px 34px -20px rgb(var(--ink-rgb) / .22); --sh-btn: none;
  --mat: var(--bone); --mat-card: var(--card);
  --grain: 0;
  --t-enter: .8s; --t-reveal: 1.2s;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="overlap"] {
    --bone: #1a1916; --bone-rgb: 26 25 22;
    --card: #22201c; --card-rgb: 34 32 28;
    --ink: #efe8db; --ink-rgb: 239 232 219;
    --ink-2: #cfc7b8; --muted: #a39b8d; --faint: #6c665c;
    --clay: #e08b9a; --clay-rgb: 224 139 154; --deep: #cfc7b8;
    --sand: #2b2924; --tint: #25231f;
    --area-values: #5f86c9; --area-goals: #e9c063; --area-drives: #d4697a; --area-tastes: #efb7c3; --area-life: #4fa59f; --area-world: #b6a9de;
    --green: #8fcfc4; --green-line: #8fcfc4; --red: #eba1ae; --danger: #f08a74;
    --stage-1: #1f1e1a; --stage-2: #0c0b0a;
    /* dark leading, like real stained glass: crossing lines take the paper color */
    --mark-ink: #e9e1cf; --mark-ink-2: #9db8d8; --mark-accent: #d4697a; --mark-line: #1a1916;
    /* the flower's hand-drawn loops stay light on dark paper, a little softer */
    --mark-loop: rgb(255 250 240 / .72);
    --mark-wash: #6e675d;
    --btn-ink: #ece4d6; --btn-ink-down: #fffaf1;
    --hair: rgb(var(--ink-rgb) / .14); --hair-2: rgb(var(--ink-rgb) / .08);
  }
}

/* ---------- type: a display serif for names and titles, a quiet sans for the rest ---------- */
[data-theme="overlap"] .lt { font-size: 38px; line-height: 1.04; letter-spacing: -.012em; }
[data-theme="overlap"] .sub { color: var(--ink-2); }
[data-theme="overlap"] .sec, [data-theme="overlap"] .sec-row .sec, [data-theme="overlap"] .ic .area, [data-theme="overlap"] .qcard .k, [data-theme="overlap"] .could .k,
[data-theme="overlap"] .qz-n, [data-theme="overlap"] .also-h, [data-theme="overlap"] .vr-note, [data-theme="overlap"] .p-hero .fn, [data-theme="overlap"] .wl-brand {
  font-family: var(--label); font-size: var(--label-size); font-weight: 500; font-style: normal; letter-spacing: var(--label-track); text-transform: uppercase;
}
[data-theme="overlap"] .sec { color: var(--muted); margin-top: 32px; }
[data-theme="overlap"] .sec-row button { color: var(--ink); font-weight: 500; }
/* area markers: the area's own color, a full round dot, always the same */
[data-theme="overlap"] .ar i, [data-theme="overlap"] .ic .area i, [data-theme="overlap"] .area-b i, [data-theme="overlap"] .qcard .qm i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: none;
}
[data-theme="overlap"] .ar { color: var(--ink-2); font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 13.5px; }
[data-theme="overlap"] .pa .top .ar { color: var(--ink); }

/* ---------- controls: soft, calm, monochrome ---------- */
/* Buttons are pills (founder, 10 Nov): fully rounded ends, warm near-black ink, 52 px, a clear pressed state.
   Secondary and choice buttons share the roundness; nothing is square. */
:root[data-theme="overlap"] .btn, :root[data-theme="overlap"] .btn.clay { height: 52px; border-radius: 999px; background: var(--btn-ink); color: var(--bone); font: 500 16.5px/1 var(--sys); letter-spacing: 0; box-shadow: none; transition: background-color .12s ease, transform .12s ease; }
:root[data-theme="overlap"] .btn:active, :root[data-theme="overlap"] .btn.clay:active { background: var(--btn-ink-down); transform: scale(.985); }
:root[data-theme="overlap"] .btn[disabled] { opacity: 1; background: rgb(var(--ink-rgb) / .14); color: rgb(var(--ink-rgb) / .45); }
:root[data-theme="overlap"] .btn2 { border-radius: 999px; font-weight: 500; border: .5px solid rgb(var(--ink-rgb) / .3); background: transparent; }
:root[data-theme="overlap"] .btn2:active { background: rgb(var(--ink-rgb) / .06); }
:root[data-theme="overlap"] .pill, :root[data-theme="overlap"] .pill-b, :root[data-theme="overlap"] .field .add, :root[data-theme="overlap"] .seg button, :root[data-theme="overlap"] .linkbox button, :root[data-theme="overlap"] .retry { border-radius: 999px; }
[data-theme="overlap"] .lnk, [data-theme="overlap"] .foot .later { color: var(--muted); font-weight: 500; }
[data-theme="overlap"] .nav-b { color: var(--ink); }
[data-theme="overlap"] .card, [data-theme="overlap"] .group { background: var(--card); border: 0; box-shadow: 0 0 0 .5px var(--hair); }
[data-theme="overlap"] .field { background: var(--card); border: .5px solid var(--hair); }
[data-theme="overlap"] .field .add { background: var(--ink); color: var(--bone); font-weight: 500; }
[data-theme="overlap"] .jfield input { border: .5px solid var(--hair); background: var(--card) !important; }
[data-theme="overlap"] .frow { background: var(--card); border: 0; box-shadow: 0 0 0 .5px var(--hair); }
[data-theme="overlap"] .steps i.cur { background: var(--ink); }
[data-theme="overlap"] .qz-s { font-size: 31px; line-height: 1.12; }
[data-theme="overlap"] .tq-q { font-size: 22px; }
[data-theme="overlap"] .vr-meter i { background: var(--ink); width: 2.5px; }
[data-theme="overlap"] .vr-go svg { color: var(--ink); }
[data-theme="overlap"] .pg-s.done > i { background: var(--ink); }
[data-theme="overlap"] .ghost .g-ar { background: rgb(var(--ink-rgb) / .12); }

/* ---------- welcome, reveal, invite: the painting alone ---------- */
[data-theme="overlap"] .wl-art { width: 290px; max-width: 76%; margin-top: 6vh; }
[data-theme="overlap"] .wl-brand { color: var(--ink-2); margin-bottom: 18px; letter-spacing: .3em; }
[data-theme="overlap"] .wl-h { font-size: 36px; line-height: 1.06; }
[data-theme="overlap"] .wl-h em { color: var(--ink-2); font-style: italic; }
[data-theme="overlap"] .rv-mark { width: 300px; max-width: 80vw; }
[data-theme="overlap"] .rv-name { font-size: 54px; margin-top: 20px; }
[data-theme="overlap"] .inv .inv-mark { width: 230px; }
[data-theme="overlap"] .inv h1 { font-size: 34px; line-height: 1.08; }
[data-theme="overlap"] .pg-mark { width: 168px; }
[data-theme="overlap"] .pg-t { font-size: 32px; }

/* ---------- cards: a quiet sheet with the area's color as the only color ---------- */
[data-theme="overlap"] .ic { background: var(--card); border: 0; box-shadow: 0 0 0 .5px var(--hair), 0 18px 40px -24px rgb(var(--ink-rgb) / .28); border-radius: 22px; padding: 28px 24px 22px; }
[data-theme="overlap"] .ic::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
[data-theme="overlap"] .ic h3 { font-size: 40px; line-height: 1.02; }
[data-theme="overlap"] .ic p { font-size: 16.5px; color: var(--ink-2); }
[data-theme="overlap"] .ic .src span { background: var(--tint); box-shadow: none; }
[data-theme="overlap"] .mini-ic { border: 0; box-shadow: 0 0 0 .5px var(--hair); }
[data-theme="overlap"] .area-b { background: var(--card); border: 0; box-shadow: 0 0 0 .5px var(--hair); }

/* ---------- home ---------- */
[data-theme="overlap"] .h-top .who b { font-size: 30px; }
[data-theme="overlap"] .h-cmp { background: var(--card); border: 0; box-shadow: 0 0 0 .5px var(--hair); }
[data-theme="overlap"] .fin { background: var(--card); border: 0; box-shadow: 0 0 0 .5px var(--hair); }
[data-theme="overlap"] .prow .t b { font: 400 22px/1.1 var(--serif); }

/* ---------- pair ---------- */
[data-theme="overlap"] .p-marks { margin: 0 0 6px; }
[data-theme="overlap"] .p-marks .jm { width: 352px; max-width: 100%; height: auto; margin: -8px 0 -14px; }
[data-theme="overlap"] .p-hero h1 { font-size: 44px; letter-spacing: -.015em; }
[data-theme="overlap"] .note { font-size: 20px; line-height: 1.3; }
[data-theme="overlap"] .note b { font: 500 12px/2.2 var(--sys); color: var(--muted); }
[data-theme="overlap"] .pa { border-left: 0; padding: 16px 0; margin: 0; border-top: .5px solid var(--hair); }
[data-theme="overlap"] .pa + .pa { margin-top: 0; }
[data-theme="overlap"] .pa p { color: var(--ink-2); }
[data-theme="overlap"] .tag { font-weight: 500; letter-spacing: .04em; }
[data-theme="overlap"] .could { background: var(--card); border: 0; box-shadow: 0 0 0 .5px var(--hair); }
[data-theme="overlap"] .could .k { color: var(--muted); }
[data-theme="overlap"] .could p { font-size: 26px; }
[data-theme="overlap"] .qs li { border-left-color: var(--hair); }

/* ---------- compare ---------- */
[data-theme="overlap"] .inv-card { background: var(--card); border: 0; box-shadow: 0 0 0 .5px var(--hair); }
[data-theme="overlap"] .linkbox { background: var(--tint); }

/* ---------- drawn in (founder liked this in the motion lab): the card's outline is drawn by hand, the sheet and its
   shadow arrive under it, then the text settles line by line (8 px rise, about 90 ms apart). The reveal's name and
   line settle the same way once the flower is down. Fast and quiet; finished at once with reduced motion. ---------- */
[data-theme="overlap"] .deck .ic { box-shadow: 0 18px 40px -24px rgb(var(--ink-rgb) / .28); }
[data-theme="overlap"] .deck .ic::before { z-index: 1; }
[data-theme="overlap"] .ic-ink { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
[data-theme="overlap"] .ic-ink path { fill: none; stroke: rgb(var(--ink-rgb) / .38); stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 1 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-theme="overlap"] .deck .ic { animation: ov-sheet .5s ease-out .38s both; }
  [data-theme="overlap"] .deck .ic .ic-ink path { animation: ov-draw .62s cubic-bezier(.5,0,.2,1) .05s both; }
  /* M7: the words are painted from the first frame; they only rise into place (no fade), so the top reflection is never a blank card. */
  [data-theme="overlap"] .deck .ic > :not(.ic-ink):not(.stamp) { animation: ov-rise .56s cubic-bezier(.16,1,.3,1) both; }
  [data-theme="overlap"] .deck .ic > .area, [data-theme="overlap"] .deck .ic > .ic-h { animation-delay: .42s; }
  [data-theme="overlap"] .deck .ic > h3 { animation-delay: .51s; }
  [data-theme="overlap"] .deck .ic > p { animation-delay: .6s; }
  [data-theme="overlap"] .deck .ic > .src { animation-delay: .69s; }
  [data-theme="overlap"] .rv-name { animation: ov-settle .56s cubic-bezier(.16,1,.3,1) 1.05s both; }
  [data-theme="overlap"] .rv-line, [data-theme="overlap"] .rv-more { animation: ov-settle .56s cubic-bezier(.16,1,.3,1) 1.14s both; }
  [data-theme="overlap"] .rv-foot { animation: ov-settle .56s cubic-bezier(.16,1,.3,1) 1.23s both; }
}
@keyframes ov-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* B11: the sheet is opaque from its first frame (nothing behind it may show through); only its shadow arrives. */
@keyframes ov-sheet { from { box-shadow: 0 18px 40px -24px transparent; } }
@keyframes ov-settle { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
@keyframes ov-rise { from { transform: translate3d(0, 8px, 0); } }

/* ---------- text fields, matched to the pill buttons (also for the email and six-digit code screens) ---------- */
:root[data-theme="overlap"] .jfield input { height: 52px; border-radius: 16px; padding: 0 18px; font: 400 17px/1 var(--sys); }
:root[data-theme="overlap"] .jfield input:focus, :root[data-theme="overlap"] .field:focus-within { border-color: rgb(var(--ink-rgb) / .55); box-shadow: 0 0 0 3px rgb(var(--ink-rgb) / .06); }
:root[data-theme="overlap"] .jfield input[autocomplete="one-time-code"], :root[data-theme="overlap"] .jfield input[inputmode="numeric"] { text-align: center; font: 400 26px/1 var(--sys); letter-spacing: .32em; font-variant-numeric: tabular-nums; padding-left: calc(18px + .32em); }

/* ---------- the flower glows softly on dark paper (flower lab round 2): a light halo round the large marks ---------- */
@media (prefers-color-scheme: dark) {
  [data-theme="overlap"] :is(.wl-art, .rv-mark, .inv-mark, .pg-mark, .wv-art, .p-marks) .jm-overlap { filter: drop-shadow(0 0 10px rgb(255 236 214 / .13)) drop-shadow(0 0 2px rgb(255 236 214 / .1)); }
}
/* quiz dots: ink on warm paper; the chosen dot in the button ink */
[data-theme="overlap"] .qz-dots { --qz-dot: var(--ink); --qz-ring: var(--hair); --qz-on: var(--btn-ink); }

/* ---------- FL2 (14 Nov): text-only cards ---------- */
/* Flower has no scene pictures (web/scenes.js gives it none), so no picture or caption rules live here.
   So true: the lilac bloom seal read as a stain on a plain text card, so Flower marks it with two quiet words instead,
   set in the card's serif italic at the bottom right, fading in (no press, no tilt). The bloom stays in the markup
   (shared with the other looks) but is not drawn here. */
/* Text-only cards: keep the body at a reading measure on wide screens, with a little more leading. */
[data-theme="overlap"] .ic p { max-width: 34em; line-height: 1.55; }
[data-theme="overlap"] .ic-seal { width: auto; right: 24px; bottom: 22px; mix-blend-mode: normal; transform: none; }
[data-theme="overlap"] .ic-seal svg { display: none; }
[data-theme="overlap"] .ic-seal::after { content: "So true"; font: italic 400 17px/1 var(--serif); letter-spacing: .01em; color: var(--muted); }
[data-theme="overlap"] .ic.sealed .ic-seal { opacity: 1; transform: none; transition: opacity .3s ease; }
/* Home on a phone: the flower beside the name at a modest size, like the other looks, so the check-in comes sooner. */
[data-theme="overlap"] .hm-hero { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; text-align: left; padding-top: 26px; }
[data-theme="overlap"] .hm-mark { width: 112px; }
[data-theme="overlap"] .hm-k { margin-top: 0; }
[data-theme="overlap"] .hm-name { font-size: 42px; }
[data-theme="overlap"] .hm-line { font-size: 18px; margin-left: 0; }
:root[data-theme="overlap"] { --d-hero-mark: 136px; }
/* Waiting: the flower drawn large and fully inked, not a faint small sketch. */
[data-theme="overlap"] .wv-art { width: 230px; }
[data-theme="overlap"] .wv-art .jm-overlap { width: 100%; height: auto; filter: saturate(1.35) contrast(1.12); }