/* Visual skins only. Component layout and touch sizing live in styles.css. */

html[data-theme="legends"] {
  color-scheme: dark;
  --page: #0b1b37;
  --ink: #f5f4e9;
  --muted: #b5c9e3;
  --panel: #142c50;
  --panel-strong: #18365e;
  --line: #597aa66b;
  --accent: #7ce0ff;
  --accent-2: #92b5ff;
  --gold: #e9cd8d;
  --shadow: 0 16px 42px #020a1f40;
  --font-display: Georgia, "Times New Roman", serif;
  --focus: #fff0b0;
}

html[data-theme="arise"] {
  color-scheme: dark;
  --page: #0b111c;
  --ink: #edf3fd;
  --muted: #adbbcf;
  --panel: #142134;
  --panel-strong: #1d3046;
  --line: #71849d52;
  --accent: #5cddf4;
  --accent-2: #8f9fdb;
  --gold: #efc768;
  --shadow: 0 14px 36px #00000040;
  --font-display: "Arial Narrow", "Aptos Narrow", "Helvetica Neue", Arial, sans-serif;
  --focus: #a3efff;
}

html[data-theme="coast"] {
  color-scheme: dark;
  --page: #171a21;
  --ink: #fffdfb;
  --muted: #bec3ce;
  --panel: #232630;
  --panel-strong: #171b25;
  --line: #b1bac533;
  --accent: #f38abb;
  --accent-2: #8de6cd;
  --gold: #f4d1dc;
  --shadow: 0 14px 40px #05060a45;
  --font-display: Impact, "Arial Narrow", "Aptos Narrow", "Helvetica Neue", sans-serif;
  --focus: #a9f9df;
}

html[data-theme] body { background-color: var(--page); color: var(--ink); }
html[data-theme] .theme-switcher a { color: var(--muted); }
html[data-theme] .theme-switcher a[aria-current="page"],
html[data-theme] .theme-switcher a.is-active { color: var(--ink); border-color: var(--accent); }
html[data-theme] .activity-note,
html[data-theme] .metric-label,
html[data-theme] .metric-detail,
html[data-theme] .hero-footline { color: var(--muted); }
html[data-theme] .metric-number { color: var(--ink); font-variant-numeric: tabular-nums; }
html[data-theme] .metric-unit { color: var(--muted); }
html[data-theme] .metric-percent { color: var(--ink); font-variant-numeric: tabular-nums; }
html[data-theme] .progress-track { background: #050d1b8c; border: 1px solid var(--line); }
html[data-theme] .progress-fill { background: var(--accent); }
html[data-theme] .scene-window { background-color: #111c2a; }
html[data-theme] .recent-item time { color: var(--muted); font-variant-numeric: tabular-nums; }
html[data-theme] .recent-item :is(svg, .recent-icon) { color: var(--accent); }
html[data-theme] .timeline-track { background: #060d1880; border-color: var(--line); }
html[data-theme] .timeline-cursor { background: var(--accent); }
html[data-theme] .timeline-cursor::after { background-color: var(--accent); border-color: var(--panel); }
html[data-theme] .timeline-card input[type="range"] { accent-color: var(--accent); }
html[data-theme] .field { color: var(--ink); background: #050d1b55; border-color: var(--line); }
html[data-theme] .field::placeholder { color: var(--muted); opacity: .78; }
html[data-theme] .note-form label { color: var(--muted); }
html[data-theme] :is(.primary-button, .small-button, .secondary-button, .play-button, .now-button, .activity-button) {
  transition: background-color .16s, border-color .16s, color .16s;
}
html[data-theme] :is(button, a, input, select, textarea):focus-visible { outline-color: var(--focus); }
html[data-theme] .primary-button:focus-visible { outline: 2px solid var(--focus); outline-offset: -5px; }

/* Legends: blue lacquer, fine gilt lines and an open mountain atmosphere. */
html[data-theme="legends"] body {
  background-image: linear-gradient(145deg, #18335e 0, #0b1b37 45%, #102b4e 100%);
}
html[data-theme="legends"] .topbar { border-bottom-color: #a9c8f644; }
html[data-theme="legends"] .brand-mark {
  color: #beeaff;
  background: #234778;
  border: 1px solid #9dcaf385;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px #112e56;
}
html[data-theme="legends"] .brand-name {
  color: #f4e5bd;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
html[data-theme="legends"] .brand-subtitle { color: #aecaf0; letter-spacing: .14em; }
html[data-theme="legends"] .day-badge {
  background: #1a3d6d;
  color: #f5e7bd;
  border: 1px solid #d8c1847a;
  border-radius: 2px;
}
html[data-theme="legends"] .theme-switcher a {
  background: #132a4a;
  border: 1px solid #5273a66b;
  border-radius: 3px;
}
html[data-theme="legends"] .theme-switcher a[aria-current="page"],
html[data-theme="legends"] .theme-switcher a.is-active { background: #244b79; color: #fff1c7; border-color: #d8c184; }
html[data-theme="legends"] .hero-card {
  border: 1px solid #91add273;
  border-radius: 3px;
  background: #244f7d;
  box-shadow: inset 0 0 0 3px #25436a, var(--shadow);
}
html[data-theme="legends"] .landscape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #183d6810 25%, #102d5b20 43%, #103063a1 75%, #112a58cc 100%);
  pointer-events: none;
}
html[data-theme="legends"] .live-tag {
  color: #ffefc3;
  background: #153b6bd9;
  border: 1px solid #9dc1ea85;
  border-radius: 1px;
}
html[data-theme="legends"] .hero-clock { color: #f7edd5; text-shadow: 0 1px 3px #12264c; }
html[data-theme="legends"] .eyebrow { color: #cfe4ff; letter-spacing: .14em; }
html[data-theme="legends"] .activity-heading {
  color: #f8ebc9;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .015em;
  text-shadow: 0 2px 3px #152649b0;
}
html[data-theme="legends"] .activity-note { color: #e0eaff; }
html[data-theme="legends"] .metric-panel {
  background: #173c6cd9;
  border-top: 1px solid #b4c9e855;
  border-bottom: 1px solid #b4c9e83b;
}
html[data-theme="legends"] .metric-number { font-family: var(--font-display); font-weight: 700; }
html[data-theme="legends"] .metric-detail { color: #dbe8fc; }
html[data-theme="legends"] .progress-track { border-color: #d9c48d; border-radius: 2px; box-shadow: inset 0 0 0 2px #0c2343; }
html[data-theme="legends"] .progress-fill { background: #69d8fc; box-shadow: inset 0 1px #c4f6ff; }
html[data-theme="legends"] .scene-window { border: 1px solid #d7c596; border-radius: 2px; box-shadow: 0 2px 9px #071b3b55; }
html[data-theme="legends"] .primary-button {
  color: #292119;
  background: linear-gradient(#ffe7ad, #dbaf59);
  border: 1px solid #f9e8b6;
  border-radius: 1px;
  box-shadow: inset 0 0 0 3px #a67d3733;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  font-family: var(--font-display);
  font-weight: 700;
}
html[data-theme="legends"] :is(.recent-card, .timeline-card, .controls-card, .history-card) {
  background: #142f55;
  border: 1px solid #7296c25c;
  border-radius: 3px;
  box-shadow: inset 0 1px #b7d4f51c;
}
html[data-theme="legends"] .section-heading {
  color: #f1dfaf;
  font-family: var(--font-display);
  letter-spacing: .025em;
}
html[data-theme="legends"] .recent-item { background: #0c25476b; border-color: #79a1d138; }
html[data-theme="legends"] :is(.small-button, .secondary-button, .play-button, .now-button) {
  color: #e4edff;
  background: #204575;
  border: 1px solid #7c9ecc80;
  border-radius: 3px;
}
html[data-theme="legends"] .play-button { color: #c8efff; border-radius: 50%; }
html[data-theme="legends"] .activity-button { background: #183354; color: #dceaff; border-color: #7193be52; border-radius: 3px; }
html[data-theme="legends"] .activity-button[aria-pressed="true"] { background: #385d8b; color: #fff2c7; border-color: var(--gold); box-shadow: inset 0 0 0 1px #e9cd8d36; }
html[data-theme="legends"] .activity-button svg { color: #c7dffb; }
html[data-theme="legends"] .activity-button[aria-pressed="true"] svg { color: #ffeab0; }
html[data-theme="legends"] .field { background: #0d2343; border-color: #7596bc70; border-radius: 3px; }

/* Arise: steel panels with decisive cuts, cool data, one warm action. */
html[data-theme="arise"] .topbar { border-bottom-color: #7189b13d; }
html[data-theme="arise"] .brand-mark { color: #eff8ff; background: #17263b; border: 1px solid #95acc66b; border-radius: 0; }
html[data-theme="arise"] .brand-name { font-family: var(--font-display); font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
html[data-theme="arise"] .brand-subtitle { color: #aabbd3; letter-spacing: .15em; }
html[data-theme="arise"] .day-badge { color: #dfeeff; background: #18263c; border: 1px solid #627e9d8c; border-radius: 0; }
html[data-theme="arise"] .theme-switcher a { background: #101c2d; border: 1px solid #5c779854; border-radius: 1px; }
html[data-theme="arise"] .theme-switcher a[aria-current="page"],
html[data-theme="arise"] .theme-switcher a.is-active { color: #c1f5ff; background: #19354a; border-color: #58c6df; }
html[data-theme="arise"] .hero-card { background: #17283c; border: 1px solid #8dabc168; border-radius: 1px; box-shadow: inset 0 0 0 3px #152539, var(--shadow); }
html[data-theme="arise"] .landscape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0e1b2a1a 20%, #0b142125 42%, #142439bf 75%, #142237db 100%);
  pointer-events: none;
}
html[data-theme="arise"] .hero-topline { border-bottom-color: #8cbed04a; }
html[data-theme="arise"] .live-tag { color: #e7f6ff; background: #233d55; border: 1px solid #7cd4e5a8; border-radius: 0; font-weight: 750; letter-spacing: .075em; }
html[data-theme="arise"] .hero-clock { color: #e4efff; font-weight: 650; }
html[data-theme="arise"] .eyebrow { color: #b1c5de; letter-spacing: .14em; }
html[data-theme="arise"] .activity-heading { color: #f6f9ff; font-family: var(--font-display); font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
html[data-theme="arise"] .activity-note { color: #d6e1ef; }
html[data-theme="arise"] .metric-panel { background: #172a3ede; border: 1px solid #6994b166; border-radius: 1px; }
html[data-theme="arise"] .metric-number { font-weight: 800; letter-spacing: -.025em; }
html[data-theme="arise"] .metric-unit { color: #aebed3; font-weight: 650; }
html[data-theme="arise"] .metric-detail { color: #d8e5f5; }
html[data-theme="arise"] .progress-track { border-color: #90a8bd; border-radius: 0; box-shadow: inset 0 0 0 2px #142338; }
html[data-theme="arise"] .progress-fill { background: #40c3e1; box-shadow: inset 0 1px #b8f2ff; }
html[data-theme="arise"] .scene-window { border: 1px solid #9bc2d5b0; border-radius: 0; box-shadow: 0 1px 6px #07111a45; }
html[data-theme="arise"] .primary-button {
  color: #1b1c24;
  background: linear-gradient(#ffdb7b, #e7af42);
  border: 1px solid #fce29e;
  border-radius: 0;
  box-shadow: inset 0 0 0 3px #6a511326;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  font-weight: 800;
}
html[data-theme="arise"] :is(.recent-card, .timeline-card, .controls-card, .history-card) { background: #142237; border: 1px solid #708ba65c; border-radius: 1px; }
html[data-theme="arise"] .section-heading { color: #e8f0ff; font-family: var(--font-display); font-weight: 750; text-transform: uppercase; letter-spacing: .065em; }
html[data-theme="arise"] .recent-item { color: #e2ebf8; background: #213a5459; border-color: #7ea5c35e; border-radius: 0; }
html[data-theme="arise"] :is(.small-button, .secondary-button, .play-button, .now-button) { color: #def4ff; background: #20334b; border: 1px solid #80a7be8a; border-radius: 1px; }
html[data-theme="arise"] .play-button { color: #dff5ff; }
html[data-theme="arise"] .activity-button { color: #c9d7e8; background: #16283d; border-color: #6f8ca65c; border-radius: 0; }
html[data-theme="arise"] .activity-button[aria-pressed="true"] { color: #d2f9ff; background: #1c4055; border-color: #66d9ee; box-shadow: inset 3px 0 #59d5eb; }
html[data-theme="arise"] .activity-button[aria-pressed="true"] svg { color: #8aeaff; }
html[data-theme="arise"] .field { background: #0e1c2d; border-color: #6c8aa76b; border-radius: 0; }

/* Coast: sunset art, ink panels, pink action and mint live state. */
html[data-theme="coast"] .topbar { border-bottom-color: #ffffff26; }
html[data-theme="coast"] .brand-mark { color: #fff; background: transparent; border: 0; border-left: 3px solid var(--accent); border-radius: 0; }
html[data-theme="coast"] .brand-name { color: #fff; font-family: var(--font-display); font-style: italic; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
html[data-theme="coast"] .brand-subtitle { color: #d9dce3; font-style: normal; letter-spacing: .2em; }
html[data-theme="coast"] .day-badge { color: #101e1b; background: #8ee6cd; border: 0; border-radius: 0; font-weight: 750; }
html[data-theme="coast"] .theme-switcher a { color: #d9dce4; background: #20232c; border: 1px solid #a3adba3d; border-radius: 2px; }
html[data-theme="coast"] .theme-switcher a[aria-current="page"],
html[data-theme="coast"] .theme-switcher a.is-active { color: #f8b6d6; background: #372532; border-color: #f38abb; }
html[data-theme="coast"] .hero-card { background: #34313e; border: 1px solid #d8b8d526; border-radius: 2px; box-shadow: var(--shadow); }
html[data-theme="coast"] .landscape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #22202b00 25%, #1b202721 44%, #171c29a1 71%, #171c29c2 100%);
  pointer-events: none;
}
html[data-theme="coast"] .live-tag {
  color: #1d1722;
  background: #f18bbd;
  border: 0;
  border-radius: 0;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  letter-spacing: .04em;
}
html[data-theme="coast"] .hero-clock { color: #fff; text-shadow: 0 1px 3px #15111d99; font-weight: 650; }
html[data-theme="coast"] .eyebrow { color: #b9f1df; letter-spacing: .16em; font-weight: 700; }
html[data-theme="coast"] .activity-heading {
  color: #fff;
  border-left: 3px solid #f58bbe;
  padding-left: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  letter-spacing: .015em;
  text-transform: uppercase;
}
html[data-theme="coast"] .activity-note { color: #eff0f3; }
html[data-theme="coast"] .metric-panel { background: #1d232bde; border: 1px solid #e4d8e32b; border-top-color: #f38abb80; border-radius: 2px; }
html[data-theme="coast"] .metric-number { color: #fff; font-family: var(--font-display); font-style: italic; letter-spacing: .01em; }
html[data-theme="coast"] .metric-label { color: #e4e4ea; }
html[data-theme="coast"] .metric-unit { color: #f3eaf0; }
html[data-theme="coast"] .metric-detail { color: #f1eaf1; }
html[data-theme="coast"] .progress-track { background: #171c29b8; border-color: #b3c5cc88; border-radius: 20px; }
html[data-theme="coast"] .progress-fill { background: #f58dbd; border-radius: 20px; }
html[data-theme="coast"] .scene-window { border: 1px solid #dde8ee73; border-radius: 4px; box-shadow: 0 2px 8px #1018244d; }
html[data-theme="coast"] .primary-button {
  color: #161922;
  background: #f18bbd;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  letter-spacing: .035em;
}
html[data-theme="coast"] :is(.recent-card, .timeline-card, .controls-card, .history-card) { background: #20242e; border: 1px solid #b0c0ce33; border-radius: 2px; }
html[data-theme="coast"] .section-heading { color: #fff; font-family: var(--font-display); font-style: italic; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
html[data-theme="coast"] .recent-item { background: #161e296b; border-color: #bdcad633; border-radius: 3px; }
html[data-theme="coast"] .recent-item time { color: #edf1f5; }
html[data-theme="coast"] .recent-item :is(svg, .recent-icon) { color: #f7f7fb; }
html[data-theme="coast"] :is(.small-button, .secondary-button, .play-button, .now-button) { color: #fff; background: #1d2530; border: 1px solid #95ddcf8c; border-radius: 3px; }
html[data-theme="coast"] .secondary-button { font-family: var(--font-display); font-style: italic; text-transform: uppercase; letter-spacing: .035em; }
html[data-theme="coast"] .activity-button { color: #dfe2e9; background: #1a202b; border-color: #b0bdcc40; border-radius: 3px; }
html[data-theme="coast"] .activity-button[aria-pressed="true"] { color: #b0ffe6; background: #25413c; border-color: #8de6cd; }
html[data-theme="coast"] .activity-button[aria-pressed="true"] svg { color: #b0ffe6; }
html[data-theme="coast"] .field { background: #141a25; border-color: #aebfc348; border-radius: 3px; }

html[data-theme] .now-button.is-active,
html[data-theme] .now-button[aria-pressed="true"] { color: #09252d; background: var(--accent); border-color: var(--accent); }
html[data-theme="coast"] .now-button.is-active,
html[data-theme="coast"] .now-button[aria-pressed="true"] { color: #10231f; background: var(--accent-2); border-color: var(--accent-2); }

@media (hover: hover) and (pointer: fine) {
  html[data-theme] .activity-button:hover,
  html[data-theme] .small-button:hover,
  html[data-theme] .secondary-button:hover { border-color: var(--accent); color: var(--ink); }
  html[data-theme="legends"] .primary-button:hover,
  html[data-theme="arise"] .primary-button:hover { background: #ffe3a1; }
  html[data-theme="coast"] .primary-button:hover { background: #ffa9d1; }
  html[data-theme] .theme-switcher a:hover { color: var(--ink); border-color: var(--accent); }
}

@media (max-width: 680px) {
  html[data-theme="legends"] .brand-name { letter-spacing: .025em; }
  html[data-theme="arise"] .brand-name { letter-spacing: .07em; }
  html[data-theme="coast"] .brand-name { letter-spacing: .01em; }
  html[data-theme] .metric-label,
  html[data-theme] .metric-detail,
  html[data-theme] .recent-item,
  html[data-theme] .hero-footline { text-shadow: none; }
  html[data-theme] .primary-button { font-size: max(16px, 1em); }
  html[data-theme] .activity-button span { font-size: max(11px, .72rem); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] :is(.primary-button, .small-button, .secondary-button, .play-button, .now-button, .activity-button) { transition: none; }
}
/* Keep the mint chapter badge readable and the coastal wordmark substantial. */
html[data-theme="coast"] .day-badge>span,html[data-theme="coast"] .day-badge small{color:#24473e}
html[data-theme="coast"] .brand-name{font-size:27px}
@media(max-width:480px){html[data-theme="coast"] .brand-name{font-size:20px}html[data-theme="coast"] .brand-subtitle{font-size:6px;letter-spacing:1.35px}}
@media(max-width:350px){html[data-theme="coast"] .brand-name{font-size:19px}}