/*
 * shared.css — design tokens, watercolor washes, and `main.legal` body
 * styling for legal-flavored static pages. The page chrome (nav + footer)
 * lives in chrome.js / chrome.css via <wing-nav> / <wing-footer>; see
 * website/CLAUDE.md.
 */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&display=swap');

:root {
  /* Warm cream/terracotta palette (2026-06-04 discover redesign, Claude Design
     handoff). The token NAMES are kept (--violet etc.) so every page that reads
     them re-skins without renaming call sites; only the VALUES turned warm. */
  --paper:#F6E8DE;
  --paper-2:#F0DDCF;
  --ink:#3A2A22;
  --ink-soft:#6E5749;
  --violet:#B8472A;      /* terracotta brand (was violet) */
  --violet-deep:#9C3A20;
  --coral:#E8845C;
  --cobalt:#5F7FB0;      /* muted slate-blue secondary accent */
  --gold:#E8B547;
  --line:#ECD9CB;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;
  --font-hand:    'Caveat', cursive;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Make the HTML `hidden` attribute un-defeatable site-wide. An author rule
   like `.back-link { display: inline-flex }` otherwise overrides the UA
   `[hidden] { display: none }` (author origin beats UA), leaving controls
   visible-but-dead. JS that reveals an element flips the attribute
   (`el.hidden = false`), so this never blocks intentional shows. */
[hidden] { display: none !important; }

html { scrollbar-gutter: stable; }

html, body {
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-image:
    radial-gradient(circle at 10% 5%, rgba(184,71,42,.05) 0%, transparent 30%),
    radial-gradient(circle at 90% 30%, rgba(232,132,92,.07) 0%, transparent 35%),
    radial-gradient(circle at 30% 80%, rgba(240,160,90,.05) 0%, transparent 30%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }

.page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Watercolor washes (optional accent on legal/profile pages) ────── */
.wash {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  mix-blend-mode: multiply;
  opacity: .35;
}
.wash-violet { background: radial-gradient(circle, rgba(184,71,42,.5) 0%, rgba(184,71,42,0) 70%); }
.wash-coral  { background: radial-gradient(circle, rgba(232,132,92,.55) 0%, rgba(232,132,92,0) 70%); }
.wash-gold   { background: radial-gradient(circle, rgba(232,181,71,.55) 0%, rgba(232,181,71,0) 70%); }

/* ── Legal content ──────────────────────────────────────────────── */
main.legal {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 32px 96px;
  position: relative;
  z-index: 2;
}
.legal h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 14px;
}
.legal h1 em { font-style: italic; color: var(--violet); }
.legal-date {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--coral);
  margin: 0 0 40px;
  transform: rotate(-1deg);
  display: inline-block;
}
.legal h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: 40px 0 14px;
}
.legal p, .legal li {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.legal p { margin: 0 0 14px; }
.legal ul { padding-left: 22px; margin: 0 0 16px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal a:hover { color: var(--violet-deep); }

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  main.legal { padding: 48px 20px 64px; }
  .legal h2 { font-size: 1.35rem; margin-top: 28px; }
  .legal p, .legal li { font-size: 15px; }
}

/* ── Unified page layout + components (2026-06-05 design unification) ──────
   Canonical building blocks for every signed-in consumer page. Pattern +
   "adding a page" checklist: website/DESIGN.md. Token NAMES are stable so
   pages re-skin without renaming call sites. */
:root {
  --w-feed: 680px;      /* feeds / lists: 发现, 私信, 我的活动 */
  --w-form: 560px;      /* forms: 我的档案, 通知设置 */
  --card-radius: 16px;  /* every content card / form section */
  --shadow-card: 0 4px 14px rgba(120,70,40,.10);
  --tab-active: var(--violet);
  --switch-off:#D8C4B6;
}

/* Outer page wrapper. Top padding clears the floating <wing-nav>; bottom
   clears the floating <wing-tabbar>; side gutter widens on desktop. */
.wing-page { width:100%; margin:0 auto; padding:104px 16px 130px; position:relative; z-index:2; }
@media (min-width:640px){ .wing-page { padding:124px 24px 130px; } }
.wing-page--feed { max-width:var(--w-feed); }
.wing-page--form { max-width:var(--w-form); }

/* Page header */
.wing-page-head { margin:0 0 20px; }
.wing-page-title { font-family:var(--font-serif); font-weight:700; font-size:clamp(30px,7vw,40px); letter-spacing:-0.01em; line-height:1.05; color:var(--ink); margin:0; }
.wing-page-title .accent { color:var(--violet); }
.wing-page-sub { font-size:14px; color:var(--ink-soft); margin:6px 0 0; }

/* Underline sub-tabs (canonical). Active = ink text + 2px terracotta underline.
   `.wing-subtab.is-active` is the active class. Scrolls horizontally past the fold. */
.wing-subtabs { display:flex; gap:18px; margin:0 0 24px; border-bottom:1px solid var(--line); overflow-x:auto; }
.wing-subtab { appearance:none; background:none; border:0; cursor:pointer; font-family:inherit; font-size:15px; font-weight:600; color:var(--ink-soft); padding:10px 2px; margin-bottom:-1px; border-bottom:2px solid transparent; white-space:nowrap; flex-shrink:0; }
.wing-subtab.is-active { color:var(--ink); border-bottom-color:var(--tab-active); }
.wing-subtab-count { font-size:12px; color:var(--ink-soft); font-weight:500; margin-left:3px; }

/* Content card surface */
.wing-card { border-radius:var(--card-radius); box-shadow:var(--shadow-card); }

/* Form section + field row (shared by 我的档案-编辑 and 通知设置) */
.wing-section { background:#fff; border-radius:var(--card-radius); padding:0 18px 6px; margin:0 0 16px; box-shadow:var(--shadow-card); }
.wing-section-label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); padding:14px 0 2px; margin:0; }
.wing-field { display:flex; align-items:center; gap:14px; padding:15px 0; border-top:1px solid var(--line); }
.wing-section-label + .wing-field { border-top:none; }

/* Toggle switch */
/* Markup contract: <input> MUST be the immediate previous sibling of .wing-switch-slider (adjacent-sibling selector below). Do not insert wrappers between them. */
.wing-switch { position:relative; display:inline-block; width:46px; height:28px; flex-shrink:0; }
.wing-switch input { opacity:0; width:0; height:0; }
.wing-switch-slider { position:absolute; inset:0; cursor:pointer; background:var(--switch-off); border-radius:999px; transition:background .2s ease; }
.wing-switch-slider::before { content:''; position:absolute; height:22px; width:22px; left:3px; top:3px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(120,70,40,.25); transition:transform .2s ease; }
.wing-switch input:checked + .wing-switch-slider { background:var(--violet); }
.wing-switch input:checked + .wing-switch-slider::before { transform:translateX(18px); }
.wing-switch input:focus-visible + .wing-switch-slider { outline:2px solid var(--violet); outline-offset:2px; }

/* Primary button + centered save bar */
.wing-btn { font-family:var(--font-display); font-size:15px; font-weight:600; padding:12px 40px; border:0; border-radius:999px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; background:none; color:inherit; }
.wing-btn--primary { background:var(--violet); color:#fff; box-shadow:0 6px 16px rgba(184,71,42,.22); }
.wing-btn--primary:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(184,71,42,.28); }
.wing-btn--primary:active { transform:translateY(0); }
.wing-btn:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
.wing-save-bar { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:28px; }