/* The brand layer, loaded last on every page (after polish.css). It sets the type system and the finish of the dark brand:

   Type   Sora for headlines (H1 ExtraBold, H2 Bold, buttons SemiBold), Montserrat for titles (H3 SemiBold, H4 Medium),
          Manrope for everything you read and tap (body 16, small 12-14 Medium).
   Colour #0B0B17 ground, #FF00B8 brand pink, #FFFF00 for what you press, #00B6FF and #A855F7 for detail (styles.css :root).
   Depth  a hairline of lavender round anything that sits on the page and a soft dark shadow under it, instead of the old ink
          lip; buttons keep the lift and press: up 2px on hover, down on click, with a coloured lip under them. */

:root {
  --shadow: 0 0 0 var(--line) var(--edge), 0 24px 48px -28px rgb(var(--sh-rgb) / calc(.95 * var(--sh-k)));
  --shadow-sm: 0 0 0 var(--line) var(--edge), 0 10px 24px -16px rgb(var(--sh-rgb) / calc(.85 * var(--sh-k)));
  --hair: 0 0 0 var(--line) var(--edge);
  --lip: #FF00B8;
}
@media (max-width: 760px) { :root { --shadow: 0 0 0 var(--line) var(--edge), 0 18px 36px -24px rgb(var(--sh-rgb) / calc(.95 * var(--sh-k))); } }

/* ---------- ground and type ---------- */
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; font-feature-settings: "ss01" 0; }
h1, h2 { font-family: var(--display); color: var(--ink); }
h1 { font-weight: 800; letter-spacing: -0.035em; }
h2 { font-weight: 700; letter-spacing: -0.03em; }
h3 { font-family: var(--title); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
h4 { font-family: var(--title); font-weight: 500; letter-spacing: -0.01em; }
small, .fine, time { font-family: var(--body); font-weight: 500; }
.brand { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2.5px solid var(--yellow); outline-offset: 3px; }
a { color: inherit; }
hr { border: 0; height: var(--line); background: var(--edge); }

/* ---------- the bar on top ---------- */
.topbar:not(.app-top) { background: rgba(11,11,23,.86); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 var(--line) 0 0 var(--edge); }
.app-top { background: var(--surface); box-shadow: var(--shadow-sm); }
.top-link { color: var(--ink); }
.top-link:hover { background: rgba(var(--fg-rgb),.07); }
.top-link[aria-current="page"] { background: rgba(255,0,184,.14); color: #fff; box-shadow: inset 0 0 0 var(--line) rgba(255,0,184,.6); }
.top-link.solid, .top-link.solid:hover { background: var(--yellow); color: var(--on-accent); box-shadow: 0 3px 0 0 var(--lip); font-family: var(--display); font-weight: 600; }
.top-link.solid:hover { box-shadow: 0 5px 0 0 var(--lip); }
.top-link.solid:active { box-shadow: 0 0 0 0 var(--lip); }
.menu-btn { background: rgba(var(--fg-rgb),.07); color: var(--ink); }
@media (max-width: 759.98px) {
  .topbar.menu-ready .top-nav { background: var(--surface); box-shadow: 0 0 0 var(--line) var(--edge), 0 24px 40px -18px rgb(var(--sh-rgb) / calc(.9 * var(--sh-k))); }
}

/* ---------- buttons: Sora SemiBold, lift on hover, press on click ---------- */
.btn { font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; --pop-c: var(--lip); box-shadow: 0 0 0 var(--line) var(--edge), 0 4px 0 0 var(--pop-c); }
.btn:hover:not(:disabled):not(.disabled) { box-shadow: 0 0 0 var(--line) var(--edge), 0 6px 0 0 var(--pop-c); }
.btn:active:not(:disabled):not(.disabled) { box-shadow: 0 0 0 var(--line) var(--edge), 0 1px 0 0 var(--pop-c); }
/* the main action: electric yellow on a pink lip */
.btn-black, .btn-yellow { background: var(--yellow); color: var(--on-accent); --pop-c: var(--brand); box-shadow: 0 0 0 var(--line) transparent, 0 4px 0 0 var(--pop-c); }
.btn-black:hover:not(:disabled):not(.disabled), .btn-yellow:hover:not(:disabled):not(.disabled) { box-shadow: 0 0 0 var(--line) transparent, 0 6px 0 0 var(--pop-c); }
.btn-black:active:not(:disabled):not(.disabled), .btn-yellow:active:not(:disabled):not(.disabled) { box-shadow: 0 0 0 var(--line) transparent, 0 1px 0 0 var(--pop-c); }
/* the brand action (Instagram, a free week): hot pink into purple, white type, a deep lip */
.btn-ig { background: var(--ig); color: #fff; --pop-c: #5B0A6E; box-shadow: 0 0 0 var(--line) transparent, 0 4px 0 0 var(--pop-c); }
.btn-ig:hover:not(:disabled) { box-shadow: 0 0 0 var(--line) transparent, 0 6px 0 0 var(--pop-c); }
.story .btn-ig:hover:not(:disabled) { box-shadow: 0 0 0 var(--line) transparent, 0 6px 0 0 var(--pop-c); }
/* quiet buttons: the surface with a hairline */
.btn-soft { background: var(--surface-2); color: var(--ink); --pop-c: rgba(0,0,0,.6); }
.btn:disabled, .btn.disabled { box-shadow: 0 0 0 var(--line) var(--edge); opacity: .45; }
.icon-btn { --pop-c: var(--brand); }

.chip { background: var(--surface-2); color: var(--ink); box-shadow: 0 0 0 var(--line) var(--edge), 0 3px 0 0 rgb(var(--sh-rgb) / calc(.55 * var(--sh-k))); font-family: var(--body); font-weight: 700; }
.chip:hover { box-shadow: 0 0 0 var(--line) var(--edge-strong), 0 5px 0 0 rgb(var(--sh-rgb) / calc(.55 * var(--sh-k))); }
.chip:active { box-shadow: 0 0 0 var(--line) var(--edge-strong), 0 1px 0 0 rgb(var(--sh-rgb) / calc(.55 * var(--sh-k))); }

/* ---------- forms ---------- */
.field input, .input, select, textarea { background: var(--surface-2); color: var(--ink); box-shadow: 0 0 0 var(--line) var(--edge) inset; }
.field input::placeholder, .input::placeholder, textarea::placeholder { color: rgba(171,167,201,.7); }
.field input:focus, .input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--brand) inset, 0 0 0 6px rgba(255,0,184,.18); }
.check input, input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
.note { background: var(--surface-2); color: var(--ink); box-shadow: 0 0 0 var(--line) var(--edge) inset; }
.note.error { background: rgba(255,0,184,.12); color: var(--t-pink); box-shadow: 0 0 0 var(--line) rgba(255,0,184,.55) inset; }
.note.warn { background: rgba(255,255,0,.08); color: var(--t-yellow); box-shadow: 0 0 0 var(--line) rgba(255,255,0,.4) inset; }
.fine { color: var(--muted); }

/* ---------- people, progress, toast ---------- */
.avatar { color: var(--on-accent); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--edge); }
.avatar.mini { box-shadow: 0 0 0 2px var(--bg); }
.progress { background: rgba(var(--fg-rgb),.08); }
.progress span { background: linear-gradient(90deg, var(--yellow), var(--brand), var(--violet)); }
.toast { background: var(--surface-3); color: #fff; box-shadow: 0 0 0 var(--line) var(--edge-strong), 0 18px 34px -14px rgb(var(--sh-rgb) / calc(.9 * var(--sh-k))); }
.toast::before { color: var(--yellow); }
.track { -webkit-text-stroke: 2px rgba(214,196,255,.16); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,0,.55); } 60% { box-shadow: 0 0 0 7px rgba(255,255,0,0); } }

/* ---------- the app ---------- */
.composer textarea, .coach .composer textarea { background: transparent; box-shadow: none; }
.composer textarea:focus { box-shadow: none; }
.composer:focus-within { box-shadow: 0 0 0 2px var(--brand), 0 16px 28px -16px rgb(var(--sh-rgb) / calc(.8 * var(--sh-k))); }
.coach select, .coach input { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 var(--line) var(--edge); }
.coach select:focus, .coach input:focus { box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 5px rgba(255,0,184,.18); }
.coach-marquee .track { -webkit-text-stroke: 2px rgba(214,196,255,.13); }
.push-ask { background: var(--surface-3); color: var(--ink); box-shadow: 0 0 0 var(--line) var(--edge-strong), 0 18px 34px -14px rgb(var(--sh-rgb) / calc(.9 * var(--sh-k))); }
.push-ask .ask-no { color: var(--ink); }

/* ---------- the small footer (pricing, subscribe, the app page): here, so every page that has it gets it ---------- */
.foot { width: min(1180px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 28px 0 40px; font-size: .92rem; text-align: center; color: var(--muted); }
.foot a { color: var(--ink); font-weight: 600; }
.foot p { margin: 0 0 6px; }
.foot .tiny { font-size: .78rem; opacity: .75; }
* { scrollbar-color: var(--surface-3) transparent; }

/* the chat: their messages on a lighter card than the panel, yours in yellow; the open conversation in brand pink */
.msg.them { background: var(--surface-3); color: var(--ink); }
.thread { color: var(--on-night); } /* the inbox is a night panel in both themes */
.thread:hover { background: rgba(var(--fg-rgb),.06); }
.thread[aria-current="true"] { background: linear-gradient(100deg, rgba(255,0,184,.26), rgba(168,85,247,.2)); box-shadow: 0 0 0 var(--line) rgba(255,0,184,.45) inset; }
/* reply ideas: a card that sits clearly on the coach, the main action in yellow */
.reply { background: var(--surface-2); box-shadow: 0 0 0 var(--line) var(--edge), 0 12px 26px -16px rgb(var(--sh-rgb) / calc(.9 * var(--sh-k))); }
.reply-actions button { background: var(--surface-3); color: var(--ink); }
.reply-actions button.primary { background: var(--yellow); color: var(--on-accent); }
.refresh { background: var(--surface-2); color: var(--ink); }
.finale .btn-ig { box-shadow: 0 0 0 var(--line) transparent, 0 4px 0 0 #5B0A6E; }
.finale .btn-ig:hover:not(:disabled) { box-shadow: 0 0 0 var(--line) transparent, 0 6px 0 0 #5B0A6E; }

/* settings switches and buttons */
.s-switch .knob { background: #fff; box-shadow: 0 3px 8px -2px rgb(var(--sh-rgb) / calc(.6 * var(--sh-k))); }
.s-button.danger { background: rgba(255,0,184,.14); color: var(--t-pink); box-shadow: inset 0 0 0 var(--line) rgba(255,0,184,.55); }
.s-button.armed { background: var(--brand-deep); color: #fff; }

/* the avatar colours app.js picks from a name, moved onto the brand palette (they arrive as inline styles) */
.avatar[style*="201, 139, 255"] { background: #A855F7 !important; color: var(--on-accent); }
.avatar[style*="255, 138, 91"] { background: #FF00B8 !important; color: var(--on-accent); }
.avatar[style*="255, 223, 61"] { background: #FFFF00 !important; color: var(--on-accent); }
.avatar[style*="127, 209, 174"] { background: #00B6FF !important; color: var(--on-accent); }
.avatar[style*="246, 182, 156"] { background: var(--pink-text) !important; color: var(--on-accent); }

/* ---------- the light theme (the sun button in the top bar; theme.js keeps the choice) ----------
   The same brand on a soft lavender-white ground: ink becomes the text, the lavender edge turns to a quiet violet hairline,
   shadows go soft and purple, and pink and blue darken just enough to read as text on white. The inbox and the night band keep
   their dark ground on purpose, so their type stays light. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F4FF; --surface: #FFFFFF; --surface-2: #F1EEFB; --surface-3: #E7E2F6;
  --ink: #0B0B17; --muted: #57536F;
  --edge: rgba(60,30,120,.16); --edge-strong: rgba(60,30,120,.34);
  --fg-rgb: 11,11,23; --sh-rgb: 40 20 80; --sh-k: .38;
  --brand: #D6009D; --orange: #D6009D; --pink: #C8008F; --blue: #0077C2;
  --pink-text: #B5007F; --t-blue: #005B94; --t-pink: #A3007A; --t-yellow: #6B5B00; --pic-bg: #CFE9FF; --frame: #D9D3EE;
  --lilac: #EEE6FF; --lime: #E7EEFF; --peach: #FFE6F5; --mint: #E1F4FF; --sky: #ECE6FF; --rose: #FFE3F3; --cream: #FFFBD9;
  --night: #0B0B17;
}
html[data-theme="light"] .topbar:not(.app-top) { background: rgba(246,244,255,.9); }
html[data-theme="light"] ::selection { background: var(--brand); color: #fff; }
html[data-theme="light"] :focus-visible { outline-color: var(--brand); }
html[data-theme="light"] .finale, html[data-theme="light"] .finale h2, html[data-theme="light"] .s-night, html[data-theme="light"] .s-night h2 { color: var(--on-night); }
html[data-theme="light"] .inbox h1, html[data-theme="light"] .inbox h2 { color: var(--on-night); }
html[data-theme="light"] .track { -webkit-text-stroke: 2px rgba(60,30,120,.14); }
html[data-theme="light"] .coach-marquee .track { -webkit-text-stroke: 2px rgba(60,30,120,.12); }
/* the scenes' grounds and panels */
html[data-theme="light"] .duo[data-tone="warm"] { --stage: #EFE6FF; } html[data-theme="light"] .duo[data-tone="cool"] { --stage: #E4EAFB; }
html[data-theme="light"] .duo[data-tone="sad"] { --stage: #DFE2F0; } html[data-theme="light"] .duo[data-tone="happy"] { --stage: #FFE6F5; }
html[data-theme="light"] .tcoach { background: linear-gradient(165deg, #EADCFF, #F3DAFF 55%, #FFD9EF); }
html[data-theme="light"] .coach { background: linear-gradient(165deg, #EFE6FF 0%, #F1E8FF 48%, #FFE6F5 100%); }
html[data-theme="light"] .sky-2 { background: radial-gradient(60% 45% at 50% 28%, #E4DEFF, transparent 75%), radial-gradient(40% 30% at 85% 90%, rgba(0,119,194,.14), transparent 70%), #EEEAFB; }
html[data-theme="light"] body[data-step="2"] .intro-top .brand, html[data-theme="light"] body[data-step="2"] .cap h1 { color: var(--ink); }
html[data-theme="light"] body[data-step="2"] .intro-skip { color: var(--ink); }
/* Google's and Apple's own buttons for a light background */
html[data-theme="light"] .gsi { border-color: #747775; background: #fff; color: #1f1f1f; }
html[data-theme="light"] .asi { border-color: #000; background: #000; color: #fff; }
html[data-theme="light"] .asi:hover:not([aria-disabled="true"]) { background: #1d1d1f; }
html[data-theme="light"] .asi-icon { filter: none; }
html[data-theme="light"] .vsound { background: rgba(11,11,23,.72); color: #fff; }

/* ---------- the theme button ---------- */
.theme-toggle { flex: none; position: relative; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-m); display: grid; place-items: center; background: rgba(var(--fg-rgb),.07); color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 var(--line) var(--edge); transition: translate .25s var(--spring), background .2s; }
.theme-toggle:hover { translate: 0 -2px; background: rgba(var(--fg-rgb),.12); }
.theme-toggle:active { translate: 0 1px; transition-duration: .08s; }
.theme-toggle svg { width: 20px; height: 20px; transition: rotate .5s var(--spring), scale .35s var(--spring); }
.theme-toggle .sun { display: none; }
html[data-theme="light"] .theme-toggle .sun { display: block; } html[data-theme="light"] .theme-toggle .moon { display: none; }
.theme-toggle:hover svg { rotate: -18deg; }
.app-top .theme-toggle { margin-right: 2px; }
@media (max-width: 400px) { .theme-toggle { width: 36px; height: 36px; } }
html[data-theme="light"] .top-link[aria-current="page"] { color: var(--brand); background: rgba(214,0,157,.1); box-shadow: inset 0 0 0 var(--line) rgba(214,0,157,.45); }
.intro-top .theme-toggle { margin-left: auto; margin-right: 10px; }
/* small screens: the bar keeps the name, the theme button and the main link on one line */
@media (max-width: 440px) {
  .top-actions { gap: 4px; }
  .top-link { padding: 9px 9px; }
  .top-link.solid { white-space: nowrap; padding: 9px 12px; }
  .legal-nav .top-link { padding: 8px 6px; font-size: .84rem; }
  .theme-toggle { width: 36px; height: 36px; }
}

/* ---------- the details form: the photo, gender buttons and the age strip ---------- */
.field-label { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: .9rem; }
.age-shown { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--brand); }
.photo-row { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--r-l); background: var(--surface-2); box-shadow: inset 0 0 0 var(--line) var(--edge); }
.photo-row img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px var(--brand); }
.photo-row span { display: grid; gap: 2px; min-width: 0; }
.photo-row small { color: var(--muted); font-size: .82rem; }
.photo-row .linklike { margin-left: auto; font-size: .88rem; color: var(--muted); }
.choice-row { display: flex; gap: 10px; }
.choice-btn { flex: 1; min-height: 48px; padding: 10px 16px; border: 0; border-radius: var(--r-m); background: var(--surface-2); color: var(--ink); font: 600 1rem var(--display); cursor: pointer; box-shadow: inset 0 0 0 var(--line) var(--edge), 0 3px 0 0 rgb(var(--sh-rgb) / calc(.5 * var(--sh-k))); transition: translate .25s var(--spring), background .2s, box-shadow .25s; }
.choice-btn:hover { translate: 0 -2px; }
.choice-btn:active { translate: 0 2px; transition-duration: .08s; }
.choice-btn[aria-checked="true"] { background: var(--yellow); color: var(--on-accent); box-shadow: 0 3px 0 0 var(--brand); }
.field:has(.age-picker) { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.age-picker { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.age-step { flex: none; width: 46px; height: 52px; border: 0; border-radius: var(--r-m); background: var(--surface-2); color: var(--ink); font: 700 1.4rem var(--display); cursor: pointer; box-shadow: inset 0 0 0 var(--line) var(--edge); transition: translate .2s var(--spring); }
.age-step:active { translate: 0 2px; }
.age-wheel { position: relative; flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 0; border-radius: var(--r-m); background: var(--surface-2); box-shadow: inset 0 0 0 var(--line) var(--edge); -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.age-wheel::-webkit-scrollbar { display: none; }
.age-wheel::before, .age-wheel::after { content: ""; flex: 0 0 calc(50% - 26px); } /* room so the first and last ages can sit in the middle */
.age-wheel:focus-visible { outline: 2.5px solid var(--yellow); outline-offset: 2px; }
.age-num { flex: none; width: 52px; height: 40px; scroll-snap-align: center; border: 0; border-radius: var(--r-s); background: transparent; color: var(--muted); font: 700 1.15rem var(--display); cursor: pointer; transition: color .15s, background .15s, scale .2s var(--spring); }
.age-num:hover { color: var(--ink); }
.age-num[aria-selected="true"] { background: var(--yellow); color: var(--on-accent); scale: 1.08; }