/* Six ovals (task T3, ?theme=venn): the founder's original watercolor Venn as the personal mark (web/venn.js), and a
   crisper page around it for a technical first audience. Built from the overlap theme: the same warm paper and pill
   buttons, but a refined grotesk (Geist, already self-hosted) for headings instead of the display serif, near-black ink,
   and squarer cards and fields. The six area colors are the reference painting's. */

:root[data-theme="venn"] {
  --bone: #f6f2ea; --bone-rgb: 246 242 234;
  --card: #fbf9f4; --card-rgb: 251 249 244;
  --ink: #171512; --ink-rgb: 23 21 18;
  --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 */
  /* the reference painting: Values deep blue, Drives coral red, Goals lavender, Tastes rose, Life story teal, Your world now amber */
  --area-values: #2f58a2; --area-goals: #9b8dcf; --area-drives: #de5f6d; --area-tastes: #e98aa0; --area-life: #3b9a9b; --area-world: #e3a53b;
  --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: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --venn-label-font: "Iowan Old Style", "Palatino", 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: #fffdf8; --mark-loop: #fffdf8;

  --hair: rgb(var(--ink-rgb) / .12); --hair-2: rgb(var(--ink-rgb) / .07);
  --r-xl: 10px; --r-l: 8px; --r-m: 8px; --r-s: 6px; --r-btn: 999px; --r-choice: 10px;
  /* buttons: warm near-black ink, a pill, a little lighter than a slab; pressed deepens */
  --btn-ink: #181613; --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="venn"] {
    --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: #5f86cf; --area-goals: #b0a5de; --area-drives: #e77b86; --area-tastes: #f0a5b7; --area-life: #55b3b2; --area-world: #ebba5c;
    --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: rgb(255 250 240 / .5);
    /* the flower's hand-drawn loops stay light on dark paper, a little softer */
    --mark-loop: rgb(255 250 240 / .72);
    --mark-wash: #77705f;
    --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="venn"] .lt { font-size: 38px; line-height: 1.04; letter-spacing: -.012em; }
[data-theme="venn"] .sub { color: var(--ink-2); }
[data-theme="venn"] .sec, [data-theme="venn"] .sec-row .sec, [data-theme="venn"] .ic .area, [data-theme="venn"] .qcard .k, [data-theme="venn"] .could .k,
[data-theme="venn"] .qz-n, [data-theme="venn"] .also-h, [data-theme="venn"] .vr-note, [data-theme="venn"] .p-hero .fn, [data-theme="venn"] .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="venn"] .sec { color: var(--muted); margin-top: 32px; }
[data-theme="venn"] .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="venn"] .ar i, [data-theme="venn"] .ic .area i, [data-theme="venn"] .area-b i, [data-theme="venn"] .qcard .qm i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: none;
}
[data-theme="venn"] .ar { color: var(--ink-2); font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 13.5px; }
[data-theme="venn"] .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="venn"] .btn, :root[data-theme="venn"] .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="venn"] .btn:active, :root[data-theme="venn"] .btn.clay:active { background: var(--btn-ink-down); transform: scale(.985); }
:root[data-theme="venn"] .btn[disabled] { opacity: 1; background: rgb(var(--ink-rgb) / .14); color: rgb(var(--ink-rgb) / .45); }
:root[data-theme="venn"] .btn2 { border-radius: 999px; font-weight: 500; border: .5px solid rgb(var(--ink-rgb) / .3); background: transparent; }
:root[data-theme="venn"] .btn2:active { background: rgb(var(--ink-rgb) / .06); }
:root[data-theme="venn"] .pill, :root[data-theme="venn"] .pill-b, :root[data-theme="venn"] .field .add, :root[data-theme="venn"] .seg button, :root[data-theme="venn"] .linkbox button, :root[data-theme="venn"] .retry { border-radius: 999px; }
[data-theme="venn"] .lnk, [data-theme="venn"] .foot .later { color: var(--muted); font-weight: 500; }
[data-theme="venn"] .nav-b { color: var(--ink); }
[data-theme="venn"] .card, [data-theme="venn"] .group { background: var(--card); border: 0; box-shadow: 0 0 0 .5px var(--hair); }
[data-theme="venn"] .field { background: var(--card); border: .5px solid var(--hair); }
[data-theme="venn"] .field .add { background: var(--ink); color: var(--bone); font-weight: 500; }
[data-theme="venn"] .jfield input { border: .5px solid var(--hair); background: var(--card) !important; }
[data-theme="venn"] .frow { background: var(--card); border: 0; box-shadow: 0 0 0 .5px var(--hair); }
[data-theme="venn"] .steps i.cur { background: var(--ink); }
[data-theme="venn"] .qz-s { font-size: 31px; line-height: 1.12; }
[data-theme="venn"] .tq-q { font-size: 22px; }
[data-theme="venn"] .vr-meter i { background: var(--ink); width: 2.5px; }
[data-theme="venn"] .vr-go svg { color: var(--ink); }
[data-theme="venn"] .pg-s.done > i { background: var(--ink); }
[data-theme="venn"] .ghost .g-ar { background: rgb(var(--ink-rgb) / .12); }

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

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

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

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

/* ---------- compare ---------- */
[data-theme="venn"] .inv-card { background: var(--card); border: 0; box-shadow: 0 0 0 .5px var(--hair); }
[data-theme="venn"] .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="venn"] .deck .ic { box-shadow: 0 18px 40px -24px rgb(var(--ink-rgb) / .28); }
[data-theme="venn"] .deck .ic::before { z-index: 1; }
[data-theme="venn"] .ic-ink { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
[data-theme="venn"] .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="venn"] .deck .ic { animation: ov-sheet .5s ease-out .38s both; }
  [data-theme="venn"] .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="venn"] .deck .ic > :not(.ic-ink):not(.stamp) { animation: ov-rise .56s cubic-bezier(.16,1,.3,1) both; }
  [data-theme="venn"] .deck .ic > .area, [data-theme="venn"] .deck .ic > .ic-h { animation-delay: .42s; }
  [data-theme="venn"] .deck .ic > h3 { animation-delay: .51s; }
  [data-theme="venn"] .deck .ic > p { animation-delay: .6s; }
  [data-theme="venn"] .deck .ic > .src { animation-delay: .69s; }
  [data-theme="venn"] .rv-name { animation: ov-settle .56s cubic-bezier(.16,1,.3,1) 1.05s both; }
  [data-theme="venn"] .rv-line, [data-theme="venn"] .rv-more { animation: ov-settle .56s cubic-bezier(.16,1,.3,1) 1.14s both; }
  [data-theme="venn"] .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; } }
@keyframes ov-sheet { from { box-shadow: 0 18px 40px -24px transparent; } } /* B11: opaque from the first frame */
@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="venn"] .jfield input { height: 52px; border-radius: 16px; padding: 0 18px; font: 400 17px/1 var(--sys); }
:root[data-theme="venn"] .jfield input:focus, :root[data-theme="venn"] .field:focus-within { border-color: rgb(var(--ink-rgb) / .55); box-shadow: 0 0 0 3px rgb(var(--ink-rgb) / .06); }
:root[data-theme="venn"] .jfield input[autocomplete="one-time-code"], :root[data-theme="venn"] .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); }

/* ---------- crisper than the flower look: a grotesk for headings, tight and a little heavier ---------- */
[data-theme="venn"] :is(.lt, .wl-h, .rv-name, .inv h1, .pg-t, .qz-s, .tq-q, .ic h3, .p-hero h1, .note, .could p, .h-top .who b, .qr-l) { font-family: var(--serif); font-weight: 500; letter-spacing: -.028em; font-style: normal; }
[data-theme="venn"] .lt { font-size: 32px; line-height: 1.08; }
[data-theme="venn"] .wl-h { font-size: 31px; line-height: 1.1; }
[data-theme="venn"] .wl-h em { font-style: normal; color: var(--muted); }
[data-theme="venn"] .rv-name { font-size: 44px; }
[data-theme="venn"] .ic h3 { font-size: 32px; line-height: 1.08; }
[data-theme="venn"] .p-hero h1 { font-size: 36px; }
[data-theme="venn"] .qz-s { font-size: 26px; line-height: 1.16; }
[data-theme="venn"] .tq-q { font-size: 19px; }
[data-theme="venn"] .could p { font-size: 22px; }
[data-theme="venn"] .note { font-size: 17px; line-height: 1.35; }
[data-theme="venn"] .prow .t b { font: 500 19px/1.1 var(--serif); letter-spacing: -.02em; }
[data-theme="venn"] .h-top .who b { font-size: 26px; }
/* squarer sheets: cards and fields with small radii, a hairline instead of a soft shadow */
[data-theme="venn"] .ic { border-radius: 10px; box-shadow: 0 0 0 .5px rgb(var(--ink-rgb) / .2), 0 14px 30px -22px rgb(var(--ink-rgb) / .3); }
[data-theme="venn"] .ic::before { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; border-radius: 10px 0 0 10px; }
[data-theme="venn"] .ic-ink { display: none; }
[data-theme="venn"] .deck .ic { box-shadow: 0 0 0 .5px rgb(var(--ink-rgb) / .2), 0 14px 30px -22px rgb(var(--ink-rgb) / .3); }
[data-theme="venn"] .jfield input { border-radius: 8px; }
/* the labeled mark on the reveal is wider than tall */
[data-theme="venn"] .rv-mark { width: 340px; max-width: 92vw; }
[data-theme="venn"] .rv-mark .jm { width: 100%; height: auto; }
[data-theme="venn"] .p-marks .jm { width: 340px; max-width: 100%; height: auto; margin: 0; }
[data-theme="venn"] .wl-art { width: 300px; max-width: 80%; }
/* quiz dots */
[data-theme="venn"] .qz-dots { --qz-dot: var(--ink); --qz-ring: var(--hair); --qz-on: var(--btn-ink); }