/* ============================================================================
   Inkling — a match before the needle.
   THEME: the flash sheet on the studio counter, in Saturday daylight.
   Warm aged paper, ink linework, healed-oxblood accent. Deliberately NOT the
   category reflexes (white + millennial pink; sage + cream wellness) and NOT
   the old neon-on-black, which read as generic dark SaaS.
   Every neutral is tinted toward the oxblood hue — no pure black, no pure white.
   Mobile-first (390×844), usable on desktop. No external assets.
   ============================================================================ */

/* ---------------------------------------------------------------- type ----
   Self-hosted so the CSP can stay 'self'-only and no third party ever sees a
   request from a woman looking up an artist. Latin + latin-ext subsets;
   unicode-range means a browser downloads only what a page actually needs.
   Fraunces (display serif) — Undercase/Phaedra, OFL.
   Inter (UI grotesque) — Rasmus Andersson, OFL.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- paper (grounds) — warm bone. Never pure white, never grey ---------
     One hue (74) across every ground so the app reads as one sheet of paper
     under one light, and photographs sit on it without a colour cast. */
  --paper:    oklch(98.4% 0.0015 280);   /* the sheet itself                    */
  --paper-up: oklch(99.6% 0.0010 280);   /* raised: cards, sheets               */
  --paper-in: oklch(96.2% 0.0030 280);   /* sunken: wells, inputs, chips        */
  --paper-dp: oklch(93.0% 0.0040 280);   /* deepest well                        */

  /* ---- ink (marks) — deep aubergine, never pure black --------------------
     Hue 325-ish rather than umber: it keeps the interface feminine without a
     single pastel, and it is the primary action colour (buttons are ink, not
     a pink). Every step is contrast-audited against all four grounds, so
     hierarchy is carried by size and weight, never by fading text out. */
  --ink-1:    oklch(21% 0.012 285);    /* headlines, primary text   14.2:1    */
  --ink-2t:   oklch(37% 0.010 285);    /* body                       8.4:1    */
  --ink-3t:   oklch(50% 0.008 285);    /* secondary / captions       6.0:1    */
  --line:     oklch(91.5% 0.003 280);     /* hairlines                           */
  --line-2:   oklch(85% 0.004 280);     /* stronger rules                      */
  --taupe:    oklch(64% 0.006 280);     /* decorative rules & marks ONLY —
                                          2.4:1, never put text in it         */

  /* ---- trust (teal) — FACTS ONLY -----------------------------------------
     Reserved for things Inkling has actually checked: identity, studio,
     verified bookings, the verification chain. Nothing subjective may borrow
     it, because the moment an opinion is teal, an opinion looks like a fact. */
  --trust:    oklch(46% 0.048 195);    /* 5.8:1 — icons, borders, text        */
  --trust-dk: oklch(34% 0.044 195);    /* 9.6:1 — emphasis                    */
  --trust-in: oklch(96% 0.016 195);    /* tint ground                         */

  /* ---- rose (dusty) — COMMUNITY & WARMTH ---------------------------------
     Reviews, Circle discussion, the human side. Dusty rather than pink, and
     deliberately a different *kind* of colour from teal: warm, softer-edged,
     never a badge shape. --rose is decorative (2.5:1); text uses --rose-dk. */
  --rose:     oklch(68% 0.060 12);     /* borders, dots, tint edges           */
  --rose-dk:  oklch(42% 0.070 12);     /* 7.4:1 — text and solid fills        */
  --rose-dp:  oklch(34% 0.075 17);     /* 11.0:1 — pressed / deepest rose     */
  --rose-in:  oklch(95.5% 0.014 12);   /* tint ground                         */

  /* ---- amber — caution, and only caution --------------------------------- */
  --amber:    oklch(56% 0.070 82);     /* strokes & borders (3.9:1)           */
  --amber-dk: oklch(40% 0.070 72);     /* 7.8:1 — caution text                */
  --amber-in: oklch(96% 0.020 82);     /* tint ground                         */

  /* ---- ink at low alpha — every hairline, scrim and shadow in the app ----- */
  --ink-a:    21% 0.012 285;

  /* ---- type ---------------------------------------------------------------
     One display serif for names, section heads and the few emotional moments
     (Fraunces), one grotesque for everything a user operates (Inter). */
  --display: 'Fraunces', 'Hoefler Text', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;

  /* ---- rhythm -------------------------------------------------------------
     Restrained radii and very quiet shadows: things should sit on the paper,
     not float above it in bubbles. */
  --r-sm: 8px; --r-md: 14px; --r-lg: 18px; --r-xl: 26px;
  --sh-card: 0 16px 40px -22px oklch(var(--ink-a) / .26), 0 2px 8px -4px oklch(var(--ink-a) / .12);
  --sh-soft: 0 8px 22px -16px oklch(var(--ink-a) / .22);
  --sh-lift: 0 1px 3px -1px oklch(var(--ink-a) / .10);
  --ease: cubic-bezier(.22, 1, .36, 1);          /* ease-out-quart, no bounce */
  --maxw: 440px;
  /* The landing page is the one surface that is not a phone frame: it is read
     on a laptop as often as on a bus. One column, held to a reading measure,
     centred in whatever width it gets. */
  --maxw-read: 44rem;
  /* Two tints the landing page needs and the app did not: a translucent paper
     for the sticky header, and a softened rose for the pull-quote rule. Mixed
     from the tokens above rather than written out as literals, so the retheme
     lands on them without anyone having to remember they exist. */
  --paper-veil: color-mix(in oklab, var(--paper) 88%, transparent);
  --rule-rose: color-mix(in oklab, var(--rose) 60%, transparent);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink-1);
  /* An opaque colour under the wash: it is what every contrast measurement
     resolves against, and a gradient alone leaves backgroundColor transparent. */
  background-color: var(--paper);
  background-image:
    radial-gradient(140% 90% at 50% -20%, oklch(99.6% 0.0015 280) 0%, var(--paper) 62%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  overflow-x: hidden;
}
#app { overflow-x: hidden; }
.topbar { min-width: 0; gap: 8px; }
.wordmark { min-width: 0; flex-shrink: 1; }
.topbar-right { flex-shrink: 0; }

/* phone frame ------------------------------------------------------------- */
#app {
  max-width: var(--maxw);
  height: 100dvh;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image: linear-gradient(180deg, oklch(99.5% 0.0015 280) 0%, var(--paper) 100%);
  box-shadow: 0 0 0 1px oklch(21% 0.012 285 / .05), 0 40px 120px -30px oklch(21% 0.012 285 / .22);
  overflow: hidden;
}
@media (min-width: 480px) {
  body { padding: 22px 0; }
  #app { border-radius: 30px; height: min(880px, calc(100dvh - 44px)); }
}

/* ------------------------------------------------------------------ header */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px; flex: 0 0 auto; position: relative; z-index: 5;
}
.wordmark {
  font-family: var(--display);
  font-size: 26px; font-weight: 600; letter-spacing: .5px; line-height: 1;
  display: flex; align-items: baseline; gap: 2px;
}
.wordmark b { color: var(--ink-1); font-weight: 600; }
.wordmark .dot { color: var(--rose-dk); }
.wordmark small {
  font-family: var(--sans); font-size: 8px; letter-spacing: .28em; line-height: 1.3;
  text-transform: uppercase; color: var(--ink-3t); margin-left: 9px; font-weight: 700;
  white-space: nowrap; display: none;
}
@media (min-width: 400px) { .wordmark small { display: inline-block; } }

/* role switch pill */

/* ------------------------------------------------------------------ nav */
.tabbar {
  flex: 0 0 auto; display: flex; justify-content: space-around;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid oklch(21% 0.012 285 / .07);
  background: oklch(99.3% 0.002 280 / .88); backdrop-filter: blur(14px); z-index: 5;
}
.tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ink-3t); font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 700; padding: 4px 4px; position: relative; transition: color .2s;
  flex: 1 1 0; min-width: 0; overflow: hidden;
}
.tab .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.tab.on { color: var(--ink-1); }
.tab .badge {
  position: absolute; top: -2px; right: 6px; min-width: 16px; height: 16px;
  background: var(--rose-dk); color: var(--paper-up); border-radius: 999px; font-size: 9px;
  display: grid; place-items: center; padding: 0 4px; font-weight: 800;
  box-shadow: 0 0 0 2px var(--paper);
}

/* ------------------------------------------------------------------ views */
.view { flex: 1 1 auto; min-height: 0; position: relative; display: none; }
.view.on { display: flex; flex-direction: column; }

/* =========================================================== ONBOARDING === */
#view-onboard { overflow-y: auto; }
.onboard-hero {
  padding: 30px 26px 10px; text-align: center;
}
.onboard-hero .mark {
  font-family: var(--display); font-size: 56px; line-height: .92; font-weight: 600;
  letter-spacing: 1px;
}
.onboard-hero .mark .dot { color: var(--rose-dk); }
.onboard-hero p {
  color: var(--ink-2t); font-size: 15px; line-height: 1.5; max-width: 30ch;
  margin: 14px auto 0;
}

/* =============================================================== DECK ===== */
#view-deck { padding: 6px 0 0; }
.deck-head {
  padding: 4px 22px 10px; display: flex; align-items: baseline; justify-content: space-between;
}
.deck-head h2 { font-family: var(--display); font-size: 21px; margin: 0; font-weight: 600; }
.deck-head .sub { font-size: 11px; color: var(--ink-3t); letter-spacing: .04em; }

.deck-stage {
  flex: 1 1 auto; position: relative; margin: 0 auto; width: 100%;
  max-width: 400px; padding: 4px 16px 4px;
}
.deck-stack { position: absolute; inset: 4px 16px; }

/* --------------------------------------------------------------- a card ---
   One definition, not four stacked overrides. The card is a fixed box: the
   portfolio image takes most of it, and a short, non-scrolling caption sits on
   paper underneath. Anything that needs more than five lines belongs in the
   profile sheet the card opens. */
.card {
  position: absolute; inset: 0; border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper-up); box-shadow: var(--sh-card);
  border: 1px solid oklch(var(--ink-a) / .07);
  display: flex; flex-direction: column;
  will-change: transform; touch-action: pan-y; user-select: none;
  transform-origin: center bottom; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.card:not(.behind-1):not(.behind-2):hover { transform: translateY(-2px); }
.card.behind-1 { transform: scale(.965) translateY(10px); }
.card.behind-2 { transform: scale(.93) translateY(20px); }
.card.behind-1, .card.behind-2 { background: var(--paper-up); cursor: default; }
.card.behind-1 .card-body, .card.behind-2 .card-body,
.card.behind-1 .card-media, .card.behind-2 .card-media { visibility: hidden; }

.card-media {
  position: relative; flex: 1 1 auto; min-height: 62%; overflow: hidden;
  background: var(--paper-in); border-bottom: 1px solid var(--line);
}
.card-media .tile-svg, .card-media > svg,
.card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-count {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px;
  background: oklch(20% 0.030 320 / .74); color: var(--paper-up);
  backdrop-filter: blur(4px);
}

.card-body { flex: 0 0 auto; padding: 14px 16px 16px; background: var(--paper-up); }
.card-body h3 {
  font-family: var(--display); font-size: 25px; line-height: 1.05; margin: 0;
  font-weight: 600; letter-spacing: -0.01em;
}
.card-sub {
  font-size: 12.5px; color: var(--ink-2t); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* FACTS row: teal ticks only. Nothing subjective is allowed on this line. */
.card-facts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px;
  font-size: 12px; font-weight: 600;
}
.card-facts .fact { display: inline-flex; align-items: center; gap: 5px; color: var(--trust-dk); }
.card-facts .fact svg { width: 12px; height: 12px; stroke: currentColor; fill: none; flex: 0 0 auto; }
.card-facts .rating { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ink-1); }
.card-facts .rating i { font-style: normal; color: var(--rose-dk); }
.card-facts .rating em { font-style: normal; color: var(--ink-3t); font-weight: 500; }
.card-open {
  margin-top: 11px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3t);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 5px 10px;
  border-radius: 999px; background: var(--paper-in); color: var(--ink-2t);
  border: 1px solid var(--line); white-space: nowrap;
}
.chip.style { background: var(--paper-up); border-color: var(--line-2); color: var(--ink-1); }

/* client "the piece they want" detail table */
.want-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 12px; }
.want-grid div { min-width: 0; }
.want-grid dt { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3t); font-weight: 800; }
.want-grid dd { margin: 2px 0 0; font-size: 13px; color: var(--ink-1); line-height: 1.3; }

/* drag stamps */

/* empty deck */
.deck-empty {
  position: absolute; inset: 4px 16px; display: none; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 10px;
  border: 1px dashed oklch(30% 0.030 320 / .12); border-radius: var(--r-lg); padding: 30px;
}
.deck-empty.on { display: flex; }
.deck-empty svg { width: 46px; height: 46px; stroke: var(--ink-3t); fill: none; stroke-width: 1.4; }
.deck-empty h3 { font-family: var(--display); font-size: 22px; margin: 6px 0 0; font-weight: 600; }
.deck-empty p { color: var(--ink-3t); font-size: 13px; max-width: 26ch; margin: 0; }
.deck-empty button { margin-top: 8px; }

/* action buttons */
.deck-actions {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  gap: 20px; padding: 14px 0 18px;
}
.act {
  appearance: none; border: 0; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center; transition: transform .15s var(--ease), box-shadow .2s, background .2s;
  background: var(--paper-in); border: 1px solid oklch(30% 0.030 320 / .08);
}
.act svg { stroke-width: 2.4; fill: none; }
.act:active { transform: scale(.9); }
.act.nope { width: 62px; height: 62px; }
.act.nope svg { width: 26px; height: 26px; stroke: var(--rose-dk); }
.act.nope:hover { box-shadow: 0 0 0 1px var(--rose-dk), 0 8px 24px -8px oklch(66% 0.075 17 / 0.60); }
.act.like { width: 72px; height: 72px; background: var(--rose-dk); border-color: var(--rose-dk); }
.act.like svg { width: 32px; height: 32px; stroke: var(--paper-up); fill: var(--paper-up); }
.act.like:hover { box-shadow: 0 10px 30px -8px oklch(66% 0.075 17 / 0.62); }
.act.info { width: 52px; height: 52px; }
.act.info svg { width: 22px; height: 22px; stroke: var(--ink-2t); }

/* =========================================================== MATCHES ===== */
#view-matches { overflow-y: auto; }
.section-head { padding: 12px 22px 6px; }
.section-head h2 { font-family: var(--display); font-size: 24px; margin: 0; font-weight: 600; }
.section-head p { color: var(--ink-3t); font-size: 12px; margin: 4px 0 0; }
.match-list { padding: 8px 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.match-row {
  display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: var(--r-md);
  background: var(--paper-in); border: 1px solid oklch(30% 0.030 320 / .05); cursor: pointer;
  transition: background .2s, transform .15s var(--ease); width: 100%; text-align: left; color: inherit;
}
.match-row:hover { background: var(--paper-dp); transform: translateX(2px); }
.match-row .av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; position: relative; }
.match-row .av svg { width: 100%; height: 100%; }
.match-row .av.new::after {
  content: ''; position: absolute; top: 1px; right: 1px; width: 12px; height: 12px;
  background: var(--rose-dk); border-radius: 50%; box-shadow: 0 0 0 2px var(--paper-in);
}
.match-row .meta { flex: 1; min-width: 0; }
.match-row .meta b { font-family: var(--display); font-size: 17px; font-weight: 600; display: block; }
.match-row .meta span { font-size: 12.5px; color: var(--ink-3t); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-row .when { font-size: 10px; color: var(--ink-3t); flex: 0 0 auto; }
.empty-state { text-align: center; padding: 60px 30px; color: var(--ink-3t); }
.empty-state svg { width: 52px; height: 52px; stroke: currentColor; fill: none; stroke-width: 1.3; opacity: .6; }
.empty-state h3 { font-family: var(--display); color: var(--ink-2t); font-size: 20px; margin: 14px 0 4px; font-weight: 600; }
.empty-state p { font-size: 13px; margin: 0 auto; max-width: 28ch; line-height: 1.5; }

/* =============================================================== CHAT ===== */
#view-chat { display: none; }
#view-chat.on { display: flex; flex-direction: column; }
.chat-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid oklch(21% 0.012 285 / .07); flex: 0 0 auto;
}
.chat-head .back { appearance: none; border: 0; background: transparent; color: var(--ink-1); cursor: pointer; padding: 4px; }
.chat-head .back svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.chat-head .av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.chat-head .av svg { width: 100%; height: 100%; }
.chat-head .who b { font-family: var(--display); font-size: 17px; font-weight: 600; display: block; line-height: 1.1; }
.chat-head .who span { font-size: 11px; color: var(--ink-3t); }
.chat-scroll { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 76%; padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.4; }
.msg.them { align-self: flex-start; background: var(--paper-dp); border-bottom-left-radius: 5px; }
.msg.me { align-self: flex-end; background: var(--rose-dk); color: var(--paper-up); border-bottom-right-radius: 5px; }
.msg.system {
  align-self: center; background: transparent; color: var(--ink-3t); font-size: 11px;
  text-align: center; max-width: 90%; letter-spacing: .02em;
}
.msg.consult {
  align-self: center; max-width: 88%; background: var(--paper-in); border: 1px solid oklch(94.5% 0.024 17 / 0.85);
  color: var(--ink-1); text-align: center; border-radius: 14px;
}
.msg.consult b { color: var(--rose-dk); font-family: var(--display); font-size: 15px; }

.chat-input {
  flex: 0 0 auto; display: flex; gap: 8px; padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid oklch(21% 0.012 285 / .07);
}
.chat-input input {
  flex: 1; background: var(--paper-in); border: 1px solid oklch(30% 0.030 320 / .08); color: var(--ink-1);
  border-radius: 999px; padding: 11px 16px; font-size: 14px; font-family: var(--sans); outline: none;
}
.chat-input input:focus { border-color: var(--rose-dk); }
.chat-input button {
  appearance: none; border: 0; background: var(--rose-dk); color: var(--paper-up); width: 44px; height: 44px;
  border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto;
}
.chat-input button svg { width: 20px; height: 20px; stroke: var(--paper-up); fill: var(--paper-up); }

/* =========================================================== MATCH MODAL = */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: oklch(24% 0.028 320 / .52); backdrop-filter: blur(7px);
}
.overlay.on { display: flex; }
.match-modal {
  max-width: 380px; width: 100%; text-align: center; position: relative;
  animation: pop .5s var(--ease) both;
}
@keyframes pop { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.match-modal .its {
  font-family: var(--display); font-size: 52px; line-height: .95; font-weight: 600;
  background: linear-gradient(180deg, var(--paper-up), var(--rose-dk)); -webkit-background-clip: text;
  background-clip: text; color: transparent; margin-bottom: 4px;
}
.match-modal .sub { color: var(--ink-2t); font-size: 14px; margin-bottom: 26px; }
.match-faces { display: flex; align-items: center; justify-content: center; gap: -10px; margin-bottom: 22px; }
.match-faces .face { width: 108px; height: 108px; border-radius: 50%; overflow: hidden; border: 3px solid var(--rose-dk); box-shadow: 0 0 40px -6px oklch(66% 0.075 17 / 0.60); }
.match-faces .face svg { width: 100%; height: 100%; }
.match-faces .face:first-child { transform: rotate(-6deg); }
.match-faces .face:last-child { transform: rotate(6deg) translateX(-16px); }
.match-faces .heart { position: relative; z-index: 3; color: var(--rose-dk); }
.match-faces .heart svg { width: 40px; height: 40px; fill: var(--rose-dk); stroke: none; filter: drop-shadow(0 0 12px oklch(66% 0.075 17 / 0.62)); }
.match-modal .handles { font-size: 15px; color: var(--ink-1); margin-bottom: 24px; }
.match-modal .handles b { font-family: var(--display); font-weight: 600; }
.match-cta { display: flex; flex-direction: column; gap: 10px; }
.btn {
  appearance: none; border: 0; cursor: pointer; border-radius: 14px; padding: 15px;
  font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .03em;
  transition: transform .12s var(--ease), box-shadow .2s, background .2s;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--rose-dk); color: var(--paper-up); box-shadow: 0 10px 30px -10px oklch(66% 0.075 17 / 0.62); }
.btn.ghost { background: transparent; color: var(--ink-2t); border: 1px solid oklch(30% 0.030 320 / .14); }
.btn.small { padding: 10px 16px; font-size: 12px; border-radius: 10px; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; vertical-align: -3px; margin-right: 4px; }

/* confetti canvas */
#confetti { position: fixed; inset: 0; z-index: 49; pointer-events: none; display: none; }
#confetti.on { display: block; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(20px);
  background: var(--paper-dp); color: var(--ink-1); border: 1px solid oklch(30% 0.030 320 / .1);
  padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600;
  opacity: 0; transition: all .3s var(--ease); z-index: 60; pointer-events: none;
  box-shadow: var(--sh-soft); max-width: 90%; text-align: center;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* generic scrollbars (desktop) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--paper-dp); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ===================================================== STANDARDS / CHIPS = */

.std-label {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3t);
  font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.std-label .meets { color: var(--trust); letter-spacing: .04em; text-transform: none; font-size: 10px; font-weight: 700; }

.chip.perk { background: var(--paper-dp); color: var(--ink-2t); border: 1px solid oklch(21% 0.012 285 / .07); }
.chip.perk.ok { background: oklch(95% 0.022 189 / 0.41); border-color: oklch(55% 0.050 189 / 0.42); color: var(--trust-dk); }

.chip.perk.more { background: transparent; color: var(--ink-3t); }

/* filters + studio screens */
#view-profile { overflow-y: auto; }
.filter-summary{ margin: 4px 16px; }
.filter-summary {
  display: flex; gap: 8px; margin: 8px 16px 4px;
}
.filter-summary div {
  flex: 1; background: var(--paper-in); border: 1px solid oklch(21% 0.012 285 / .07);
  border-radius: var(--r-md); padding: 12px 10px; text-align: center;
}
.filter-summary b { font-family: var(--display); font-size: 26px; display: block; line-height: 1; color: var(--rose-dk); }
.filter-summary span { font-size: 10px; color: var(--ink-3t); display: block; margin-top: 4px; line-height: 1.3; }

.amenity-editor { padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 6px; }
.amenity-pref {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--paper-in); border: 1px solid oklch(30% 0.030 320 / .05); border-radius: 12px; padding: 9px 12px;
}
.apref-label { font-size: 13.5px; }
.seg { display: flex; background: var(--paper-up); border-radius: 999px; padding: 2px; flex: 0 0 auto; }
.seg button {
  appearance: none; border: 0; background: transparent; color: var(--ink-3t); cursor: pointer;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 6px 9px; border-radius: 999px;
  transition: background .2s, color .2s; font-family: var(--sans);
}
/* A preference is not a fact, so none of these may be teal. Emphasis climbs
   with the strength of the choice instead: neutral, then quiet, then ink. */
.seg button { min-height: 40px; }
.seg button.on { color: var(--ink-2t); background: var(--paper-dp); }
.seg button[data-v="nice"].on { background: var(--paper-dp); color: var(--ink-1); }
.seg button[data-v="must"].on { background: var(--ink-1); color: var(--paper-up); }

/* ===================================================== STUDIO (SPACE) ==== */

/* bottom sheet */
.sheet {
  position: fixed; inset: 0; z-index: 55; background: oklch(24% 0.028 320 / .44); backdrop-filter: blur(5px);
  display: none; align-items: flex-end; justify-content: center;
}
.sheet.on { display: flex; }
.sheet-inner {
  width: 100%; max-width: var(--maxw); max-height: 92dvh; overflow-y: auto;
  background-color: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0;
  border: 1px solid oklch(30% 0.030 320 / .08); border-bottom: 0; padding-bottom: 30px;
  animation: sheetUp .34s var(--ease) both;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 18px 6px; position: sticky; top: 0; background-color: var(--paper); z-index: 2;
  border-bottom: 1px solid var(--line); }
.sheet-head h2 { font-family: var(--display); font-size: 26px; margin: 0; font-weight: 600; }
.sheet-loc { display: flex; align-items: center; gap: 5px; color: var(--ink-2t); font-size: 12.5px; margin-top: 4px; }
.sheet-loc svg { width: 13px; height: 13px; stroke: var(--rose-dk); fill: none; stroke-width: 1.8; }
.sheet-close { appearance: none; border: 0; background: var(--paper-dp); color: var(--ink-1); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.sheet-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.sheet-blurb { padding: 4px 18px 12px; color: var(--ink-2t); font-size: 14px; line-height: 1.5; }

/* studio card on the artist profile */

/* ===================================================== SAFETY / TRUST ==== */
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-filter { appearance: none; border: 1px solid oklch(30% 0.030 320 / .1); background: var(--paper-in); color: var(--ink-2t); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
.topbar-filter svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.topbar-filter:hover { border-color: var(--rose-dk); color: var(--ink-1); }

/* pool toggle (All vs Vetted) */
.deck-head-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* vetted pill + tier gem + trust strip */
.vetted-pill { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 7px; border-radius: 999px;
  background: oklch(95% 0.022 189 / 0.52); color: var(--trust-dk); border: 1px solid oklch(55% 0.050 189 / 0.40); margin-left: auto; }
.vetted-pill.sm { margin-left: 4px; padding: 1px 6px; font-size: 9px; vertical-align: 1px; }

  
.trust-strip { display: flex; gap: 6px; margin: 12px 0 4px; }
.trust-cell { flex: 1; background: var(--paper-in); border: 1px solid oklch(21% 0.012 285 / .07); border-radius: 10px; padding: 7px 4px; text-align: center; min-width: 0; }
.trust-cell b { display: block; font-size: 14px; line-height: 1; }
.trust-cell .tvouch { color: var(--rose-dk); } .trust-cell .tup { color: var(--trust); } .trust-cell .tup.low { color: var(--rose-dk); }
.trust-cell span { display: block; font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3t); margin-top: 3px; }

.status-banner { margin: 10px 0 2px; padding: 8px 10px; border-radius: 10px; font-size: 11.5px; font-weight: 700; line-height: 1.4; }
.status-banner.s-flagged { background: oklch(96% 0.020 82 / 0.41); border: 1px solid oklch(56% 0.070 82 / 0.40); color: var(--amber-dk); }
.status-banner.s-suspended, .status-banner.s-removed { background: oklch(94.5% 0.024 17 / 0.46); border: 1px solid oklch(66% 0.075 17 / 0.45); color: var(--rose-dk); }

.shield { color: var(--trust); }
.chip.perk.none { background: transparent; border: 1px dashed oklch(66% 0.075 17 / 0.40); color: var(--rose-dk); }

/* circle link on card */

 
  
.cl-red { color: var(--rose-dk); font-weight: 700; } .cl-green { color: var(--trust-dk); font-weight: 700; }

/* ================================================= SHEET: circle/book/etc = */

.sheet-foot-note { font-size: 10.5px; color: var(--ink-3t); padding: 10px 18px 0; font-style: italic; line-height: 1.5; }

/* The Circle is a discussion, so its furniture is rose and paper. Teal is not
   available in here except on a per-post verification badge — the one thing on
   this screen that Inkling actually checked. */
.circle-banner { margin: 6px 18px 2px; font-size: 12px; color: var(--ink-2t); background: var(--rose-in);
  border: 1px solid oklch(86% 0.040 17); border-radius: var(--r-sm); padding: 10px 12px; line-height: 1.5; }
.circle-banner b { color: var(--rose-dk); }
.circle-banner svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; vertical-align: -2px; }
.circle-summary { display: flex; gap: 8px; padding: 10px 18px; }
.cs-cell { flex: 1; background: var(--paper-in); border: 1px solid oklch(21% 0.012 285 / .07); border-radius: 12px; padding: 10px 6px; text-align: center; }
.cs-cell b { display: block; font-family: var(--display); font-size: 22px; }
.cs-cell span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3t); }
.cs-cell.green b { color: var(--ink-1); } .cs-cell.red b { color: var(--rose-dk); }
.circle-pattern { margin: 2px 18px 6px; font-size: 11.5px; color: var(--amber-dk); background: oklch(96% 0.020 82 / 0.36); border: 1px solid oklch(56% 0.070 82 / 0.34); border-radius: 10px; padding: 9px 12px; line-height: 1.45; }
.circle-compose { margin: 8px 18px; background: var(--paper-in); border: 1px solid oklch(30% 0.030 320 / .07); border-radius: 14px; padding: 12px; }
.cc-flags { display: flex; gap: 8px; margin-bottom: 10px; }
.cc-flag { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px; border-radius: 10px; border: 1px solid oklch(30% 0.030 320 / .1); background: var(--paper-up); color: var(--ink-3t); font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--sans); }
.cc-flag svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.cc-flag.green.on { background: var(--paper-dp); border-color: var(--ink-2t); color: var(--ink-1); }
.cc-flag.red.on { background: oklch(94.5% 0.024 17 / 0.52); border-color: var(--rose-dk); color: var(--rose-dk); }
.circle-compose textarea { width: 100%; min-height: 60px; resize: vertical; background: var(--paper-up); border: 1px solid oklch(30% 0.030 320 / .1); border-radius: 10px; color: var(--ink-1); padding: 10px; font-family: var(--sans); font-size: 13px; outline: none; }
.circle-compose textarea:focus { border-color: var(--rose-dk); }
.cc-anon { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2t); margin: 8px 0 10px; }
.circle-posts { padding: 4px 18px; display: flex; flex-direction: column; gap: 10px; }
.cpost-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cpost-flag { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cpost-flag.green { color: var(--ink-2t); } .cpost-flag.red { color: var(--rose-dk); }
.verif-badge { font-size: 9.5px; font-weight: 700; color: var(--trust-dk); background: oklch(95% 0.022 189 / 0.41); border: 1px solid oklch(95% 0.022 189 / 0.85); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.verif-badge svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; vertical-align: -1px; }

.circle-tools { display: flex; gap: 8px; padding: 10px 18px 0; }
.circle-tools .btn { flex: 1; }
.circle-tools svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; vertical-align: -2px; }

.book-why, .verif-banner { margin: 6px 18px; font-size: 12px; line-height: 1.5; color: var(--trust-dk); background: oklch(95% 0.022 189 / 0.31); border: 1px solid oklch(95% 0.022 189 / 0.72); border-radius: 10px; padding: 10px 12px; }
.book-why svg, .verif-banner svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; vertical-align: -2px; }
.book-rows { padding: 6px 18px; }
.book-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid oklch(21% 0.012 285 / .07); font-size: 13.5px; }
.book-row span { color: var(--ink-2t); } .book-row b { font-weight: 700; }
.book-row.muted { color: var(--ink-3t); } .book-row.muted span, .book-row.muted b { color: var(--ink-3t); }
.book-row.total { border-bottom: 0; } .book-row.total b { color: var(--rose-dk); font-size: 16px; }

.sheet-inner .btn { margin: 12px 18px 0; width: calc(100% - 36px); }
.safety-tools { margin: 14px 18px 0; padding-top: 12px; border-top: 1px solid oklch(30% 0.030 320 / .07); }
.safety-tools .btn { width: 100%; margin: 0 0 8px; }
.safety-tools svg { width: 14px; height: 14px; stroke: var(--trust); fill: none; stroke-width: 1.8; vertical-align: -2px; }

.report-reasons { display: flex; flex-direction: column; gap: 8px; padding: 8px 18px; }
.report-reason { text-align: left; background: var(--paper-in); border: 1px solid oklch(30% 0.030 320 / .08); color: var(--ink-1); border-radius: 12px; padding: 12px 14px; font-size: 14px; cursor: pointer; font-family: var(--sans); }
.report-reason:hover { border-color: var(--rose-dk); }

.log-form { padding: 8px 18px; display: flex; flex-direction: column; gap: 12px; }
.log-form label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3t); font-weight: 700; }
.log-form select, .log-form input { background: var(--paper-in); border: 1px solid oklch(30% 0.030 320 / .1); border-radius: 10px; color: var(--ink-1); padding: 11px 12px; font-size: 14px; font-family: var(--sans); }

 

/* vetted panel (artist side) */
.vetted-panel { margin: 8px 16px; background: var(--paper-in); border: 1px solid oklch(30% 0.030 320 / .08); border-radius: var(--r-md); padding: 14px; }
.vetted-panel.is-vetted { border-color: oklch(55% 0.050 189 / 0.40); background: oklch(95% 0.022 189 / 0.26); }
.vp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vp-head > div { display: flex; align-items: center; gap: 8px; }
.vp-head svg { width: 18px; height: 18px; stroke: var(--trust); fill: none; stroke-width: 1.8; }
.vp-head b { font-family: var(--display); font-size: 17px; font-weight: 600; }
.vp-count { font-size: 12px; font-weight: 800; color: var(--ink-2t); }
.vet-rows { display: flex; flex-direction: column; gap: 6px; }
.vet-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.vet-tick { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.vet-row.ok .vet-tick { background: var(--trust); color: var(--paper); } .vet-row.no .vet-tick { background: var(--paper-dp); color: var(--ink-3t); }
.vet-label { flex: 1; } .vet-row.no .vet-label { color: var(--ink-2t); }
.vet-detail { font-size: 11px; color: var(--ink-3t); font-weight: 700; }
.vet-row.ok .vet-detail { color: var(--trust-dk); }
.vp-pitch { margin-top: 12px; padding-top: 10px; border-top: 1px solid oklch(30% 0.030 320 / .08); font-size: 12px; line-height: 1.55; color: var(--ink-2t); }
.vp-pitch svg { width: 14px; height: 14px; stroke: var(--rose-dk); fill: none; stroke-width: 2; vertical-align: -2px; }

/* filters safety group */

.amenity-pref.safe { border-color: oklch(95% 0.022 189 / 0.67); }

/* ==================================================== CIRCLE (global) ===== */
#view-circle { overflow-y: auto; }

.section-head p svg { width: 14px; height: 14px; stroke: var(--trust); fill: none; stroke-width: 1.8; vertical-align: -2px; }
.circle-index { padding: 0 12px 20px; display: flex; flex-direction: column; gap: 8px; }
.ci-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--paper-in); border: 1px solid oklch(30% 0.030 320 / .05); cursor: pointer; text-align: left; color: inherit; width: 100%; }
.ci-row:hover { border-color: oklch(30% 0.030 320 / .18); }

 
.ci-meta { flex: 1; min-width: 0; } .ci-meta b { font-family: var(--display); font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ci-meta span { font-size: 12px; color: var(--ink-3t); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==================================================== COLLECTION ========= */
#view-collection { overflow-y: auto; position: relative; }

 

.dex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dex-cell { margin: 0; }
.dex-img { aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid oklch(30% 0.030 320 / .07); background: var(--paper-up); }
.dex-img svg { width: 100%; height: 100%; display: block; }
.dex-cell.locked .dex-img { border-style: dashed; opacity: .8; }
.dex-cell figcaption { margin-top: 6px; } .dex-cell figcaption b { display: block; font-size: 13px; } .dex-cell figcaption span { font-size: 11px; color: var(--ink-3t); }
.dex-cell.locked figcaption b { color: var(--ink-3t); }

  

 

 

/* log celebration extras */


/* ============================================ VERIFICATION / INTEGRITY ==== */
.unverif-badge { font-size: 9.5px; font-weight: 700; color: var(--ink-3t); border: 1px dashed oklch(30% 0.030 320 / .22);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.integrity-note { margin: 4px 18px 8px; font-size: 11.5px; line-height: 1.5; color: var(--ink-2t);
  background: var(--paper-in); border: 1px solid oklch(30% 0.030 320 / .07); border-radius: 10px; padding: 10px 12px; }
.integrity-note svg { width: 14px; height: 14px; stroke: var(--trust); fill: none; stroke-width: 1.8; vertical-align: -2px; }
.integrity-note b { color: var(--trust-dk); }
.cs-cell b i { font-style: normal; color: var(--ink-3t); font-size: 14px; }
.circle-pattern.verified { color: var(--rose-dk); background: oklch(94.5% 0.024 17 / 0.36); border-color: oklch(66% 0.075 17 / 0.36); }
.circle-pattern.review { color: var(--ink-2t); background: oklch(30% 0.030 320 / .04); border-color: oklch(30% 0.030 320 / .12); }
.circle-pattern b { color: inherit; }
.post-label-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--ink-3t); margin: 2px 0 10px; }

/* booking verification steps */
.book-steps { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 18px 2px; font-size: 11px; font-weight: 800; letter-spacing: .02em; flex-wrap: wrap; }
.book-steps span { color: var(--ink-3t); }
.book-steps .on { color: var(--ink-1); }
.book-steps .verified-step { color: var(--trust-dk); background: oklch(95% 0.022 189 / 0.46); border: 1px solid oklch(55% 0.050 189 / 0.40); padding: 3px 8px; border-radius: 999px; }
.book-steps .arrow { color: var(--ink-3t); font-weight: 400; }

/* mission / donation */
.give-note { margin: 8px 18px; font-size: 12px; line-height: 1.5; color: var(--rose-dp);
  background: oklch(94.5% 0.024 17 / 0.26); border: 1px solid oklch(94.5% 0.024 17 / 0.83); border-radius: 10px; padding: 10px 12px; }
.give-note svg { width: 15px; height: 15px; stroke: var(--rose-dk); fill: none; stroke-width: 1.8; vertical-align: -2px; }
.give-note b { color: var(--rose-dp); }
.give-note.onboard { margin: 12px auto 0; max-width: 32ch; text-align: left; }
.give-live { display: block; margin-top: 6px; color: var(--rose-dk); font-weight: 650; }
.give-live:empty { display: none; }

/* ---- the live counter -----------------------------------------------------
   Rose, never teal. Teal on this app means "Inkling checked this about an
   artist"; a running total of our own giving is a claim about us, and dressing
   it as a verified fact about somebody else is exactly the borrow that keeps
   the teal meaningful. Rose is the community/warmth family and this belongs
   there. Nothing here is badge-shaped for the same reason. */
.give-counter {
  margin: 16px 16px 4px; padding: 16px 18px 14px; border-radius: var(--r-lg);
  background: oklch(94.5% 0.024 17 / 0.42); border: 1px solid oklch(70% 0.075 17 / 0.34);
}
.give-counter .gc-line { display: block; line-height: 1.25; }
.give-counter .gc-figure {
  font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -.015em;
  color: var(--rose-dp); display: block;
}
.give-counter .gc-what {
  font-size: 14.5px; font-weight: 600; color: var(--rose-dp); display: block; margin-top: -1px;
}
.give-counter .gc-sub {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
  color: var(--rose-dk); margin-top: 7px;
}
/* Two bars, one row: what has gone out, and what is still waiting to. The
   split is the whole point of the panel, so it is drawn, not just written. */
.give-counter .gc-bar {
  display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 10px 0 9px;
  background: oklch(70% 0.075 17 / 0.26);
}
.give-counter .gc-bar i { display: block; height: 100%; }
.give-counter .gc-bar .sent { background: var(--rose-dk); }
.give-counter .gc-bar .held { background: oklch(70% 0.075 17 / 0.62); }
/* Both figures, side by side. The gap between raised and sent is normal for up
   to a month, so it is shown as two numbers rather than blended into one. */
.give-counter .gc-split { display: flex; gap: 14px; margin: 0 0 10px; }
.give-counter .gc-split div { flex: 1 1 0; min-width: 0; }
.give-counter .gc-split b {
  display: block; font-family: var(--display); font-size: 18px; font-weight: 600;
  color: var(--rose-dp); line-height: 1.15;
}
.give-counter .gc-split span {
  display: block; font-size: 11px; line-height: 1.35; color: var(--ink-2t); margin-top: 2px;
}
.give-counter .gc-detail { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2t); }
.give-counter .gc-detail b { color: var(--rose-dp); font-weight: 650; }
.give-counter .gc-foot {
  margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink-3t);
  padding-top: 8px; border-top: 1px solid oklch(70% 0.075 17 / 0.28);
}
.give-counter.loading { opacity: .5; }

/* ---- admin: the payout desk ---- */
.payout-head {
  display: flex; gap: 10px; margin: 0 16px 10px; padding: 12px 14px;
  background: var(--paper-up); border: 1px solid var(--line); border-radius: var(--r-md);
}
.payout-head div { flex: 1; min-width: 0; }
.payout-head b { display: block; font-family: var(--display); font-size: 22px; color: var(--ink-1); }
.payout-head span { display: block; font-size: 11px; color: var(--ink-3t); line-height: 1.35; }
.payout-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 16px 10px; }
.payout-form input {
  flex: 1 1 180px; min-height: 44px; background: var(--paper-up); color: var(--ink-1);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 9px 11px;
  font-family: var(--sans); font-size: 13px;
}
.payout-form input:focus { outline: none; border-color: var(--ink-2t); }
/* Reference takes its own line — it is the long field and the one that must
   be read back. The date and the button share the next line where there is
   room, and stack full-width where there is not, so a narrow phone gets a
   deliberate column rather than a ragged one. */
.payout-form input.d-ref { flex: 1 1 100%; }
.payout-form input.d-on { flex: 1 1 122px; }
.payout-form .btn { flex: 1 1 auto; }
.payout-note { margin: 0 16px 10px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3t); }
/* A skipped month is invisible unless something says so. */
.payout-warn {
  margin: 0 16px 10px; padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 12px; line-height: 1.5; color: var(--rose-dp);
  background: var(--rose-in); border: 1px solid oklch(70% 0.075 17 / 0.5);
}

/* One card per calendar month: the unit Nico actually settles in. */
.payout-month {
  margin: 0 16px 10px; padding: 12px 0 10px; background: var(--paper-up);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.payout-month .pm-head {
  display: flex; align-items: baseline; gap: 10px; padding: 0 14px 10px;
}
.payout-month .pm-head > div:first-child { flex: 1; min-width: 0; }
.payout-month .pm-head b { display: block; font-size: 15px; font-weight: 700; color: var(--ink-1); }
.payout-month .pm-head span { display: block; font-size: 11px; color: var(--ink-3t); }
.payout-month .pm-amt {
  font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--ink-1);
  flex: 0 0 auto;
}
.payout-month .payout-form { margin: 0 14px 8px; }
.payout-month .pm-rows > summary {
  cursor: pointer; padding: 6px 14px; font-size: 11.5px; font-weight: 650; color: var(--ink-3t);
  min-height: 32px; display: flex; align-items: center;
}
.payout-month .pm-rows[open] > summary { color: var(--ink-2t); }
.payout-month .pm-rows .admin-table-wrap { padding: 0 14px; }
.payout-month .pm-some { margin: 8px 14px 2px; }
.admin-table td.pick, .admin-table th.pick { width: 28px; padding-right: 0; }
.admin-table input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--rose-dk); }
/* --amber-dk is self-referential in :root and resolves to nothing, so caution
   text set in it inherits instead. Rose reads correctly and is audited. */
.donation-note { display: block; font-size: 10.5px; color: var(--rose-dk); margin-top: 3px; }

/* ================================================ verification chain (1-3) = */
.pending-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; background: oklch(96% 0.020 82 / 0.46);
  color: var(--amber-dk); border: 1px solid oklch(56% 0.070 82 / 0.40); }

.inline-select { background: var(--paper-dp); color: var(--ink-1); border: 1px solid oklch(30% 0.030 320 / .12);
  border-radius: 8px; padding: 5px 8px; font-family: var(--sans); font-size: 12.5px; font-weight: 700; }
.chain-note { margin: 8px 18px; font-size: 11.5px; line-height: 1.5; color: var(--ink-2t);
  background: oklch(95% 0.022 189 / 0.26); border: 1px solid oklch(95% 0.022 189 / 0.72); border-radius: 10px; padding: 10px 12px; }
.chain-note b { color: var(--trust-dk); }
.chain-note svg { width: 14px; height: 14px; stroke: var(--trust); fill: none; stroke-width: 1.8; vertical-align: -2px; }

.chain-steps { display: flex; flex-direction: column; gap: 8px; margin: 10px 18px; }
.chain-step { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px;
  background: var(--paper-in); border: 1px solid oklch(21% 0.012 285 / .07); }
.chain-step i { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: grid;
  place-items: center; font-style: normal; font-size: 12px; font-weight: 800;
  background: var(--paper-up); color: var(--ink-3t); border: 1px solid oklch(30% 0.030 320 / .1); }
.chain-step b { display: block; font-size: 13px; }
.chain-step span { display: block; font-size: 11px; color: var(--ink-3t); }
.chain-step.done { border-color: oklch(55% 0.050 189 / 0.35); background: oklch(95% 0.022 189 / 0.26); }
.chain-step.done i { background: var(--trust); color: var(--paper); border-color: transparent; }

/* ===================================================== structured review (6) = */
.rv-group { margin: 12px 18px; }
.rv-group .std-label { padding: 0 0 8px; }
/* the shield inline in a section label must stay glyph-sized, not fill the row */
.std-label svg { width: 14px; height: 14px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; }
.rv-group .std-label svg { color: var(--trust); }
.rv-box { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  background: var(--paper-in); border: 1px solid oklch(21% 0.012 285 / .07); border-radius: 11px;
  padding: 11px 13px; margin-bottom: 7px; color: var(--ink-2t); font-family: var(--sans); font-size: 13.5px; }
.rv-box i { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 13px; font-weight: 800; }
.rv-box.yes { border-color: oklch(55% 0.050 189 / 0.40); color: var(--ink-1); }
.rv-box.yes i { background: var(--trust); color: var(--paper); }
.rv-box.no { border-color: oklch(66% 0.075 17 / 0.50); background: oklch(94.5% 0.024 17 / 0.28); color: var(--rose-dk); }
.rv-box.no i { background: var(--rose-dk); color: var(--paper-up); }
.rv-hint { font-size: 11px; color: var(--ink-3t); font-style: italic; line-height: 1.5; margin-top: 4px; }
.rv-stars { display: flex; gap: 6px; margin-bottom: 10px; }
.rv-star { appearance: none; border: 0; background: none; cursor: pointer; font-size: 26px;
  color: var(--paper-dp); padding: 0; line-height: 1; }
.rv-star.on { color: var(--amber); }
.rv-group textarea { width: 100%; min-height: 74px; background: var(--paper-in); color: var(--ink-1);
  border: 1px solid oklch(30% 0.030 320 / .1); border-radius: 11px; padding: 10px 12px;
  font-family: var(--sans); font-size: 13px; resize: vertical; outline: none; }
.rv-group textarea:focus { border-color: var(--rose-dk); }
.rv-mismatch { margin: 10px 18px; font-size: 12px; line-height: 1.55; color: var(--amber-dk);
  background: oklch(96% 0.020 82 / 0.33); border: 1px solid oklch(56% 0.070 82 / 0.35); border-radius: 11px; padding: 11px 13px; }
.rv-mismatch b { color: var(--amber-dk); }
.safety-always { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--trust-dk); }
.safety-always svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; vertical-align: -2px; }

/* ==================================================== artist standing (4) == */

 
 

 

/* =============================================== artist application (7) ==== */

.privacy-line.small { font-size: 11px; }

/* ---------------------------------------------------- limits / disclaimer --
   Deliberately quiet, never alarming — this is an honesty note, not a warning.
   Neutral smoke/bone rather than the red used for actual safety alerts. */
.limits-note {
  margin: 8px 18px; font-size: 11.5px; line-height: 1.55; color: var(--ink-2t);
  background: oklch(30% 0.030 320 / .03); border: 1px solid oklch(30% 0.030 320 / .1);
  border-radius: 10px; padding: 10px 12px;
}
.limits-note b { color: var(--ink-1); }
.limits-note.onboard { margin: 10px auto 0; max-width: 32ch; text-align: left; }
.limits-note.circle { margin: 4px 16px 8px; }
.limits-note.compact { margin: 10px 18px 0; font-size: 11px; }
.limits-link {
  display: inline; appearance: none; border: 0; background: none; padding: 0; margin-top: 2px;
  color: var(--ink-1); font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.limits-link:hover { color: var(--trust); }

.limits-block { margin: 10px 18px; border-radius: 12px; padding: 12px 14px;
  border: 1px solid oklch(30% 0.030 320 / .08); background: var(--paper-in); }
.limits-block h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-1); display: flex; align-items: center; gap: 7px; }
.limits-block h4 svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.limits-block ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.limits-block li { font-size: 12.5px; line-height: 1.5; color: var(--ink-2t); }
.limits-block li b { color: var(--ink-1); }
.limits-block.can { border-color: oklch(95% 0.022 189 / 0.85); } .limits-block.can h4 { color: var(--trust-dk); }
.limits-block.cant { border-color: oklch(96% 0.020 82 / 0.85); } .limits-block.cant h4 { color: var(--amber-dk); }
.limits-block.ask { border-color: oklch(94.5% 0.024 17 / 0.83); } .limits-block.ask h4 { color: var(--rose-dk); }

/* ================================================= ID VERIFICATION ======= */
.badge-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.badge-row .vetted-pill { margin-left: 0; }
/* Identity is a FACT Inkling checked, so it wears the trust colour — the same
   teal as every other verified line, and a colour no opinion is allowed. */
.idv-pill { font-size: 9.5px; font-weight: 800; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px;
  background: var(--trust-in); color: var(--trust-dk); border: 1px solid oklch(80% 0.040 189); white-space: nowrap; }

.demo-caption { font-size: 10.5px; color: var(--ink-3t); font-style: italic; margin-top: 8px; text-align: center; }

 

.verify-body { padding: 4px 18px 20px; }
.verify-hero { display: grid; place-items: center; margin: 6px 0 12px; }
.verify-hero svg { width: 52px; height: 52px; stroke: var(--trust); fill: none; stroke-width: 1.6; }
.verify-why { list-style: none; padding: 0; margin: 4px 0 14px; display: flex; flex-direction: column; gap: 10px; }
.verify-why li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-2t); line-height: 1.45; }
.verify-why svg { width: 15px; height: 15px; stroke: var(--trust); fill: none; stroke-width: 1.8; flex: 0 0 auto; margin-top: 1px; }
.privacy-line { font-size: 12px; line-height: 1.55; color: var(--trust-dk); background: oklch(95% 0.022 189 / 0.31);
  border: 1px solid oklch(95% 0.022 189 / 0.78); border-radius: 12px; padding: 11px 13px; margin-bottom: 14px; }
.privacy-line svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; vertical-align: -2px; }
.privacy-line b { color: var(--trust); } .privacy-line.small { font-size: 11px; margin: 12px 0 0; }

.scan-frame { position: relative; display: grid; place-items: center; margin: 6px auto 16px; width: 100%;
  aspect-ratio: 16/10; max-width: 320px; background: radial-gradient(circle at 50% 40%, var(--paper-in), var(--paper));
  border: 1px solid oklch(30% 0.030 320 / .08); border-radius: 16px; overflow: hidden; }
.scan-frame.face { aspect-ratio: 3/3.4; max-width: 220px; }

.scan-corners { position: absolute; inset: 12px; z-index: 3; }
.scan-corners span { position: absolute; width: 20px; height: 20px; border: 2.5px solid var(--trust); }
.scan-corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.scan-corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.scan-corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.scan-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.scan-line { position: absolute; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, var(--trust), transparent);
  box-shadow: 0 0 14px oklch(55% 0.050 189 / 0.62); z-index: 2; animation: scanmove 2s ease-in-out infinite; }
@keyframes scanmove { 0%,100% { top: 20%; } 50% { top: 80%; } }
.liveness { position: absolute; bottom: 14px; z-index: 3; font-size: 12px; color: var(--trust-dk); letter-spacing: .04em; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.scan-frame.captured { border-color: oklch(55% 0.050 189 / 0.50); }
.scan-check { position: absolute; z-index: 4; width: 60px; height: 60px; border-radius: 50%; background: var(--trust);
  color: var(--paper); display: grid; place-items: center; font-size: 34px; font-weight: 800; animation: pop .35s var(--ease) both; box-shadow: 0 0 34px oklch(55% 0.050 189 / 0.60); }

 
.capture-ok { text-align: center; color: var(--trust-dk); font-weight: 700; font-size: 14px; margin-bottom: 12px; }

.affirm-box { display: flex; align-items: flex-start; gap: 11px; background: var(--paper-in); border: 1px solid oklch(30% 0.030 320 / .1);
  border-radius: 14px; padding: 14px; cursor: pointer; margin: 8px 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2t); }
.affirm-box.on { border-color: var(--trust); background: oklch(95% 0.022 189 / 0.28); color: var(--ink-1); }
.affirm-tick { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 7px; border: 2px solid oklch(30% 0.030 320 / .2);
  display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--paper); }
.affirm-box.on .affirm-tick { background: var(--trust); border-color: var(--trust); }

.verify-processing { text-align: center; padding: 20px 0 6px; }
.spinner { width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 50%; border: 4px solid var(--paper-dp);
  border-top-color: var(--trust); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.proc-list { list-style: none; padding: 0; margin: 0 auto; max-width: 26ch; text-align: left; display: flex; flex-direction: column; gap: 9px; }
.proc-list li { font-size: 13px; color: var(--ink-3t); padding-left: 24px; position: relative; opacity: .4; }
.proc-list li::before { content: ''; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-3t); }
.proc-list li.p1 { animation: procIn .01s .2s forwards; } .proc-list li.p2 { animation: procIn .01s .8s forwards; } .proc-list li.p3 { animation: procIn .01s 1.4s forwards; }
@keyframes procIn { to { opacity: 1; color: var(--trust-dk); } }
.proc-list li.p1::after, .proc-list li.p2::after, .proc-list li.p3::after { content: '✓'; position: absolute; left: 1px; top: -1px; color: var(--trust); font-size: 12px; font-weight: 800; opacity: 0; }
.proc-list li.p1::after { animation: procIn .01s .5s forwards; } .proc-list li.p2::after { animation: procIn .01s 1.1s forwards; } .proc-list li.p3::after { animation: procIn .01s 1.7s forwards; }
.proc-partner { margin-top: 18px; font-size: 11px; color: var(--ink-3t); }

.verify-success { text-align: center; padding: 16px 0 6px; }
.success-ring { width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%; background: var(--trust); color: var(--paper);
  display: grid; place-items: center; font-size: 42px; font-weight: 800; animation: pop .45s var(--ease) both; box-shadow: 0 0 40px oklch(55% 0.050 189 / 0.55); }
.verify-success h3 { font-family: var(--display); font-size: 26px; margin: 0 0 6px; font-weight: 600; }
.verify-success p { font-size: 14px; color: var(--ink-2t); line-height: 1.5; margin: 0 auto 8px; max-width: 30ch; }

.circle-gate { text-align: center; padding: 20px 24px 40px; }
.circle-gate h3 { font-family: var(--display); font-size: 24px; margin: 6px 0 8px; font-weight: 600; }
.circle-gate p { font-size: 13.5px; color: var(--ink-2t); line-height: 1.55; margin: 0 auto 18px; max-width: 32ch; }
.circle-gate .btn { max-width: 320px; margin: 0 auto; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .08s !important; }
  .card { transition: none !important; }
}

/* ============================================================================
   STYLIZATION LAYER — the flash-sheet character.
   The palette flip above made it light; this makes it *drawn*. Paper grain,
   engraved ornament, and differentiated block treatments so a column of
   information doesn't read as a stack of identical rounded rectangles.
   ============================================================================ */

/* Aged-paper tooth. Two offset dot fields at very low opacity read as fibre,
   not as a pattern. Fixed so it belongs to the sheet, not the scroll. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(oklch(38% 0.028 320 / .030) .6px, transparent .7px),
    radial-gradient(oklch(38% 0.028 320 / .020) .6px, transparent .7px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 2px 3px;
  mix-blend-mode: multiply;
}
#app { position: relative; z-index: 1; }

/* The sheet gets a hairline rule inset from its edge — the way a flash sheet
   is ruled before anything is drawn on it. */
@media (min-width: 480px) {
  #app::before {
    content: ''; position: absolute; inset: 10px; border-radius: 22px;
    border: 1px solid oklch(88% 0.004 280 / .5); pointer-events: none; z-index: 4;
  }
}

/* ---- wordmark: set it like a title plate ---- */
.onboard-hero .mark {
  letter-spacing: -0.015em;
  text-shadow: 0 1px 0 oklch(100% 0.000 0 / .8);
}
.onboard-hero .mark .dot { color: var(--rose-dk); }

/* ---- engraved ornament divider ---- */

/* ---- onboarding: three DIFFERENT treatments, not three identical cards ---- */

/* 1. the safety stamp — double rule, centred, the most formal object here */

/* 2. the mission line — quiet tinted panel, softer corner, no competition */
.give-note.onboard {
  background: var(--rose-in);
  border: 1px solid oklch(86% 0.040 17 / .8);
  border-radius: var(--r-md);
  max-width: 34ch;
}

/* 3. the limits note — not a box at all. A rule and smaller text: present,
      honest, and visibly subordinate to everything above it. */
.limits-note.onboard {
  background: none; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; padding: 14px 2px 0; margin-top: 20px;
  max-width: 34ch; font-size: 11px; color: var(--ink-3t);
}
.limits-note.onboard b { color: var(--ink-2t); }

/* ---- buttons: ink, not a coloured accent. The primary action is the most
       confident thing on the page; a pink button would undercut that, and it
       leaves the accent colours free to mean facts (teal) and community
       (rose) rather than "this is clickable". ---- */
.btn.primary {
  background: var(--ink-1);
  color: var(--paper-up);
  box-shadow: var(--sh-lift);
  letter-spacing: .01em;
}
.btn.primary:hover { background: oklch(20% 0.030 320); }
 .btn.primary.safe { background: var(--trust); color: var(--paper-up); }

/* ---- cards lift off the paper instead of glowing ---- */

/* ---- the display serif earns its keep on names and section heads ---- */
.section-head h2, .sheet-head h2, .card-body h3{ letter-spacing: -0.01em; }

/* ---- focus: visible against paper and against ink, never the default blue ---- */
:focus-visible { outline: 2px solid var(--trust); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.want-chip span {
  background: var(--rose-in); border-color: var(--rose-dk); color: var(--rose-dp);
  backdrop-filter: none;
}
.trust-cell { background: var(--paper-in); border-color: var(--line); }

/* ---- tiered Circle access ---- */
.tier-gate { margin: 10px 18px; background: var(--paper-in); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 15px; }
.tier-gate-h { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-1); display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.tier-gate-h svg { width: 15px; height: 15px; stroke: var(--trust-dk); fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.tier-gate p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2t); }
.tier-ways { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tier-way { display: flex; align-items: center; gap: 11px; background: var(--paper-up);
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; }
.tier-way i { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 11px; font-weight: 800; background: var(--trust); color: var(--paper-up); }
.tier-way b { display: block; font-size: 12.5px; }
.tier-way span { display: block; font-size: 11px; color: var(--ink-3t); }
.tier-gate-foot { font-size: 10.5px; line-height: 1.55; color: var(--ink-3t); font-style: italic; margin-top: 10px; }

.circle-posts.locked .locked-post { opacity: .75; }
.locked-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.locked-lines i { display: block; height: 8px; border-radius: 4px; background: var(--paper-dp); }
.locked-lines i:nth-child(1) { width: 92%; } .locked-lines i:nth-child(2) { width: 78%; }
.locked-lines i:nth-child(3) { width: 55%; }
.locked-more { text-align: center; font-size: 11.5px; color: var(--ink-3t); padding: 8px 0 2px; font-style: italic; }


/* rarity gems: the gold failed AA on paper at 3.73:1 */

.firewall-note { margin: 10px 18px; font-size: 11.5px; line-height: 1.55; color: var(--ink-2t);
  background: var(--trust-in); border: 1px solid oklch(80% 0.040 189); border-radius: 11px; padding: 11px 13px; }
.firewall-note b { color: var(--trust-dk); }
.firewall-note svg { width: 14px; height: 14px; stroke: var(--trust-dk); fill: none; stroke-width: 1.8; vertical-align: -2px; }

/* ============================================================================
   Real-app additions: auth, uploads, tier strip, dex grid.
   ============================================================================ */
#view-auth { overflow-y: auto; }
.auth-card { margin: 6px 18px 14px; background: var(--paper-up); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px; box-shadow: var(--sh-lift); }
.auth-tabs { display: flex; gap: 6px; background: var(--paper-in); border-radius: 999px;
  padding: 3px; margin-bottom: 14px; }
.auth-tabs button { flex: 1; appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--ink-3t); padding: 9px 10px; border-radius: 999px; }
.auth-tabs button.on { background: var(--ink-1); color: var(--paper-up); }
.auth-form { display: flex; flex-direction: column; gap: 11px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font-size: 11px;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3t); }
.auth-form input { background: var(--paper); color: var(--ink-1); border: 1px solid var(--line-2);
  border-radius: 11px; padding: 12px 13px; font-family: var(--sans); font-size: 15px; outline: none; }
.auth-form input:focus { border-color: var(--rose-dk); }
.role-pick { display: flex; flex-direction: column; gap: 7px; }
.role-opt { flex-direction: row !important; align-items: center; gap: 9px !important;
  text-transform: none !important; letter-spacing: 0 !important; font-size: 13.5px !important;
  font-weight: 600 !important; color: var(--ink-2t) !important; background: var(--paper);
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; cursor: pointer; }
.auth-hint { font-size: 11px; color: var(--ink-3t); }
.auth-error { font-size: 12.5px; color: var(--rose-dk); min-height: 1em; font-weight: 600; }

.file-drop { display: block; margin: 10px 18px; padding: 22px 14px; text-align: center; cursor: pointer;
  border: 1px dashed var(--line-2); border-radius: 14px; background: var(--paper-in);
  color: var(--ink-2t); font-size: 13px; font-weight: 700; }
.file-drop svg { width: 16px; height: 16px; stroke: var(--trust-dk); fill: none; stroke-width: 1.8; vertical-align: -3px; }
.file-drop.has { border-style: solid; border-color: var(--trust); background: var(--trust-in); }

.tier-strip { margin: 4px 16px 8px; font-size: 11.5px; line-height: 1.5; color: var(--ink-2t);
  background: var(--paper-in); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.tier-strip svg { width: 14px; height: 14px; stroke: var(--trust-dk); fill: none; stroke-width: 1.8; vertical-align: -2px; }

.circle-index { padding: 4px 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.ci-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--paper-in); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 12px; color: inherit; }
.ci-row:hover { border-color: var(--rose-dk); }
.ci-row .av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.ci-row .av svg { width: 100%; height: 100%; }
.ci-meta { flex: 1; min-width: 0; }
.ci-meta b { display: block; font-family: var(--display); font-size: 16px; font-weight: 600; }
.ci-meta span { display: block; font-size: 12px; color: var(--ink-3t);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-counts { display: flex; gap: 8px; flex: 0 0 auto; font-size: 12px; font-weight: 800; }

.av-big { width: 44%; }
.av-big svg { width: 100%; height: 100%; }

.dex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 16px 22px; }
.dex-cell { margin: 0; }
.dex-img { aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: var(--paper-in); }
.dex-img svg, .dex-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dex-cell figcaption { margin-top: 5px; }
.dex-cell b { display: block; font-size: 13px; }
.dex-cell span { display: block; font-size: 11px; color: var(--ink-3t); }


.cpost-note { font-size: 10.5px; color: var(--ink-3t); font-style: italic; margin-top: 6px; }
.cpost-label { margin-bottom: 6px; }
.corrob { appearance: none; border: 1px solid var(--line-2); background: var(--paper);
  color: var(--ink-2t); border-radius: 999px; padding: 6px 11px; font-size: 11px; font-weight: 700;
  cursor: pointer; margin-top: 8px; font-family: var(--sans); }
.spinner { width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--rose-dk); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* standing bar needs its own fill colour now the band classes are server-driven */

.port-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 4px 16px; }
.port-cell { aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.port-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.port-empty { grid-column: 1/-1; font-size: 12px; color: var(--ink-3t); font-style: italic; padding: 8px 0; }

/* ---------------------------------------------------------- 2FA + admin -- */
.twofa-head { display: flex; align-items: center; gap: 9px; font-size: 15px; margin-bottom: 8px; }
.twofa-head svg { width: 18px; height: 18px; stroke: var(--trust-dk); fill: none; stroke-width: 1.8; }
.code-input { font-size: 30px !important; letter-spacing: .34em; text-align: center;
  font-variant-numeric: tabular-nums; }
.dev-code { margin-top: 10px; font-size: 12px; color: var(--ink-2t); background: var(--amber-in);
  border: 1px solid var(--amber); border-radius: 10px; padding: 9px 11px; }
.pending-banner { margin: 10px 18px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2t);
  background: var(--amber-in); border: 1px solid var(--amber); border-radius: 11px; padding: 11px 13px; }
.pending-banner svg { width: 14px; height: 14px; stroke: var(--amber); fill: none; stroke-width: 1.8; vertical-align: -2px; }

.admin-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 4px 16px 10px; }
.astat { background: var(--paper-in); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 8px; text-align: center; }
.astat b { display: block; font-family: var(--display); font-size: 22px; line-height: 1; }
.astat span { display: block; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3t); margin-top: 4px; }
/* "needs attention" is caution, not community — amber, so rose keeps meaning
   one thing across the whole app. */
.astat.hot { border-color: var(--amber); background: var(--amber-in); }
.astat.hot b { color: var(--amber-dk); }

.admin-tabs { display: flex; gap: 6px; margin: 4px 16px 10px; background: var(--paper-in);
  border-radius: 999px; padding: 3px; }
.admin-tabs button { flex: 1; appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 11.5px; font-weight: 800; color: var(--ink-3t);
  padding: 8px 6px; border-radius: 999px; }
.admin-tabs button.on { background: var(--ink-1); color: var(--paper-up); }

.admin-card { margin: 0 16px 10px; background: var(--paper-up); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px; }
.admin-card.flagged { border-color: var(--amber); background: var(--amber-in); }
.admin-photo { width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); margin-bottom: 10px; display: block; }
.admin-card-meta b { display: block; font-size: 14px; }
.admin-card-meta span { display: block; font-size: 11.5px; color: var(--ink-3t); }
.admin-reason { margin-top: 7px; font-size: 12px; color: var(--amber-dk); font-weight: 600; }
.admin-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.admin-actions .btn { flex: 1; min-width: 120px; }

.admin-filter { display: flex; gap: 8px; padding: 0 16px 10px; }
.admin-filter input, .admin-filter select { flex: 1; background: var(--paper-up); color: var(--ink-1);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 11px;
  font-family: var(--sans); font-size: 13px; outline: none; }
.admin-table-wrap { overflow-x: auto; padding: 0 16px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-table th { text-align: left; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3t); padding: 6px 8px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.admin-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table small { display: block; font-size: 10.5px; color: var(--ink-3t); }
.admin-table .row-suspended { opacity: .55; }
.admin-table .row-actions { white-space: nowrap; }
.admin-table .row-actions .btn { padding: 5px 9px; font-size: 10.5px; margin-left: 4px; }
.ok-tick { color: var(--trust-dk); font-weight: 700; }
.no-tick { color: var(--ink-3t); }
.hot-count { display: inline-block; min-width: 20px; text-align: center; background: var(--rose-dk);
  color: var(--paper-up); border-radius: 999px; padding: 1px 6px; font-weight: 800; }
.mail-warning { font-size: 12.5px; line-height: 1.55; color: var(--ink-2t); background: var(--amber-in);
  border: 1px solid var(--amber); border-radius: 11px; padding: 11px 13px; margin-bottom: 12px; }
.mail-warning code { background: var(--paper-in); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }
.account-card { margin: 0 16px; background: var(--paper-in); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px; }
.account-note { font-size: 11.5px; color: var(--ink-3t); margin-top: 9px; line-height: 1.5; }
.linkish { appearance: none; border: 0; background: none; padding: 6px 0 0; cursor: pointer;
  color: var(--ink-2t); font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px; align-self: flex-start; }
.linkish:hover { color: var(--rose-dk); }
.card-mount { margin: 10px 18px; padding: 12px; background: var(--paper-up);
  border: 1px solid var(--line-2); border-radius: 12px; min-height: 60px; }

/* ============================================================================
   ARTIST PROFILE SHEET
   The surface where a woman decides. Three kinds of information live here and
   they are built to look like three different kinds of thing, because the one
   failure this product cannot have is a community opinion reading as a fact
   Inkling checked:

     FACTS      teal, ticked, flat, tight        Inkling verified this
     REVIEWS    rose, warm, generous spacing     verified clients reported this
     COMMUNITY  dashed, conversational, no tick  members are discussing this

   There is deliberately no composite "safety score". A single number would be
   false precision, and it would let a woman skip the evidence — which is the
   only part that can actually help her decide.
   ============================================================================ */
.ap-head { padding: 22px 20px 4px; position: relative; background-color: var(--paper); }
.ap-head .sheet-close { position: absolute; top: 18px; right: 16px; }
.ap-head h2 {
  font-family: var(--display); font-size: 30px; line-height: 1.05; margin: 0 44px 0 0;
  font-weight: 600; letter-spacing: -0.015em;
}
.ap-sub { font-size: 13px; color: var(--ink-2t); margin-top: 5px; }
.ap-where { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2t); margin-top: 6px; }
.ap-where svg { width: 14px; height: 14px; stroke: var(--ink-3t); fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.ap-rating { display: flex; align-items: baseline; gap: 7px; margin-top: 10px; font-size: 13px; }
.ap-rating i { font-style: normal; color: var(--rose-dk); font-size: 16px; }
.ap-rating b { font-family: var(--display); font-size: 19px; font-weight: 600; }
.ap-rating span { color: var(--ink-3t); }

/* portfolio first: this is what she came to look at */
.ap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 16px 0 0; }
.ap-shot { aspect-ratio: 1/1; overflow: hidden; background: var(--paper-in); position: relative; }
.ap-shot img, .ap-shot svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-shot:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1/1; }
.ap-empty { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3t); padding: 10px 20px; }
.ap-bio { padding: 16px 20px 0; margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2t); }
.ap-loading { padding: 20px; font-size: 12.5px; color: var(--ink-3t); }

.ap-block { margin: 20px 16px 0; }
.ap-block h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
.ap-block h3 svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.ap-note { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--ink-3t); }

/* ---- FACTS: teal, ticked, and the only place a tick is allowed ---- */
.ap-facts {
  background: var(--trust-in); border: 1px solid oklch(84% 0.035 189);
  border-radius: var(--r-md); padding: 15px 16px;
}
.ap-facts h3 { color: var(--trust-dk); margin-bottom: 12px; }
.ap-facts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ap-facts li { display: flex; align-items: flex-start; gap: 10px; }
.ap-tick {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center; background: var(--trust); color: var(--paper-up);
}
.ap-tick svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 3; }
.ap-facts li b { display: block; font-size: 13.5px; font-weight: 650; color: var(--ink-1); }
.ap-facts li em { display: block; font-style: normal; font-size: 12px; line-height: 1.45; color: var(--ink-2t); margin-top: 2px; }
.ap-vetted {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid oklch(84% 0.035 189);
  font-size: 12px; line-height: 1.55; color: var(--ink-2t);
}
.ap-vetted b { color: var(--trust-dk); }
.ap-vetted svg { width: 12px; height: 12px; stroke: var(--trust); fill: none; stroke-width: 3; vertical-align: -1px; }

/* ---- REVIEWS: warm, rose, no ticks and no badge shapes ---- */
.ap-says h3 { color: var(--rose-dk); }
.ap-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ap-chip {
  font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px;
  background: var(--rose-in); border: 1px solid oklch(86% 0.040 17); color: var(--rose-dk);
}
.ap-exp h3 { color: var(--ink-1); }
.ap-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.ap-bar-l { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--ink-2t); }
.ap-bar-track {
  flex: 0 0 74px; height: 6px; border-radius: 3px; background: var(--paper-dp); overflow: hidden;
}
.ap-bar-track i { display: block; height: 100%; background: var(--rose); border-radius: 3px; }
.ap-bar-v {
  flex: 0 0 34px; text-align: right; font-size: 12.5px; font-weight: 700;
  color: var(--ink-1); font-variant-numeric: tabular-nums;
}
.ap-basis { margin-top: 11px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3t); }

/* ---- COMMUNITY: a conversation. Dashed, warm, and never ticked. ---- */
.ap-community {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  width: calc(100% - 32px); margin: 20px 16px 0; padding: 14px;
  background: var(--paper); border: 1px dashed oklch(78% 0.055 17);
  border-radius: var(--r-md); color: inherit; font-family: var(--sans);
}
.ap-community:hover { border-color: var(--rose-dk); }
.ap-community > svg { width: 22px; height: 22px; stroke: var(--rose-dk); fill: none; stroke-width: 1.7; flex: 0 0 auto; }
.ap-community b { display: block; font-size: 13.5px; color: var(--ink-1); }
.ap-community em { display: block; font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--ink-3t); margin-top: 3px; }
.ap-go { flex: 0 0 auto; color: var(--ink-3t); font-size: 17px; }

/* ============================================================================
   THE CIRCLE — community treatment
   Everything in here is somebody's account of what happened to them. It is
   valuable, and it is not a record Inkling can stand behind. So a post is
   built like a note on paper, never like a badge: no tick, no teal, and the
   verification state is spelled out in words rather than implied by colour.
   The only teal permitted on this screen is .verif-badge, which reports a
   booking chain Inkling really can see.
   ============================================================================ */
.cpost {
  background: var(--paper-up); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 14px;
}
.cpost.red { background: var(--rose-in); border-color: oklch(86% 0.040 17); }
.cpost.unverified { background: var(--paper); border-style: dashed; border-color: var(--line-2); }
.cpost p { font-size: 14px; line-height: 1.6; color: var(--ink-1); margin: 0 0 4px; }
.cpost-when { font-size: 11px; color: var(--ink-3t); }
.community-label {
  display: flex; align-items: center; gap: 9px; margin: 18px 18px 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--rose-dk);
}
.community-label::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.community-sub {
  margin: -4px 18px 12px; font-size: 12px; line-height: 1.5; color: var(--ink-3t);
}

/* ============================================================================
   CHAT — hers is ink, theirs is paper. The old "mine" bubble was the accent
   colour, which made every message a woman sent look like a call to action.
   ============================================================================ */
.msg { max-width: 78%; padding: 10px 14px; border-radius: var(--r-md); font-size: 14.5px; line-height: 1.45; }
.msg.them { align-self: flex-start; background: var(--paper-in); color: var(--ink-1); border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: var(--ink-1); color: var(--paper-up); border-bottom-right-radius: 4px; }
.chat-input button { background: var(--ink-1); }
.chat-input input:focus { border-color: var(--ink-2t); }
.tab .badge { background: var(--rose-dk); box-shadow: 0 0 0 2px var(--paper); }

/* ============================================================================
   TAP TARGETS — 48px minimum on anything a hand is meant to find, and rose
   stars rather than the old gold, so the rating belongs to the reviews family.
   ============================================================================ */
.rv-box { min-height: 52px; padding: 13px 14px; font-size: 14px; align-items: center; }
.rv-box i { width: 26px; height: 26px; }
.rv-box.yes { border-color: oklch(80% 0.040 189); background: var(--trust-in); color: var(--ink-1); }
.rv-box.yes i { background: var(--trust); color: var(--paper-up); }
.rv-box.no { border-color: oklch(78% 0.060 17); background: var(--rose-in); color: var(--rose-dk); }
.rv-box.no i { background: var(--rose-dk); color: var(--paper-up); }
.rv-stars { gap: 4px; margin-bottom: 12px; }
.rv-star {
  min-width: 48px; min-height: 48px; font-size: 30px; color: var(--line-2);
  display: grid; place-items: center; border-radius: var(--r-sm);
}
.rv-star.on { color: var(--rose-dk); }
.rv-group .std-label svg { color: var(--trust); }
.report-reason { min-height: 52px; display: flex; align-items: center; }
.cc-flag { min-height: 48px; }
.corrob { min-height: 44px; padding: 10px 14px; font-size: 12px; }
.sheet-close { width: 40px; height: 40px; background: var(--paper-in); }
.act.nope { width: 60px; height: 60px; background: var(--paper-up); border-color: var(--line-2); }
.act.nope svg { stroke: var(--ink-2t); }
.act.nope:hover { box-shadow: var(--sh-soft); border-color: var(--ink-2t); }
.act.like { width: 68px; height: 68px; background: var(--rose-dk); border-color: var(--rose-dk); }
.act.like:hover { box-shadow: 0 8px 22px -10px oklch(44% 0.085 17 / .7); }
.tab { min-height: 52px; justify-content: center; }
.auth-form input, .log-form input, .log-form select, .admin-filter input, .admin-filter select { min-height: 48px; }
.btn { min-height: 48px; }
.btn.small { min-height: 40px; }

/* the one-time code is a number you read aloud — set it in the display face */
.code-input { font-family: var(--display) !important; font-weight: 600; }

/* ---------------------------------------------------- chat action bar -----
   Booking through Inkling is the one action that makes a review count, so it
   gets the primary treatment. Nothing here is dashed: dashed means community. */
.consult-cta { flex: 0 0 auto; display: flex; gap: 8px; padding: 0 12px 8px; }
.consult-cta button {
  flex: 1; min-height: 46px; display: flex; align-items: center; justify-content: center;
  gap: 7px; border-radius: var(--r-sm); padding: 11px 12px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 700; line-height: 1.2;
}
.cta-book { background: var(--ink-1); color: var(--paper-up); border: 0; }
.cta-book:hover { background: oklch(20% 0.030 320); }
.cta-book svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex: 0 0 auto; }
.cta-ap, .cta-rate {
  background: var(--paper-up); border: 1px solid var(--line-2); color: var(--ink-1);
}
.cta-ap:hover, .cta-rate:hover { border-color: var(--ink-2t); }
.cta-none { flex: 1; font-size: 12px; color: var(--ink-3t); padding: 12px; text-align: center; }

/* ==========================================================================
   Onboarding, and leaving.
   Two ends of the same relationship, so they share a register: unhurried,
   plain-spoken, nothing shouting.
   ========================================================================== */

.ob {
  flex: 1 1 auto; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.ob-top { padding: 18px 22px 6px; flex: 0 0 auto; }
.ob-dots { display: flex; gap: 6px; margin-bottom: 10px; }
.ob-dot {
  height: 3px; flex: 1 1 0; border-radius: 2px;
  background: var(--line); transition: background .3s var(--ease);
}
.ob-dot.done { background: var(--trust); }
.ob-dot.on { background: var(--ink-1); }
.ob-step {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3t); font-weight: 700;
}
.ob-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 22px 20px; }
.ob-h1 {
  font-family: var(--display); font-size: 30px; line-height: 1.1; font-weight: 600;
  color: var(--ink-1); margin: 0 0 10px; letter-spacing: -.01em;
}
.ob-lede { font-size: 14.5px; line-height: 1.55; color: var(--ink-2t); margin: 0 0 20px; }
.ob-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 14px; }
.ob-list li {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2t);
  padding-left: 16px; position: relative;
}
.ob-list li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--trust);
}
.ob-list b { color: var(--ink-1); font-weight: 650; }
.ob-form { padding: 0 !important; }
.ob-group { margin-bottom: 22px; }
.ob-group h3 {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3t); font-weight: 700; margin: 0 0 10px;
}
.ob-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ob-chip {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px;
  padding: 9px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--paper-up); color: var(--ink-2t);
  transition: all .18s var(--ease); min-height: 40px;
}
.ob-chip.on {
  background: var(--rose-in); border-color: var(--rose); color: var(--rose-dk);
  font-weight: 650;
}
.ob-pref {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.ob-pref:last-child { border-bottom: 0; }
.ob-foot {
  flex: 0 0 auto; display: flex; gap: 10px; align-items: center;
  justify-content: space-between; padding: 12px 22px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--paper-up);
}
.ob-foot .btn { min-height: 48px; }
.ob-foot .btn.primary { flex: 1 1 auto; }
.ob-error {
  padding: 0 22px 10px; color: var(--rose-dk); font-size: 13px; min-height: 0;
  background: var(--paper-up);
}
.ob-error:not(:empty) { padding-bottom: 14px; }

/* ---- leaving ---- */
.account-card.danger { border-color: oklch(44% .085 17 / .28); }
.linkish.danger { color: var(--rose-dk); font-weight: 650; }
.btn.danger {
  background: var(--rose-dk); color: var(--paper-up); border-color: transparent;
}
.btn.danger:active { background: oklch(38% .09 17); }
.del-block { padding: 4px 18px 12px; }
.del-block h3 {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3t); font-weight: 700; margin: 12px 0 8px;
}
.del-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.del-list li {
  font-size: 13px; line-height: 1.45; padding-left: 20px; position: relative;
  color: var(--ink-2t);
}
.del-list li b { display: block; color: var(--ink-1); font-weight: 650; }
.del-list li::before {
  position: absolute; left: 0; top: 1px; font-size: 12px; font-weight: 700;
}
.del-list li.keep::before { content: '✓'; color: var(--trust); }
.del-list li.gone::before { content: '✕'; color: var(--rose-dk); }
.del-note { font-size: 12.5px; color: var(--ink-3t); margin: 10px 0 0; line-height: 1.45; }
.farewell {
  max-width: 420px; margin: 0 auto; padding: 22vh 26px 0; text-align: left;
  font-family: var(--sans); color: var(--ink-2t);
}
.farewell h1 {
  font-family: var(--display); font-size: 28px; font-weight: 600;
  color: var(--ink-1); margin: 0 0 14px;
}
.farewell p { font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; }

/* Onboarding is a gate. Hide the tabbar so she cannot step around it — the
   deck is refused server-side regardless, but Circle and Matches would open. */
body.onboarding .tabbar { display: none; }
body.onboarding .topbar-right { visibility: hidden; }

/* ---- a Circle that manages itself --------------------------------------
   The hidden count is deliberately loud. An artist can remove a sentence; the
   fact that he removed it is the signal that replaces the moderator. */
.circle-hidden-note {
  margin: 10px 16px 0; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--amber-in); border: 1px solid oklch(56% .070 82 / .34);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2t);
}
.circle-hidden-note b { color: var(--amber-dk); }
.circle-hidden-note svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }

/* She can read everything; posting needs a completed booking with him. */
.cc-locked {
  margin: 12px 16px; padding: 13px 15px; border-radius: var(--r-md);
  background: var(--paper-in); border: 1px dashed var(--line-2);
  font-size: 13px; line-height: 1.55; color: var(--ink-2t);
}
.cc-locked b { color: var(--ink-1); }
.cc-locked span { display: block; margin-top: 8px; color: var(--ink-3t); font-size: 12.5px; }

.cpost-hide {
  appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 650;
  margin-top: 8px; padding: 8px 12px; min-height: 40px;
  border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--paper-up); color: var(--ink-2t); transition: all .18s var(--ease);
}
.cpost-hide:active { background: var(--paper-in); }
.cpost-hide.restore { border-color: var(--trust); color: var(--trust-dk); }

.target-block { padding: 6px 16px 0; }
.cpost.hidden-post { opacity: .72; border-style: dashed; }

/* The artist's one door into the Circle: the page about him, and nothing else. */
.own-circle {
  appearance: none; cursor: pointer; font: inherit; text-align: left;
  display: flex; align-items: center; gap: 12px; width: calc(100% - 32px);
  margin: 14px 16px 0; padding: 14px 16px; min-height: 56px;
  border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: var(--paper-up); color: var(--ink-2t);
  transition: all .18s var(--ease);
}
.own-circle:active { background: var(--paper-in); }
.own-circle b { display: block; color: var(--ink-1); font-size: 14px; margin-bottom: 3px; }
.own-circle span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink-3t); }
.own-circle .ap-go { flex: 0 0 auto; color: var(--ink-3t); font-size: 16px; }

/* ---- published legal documents ----------------------------------------- */
.legal-consent {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-3t); margin: 4px 0 10px;
}
.legal-consent .linkish { font-size: 12.5px; }
.account-legal { display: flex; gap: 14px; margin-top: 4px; }
.account-legal .linkish { font-size: 12.5px; }
.legal-doc {
  padding: 4px 18px 26px; font-size: 14px; line-height: 1.62; color: var(--ink-2t);
  max-width: 68ch;
}
.legal-doc h1 {
  font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--ink-1);
  margin: 6px 0 4px; letter-spacing: -.01em;
}
.legal-doc h2 {
  font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--ink-1);
  margin: 26px 0 6px;
}
.legal-doc h3 {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-3t); margin: 18px 0 6px;
}
.legal-doc p { margin: 0 0 12px; }
.legal-doc ul { margin: 0 0 12px; padding-left: 18px; }
.legal-doc li { margin-bottom: 7px; }
.legal-doc b { color: var(--ink-1); font-weight: 650; }
.legal-meta {
  font-size: 12px; color: var(--ink-3t); border-bottom: 1px solid var(--line);
  padding-bottom: 12px; margin-bottom: 18px !important;
}
.legal-callout {
  background: var(--paper-in); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 14px 16px; margin: 0 0 20px;
  font-size: 13.5px; line-height: 1.55;
}

/* Private beta: unmissable, not alarming. */
.beta-chip {
  font-family: var(--sans); font-size: 8px; font-weight: 800; letter-spacing: .18em;
  color: var(--amber-dk); background: var(--amber-in);
  border: 1px solid oklch(56% .070 82 / .40); border-radius: 4px;
  padding: 2px 5px; margin-left: 8px; align-self: center; line-height: 1;
}
.beta-note {
  background: var(--amber-in); border: 1px solid oklch(56% .070 82 / .34);
  border-radius: var(--r-sm); padding: 11px 13px; margin: 0 0 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2t);
}
.beta-note b { color: var(--amber-dk); }

/* =====================================================================
   Getting listed — the artist's verification packet.

   Colour carries meaning here and nothing else does the work: --trust is used
   ONLY on lines Inkling has actually checked and accepted, --amber only for
   something lapsing or lapsed, --rose for the human "we sent it back with a
   note". A line still being read is deliberately neutral: nobody has verified
   anything yet, so nothing may be teal.
   ============================================================================ */
.pk-panel {
  margin: 8px 16px 14px; background: var(--paper-up); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 14px 14px 12px;
}
.pk-panel.stage-listed { border-color: oklch(55% 0.050 189 / .42); background: oklch(95% 0.022 189 / .22); }
.pk-panel.stage-delisted, .pk-panel.stage-changes_requested { border-color: oklch(56% .070 82 / .44); }
.pk-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
.pk-head > div { flex: 1; min-width: 0; }
.pk-eyebrow {
  display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-3t); margin-bottom: 4px;
}
.pk-head b {
  display: block; font-family: var(--display); font-size: 17px; line-height: 1.25;
  font-weight: 600; color: var(--ink-1);
}
.pk-count {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--ink-3t);
  background: var(--paper-in); border-radius: 20px; padding: 4px 9px;
}
.pk-panel.stage-listed .pk-count { color: var(--trust-dk); background: oklch(95% 0.022 189 / .7); }

.pk-rows { display: flex; flex-direction: column; gap: 2px; }
.pk-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  appearance: none; border: 0; background: transparent; font: inherit; cursor: default;
  padding: 8px 6px; border-radius: 9px;
}
button.pk-row { cursor: pointer; }
button.pk-row:hover { background: var(--paper-in); }
button.pk-row:active { transform: scale(.995); }
.pk-tick {
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; flex: 0 0 auto; margin-top: 1px;
  background: var(--paper-dp); color: var(--ink-3t);
}
.pk-row.done .pk-tick { background: var(--trust); color: var(--paper); }
.pk-row.under_review .pk-tick { background: var(--paper-dp); color: var(--ink-2t); }
.pk-row.expired .pk-tick { background: var(--amber-dk); color: var(--paper); }
.pk-row.rejected .pk-tick { background: var(--rose-dk); color: var(--paper-up); }
.pk-text { flex: 1; min-width: 0; }
.pk-text b { display: block; font-size: 13px; font-weight: 650; color: var(--ink-1); }
.pk-text small {
  display: block; font-size: 11.5px; line-height: 1.45; color: var(--ink-3t); margin-top: 2px;
}
.pk-row.expired .pk-text small { color: var(--amber-dk); font-weight: 600; }
.pk-row.rejected .pk-text small { color: var(--rose-dk); font-weight: 600; }
.pk-state {
  flex: 0 0 auto; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-3t); margin-top: 4px;
}
.pk-row.done .pk-state { color: var(--trust-dk); }
.pk-row.expired .pk-state { color: var(--amber-dk); }
.pk-row.rejected .pk-state { color: var(--rose-dk); }

.pk-note { font-size: 11.5px; line-height: 1.5; color: var(--ink-3t); margin: 9px 2px 0; }
.pk-panel .btn { margin-top: 11px; width: 100%; }
.pk-terms-link {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  display: block; width: 100%; text-align: center; padding: 9px 0 2px;
  font-size: 12px; font-weight: 700; color: var(--rose-dk); text-decoration: underline;
  text-underline-offset: 3px;
}
.pk-waiting, .pk-live, .pk-warn, .pk-sent-back {
  margin-top: 11px; border-radius: var(--r-sm); padding: 11px 13px;
  font-size: 12.5px; line-height: 1.5;
}
.pk-waiting { background: var(--paper-in); color: var(--ink-2t); }
.pk-waiting svg, .pk-live svg { width: 15px; height: 15px; stroke: currentColor; fill: none;
  stroke-width: 1.9; vertical-align: -3px; margin-right: 4px; }
.pk-live { background: oklch(95% 0.022 189 / .8); color: var(--trust-dk); font-weight: 600; }
.pk-warn { background: var(--amber-in); color: var(--amber-dk); border: 1px solid oklch(56% .070 82 / .34); }
.pk-sent-back { background: var(--rose-in); border: 1px solid oklch(70% .075 17 / .42); }
.pk-sent-back b { display: block; color: var(--rose-dp); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 5px; }
.pk-sent-back p { margin: 0 0 6px; color: var(--ink-1); }
.pk-sent-back span { display: block; font-size: 11.5px; color: var(--ink-3t); }

.pk-links { margin: 12px 18px 4px; }
.pk-links label {
  display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-3t); margin-bottom: 6px;
}
.pk-links input {
  width: 100%; background: var(--paper-up); color: var(--ink-1);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 12px;
  font: inherit; font-size: 13px; min-height: 44px;
}
.pk-links input:focus { outline: none; border-color: var(--ink-2t); }
.pk-links .btn { margin-top: 8px; }

/* One document, in a sheet. */
.doc-form { padding: 0 18px 4px; }
.doc-field { display: block; margin-bottom: 12px; }
.doc-field > span {
  display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-3t); margin-bottom: 6px;
}
.doc-field input, .doc-field textarea {
  width: 100%; background: var(--paper-up); color: var(--ink-1);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 12px;
  font: inherit; font-size: 13.5px; line-height: 1.5; min-height: 44px;
}
.doc-field textarea { resize: vertical; }
.doc-field input:focus, .doc-field textarea:focus { outline: none; border-color: var(--ink-2t); }
.doc-form .file-drop { margin: 0 0 8px; }
.doc-form .btn { width: 100%; margin-top: 4px; }
.doc-picked { font-size: 11.5px; color: var(--trust-dk); font-weight: 600; margin-bottom: 6px; }

/* ---- admin: the verification desk ---- */
.dv-card {
  margin: 0 16px 12px; background: var(--paper-up); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 13px;
}
.dv-card.is-live { border-color: oklch(55% 0.050 189 / .40); }
.dv-head { display: flex; align-items: flex-start; gap: 10px; }
.dv-head > div { flex: 1; min-width: 0; }
.dv-head b { display: block; font-size: 15px; font-weight: 700; color: var(--ink-1); }
.dv-head small { display: block; font-size: 10.5px; color: var(--ink-3t); margin-top: 2px; }
.dv-status {
  flex: 0 0 auto; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-3t); background: var(--paper-in);
  border-radius: 20px; padding: 4px 8px;
}
.dv-status.live { color: var(--trust-dk); background: oklch(95% 0.022 189 / .85); }
.dv-line { font-size: 12px; line-height: 1.5; color: var(--ink-2t); margin: 9px 0 0; }
.dv-miss { color: var(--amber-dk); font-weight: 600; }
.dv-links { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.dv-links a { font-size: 12px; color: var(--rose-dk); word-break: break-all; }
.dv-shots { display: flex; gap: 6px; margin-top: 9px; overflow-x: auto; padding-bottom: 2px; }
.dv-shots a { flex: 0 0 auto; }
.dv-shots img {
  width: 74px; height: 74px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); display: block;
}
.dv-doc {
  margin-top: 9px; background: var(--paper-in); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 11px;
}
.dv-doc.accepted { border-color: oklch(55% 0.050 189 / .38); }
.dv-doc.rejected { border-color: oklch(70% .075 17 / .45); }
.dv-doc-head { display: flex; align-items: flex-start; gap: 8px; }
.dv-doc-head > div { flex: 1; min-width: 0; }
.dv-doc-head b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-1); }
.dv-doc-head small { display: block; font-size: 11px; color: var(--ink-3t); margin-top: 1px; }
.dv-ok, .dv-bad, .dv-wait {
  flex: 0 0 auto; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 800; white-space: nowrap;
}
.dv-ok { color: var(--trust-dk); } .dv-bad { color: var(--amber-dk); } .dv-wait { color: var(--ink-3t); }
.dv-body {
  margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--ink-2t);
  white-space: pre-wrap; max-height: 9em; overflow-y: auto;
}
.dv-file { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700;
  color: var(--rose-dk); }
.dv-reason {
  margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--rose-dk); font-weight: 600;
}
.dv-doc-actions, .dv-actions { display: flex; gap: 7px; margin-top: 10px; }
.dv-doc-actions .btn, .dv-actions .btn { flex: 1; }
/* ---- account menu -------------------------------------------------------
   The top-right was a bare sign-out icon, which pushed account settings to the
   bottom of the Collection tab — somewhere you go to look at your tattoos, not
   to change your password. */
.topbar-avatar {
  appearance: none; border: 0; padding: 0; cursor: pointer; background: transparent;
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-2); transition: box-shadow .18s var(--ease);
}
.topbar-avatar:active { box-shadow: 0 0 0 2px var(--line-2); }
.topbar-avatar svg, .topbar-avatar span { display: block; width: 100%; height: 100%; }

.menu-id { display: flex; align-items: center; gap: 13px; padding: 2px 18px 16px; }
.menu-face { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  box-shadow: 0 0 0 1px var(--line-2); }
.menu-face svg { width: 100%; height: 100%; display: block; }
.menu-id b { display: block; font-family: var(--display); font-size: 19px; color: var(--ink-1);
  font-weight: 600; line-height: 1.2; }
.menu-id span { display: block; font-size: 12.5px; color: var(--ink-3t); }
.menu-role { margin-top: 4px; font-size: 9.5px !important; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; color: var(--taupe) !important; }

.menu-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px; padding: 0 18px 16px; }
.mstat { background: var(--paper-in); border-radius: var(--r-sm); padding: 11px 8px;
  text-align: center; }
.mstat b { display: block; font-family: var(--display); font-size: 20px; color: var(--ink-1);
  font-weight: 600; line-height: 1; }
.mstat span { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .04em;
  color: var(--ink-3t); }

.menu-list { border-top: 1px solid var(--line); padding: 6px 0; }
.menu-item {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  display: block; width: 100%; text-align: left; padding: 13px 18px; min-height: 52px;
  transition: background .15s var(--ease);
}
.menu-item:active { background: var(--paper-in); }
.menu-item b { display: block; font-size: 14.5px; color: var(--ink-1); font-weight: 600; }
.menu-item span { display: block; font-size: 12.5px; color: var(--ink-3t); margin-top: 2px; }
.menu-item.danger b { color: var(--rose-dk); }

/* ---- women and men, side by side ---------------------------------------
   Deliberately NOT teal: this is an aggregate of what people reported, not
   something Inkling verified about the artist. */
.ap-split .ap-gap-lead {
  background: var(--amber-in); border: 1px solid oklch(56% .070 82 / .34);
  border-radius: var(--r-sm); padding: 11px 13px; margin: 2px 0 14px;
  font-size: 13px; line-height: 1.5; color: var(--ink-2t);
}
.ap-split .ap-gap-lead b { color: var(--amber-dk); }
.ap-split .ap-gap-lead.ok { background: var(--paper-in); border-color: var(--line-2); }
.ap-split .ap-gap-lead.ok b { color: var(--ink-1); }
.ap-split .ap-gap-lead svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.ap-sp-head, .ap-sp-row {
  display: grid; grid-template-columns: 1fr 62px 62px; align-items: center; gap: 8px;
}
.ap-sp-head {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-3t); padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.ap-sp-head span:not(:first-child), .ap-sp-v { text-align: right; }
.ap-sp-row { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ap-sp-row:last-of-type { border-bottom: 0; }
.ap-sp-l { color: var(--ink-2t); }
.ap-sp-v { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ink-1); }
.ap-sp-row.wide .ap-sp-v.w { color: var(--amber-dk); }
.ap-split.pending .ap-note { color: var(--ink-3t); }

/* the signup question */
.gender-q { margin: 2px 0 12px; }
.gq-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-3t); margin-bottom: 6px; }
.gq-why { font-size: 12.5px; line-height: 1.5; color: var(--ink-3t); margin-bottom: 10px; }
.gq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.gq-foot { font-size: 11.5px; line-height: 1.45; color: var(--taupe); margin-top: 9px; }

/* ============================================================================
   THE PUBLIC LANDING PAGE
   The one surface in Inkling that is not a phone frame, and the only one a
   stranger sees. It is long-form, so it is set as one column at a reading
   measure and centred — a laptop gets bigger type, not a second column.

   Every colour here is a :root token. Nothing on this page may name a hex or
   an oklch literal: the palette is being replaced, and this page has to come
   along for free when it is.
   ============================================================================ */

/* ---- the two front doors -------------------------------------------------
   One document, two states. LANDING IS THE DEFAULT so a browser with
   JavaScript off still gets the whole story instead of an empty phone frame;
   the inline script in <head> stamps entry-app on the root element before
   first paint when the path says otherwise. */
#landing { display: block; }
#app { display: none; }
html.entry-app #landing { display: none; }
html.entry-app #app { display: flex; }
/* The app frame is exactly one viewport tall and never scrolls the document.
   The landing page is the opposite, so it takes the height rule back. */
html.entry-landing, html.entry-landing body { height: auto; }

.landing {
  max-width: var(--maxw-read);
  margin: 0 auto;
  padding: 0 22px 64px;
  color: var(--ink-2t);
  font-size: 16.5px;
  line-height: 1.62;
}

/* ---- header ---- */
.lp-top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0 13px;
  margin-bottom: 14px;
  background: var(--paper-veil);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.lp-mark {
  font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -.01em;
  color: var(--ink-1); text-decoration: none;
}
.lp-mark .dot { position: relative; }
.lp-mark .dot::after {
  content: ''; position: absolute; left: 50%; top: -.16em; width: .22em; height: .22em;
  transform: translateX(-50%); border-radius: 50%; background: var(--rose-dk);
}
/* Sign-in is one click from anywhere on the page, and it is the only other
   thing in the header — a member who lands here by habit should not have to
   read the pitch again to get past it. */
.lp-signin {
  font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--ink-1); text-decoration: none;
  border: 1px solid var(--ink-3t); border-radius: 999px;
  padding: 8px 16px; background: var(--paper-up);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.lp-signin:hover { background: var(--paper-in); border-color: var(--ink-1); }

/* ---- shared type ---- */
.lp-kicker {
  font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase; font-weight: 700;
  color: var(--rose-dk); margin: 0 0 12px;
}
.lp-h1 {
  font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.02;
  font-size: clamp(46px, 13vw, 84px); color: var(--ink-1); margin: 0 0 22px;
}
.lp-h1 em { font-style: italic; color: var(--rose-dk); }
.lp-h2 {
  font-family: var(--display); font-weight: 600; letter-spacing: -.015em; line-height: 1.12;
  font-size: clamp(27px, 6.4vw, 38px); color: var(--ink-1); margin: 0 0 16px;
}
.lp-lede { font-size: clamp(17px, 4.4vw, 20px); line-height: 1.55; color: var(--ink-2t); margin: 0 0 16px; }
.lp-lede b { color: var(--ink-1); font-weight: 700; }
.lp-body { margin: 0 0 15px; }
.lp-body b { color: var(--ink-1); font-weight: 700; }
.lp-emph {
  font-family: var(--display); font-size: clamp(19px, 4.6vw, 23px); line-height: 1.36;
  color: var(--ink-1); font-weight: 500;
}
.lp-note {
  font-size: 14px; line-height: 1.55; color: var(--ink-3t);
  background: var(--paper-in); border-radius: var(--r-md);
  padding: 13px 15px; margin: 4px 0 15px;
}
.lp-note b { color: var(--ink-1); }

/* ---- 1. the question ---- */
.lp-hero { padding: 26px 0 40px; }
.lp-quote {
  margin: 26px 0 30px; padding: 2px 0 2px 20px;
  border-left: 3px solid var(--rule-rose);
}
.lp-quote p {
  font-family: var(--display); font-size: clamp(19px, 4.8vw, 24px); line-height: 1.4;
  color: var(--ink-1); margin: 0 0 10px; font-weight: 400;
}
.lp-quote cite {
  font-style: normal; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-3t);
}
.lp-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }

.lp-btn {
  display: inline-block; text-align: center; text-decoration: none;
  appearance: none; border: 0; cursor: pointer;
  background: var(--ink-1); color: var(--paper-up);
  font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .01em;
  padding: 15px 26px; border-radius: 14px; box-shadow: var(--sh-lift);
  transition: transform .12s var(--ease), background .2s var(--ease);
}
.lp-btn:hover { background: var(--ink-2t); }
.lp-btn:active { transform: scale(.98); }
.lp-btn[disabled] { opacity: .55; cursor: default; transform: none; }

.lp-inline-link {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--ink-2t);
  text-decoration: underline; text-underline-offset: 3px;
}
.lp-inline-link:hover { color: var(--rose-dk); }

/* ---- bands ---- */
.lp-band, .lp-join { padding: 40px 0; border-top: 1px solid var(--line); }
.lp-band > :last-child, .lp-join > :last-child { margin-bottom: 0; }

/* the six questions — every artist is asked the same ones, so they are set as
   a list of equals rather than a ranked or scored thing */
.lp-questions { list-style: none; margin: 20px 0 0; padding: 0; }
.lp-questions li {
  position: relative; padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--line);
  font-size: 16px; color: var(--ink-1);
}
.lp-questions li:last-child { border-bottom: 0; }
.lp-questions li::before {
  content: ''; position: absolute; left: 4px; top: 20px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--rose);
}

/* the verified chain — three things, all three, in order */
.lp-chain {
  list-style: none; counter-reset: chain; margin: 20px 0 20px; padding: 0;
  display: grid; gap: 10px;
}
@media (min-width: 620px) { .lp-chain { grid-template-columns: repeat(3, 1fr); } }
.lp-chain li {
  counter-increment: chain;
  background: var(--paper-up); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 16px 15px 15px; box-shadow: var(--sh-lift);
}
.lp-chain li::before {
  content: counter(chain);
  display: block; font-family: var(--display); font-size: 13px; font-weight: 700;
  color: var(--trust); letter-spacing: .1em; margin-bottom: 7px;
}
.lp-chain b {
  display: block; font-family: var(--display); font-size: 19px; font-weight: 600;
  color: var(--ink-1); line-height: 1.2;
}
.lp-chain span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-3t); }

/* what it is not — quieter ground, because the honest part should read like
   someone lowering their voice, not like a warning label */
.lp-limits {
  background: var(--paper-in); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 30px 24px; margin: 40px 0 0; border-top: 1px solid var(--line-2);
}

/* ---- 4. the ask ---- */
.lp-join { padding-bottom: 8px; }
.wl-form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.wl-field {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-3t);
}
.wl-lab { display: block; }
.wl-opt { font-style: normal; text-transform: none; letter-spacing: .02em;
  font-weight: 500; color: var(--ink-3t); }
.wl-field input {
  font-family: var(--sans); font-size: 16px; letter-spacing: normal; text-transform: none;
  font-weight: 400; color: var(--ink-1);
  background: var(--paper-up); border-radius: var(--r-md);
  padding: 14px 15px; min-height: 50px;
  /* WCAG 1.4.11: the outline of a field is the only thing that says a field is
     there, so it has to clear 3:1 against the paper. --line-2 is a hairline for
     dividing text, not for drawing a control, and it measures 1.6:1. */
  border: 1px solid var(--ink-3t);
}
.wl-field input::placeholder { color: var(--taupe); }
.wl-field input:focus-visible { outline: 2px solid var(--ink-1); outline-offset: 1px; border-color: var(--ink-1); }

.wl-sides { border: 0; margin: 2px 0 0; padding: 0; }
.wl-sides legend {
  padding: 0; margin-bottom: 9px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-3t);
}
.wl-side {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper-up); border: 1px solid var(--ink-3t); border-radius: var(--r-md);
  padding: 13px 15px; margin-bottom: 8px; min-height: 50px;
  font-size: 15px; color: var(--ink-1); cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.wl-side:hover { border-color: var(--ink-1); }
.wl-side:has(input:checked) { border-color: var(--ink-1); background: var(--paper-in); }
.wl-side input { accent-color: var(--ink-1); width: 18px; height: 18px; margin: 0; }
.wl-why { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3t); }

.wl-consent { margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-3t); }
.wl-consent .lp-inline-link { font-size: 13px; font-weight: 700; }
.wl-msg { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2t); min-height: 1px; }
.wl-msg.bad { color: var(--rose-dp); }
.wl-msg.good {
  background: var(--trust-in); border: 1px solid var(--trust);
  color: var(--trust-dk); border-radius: var(--r-md); padding: 14px 15px; font-weight: 500;
}

/* ---- footer ---- */
.lp-foot {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-3t);
}
.lp-foot b { color: var(--ink-1); font-family: var(--display); font-weight: 600; }
.lp-foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; }
.lp-foot-links a { text-decoration: underline; text-underline-offset: 3px; }

/* Keyboard focus is visible everywhere on this page, including on the links
   and buttons that have no border of their own. */
.landing a:focus-visible, .landing button:focus-visible, .landing input:focus-visible {
  outline: 2px solid var(--ink-1); outline-offset: 2px; border-radius: 4px;
}

@media (min-width: 760px) {
  .landing { padding: 0 32px 80px; font-size: 17.5px; }
  .lp-hero { padding: 46px 0 56px; }
  .lp-band, .lp-join { padding: 52px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-signin, .wl-side { transition: none; }
  .lp-btn:active { transform: none; }
}

/* A sixth admin tab (the waitlist) stops fitting on a 375px screen, and a tab
   you cannot see is a tab that does not exist. The row scrolls instead of
   squeezing the last label into an ellipsis. */
.admin-tabs {
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  /* A scroll container is its own flex item with min-height:0, so inside the
     column-flex view it will happily collapse to nothing. It must not. */
  flex: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs button { flex: 0 0 auto; white-space: nowrap; padding-inline: 14px; }

/* Payout connection state in the verify sheet. Not a demo caption: this one
   reports what Stripe actually said, so it needs to read as a live fact. */
.payout-state {
  margin: 14px 0 18px; padding: 12px 14px; border-radius: 12px;
  background: var(--paper-in); border: 1px solid var(--line);
  font: 500 14px/1.5 var(--sans); color: var(--ink-2t);
}
.payout-state.ok {
  background: var(--trust-in); border-color: var(--trust);
  color: var(--trust-dk); font-weight: 600;
}

/* Standards: the kept rate beside a promise the artist is making. Shown at the
   moment they tick the box, because that is when the cost of claiming
   something you do not keep should be visible. */
.std-row .apref-label { display: flex; flex-direction: column; gap: 3px; }
.std-kept {
  font: 600 12px/1.3 var(--sans); letter-spacing: .01em;
}
.std-kept.good { color: var(--trust-dk); }
.std-kept.mid  { color: var(--amber-dk, var(--ink-3t)); }
.std-kept.bad  { color: var(--rose-dk); }
.std-kept.none { color: var(--taupe); font-weight: 500; }

/* The split table widens when a group earns its own column. Grid columns are
   driven by a class rather than the layout branching, so a fourth group needs
   no new CSS. */
.ap-sp-head.cols-3, .ap-sp-row.cols-3 { grid-template-columns: 1fr 62px 62px 82px; }
.ap-sp-wide { overflow-x: auto; }
.ap-sp-v.nb { color: var(--ink-2t); }

/* ---- the landing tour -----------------------------------------------------
   Collapsed by default. A closed <details> does not fetch its lazy images, so
   the page stays light for the many people who never open it. */
.lp-tour {
  margin: 14px 18px 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper-up); overflow: hidden;
}
.lp-tour + .lp-tour { margin-top: 10px; }
.lp-tour > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; cursor: pointer; list-style: none;
  font: 600 16px/1.3 var(--sans); color: var(--ink-1);
}
.lp-tour > summary::-webkit-details-marker { display: none; }
.lp-tour > summary::after {
  content: '+'; font: 400 20px/1 var(--sans); color: var(--taupe); flex: none;
}
.lp-tour[open] > summary::after { content: '–'; }
.lp-tour[open] > summary { border-bottom: 1px solid var(--line); }
.lp-tour-n { font: 500 13px/1 var(--sans); color: var(--taupe); margin-left: auto; margin-right: 4px; }

.lp-tour-strip {
  display: flex; gap: 12px; overflow-x: auto; padding: 14px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* One card fills the column. The slides are 1080px wide with real UI type on
   them; at 240px the print was decoration rather than something you could
   read, which defeats the point of showing real screens. */
.lp-tour-strip img {
  flex: none; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--line); scroll-snap-align: center;
  background: var(--paper); cursor: zoom-in;
}
.lp-tour-note, .lp-tour-soon {
  padding: 0 18px 16px; font: 400 13.5px/1.55 var(--sans); color: var(--ink-3t);
}
.lp-tour-soon { padding-top: 16px; }

/* Wider than the reading column once there is room for it: the tour is the one
   thing on this page that is worse for being narrow. */
/* On a phone the page's own 22px gutter plus the panel margin was costing the
   card almost a third of the screen, which is exactly the width the small print
   needed. The tour breaks out to the edges instead. */
@media (max-width: 560px) {
  .lp-tour { margin-left: -22px; margin-right: -22px; border-radius: 0;
             border-left: 0; border-right: 0; }
  .lp-tour-strip { padding: 12px 10px; gap: 10px; }
  .lp-tour > summary { padding: 15px 22px; }
  .lp-tour-note, .lp-tour-soon { padding: 0 22px 15px; }
}

@media (min-width: 760px) {
  .lp-tour { margin-left: -40px; margin-right: -40px; }
  /* One card, not two: the second one only shrinks the first. The sliver of
     the next card showing past it is what says the strip scrolls. */
  .lp-tour-strip img { width: 460px; }
}

/* ---- full size ------------------------------------------------------------
   Tapping a card opens it at whatever size the screen allows. No library: one
   fixed overlay, one image, click or Esc to close. */
.lp-zoom {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
  justify-content: center; padding: 16px; cursor: zoom-out;
  background: oklch(22% 0.014 325 / 0.86); -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.lp-zoom img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 24px 60px oklch(22% 0.014 325 / 0.5);
}
.lp-zoom-x {
  position: absolute; top: 14px; right: 16px; width: 40px; height: 40px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--paper); color: var(--ink-1);
  font: 400 22px/1 var(--sans);
}

/* ---- the three-way split, drawn ------------------------------------------
   Ratings are FACTS, so this is teal, and the three columns are visually
   identical: an enby column that looked like a footnote would say the opposite
   of what the section is claiming. */
.lp-split-demo {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin: 18px 0 6px; border: 1px solid var(--trust);
  border-radius: 14px; overflow: hidden; background: var(--trust);
}
.lp-split-col {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 6px 13px; background: var(--trust-in); text-align: center;
}
.lp-split-g {
  font: 600 11.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--trust-dk);
}
.lp-split-v { font: 400 27px/1.05 var(--display); color: var(--ink-1); }
.lp-split-n { font: 400 12px/1 var(--sans); color: var(--ink-3t); }
.lp-cap {
  margin: 0 0 4px; font: 400 12.5px/1.5 var(--sans); color: var(--ink-3t);
  text-align: center;
}