/* SalesDesk NameCard — the online business card (and the tokens shared with the setup and edit pages).
 * Mobile first, three themes (navy = luxury, sport = dark/red, fresh = family/green), rem-based so OS text scaling works.
 * No inline styles anywhere (strict CSP). Colours follow the browser's light/dark preference:
 * raw light/dark tokens first, prefers-color-scheme as the fallback, light-dark() where supported. */

/* ---------- tokens: navy (default, follows the system light/dark setting) ---------- */
:root {
  --bg-l: #F3F4F6; --bg-d: #0D141C;
  --surface-l: #FFFFFF; --surface-d: #16202B;
  --ink-l: #111A23; --ink-d: #ECF1F6;
  --muted-l: #505C68; --muted-d: #A9B5C1;
  --line-l: #D9DFE5; --line-d: #263646;
  --brand-l: #14304A; --brand-d: #9CC3EA;
  --accent-l: #C8962E; --accent-d: #E3B558;
  --accent-ink: #2A1E05;
  --warn-l: #9A4A06; --warn-d: #F2A951;
  --err-l: #A32020; --err-d: #FFB4B4;
  --ok-l: #14683D; --ok-d: #7FE0A6;
  --hero-a: #1D4A72; --hero-b: #0A1824; --glow: rgba(227, 181, 88, .22); --hair: rgba(227, 181, 88, .35);
  --car-a: #5E8DB8; --car-b: #14304A;
  --hl: #E3B558; /* highlight text on the card's gradient */

  --bg: var(--bg-l); --surface: var(--surface-l); --ink: var(--ink-l); --muted: var(--muted-l); --line: var(--line-l);
  --brand: var(--brand-l); --accent: var(--accent-l); --warn: var(--warn-l); --err: var(--err-l); --ok: var(--ok-l);
  --radius: 1.1rem; --shadow: 0 .5rem 1.5rem rgba(10, 24, 36, .10);
  color-scheme: light dark;
  accent-color: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: var(--bg-d); --surface: var(--surface-d); --ink: var(--ink-d); --muted: var(--muted-d); --line: var(--line-d);
    --brand: var(--brand-d); --accent: var(--accent-d); --warn: var(--warn-d); --err: var(--err-d); --ok: var(--ok-d); --shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35); --car-a: #7FB0DF; --car-b: #2C5C8A; }
}
@supports (color: light-dark(white, black)) {
  :root { --bg: light-dark(var(--bg-l), var(--bg-d)); --surface: light-dark(var(--surface-l), var(--surface-d)); --ink: light-dark(var(--ink-l), var(--ink-d));
    --muted: light-dark(var(--muted-l), var(--muted-d)); --line: light-dark(var(--line-l), var(--line-d)); --brand: light-dark(var(--brand-l), var(--brand-d));
    --accent: light-dark(var(--accent-l), var(--accent-d)); --warn: light-dark(var(--warn-l), var(--warn-d)); --err: light-dark(var(--err-l), var(--err-d)); --ok: light-dark(var(--ok-l), var(--ok-d)); }
}

/* ---------- sport: always dark ---------- */
:root[data-theme="sport"] {
  color-scheme: dark;
  --bg: #0A0A0C; --surface: #17171B; --ink: #F4F4F5; --muted: #B4B4BC; --line: #2D2D35;
  --brand: #FF4A5C; --accent: #E10B1F; --accent-ink: #FFFFFF; --warn: #FFB347; --err: #FFB4B4; --ok: #7FE0A6;
  --hero-a: #4A0C14; --hero-b: #0A0A0C; --glow: rgba(225, 11, 31, .30); --hair: rgba(255, 74, 92, .40);
  --car-a: #FF6B79; --car-b: #8A0A16; --shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5); --hl: #FF7A87;
}
/* ---------- fresh: always light ---------- */
:root[data-theme="fresh"] {
  color-scheme: light;
  --bg: #F2F9F5; --surface: #FFFFFF; --ink: #14271E; --muted: #4D6257; --line: #D3E4D9;
  --brand: #17714F; --accent: #F2A93B; --accent-ink: #3A2605; --warn: #9A4A06; --err: #A32020; --ok: #14683D;
  --hero-a: #23996C; --hero-b: #0E4A34; --glow: rgba(242, 169, 59, .30); --hair: rgba(255, 255, 255, .35);
  --car-a: #53C494; --car-b: #17714F; --shadow: 0 .5rem 1.5rem rgba(14, 74, 52, .12); --hl: #FFD27A;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.7 system-ui, -apple-system, 'Noto Sans Thai', 'Sukhumvit Set', Tahoma, sans-serif; -webkit-font-smoothing: antialiased }
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; }
.wrap { max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
.boot { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.demo-bar { display: flex; justify-content: flex-start; align-items: center; gap: .4rem; background: #FFF3CD; color: #4F3A0A; font-size: .875rem; padding: .5rem .5rem; line-height: 1.4; white-space: nowrap; overflow-x: auto; scrollbar-width: thin; }
.demo-bar span { margin-right: .15rem; }
.demo-bar a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; padding: .1rem .75rem; border-radius: 999px; background: #fff; border: 1px solid #E5D39A; text-decoration: none; color: inherit; }
.demo-bar .demo-home { border-color: #4F3A0A; font-weight: 700; }
.demo-bar a[aria-current="true"] { background: #4F3A0A; color: #fff; }
.demo-bar i { width: .75rem; height: .75rem; border-radius: 50%; flex: none; }
.demo-bar i.navy { background: linear-gradient(135deg, #14304A 50%, #C8962E 50%); }
.demo-bar i.sport { background: linear-gradient(135deg, #0A0A0C 50%, #E10B1F 50%); }
.demo-bar i.fresh { background: linear-gradient(135deg, #17714F 50%, #F2A93B 50%); }
@media (min-width: 34rem) { .demo-bar { justify-content: center; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 3rem; padding: .4rem 1.25rem; border-radius: .8rem; font: inherit; font-size: 1rem; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; text-align: center; line-height: 1.3; transition: transform .15s ease, filter .15s ease; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn.call { background: color-mix(in srgb, #fff 16%, transparent); color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.btn.gold { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--brand); border: 1.5px solid currentColor; min-height: 2.75rem; font-size: .95rem; }
.btn.block { width: 100%; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: .19rem solid var(--accent); outline-offset: .15rem; border-radius: .5rem; }


/* generic form basics that the setup and edit pages build on */
label { display: block; font-size: .9rem; color: var(--muted); margin: .8rem 0 .25rem; }
input[type="text"], input[type="tel"], input[type="password"], input:not([type]), input[inputmode], select { width: 100%; min-height: 3rem; padding: .4rem .8rem; border-radius: .7rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.note { font-size: .8125rem; line-height: 1.55; }

/* ---------- the card: one centred column on the theme's gradient; a phone-shaped frame on wide screens ---------- */
body.card { min-height: 100vh; }
.page { position: relative; overflow: hidden; min-height: 100vh; color: #fff; text-align: center; padding: 2.4rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 70% at 90% -10%, var(--glow), transparent 60%), linear-gradient(165deg, var(--hero-a), var(--hero-b)); }
.page.has-bar { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); }
.page::before, .page::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid var(--hair); pointer-events: none; }
.page::before { width: 22rem; height: 22rem; right: -10rem; top: -8rem; }
.page::after { width: 14rem; height: 14rem; left: -7rem; bottom: 12rem; opacity: .5; }
.page > * { position: relative; z-index: 1; max-width: 26rem; margin-left: auto; margin-right: auto; }
@media (min-width: 34rem) {
  body.card { padding: 1.5rem 1rem; }
  .page { max-width: 28rem; min-height: 0; margin: 0 auto; border-radius: 1.6rem; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .35); padding-top: 3rem; }
}

.identity { display: flex; flex-direction: column; align-items: center; }
.avatar { width: 7rem; height: 7rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.8rem; font-weight: 800; line-height: 1;
  background: linear-gradient(145deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .06)); border: .2rem solid var(--accent); box-shadow: 0 0 0 .4rem rgba(255, 255, 255, .08); }
.identity h1 { margin: 1.1rem 0 0; font-size: clamp(1.7rem, 7vw, 2.2rem); line-height: 1.25; }
.facts { margin: .35rem 0 0; font-size: .95rem; opacity: .85; }
.years { margin: .55rem 0 0; padding: .1rem .9rem; border-radius: 999px; border: 1px solid var(--hair); background: rgba(255, 255, 255, .1); font-size: .85rem; white-space: nowrap; }
.bio { margin: 1rem 0 0; max-width: 22rem; opacity: .95; }

.cta { display: grid; gap: .7rem; margin-top: 1.6rem; }
.btn.big { min-height: 3.6rem; font-size: 1.2rem; padding: .5rem 1.25rem; border-radius: 1rem; }
.upgrade { display: flex; align-items: center; justify-content: center; min-height: 3.4rem; padding: .6rem 1.1rem; border-radius: 1rem; border: 1.5px dashed var(--hl); background: rgba(255, 255, 255, .08); color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.4; text-align: center; text-decoration: none; }
.upgrade:hover { background: rgba(255, 255, 255, .14); }
.btn.shop-link { min-height: 3.4rem; border-radius: 1rem; font-size: 1.1rem; background: color-mix(in srgb, #fff 16%, transparent); color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); }
.soon { margin: 0; padding: .65rem 1rem; border-radius: .8rem; background: rgba(255, 255, 255, .16); font-weight: 700; }
.soon[hidden] { display: none; }

.meet { margin-top: 1.8rem; }
.meet h2 { margin: 0 0 .7rem; font-size: 1rem; font-weight: 700; line-height: 1.4; opacity: .9; }
.socials { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.socials li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.social { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .2rem .6rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); background: color-mix(in srgb, #fff 12%, transparent); color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; line-height: 1.25; transition: transform .15s ease, filter .15s ease; }
.social span { min-width: 0; overflow-wrap: anywhere; }
.social.site { margin-top: .6rem; background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.social:hover { filter: brightness(1.15); }
.social:active { transform: translateY(1px); }
.ico { width: 1.4rem; height: 1.4rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.share { margin-top: 2rem; }
.share h2 { margin: 0; font-size: 1rem; font-weight: 700; opacity: .9; }
.qr-box { background: #fff; color: #111; border-radius: 1.1rem; padding: .9rem; width: 14.5rem; max-width: 100%; margin: .8rem auto 1rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
.qr { display: block; width: 100%; height: auto; }
.qr-cap { margin: .4rem 0 0; font-size: .85rem; color: #444; line-height: 1.4; }
.share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.share-actions .btn { min-height: 3rem; font-size: .95rem; }
.share-actions .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.share .note { margin: .7rem 0 0; min-height: 1.2rem; opacity: .85; }

.foot { margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .8rem; line-height: 1.7; opacity: .9; }
.foot p { margin: 0; }
.foot a { color: var(--hl); font-weight: 700; text-underline-offset: .2em; }

/* the phone button: a bar fixed to the bottom of the screen (the page can switch it off) */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-width: 28rem; margin: 0 auto; padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px)); background: rgba(8, 14, 22, .88); border-top: 1px solid rgba(255, 255, 255, .15); backdrop-filter: blur(.6rem); }
.bar .btn { width: 100%; min-height: 3.5rem; font-size: 1.2rem; border-radius: 1rem; white-space: nowrap; }
.bar .btn.call { background: #fff; color: #10202e; border: 0; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .social { transition: none; } }