/* SmartContact Cards app pages (sign in, sign up, My Account, Leader Dashboard, privacy), on top of theme.css.
   The pages keep their original class names; this file gives them the Midnight Silk look.
   "Midnight Silk" design, 2026-10-29. */

/* Older names the page scripts and inline styles still use */
:root {
  --bg:var(--field); --card:var(--surface); --text:var(--ink); --sep:var(--line); --accent:var(--you-text);
}

body.app { min-height:100vh; font-size:16px; line-height:1.5;
  background:radial-gradient(ellipse 80% 420px at 50% -60px, rgba(64,112,200,.20), rgba(11,17,32,0) 70%), var(--paper); }
:root[data-palette=light] body.app { background:radial-gradient(ellipse 80% 420px at 50% -60px, rgba(64,112,200,.12), rgba(244,245,249,0) 70%), var(--paper); }
.app a { color:var(--you-text); }
.app a.brand { color:var(--ink); }
.app strong { font-weight:650; }
.app .nav-actions { margin-left:auto; }
.app .tool.signout { padding:8px 16px; }

/* Page widths */
.page { width:100%; max-width:640px; margin:0 auto; padding:32px 20px 72px; }
.page.narrow { max-width:460px; }
.page.wide { max-width:760px; }

/* Centered logo + product name (sign-in, sign-up and confirmation pages), like the home page */
.brand-hero { text-align:center; margin:8px 0 28px; }
.brand-hero a { text-decoration:none; color:inherit; display:inline-block; }
.brand-hero img { display:block; width:104px; height:auto; margin:0 auto 14px; }
:root[data-palette=light] .brand-hero img { filter:invert(1); }
.brand-hero .name { display:block; font-size:34px; line-height:1.05; font-weight:750; font-stretch:85%; letter-spacing:-.02em;
  background:linear-gradient(135deg, #ffffff 0%, #b9cdf7 45%, #6f97e6 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
:root[data-palette=light] .brand-hero .name { background-image:linear-gradient(135deg, #4070c8 0%, #2a3a9a 55%, #1a1a5e 100%); }
.brand-hero .brand-tag { display:block; margin-top:6px; font-size:15px; color:var(--muted); text-wrap:balance; }

/* Page heading */
.head, .page-head { text-align:center; margin-bottom:24px; }
.head h1, .page-head h1 { font-size:30px; line-height:1.15; font-weight:700; font-stretch:90%; letter-spacing:-.015em; margin:0 0 8px; }
.head p, .page-head p { color:var(--muted); margin:0; font-size:16px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin:8px 0 24px; }
.topbar h1 { font-size:30px; line-height:1.15; font-weight:700; font-stretch:90%; letter-spacing:-.015em; margin:0; }
.topbar .user { display:block; margin-top:4px; font-size:14px; color:var(--muted); word-break:break-all; }

/* Panels */
.section, .card, .summary, .steps-box { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:16px; }
.section h2, .card h2, .summary h2, .steps-box h2 { font-size:18px; line-height:1.3; font-weight:700; letter-spacing:-.01em; text-transform:none; color:var(--ink); margin:0 0 12px; }
.section .hint, .hint { font-size:14px; color:var(--muted); margin:0 0 10px; text-transform:none; letter-spacing:0; }
.note, .stat-note, .empty-note { font-size:14px; color:var(--muted); line-height:1.5; }
.note { text-align:center; margin-top:16px; }
.note a { text-decoration:none; }
.loading { text-align:center; padding:72px 16px; color:var(--muted); font-size:16px; }
.footer { text-align:center; font-size:14px; color:var(--muted); margin-top:28px; }
.footer a { text-decoration:none; }
.hide { display:none !important; }
/* Text written separately for each language (long passages, sentences with links) */
html:not([lang=es]) [data-only-lang=es], html[lang=es] [data-only-lang=en] { display:none !important; }
/* Spanish pages are hidden for a moment until their text is in (removed by site.js; the head snippet also gives up after 2s) */
html.i18n-wait body { opacity:0; }

/* Form fields */
.field { padding:12px 0; border-bottom:1px solid var(--line); }
.field:last-child { border-bottom:none; }
.app label[for], .field > label, .card > label { display:block; font-size:14px; font-weight:500; color:var(--muted); margin-bottom:6px; }
.app label { cursor:pointer; }
.app label .req { color:var(--err); }
.app input[type=text], .app input[type=email], .app input[type=tel], .app input[type=url], .app input[type=number],
.app textarea, .app select {
  width:100%; min-height:46px; border:1px solid var(--field-line); border-radius:10px; padding:11px 14px; font:inherit; font-size:16px;
  background:var(--field); color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; }
.app textarea { min-height:84px; resize:vertical; line-height:1.45; }
.app input::placeholder, .app textarea::placeholder { color:var(--muted); opacity:.75; }
.app input:focus, .app textarea:focus, .app select:focus { border-color:var(--you-text); box-shadow:0 0 0 3px var(--you-glow); }
.app select { appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab3c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px; }
:root[data-palette=light] .app select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d5872' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.app input[type=file] { width:100%; font:inherit; font-size:14px; color:var(--muted); }
.app input[type=file]::file-selector-button { margin-right:12px; padding:9px 16px; border-radius:999px; border:1px solid var(--ghost-line);
  background:var(--ghost); color:var(--ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.app input[type=checkbox], .app input[type=radio] { accent-color:var(--you); width:20px; height:20px; cursor:pointer; }
.field.bad input, .field.bad textarea { border-color:var(--err); }

/* Buttons: primary is the ArtSilk gradient pill, secondary the glassy pill (theme.css .btn base) */
.app .btn { width:100%; margin-top:10px; white-space:normal; text-align:center; line-height:1.3; background:var(--you-fill); color:#fff; border-color:rgba(143,176,240,.35); box-shadow:0 6px 20px var(--you-glow); }
.app .btn:hover { box-shadow:0 10px 28px rgba(64,112,200,.45); }
.app .btn.btn-secondary, .app .btn.btn-line { background:var(--ghost); border-color:var(--ghost-line); color:var(--ink); box-shadow:none; }
.app .btn.btn-secondary:hover, .app .btn.btn-line:hover { border-color:var(--ink); }
.app .btn:disabled, .app button:disabled { opacity:.55; cursor:default; box-shadow:none; }
.btn-link, .add-btn, .add-row { background:none; border:none; padding:8px 0; color:var(--you-text); font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.btn-link:hover, .add-btn:hover, .add-row:hover { text-decoration:underline; text-underline-offset:3px; }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; }
.btn-row .btn { flex:1 1 160px; font-size:15px; }
.del { flex:0 0 40px; height:40px; border:none; border-radius:999px; background:none; color:var(--err); font-size:22px; line-height:1; cursor:pointer; }
.del:hover { background:var(--err-soft); }

/* Messages */
.msg, .dash-msg { display:none; text-align:center; padding:12px 16px; border-radius:12px; font-size:15px; margin-bottom:16px; border:1px solid transparent; }
.msg.err, .dash-msg.err { display:block; background:var(--err-soft); color:var(--err); border-color:color-mix(in srgb, var(--err) 30%, transparent); }
.msg.ok, .dash-msg.ok { display:block; background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 30%, transparent); }
.msg a { color:inherit; font-weight:650; }

/* Status badges */
.status-badge, .member-status, .tag { display:inline-flex; align-items:center; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;
  letter-spacing:.02em; white-space:nowrap; }
.status-badge.pending, .member-status.pending { background:var(--warn-soft); color:var(--warn); }
.status-badge.paid, .member-status.paid, .tag.now { background:var(--ok-soft); color:var(--ok); }
.status-badge.active, .member-status.active, .tag.invite { background:color-mix(in srgb, var(--you-text) 14%, transparent); color:var(--you-text); }

/* Stats */
.stat-row { display:flex; gap:12px; }
.stat { flex:1; background:var(--field); border:1px solid var(--line); border-radius:14px; padding:14px 8px; text-align:center; }
.stat .num { font-size:30px; line-height:1.1; font-weight:750; font-stretch:85%; color:var(--you-text); font-variant-numeric:tabular-nums; }
.stat .label { font-size:13px; color:var(--muted); margin-top:4px; }
.stat.green .num { color:var(--ok); }
.stat.accent .num { color:var(--you-text); }
@media (max-width:420px) { .stat-row { gap:8px; } .stat .num { font-size:26px; } .stat .label { font-size:12px; } }

/* Choice cards (sign-up path, design options) */
.opt { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.opt:last-child { border-bottom:none; }
.opt .opt-body { flex:1; }
.opt .opt-title { display:block; font-size:16px; font-weight:600; color:var(--ink); margin-bottom:2px; }
.opt .opt-price { float:right; margin-left:8px; font-weight:700; color:var(--you-text); }
.opt .opt-desc { display:block; font-size:14px; color:var(--muted); margin-top:2px; }

/* Steppers */
.stepper { display:flex; align-items:center; gap:10px; }
.stepper button { width:40px; height:40px; border-radius:999px; border:1px solid var(--ghost-line); background:var(--ghost); color:var(--ink);
  font:inherit; font-size:20px; line-height:1; cursor:pointer; }
.stepper button:hover { border-color:var(--ink); }
.stepper span { min-width:28px; text-align:center; font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }

/* Contacts list (assets/contacts.js) */
.contact { position:relative; padding:14px 0; border-bottom:1px solid var(--line); }
.contact:last-child { border-bottom:none; }
.contact-head { display:flex; justify-content:space-between; gap:8px; padding-right:72px; }
.contact-name { font-size:16px; font-weight:650; }
.contact-date { font-size:13px; color:var(--muted); white-space:nowrap; }
.contact-sub { font-size:14px; color:var(--muted); margin-top:2px; }
.contact-links { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:4px; font-size:15px; }
.contact-links a { text-decoration:none; word-break:break-all; }
.contact-note { font-size:14px; margin-top:6px; padding-left:10px; border-left:2px solid var(--them); color:var(--ink); }
.contact-del { position:absolute; top:12px; right:0; padding:4px 10px; border-radius:999px; background:none; border:1px solid transparent;
  color:var(--err); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.contact-del:hover { background:var(--err-soft); }

/* Tables */
.app table { width:100%; border-collapse:collapse; font-size:15px; }
.app th { font-size:13px; font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0; padding:8px 6px; }
.app td { padding:10px 6px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; }

/* Small screens */
@media (max-width:520px) {
  .page { padding:24px 16px 64px; }
  .section, .card, .summary, .steps-box { padding:16px; border-radius:14px; }
  .head h1, .page-head h1, .topbar h1 { font-size:26px; }
  .brand-hero .name { font-size:30px; }
}