/* Component-level personality for each design skin. Colors come from theme.css tokens. */
.modal, .gate-card { background: var(--modal-bg); }
.modal { border: 1px solid var(--line); }
.tabs, .topbar { transition: background .2s; }
html { transition: background-color .25s; }
.theme-fade, .theme-fade * { transition: background-color .25s, color .25s, border-color .25s !important; }

/* ---- Sanctuary ---- */
[data-skin='sanctuary'] h1::after { content: ''; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--sky); margin-top: 10px; }
[data-skin='sanctuary'] h1 { font-size: 32px; }
[data-skin='sanctuary'] .tab[aria-current='page'] { border-bottom-color: var(--sky); color: var(--primary); }
[data-skin='sanctuary'] .att-title, [data-skin='sanctuary'] .hero-num, [data-skin='sanctuary'] .pl-label, [data-skin='sanctuary'] .pl-ring-num { font-family: var(--font-display); font-weight: 600; }
[data-skin='sanctuary'] .btn.primary { box-shadow: 0 2px 0 rgba(0,0,0,.18); }
[data-skin='sanctuary'] .topbar { border-bottom: 3px solid var(--sky); }
[data-skin='sanctuary'] .ev-date { background: var(--sky-soft); }

/* ---- Aurora ---- */
[data-skin='aurora'] .topbar { backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
[data-skin='aurora'] .tabs { background: var(--bar-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
[data-skin='aurora'] .tab[aria-current='page'] { color: var(--primary); border-bottom-color: var(--primary); }
[data-skin='aurora'] .btn.primary, [data-skin='aurora'] .tab-fill { background: linear-gradient(135deg, #5B3DF5, #18B4E8); border-color: transparent; color: #fff; }
[data-skin='aurora'][data-theme='dark'] .btn.primary { background: linear-gradient(135deg, #7C5CFF, #18B4E8); }
[data-skin='aurora'] .btn.primary:hover { filter: brightness(1.08); background: linear-gradient(135deg, #5B3DF5, #18B4E8); }
[data-skin='aurora'] .modal-back { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
[data-skin='aurora'] .modal { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
[data-skin='aurora'] .ribbon, [data-skin='aurora'] .minibar { box-shadow: inset 0 0 0 1px var(--line); }
[data-skin='aurora'] .hero-num { background: linear-gradient(135deg, #5B3DF5, #18B4E8); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-skin='aurora'][data-theme='dark'] .hero-num { background: linear-gradient(135deg, #B3A2FF, #4DD3FF); -webkit-background-clip: text; background-clip: text; }
[data-skin='aurora'] .ev:hover { transform: translateY(-2px); }
[data-skin='aurora'] .ev { transition: transform .15s, border-color .12s, box-shadow .15s; }

/* ---- Editorial ---- */
[data-skin='editorial'] body { letter-spacing: -.005em; }
[data-skin='editorial'] h1 { font-size: 36px; line-height: 1.05; }
[data-skin='editorial'] .topbar { border-bottom: 4px solid var(--sky); }
[data-skin='editorial'] .tab { text-transform: uppercase; letter-spacing: .07em; font-size: 12.5px; font-weight: 700; }
[data-skin='editorial'] .tab[aria-current='page'] { color: var(--ink); border-bottom-color: var(--ink); }
[data-skin='editorial'] .sechead h2, [data-skin='editorial'] .lbl, [data-skin='editorial'] .field > label, [data-skin='editorial'] .cv-dow, [data-skin='editorial'] .pl-eyebrow, [data-skin='editorial'] .group-name { text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; font-weight: 700; }
[data-skin='editorial'] .sechead { border-top: 3px solid var(--ink); padding-top: 10px; }
[data-skin='editorial'] .group-name { font-size: 14px; }
[data-skin='editorial'] .ev:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
[data-skin='editorial'] .ev-date, [data-skin='editorial'] .avatar, [data-skin='editorial'] .seg, [data-skin='editorial'] .sb, [data-skin='editorial'] .gchip, [data-skin='editorial'] .gchip .cnt, [data-skin='editorial'] .group-cnt, [data-skin='editorial'] .glabel, [data-skin='editorial'] .ribbon, [data-skin='editorial'] .minibar, [data-skin='editorial'] .tagc, [data-skin='editorial'] .modal, [data-skin='editorial'] .cv-day, [data-skin='editorial'] .cv-chip, [data-skin='editorial'] .toast, [data-skin='editorial'] .wk-item, [data-skin='editorial'] .typecard, [data-skin='editorial'] .qd, [data-skin='editorial'] .cd, [data-skin='editorial'] input, [data-skin='editorial'] select, [data-skin='editorial'] textarea { border-radius: 3px; }
[data-skin='editorial'] .modal { border: 2px solid var(--ink); }
[data-skin='editorial'] .pl-hero { border: 2px solid var(--ink); }
[data-skin='editorial'] .hero-num, [data-skin='editorial'] .pl-tile-n, [data-skin='editorial'] .ev-count .big, [data-skin='editorial'] .group-cnt { font-family: var(--font-num); letter-spacing: -.04em; }

/* ---- Meadow ---- */
[data-skin='meadow'] .tabs { background: transparent; border-bottom: 0; }
[data-skin='meadow'] .tabs-in { gap: 6px; padding: 10px 12px; }
[data-skin='meadow'] .tab { border-radius: 999px; border-bottom: 0; margin: 0; padding: 9px 16px; }
[data-skin='meadow'] .tab:hover { background: var(--veil); }
[data-skin='meadow'] .tab[aria-current='page'] { background: var(--primary); color: var(--on-primary); }
[data-skin='meadow'] .ev-date { border-radius: 18px; background: var(--sky-soft); color: var(--sky-ink); }
[data-skin='meadow'] .ev-date .w { color: var(--sky-ink); }
[data-skin='meadow'] .seg { border-radius: 999px; }
[data-skin='meadow'] .sb { border-radius: 999px; }
[data-skin='meadow'] .avatar { border-radius: 14px; }
[data-skin='meadow'] .topbar { background: transparent; color: var(--ink); }
[data-skin='meadow'] .topbar .region { color: var(--ink); } [data-skin='meadow'] .todaychip, [data-skin='meadow'] .syncdot { color: var(--muted); } [data-skin='meadow'] .todaychip b { color: var(--ink); }
[data-skin='meadow'] .rolepill { background: var(--sky-soft); color: var(--sky-ink); }
[data-skin='meadow'] .topbar .iconbtn { color: var(--muted); }

@media (max-width: 760px) {
  [data-skin='meadow'] .tabs { background: var(--bar-bg); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  [data-skin='meadow'] .tabs-in { padding: 0; gap: 0; }
  [data-skin='meadow'] .tab { border-radius: 0; padding: 9px 4px 8px; }
  [data-skin='meadow'] .tab[aria-current='page'] { background: transparent; color: var(--primary); box-shadow: inset 0 3px 0 var(--sky); }
  [data-skin='aurora'] .tabs { border-top: 1px solid var(--line); }
  [data-skin='editorial'] .tab { font-size: 10px; letter-spacing: .04em; }
}