/* ═══════════════════════════════════════════════════════════════════════════
   The Dinner Table · design system (theme.css)  — loaded AFTER style.css
   "Golden hour by the sea": deep warm dark ground, aurora glow, glass surfaces.
   5 Oct 2026: now the legacy / classic skin only. theme-house.css is the token
   source of truth for every page; this file supplies fallback tokens for the
   dt_theme=classic opt-out and the Muay Thai pages, which do not load the house layer.
   Fonts are system faces (Georgia headings, system-ui body): nothing is fetched.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:            #0c0a09;
  --bg-2:          #14100e;
  --surface:       rgba(255,255,255,0.045);
  --surface-2:     rgba(255,255,255,0.075);
  --surface-solid: #1a1411;
  --border:        rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --text:          #f5ede8;
  --text-muted:    rgba(245,237,232,0.58);
  --text-faint:    rgba(245,237,232,0.55);
  --accent:        #e58a66;
  --accent-deep:   #c8623f;
  --accent-glow:   rgba(229,138,102,0.22);
  --gold:          #f2c14e;
  --sea:           #3f9dc4;
  --lav:           #8b70e7;
  --mint:          #34d399;
  --radius:        16px;
  --radius-sm:     10px;
  --radius-lg:     24px;
  --font-display:  'Fraunces', Georgia, 'Iowan Old Style', serif;   /* self-hosted via static/fonts/classic-fonts.css, classic skin + Muay Thai only */
  --font-card:     Georgia, 'Iowan Old Style', serif;
  --font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-label:    var(--font-body);
  --on-accent:     #fff;
  --ink:           #2a1d12;
  --surface-ink:   #171210;
  --on-ink:        #f5ede8;
  --gold-ink:      #f2c14e;
  --sea-ink:       #7cc4ee;
  --warm-ink:      #f0a874;
  --accent-ink:    #e58a66;
  --mint-ink:      #86efac;
  --rose-ink:      #fca5a5;
  --orange-ink:    #f4a87c;
  --blue-ink:      #93c5fd;
  --violet-ink:    #c4b5fd;
  --teal-ink:      #6ee7b7;
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-card:   0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 50px -20px rgba(0,0,0,0.7);
  --aurora-a:      rgba(229,138,102,0.42);   /* terracotta */
  --aurora-b:      rgba(63,157,196,0.30);    /* sea */
  --aurora-c:      rgba(139,112,231,0.30);   /* lavender */
  --aurora-d:      rgba(242,193,78,0.22);    /* gold */
  color-scheme: dark;
}
html.sky-golden { --aurora-a: rgba(242,150,90,0.5);  --aurora-d: rgba(242,193,78,0.34); --aurora-b: rgba(120,140,200,0.24); }
html.sky-dusk   { --aurora-a: rgba(216,100,120,0.42); --aurora-c: rgba(139,112,231,0.4); --aurora-b: rgba(63,120,196,0.3); }
html.sky-night  { --aurora-a: rgba(180,110,120,0.22); --aurora-b: rgba(50,120,190,0.34); --aurora-c: rgba(110,90,220,0.36); --aurora-d: rgba(242,193,78,0.10); }

html { background: var(--bg); scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(229,138,102,0.4); color: #fff; }

/* ── Aurora ground: fixed, behind everything ─────────────────────────────── */
#dt-aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,255,255,0.045), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 60%);
}
#dt-aurora span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.75;
  will-change: transform; mix-blend-mode: screen;
  transition: background 3s ease;
}
#dt-aurora .au-a { width: 62vmax; height: 62vmax; left: -18vmax; top: -22vmax; background: var(--aurora-a); animation: auDriftA 28s ease-in-out infinite alternate; }
#dt-aurora .au-b { width: 54vmax; height: 54vmax; right: -20vmax; top: 6vmax; background: var(--aurora-b); animation: auDriftB 34s ease-in-out infinite alternate; }
#dt-aurora .au-c { width: 58vmax; height: 58vmax; left: 12vmax; bottom: -30vmax; background: var(--aurora-c); animation: auDriftC 40s ease-in-out infinite alternate; }
#dt-aurora .au-d { width: 40vmax; height: 40vmax; right: 6vmax; bottom: -10vmax; background: var(--aurora-d); animation: auDriftA 46s ease-in-out infinite alternate-reverse; }
#dt-aurora::after {  /* film grain */
  content: ''; position: absolute; inset: -50%; opacity: 0.055; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(4) infinite;
}
@keyframes auDriftA { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes auDriftB { to { transform: translate(-12vmax, 16vmax) scale(0.9); } }
@keyframes auDriftC { to { transform: translate(10vmax, -14vmax) scale(1.1); } }
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-1%,-1%); } 100% { transform: translate(0,0); } }
main, .site-header, .site-footer, #dt-skyline, .page-photo-strip { position: relative; z-index: 1; }

/* ── Header: glass bar, gradient logo, scrollable pill nav ───────────────── */
.site-header {
  height: 58px; padding: 0 18px; gap: 16px;
  background: rgba(12,10,9,0.55) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border) !important;
  z-index: 20;
}
.site-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--gold) 50%, var(--sea) 70%, transparent);
  opacity: 0.55;
}
html.sky-night .site-header .site-logo { color: inherit; }
.site-logo {
  font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; letter-spacing: .01em;
  background: linear-gradient(95deg, #fbe3d4, var(--accent) 55%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  white-space: nowrap; flex-shrink: 0; display: inline-block; padding: 4px 6px; margin-left: -6px;
}
/* ── Footer + skyline ────────────────────────────────────────────────────── */
.site-footer, html.sky-night .site-footer { background: transparent; color: var(--text-faint); border-top: 1px solid var(--border); padding: 18px 20px 22px; }
.faceid-hint { color: var(--text-faint); }
#dt-skyline { margin-top: 40px; }
#dt-skyline, html.sky-night #dt-skyline { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.03)); }
#dt-skyline .dt-land, html.sky-night #dt-skyline .dt-land { fill: rgba(255,235,220,0.10); }
#dt-skyline .dt-arch { stroke: rgba(255,235,220,0.22); }
#dt-skyline .dt-sea, html.sky-night #dt-skyline .dt-sea { fill: rgba(63,157,196,0.28); }
#dt-beacon { opacity: 0.35; filter: drop-shadow(0 0 4px #ffb347); }

/* ── Type scale ──────────────────────────────────────────────────────────── */
h1, h2 { font-family: var(--font-card); font-weight: 700; letter-spacing: 0; }
.dt-display { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }
h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); line-height: 1.05; }
h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.15; }
.section-label, .board-header .section-label { color: var(--text-faint); letter-spacing: 0.14em; font-size: 0.66rem; }
.section-label--link, a.section-label { color: var(--accent); }
p { line-height: 1.55; }
a:not([class]) { color: var(--accent); }

/* ── Glass surfaces (utilities, applied per page) ────────────────────────── */
.dt-glass, .dt-card {
  position: relative; isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.dt-card::before {  /* gradient hairline */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.03) 40%, rgba(229,138,102,0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.8;
}
.dt-spot::after {  /* cursor spotlight: JS sets --mx/--my */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.10), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.dt-spot:hover::after { opacity: 1; }
.dt-card > * { position: relative; z-index: 1; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.dt-btn, .post-btn, .btn, .cal-add-btn, .cal-btn-save, .apply-btn, .ext-btn, button[type="submit"]:not(.ai-send) {
  font-family: var(--font-body); font-weight: 700; cursor: pointer; border: 0;
  border-radius: 999px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 6px 22px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform .25s var(--ease-spring), box-shadow .25s, filter .2s;
}
.dt-btn:hover, .post-btn:hover, .btn:hover { filter: brightness(1.08); box-shadow: 0 10px 28px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,0.22); }
.dt-btn--ghost { background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: none; }
.filter-btn, .ctab { border-radius: 999px; }
.ai-trigger { font-family: var(--font-body); background: linear-gradient(135deg, var(--lav), #5b3fd6); box-shadow: 0 10px 30px -8px var(--lav); }
.ai-launcher-menu, .ai-popup { background: rgba(20,16,14,0.86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-color: var(--border-strong); }

/* ── Form controls ───────────────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select {
  font-family: var(--font-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-color: var(--accent); }
::placeholder { color: var(--text-faint); }

/* ── Home: hero card with glowing frame, tiles as glass gems ─────────────── */
.hero-wrap {
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9), 0 0 0 1px var(--border);
}
.hero-wrap::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 5;
  background: conic-gradient(from var(--ang, 0deg), var(--accent), var(--gold), var(--sea), var(--lav), var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.55;
  animation: heroRing 14s linear infinite;
}
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes heroRing { to { --ang: 360deg; } }
.hero-photo-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.10) 65%, rgba(12,10,9,0.55) 100%); }
.hero-text h1 { font-family: var(--font-card); font-weight: 700; letter-spacing: 0; text-shadow: 0 2px 30px rgba(0,0,0,0.6), 0 0 60px rgba(229,138,102,0.25); }
.hero-tagline { color: rgba(255,255,255,0.62); }
.hub-tile { border-radius: 16px; }
.hub-tile::after {
  opacity: 0.9; z-index: -1;
  background:
    linear-gradient(115deg, transparent 28%, rgba(255,255,255,0.30) 36%, rgba(255,255,255,0.06) 44%, transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.10) 100%),
    var(--tile-bg);
}
.hub-tile::before { animation: tileGlint 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.6s); }
@keyframes tileGlint { 0% { transform: translateX(-120%); } 9% { transform: translateX(160%); } 100% { transform: translateX(160%); } }
.hub-tile { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.2), 0 10px 26px -12px rgba(0,0,0,0.6); }
.hub-tile:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.25), 0 18px 40px -10px rgba(var(--glow, 0,0,0), 0.75); }
.hub-tile-label { text-shadow: 0 1px 8px rgba(0,0,0,0.5); font-size: 0.92rem; font-weight: 800; letter-spacing: 0.01em; }
.adastra-card { border: 1px solid var(--border) !important; background: rgba(12,15,20,0.7) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-card); }
.home-duo { gap: 14px; }
.home-duo-panel { padding: 16px 16px 12px; }
.upcoming-row:hover { background: var(--surface-2); }
.home-duo .upcoming-row { padding: 8px 10px; }
.home-duo .upcoming-date { font-size: 0.82rem !important; color: var(--text-muted) !important; font-weight: 700; min-width: 82px; }
.home-duo .upcoming-title { font-size: 0.98rem !important; color: var(--text) !important; font-weight: 500; }
.home-duo .upcoming-empty { font-size: 0.9rem !important; color: var(--text-muted) !important; }
.board-preview-card { background: var(--surface) !important; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.board-preview-time { color: var(--text-faint); }
.board-preview-text { color: var(--text); }

/* ── Cards used across pages (style.css names) ───────────────────────────── */
.child-card, .flat-card, .job-card, .board-card, .placeholder-tile, .photo-card, .board-form, .compose, .filter-bar {
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.child-card:hover, .flat-card:hover, .job-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.board-header, .child-header { background: transparent; border-bottom: 1px solid var(--border); }
.notice-banner { background: var(--accent-glow); border: 1px solid rgba(229,138,102,0.35); color: var(--text); }
.empty-state { color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.page-photo-strip { opacity: 0; }

/* ── Motion: page enter + view transitions ───────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .22s ease both; }
::view-transition-new(root) { animation: vtIn .38s var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(10px); } }
.dt-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.dt-reveal.in { opacity: 1; transform: none; }
#dt-progress { background: linear-gradient(90deg, var(--accent), var(--gold), var(--sea), var(--lav)) !important; height: 3px !important; box-shadow: 0 0 12px var(--accent) !important; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 10px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #dt-aurora span, #dt-aurora::after, .hero-wrap::before, .hub-tile::before { animation: none !important; }
  .dt-reveal { opacity: 1; transform: none; transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media (max-width: 540px) {
  #dt-aurora span { filter: blur(50px); }
  .site-header { height: max(56px, calc(56px + env(safe-area-inset-top))); }
  .site-logo { font-size: 1.05rem; }
  .hero-wrap { border-radius: 0 0 20px 20px; }
  .hero-wrap::before { display: none; }
  .home-duo { align-items: stretch !important; width: calc(100% - 24px); padding: 0; }
  .home-duo-panel { width: 100%; }
  .home-duo-panel + .home-duo-panel { margin-top: 12px !important; }
}