/* css/welcome.css
*
* Welcome landing page — combines the three pillars (Astronomy / Astrology /
* Synastry) into a glorious link hub. Visually matches the dark-plasma /
* Tetrabiblos chrome already established by astrology-scrolls.css.
*
* Theme tokens (reused, not redefined):
* #03061A deep indigo background
* #F4E6C0 warm cream text
* #F0C040 gold accent
* #B5A8D8 classical violet
* #E87878 rubric red
*/
/* ── Root container ──────────────────────────────────────────────── */
#welcome-app {
position: fixed;
inset: 0;
z-index: 9600;
background: var(--color-bg-art, radial-gradient(ellipse at center, #142141 0%, #03061A 70%, #0B0816 100%));
color: var(--color-fg, #F4E6C0);
font-family: 'Crimson Pro', 'Cormorant Garamond', Georgia, serif;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
/* Reserve room at the bottom for the global mode-switcher bar so the
footer + replay link stay above it. var --mode-bar-h is set on
by the bottom-bar resize observer at runtime; this fallback
covers the worst case until that lands. */
padding-bottom: var(--mode-bar-h, 72px);
box-sizing: border-box;
}
#welcome-app[hidden] { display: none !important; }
#welcome-app .welcome-frame {
position: relative;
min-height: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 56px 64px;
box-sizing: border-box;
}
#welcome-app .welcome-inner {
position: relative;
z-index: 1;
}
/* ── Rod caps + rosettes (top/bottom decoration) ─────────────────── */
#welcome-app .welcome-rod {
position: absolute;
left: 24px;
right: 24px;
height: 18px;
background: var(--chrome-rod-bg, linear-gradient(180deg, #1A2148 0%, #0A1228 100%));
border: 1px solid var(--chrome-border, rgba(240, 192, 64, 0.55));
border-radius: 4px;
box-shadow:
inset 0 1px 0 var(--chrome-border-soft, rgba(240, 192, 64, 0.4)),
inset 0 -1px 0 rgba(0, 0, 0, 0.6);
z-index: 2;
}
#welcome-app .welcome-rod--top { top: 24px; }
#welcome-app .welcome-rod--bottom { bottom: 24px; }
#welcome-app .welcome-rod-rosette {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
border-radius: 50%;
transform: translateY(-50%);
background: radial-gradient(circle at 35% 35%,
var(--color-accent-2, #FFE8A4) 0%,
var(--color-accent, #F0C040) 50%,
var(--color-accent-soft, #7A5A10) 100%);
box-shadow:
0 0 4px var(--chrome-glow, rgba(240, 192, 64, 0.7)),
inset 0 1px 1px rgba(255, 255, 255, 0.45);
}
/* ── Greek-key side strips ───────────────────────────────────────── */
#welcome-app .welcome-side {
position: absolute;
top: 60px;
bottom: 60px;
width: 22px;
z-index: 2;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-y;
background-size: 22px 88px;
opacity: 0.7;
}
#welcome-app .welcome-side--left { left: 4px; }
#welcome-app .welcome-side--right { right: 4px; transform: scaleX(-1); }
/* ── Header ──────────────────────────────────────────────────────── */
#welcome-app .welcome-header {
text-align: center;
margin: 32px 0 24px;
}
#welcome-app .welcome-title {
font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
font-size: 44px;
font-weight: 600;
letter-spacing: 0.18em;
margin: 0 0 12px;
color: var(--color-heading, #F0C040);
text-transform: uppercase;
text-shadow:
0 0 12px var(--chrome-glow, rgba(240, 192, 64, 0.4)),
0 2px 4px rgba(0, 0, 0, 0.6);
}
#welcome-app .welcome-subtitle {
font-size: 19px;
font-style: italic;
color: var(--color-fg, #F4E6C0);
opacity: 0.88;
margin: 0;
letter-spacing: 0.04em;
}
/* ── Global language strip — sits between header and hero ────────── */
/* Horizontal scrollable rail of 26 autonym chips. Active chip gets a
* gold-rim halo + accent fill. The rail uses native-scroll on touch
* (no JS), with custom scrollbar styling for desktop. */
#welcome-app .welcome-lang-strip {
margin: 0 auto 28px;
max-width: 100%;
padding: 0 12px;
display: flex;
justify-content: center;
}
#welcome-app .welcome-lang-rail {
display: flex;
gap: 6px;
flex-wrap: nowrap;
overflow-x: auto;
padding: 8px 4px 12px;
max-width: 100%;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(240, 192, 64, 0.4) transparent;
border-radius: 10px;
}
#welcome-app .welcome-lang-rail::-webkit-scrollbar {
height: 6px;
}
#welcome-app .welcome-lang-rail::-webkit-scrollbar-thumb {
background: rgba(240, 192, 64, 0.4);
border-radius: 3px;
}
#welcome-app .welcome-lang-rail::-webkit-scrollbar-track {
background: transparent;
}
#welcome-app .welcome-lang-chip {
appearance: none;
border: 1px solid rgba(240, 192, 64, 0.25);
background: rgba(20, 14, 30, 0.55);
color: var(--color-fg, #F4E6C0);
font-family: inherit;
font-size: 13px;
letter-spacing: 0.04em;
padding: 7px 13px;
border-radius: 14px;
cursor: pointer;
white-space: nowrap;
scroll-snap-align: start;
transition: background-color 120ms ease, border-color 120ms ease,
color 120ms ease, transform 120ms ease;
flex: 0 0 auto;
}
#welcome-app .welcome-lang-chip:hover,
#welcome-app .welcome-lang-chip:focus-visible {
background: rgba(40, 28, 60, 0.85);
border-color: rgba(240, 192, 64, 0.55);
color: var(--color-heading, #F0C040);
outline: none;
transform: translateY(-1px);
}
#welcome-app .welcome-lang-chip.is-active {
background: linear-gradient(180deg,
rgba(240, 192, 64, 0.22),
rgba(240, 192, 64, 0.08));
border-color: rgba(240, 192, 64, 0.75);
color: var(--color-heading, #F0C040);
font-weight: 600;
box-shadow:
0 0 0 1px rgba(240, 192, 64, 0.4) inset,
0 0 12px rgba(240, 192, 64, 0.25);
}
#welcome-app .welcome-lang-chip.is-active::before {
content: '✓ ';
opacity: 0.85;
}
/* ── Hero — armillary + mini wheel ───────────────────────────────── */
#welcome-app .welcome-hero {
display: flex;
flex-direction: column;
align-items: center;
margin: 24px 0 48px;
}
#welcome-app .welcome-hero-armillary-wrap {
position: relative;
width: 320px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
}
/* Eclipse wheel sits at the back, filling the same circle the armillary
orbits around — they share one centre, one visual mass. The rings
spin on TOP of the wheel's face so the user sees the live geocentric
clockwork through the wispy gold orbits. */
#welcome-app .welcome-armillary {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
animation: welcome-armillary-spin 60s linear infinite;
}
#welcome-app .welcome-armillary-ring--meridian {
animation: welcome-armillary-spin-rev 90s linear infinite;
transform-origin: 160px 160px;
}
@keyframes welcome-armillary-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes welcome-armillary-spin-rev {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
#welcome-app .welcome-mini-wheel-wrap {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1; /* behind .welcome-armillary (z-index 2) */
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 18px rgba(240, 192, 64, 0.32));
}
#welcome-app .welcome-eclipse-canvas {
/* Fill the same circular footprint the armillary orbits — the
responsive wrap shrinks 320→240→200 across desktop/tablet/mobile,
so anchor the canvas to 100% of the wrap (with a small inset so
the outermost armillary ring orbits OUTSIDE the wheel face). The
canvas's internal backing buffer is set by EclipseWheel constructor
(passed size: 320 from welcomeApp.mountEclipseHero); CSS only
controls displayed size. !important needed because EclipseWheel's
constructor writes inline width/height onto the canvas. */
width: 92% !important;
height: 92% !important;
display: block;
}
#welcome-app .welcome-mini-wheel {
width: 100%;
height: 100%;
}
#welcome-app .welcome-hero-date {
margin-top: 16px;
font-size: 15px;
font-style: italic;
color: #B5A8D8;
letter-spacing: 0.06em;
opacity: 0.85;
}
/* ── Pillar cards ────────────────────────────────────────────────── */
#welcome-app .welcome-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin: 16px 0 36px;
}
#welcome-app .welcome-card {
position: relative;
display: flex;
flex-direction: column;
text-align: center;
padding: 0;
background: var(--chrome-card-bg,
linear-gradient(180deg, rgba(18, 28, 60, 0.92) 0%, rgba(8, 14, 32, 0.96) 100%));
border: 1px solid var(--chrome-border, rgba(240, 192, 64, 0.45));
border-radius: 8px;
color: var(--color-fg, #F4E6C0);
font: inherit;
cursor: pointer;
overflow: hidden;
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.5),
inset 0 1px 0 var(--chrome-border-soft, rgba(240, 192, 64, 0.18));
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
min-height: 380px;
}
#welcome-app .welcome-card:hover,
#welcome-app .welcome-card:focus-visible {
transform: translateY(-4px);
border-color: var(--pillar-tint, #F0C040);
box-shadow:
0 8px 32px var(--pillar-tint, #F0C040),
0 8px 32px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(240, 192, 64, 0.3);
outline: none;
}
#welcome-app .welcome-card-rod {
position: relative;
height: 14px;
background: linear-gradient(180deg, #1A2148 0%, #0A1228 100%);
border-bottom: 1px solid rgba(240, 192, 64, 0.5);
flex-shrink: 0;
}
#welcome-app .welcome-card-rod--bottom {
border-top: 1px solid rgba(240, 192, 64, 0.5);
border-bottom: 0;
}
#welcome-app .welcome-card-rosette {
position: absolute;
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
transform: translateY(-50%);
background: radial-gradient(circle at 35% 35%, #FFE8A4 0%, #F0C040 55%, #7A5A10 100%);
box-shadow: 0 0 3px rgba(240, 192, 64, 0.7);
}
#welcome-app .welcome-card-inner {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 22px 22px;
gap: 10px;
}
#welcome-app .welcome-card-glyph {
width: 88px;
height: 88px;
color: var(--pillar-tint, #F0C040);
filter: drop-shadow(0 0 8px var(--pillar-tint, #F0C040));
opacity: 0.92;
flex-shrink: 0;
}
#welcome-app .welcome-card-title {
font-family: 'Cinzel', Georgia, serif;
font-size: 22px;
font-weight: 600;
letter-spacing: 0.16em;
margin: 4px 0 0;
color: var(--pillar-tint, #F0C040);
text-transform: uppercase;
text-shadow: 0 0 6px var(--pillar-tint, #F0C040);
}
#welcome-app .welcome-card-subtitle {
font-size: 16px;
color: #F4E6C0;
opacity: 0.85;
margin: 0;
}
#welcome-app .welcome-card-blurb {
font-size: 15px;
line-height: 1.55;
color: #F4E6C0;
opacity: 0.85;
margin: 4px 0 0;
flex: 1;
}
#welcome-app .welcome-card-tagline {
font-size: 13px;
font-style: italic;
color: #B5A8D8;
opacity: 0.75;
margin: 4px 0 8px;
line-height: 1.45;
}
#welcome-app .welcome-card-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
margin-top: auto;
background: rgba(240, 192, 64, 0.1);
border: 1px solid var(--pillar-tint, #F0C040);
border-radius: 4px;
color: var(--pillar-tint, #F0C040);
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: background 0.2s ease;
}
#welcome-app .welcome-card:hover .welcome-card-cta,
#welcome-app .welcome-card:focus-visible .welcome-card-cta {
background: var(--pillar-tint, #F0C040);
color: #03061A;
}
#welcome-app .welcome-card-arrow {
font-size: 16px;
transition: transform 0.2s ease;
}
#welcome-app .welcome-card:hover .welcome-card-arrow {
transform: translateX(4px);
}
/* ── Tour button + actions ──────────────────────────────────────── */
#welcome-app .welcome-actions {
display: flex;
justify-content: center;
gap: 18px;
margin: 12px 0 24px;
}
#welcome-app .welcome-tour-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
background: transparent;
border: 1.5px solid rgba(245, 230, 192, 0.55);
border-radius: 6px;
color: #F4E6C0;
font: inherit;
font-size: 16px;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#welcome-app .welcome-tour-btn:hover,
#welcome-app .welcome-tour-btn:focus-visible {
background: rgba(240, 192, 64, 0.12);
border-color: #F0C040;
color: #F0C040;
outline: none;
}
#welcome-app .welcome-tour-icon {
color: #F0C040;
font-size: 18px;
}
/* ── Footer ──────────────────────────────────────────────────────── */
#welcome-app .welcome-footer {
text-align: center;
margin: 24px 0 12px;
font-size: 13px;
color: #B5A8D8;
opacity: 0.65;
letter-spacing: 0.05em;
}
#welcome-app .welcome-replay-link {
color: #F0C040;
text-decoration: none;
border-bottom: 1px dotted rgba(240, 192, 64, 0.5);
padding-bottom: 1px;
transition: color 0.15s ease, border-color 0.15s ease;
cursor: pointer;
}
#welcome-app .welcome-replay-link:hover,
#welcome-app .welcome-replay-link:focus-visible {
color: #FFE8A4;
border-color: #F0C040;
outline: none;
}
/* ── Walkthrough overlay ─────────────────────────────────────────── */
#pa-tour-overlay {
position: fixed;
inset: 0;
z-index: 9900;
pointer-events: auto;
}
#pa-tour-overlay[hidden] { display: none !important; }
#pa-tour-overlay .pa-tour-backdrop {
position: absolute;
inset: 0;
background: rgba(11, 8, 22, 0.78);
backdrop-filter: blur(2px);
transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
/* Ambient mode — used for tour steps with no target element (Acts 1/2/3
of the eclipse tour). The card anchors to the viewport edge and the
backdrop fades so the scene behind (sky / orrery / etc.) stays visible
while the choreography plays. */
#pa-tour-overlay.pa-tour-ambient .pa-tour-backdrop {
background: rgba(11, 8, 22, 0.10);
backdrop-filter: none;
pointer-events: none;
}
#pa-tour-overlay.pa-tour-ambient .pa-tour-card {
width: clamp(260px, 86vw, 380px);
background: linear-gradient(180deg, rgba(16, 26, 58, 0.94) 0%, rgba(8, 14, 32, 0.94) 100%);
}
#pa-tour-overlay.pa-tour-ambient .pa-tour-card-inner {
padding: 14px 22px 12px;
}
#pa-tour-overlay.pa-tour-ambient .pa-tour-title {
font-size: 18px;
margin: 0 0 6px;
}
#pa-tour-overlay.pa-tour-ambient .pa-tour-body {
font-size: 14px;
line-height: 1.5;
margin: 0 0 12px;
}
#pa-tour-overlay.pa-tour-ambient .pa-tour-step-counter {
font-size: 11px;
margin: 0 0 4px;
}
#pa-tour-overlay.pa-tour-ambient .pa-tour-ctrl {
width: 36px;
height: 36px;
font-size: 15px;
}
#pa-tour-overlay.pa-tour-ambient .pa-tour-ctrl--pause {
width: 42px;
height: 42px;
font-size: 18px;
}
#pa-tour-overlay .pa-tour-highlight {
position: absolute;
border: 2px solid #F0C040;
border-radius: 8px;
box-shadow:
0 0 0 9999px rgba(11, 8, 22, 0.72),
0 0 16px rgba(240, 192, 64, 0.65);
pointer-events: none;
transition: all 0.25s ease;
}
#pa-tour-overlay .pa-tour-card {
position: absolute;
width: clamp(280px, 90vw, 420px);
background: linear-gradient(180deg, #142141 0%, #03061A 100%);
border: 1px solid rgba(240, 192, 64, 0.55);
border-radius: 8px;
color: #F4E6C0;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.7),
0 0 24px rgba(240, 192, 64, 0.25);
font-family: 'Crimson Pro', Georgia, serif;
overflow: hidden;
}
/* Progress strip across the top of the tour card. The outer 'fill' grows
in 1/N jumps as steps advance; the inner 'subfill' fills smoothly during
any auto-advance window so the user can see how long until next step. */
#pa-tour-overlay .pa-tour-progress {
position: relative;
height: 3px;
background: rgba(245, 230, 192, 0.12);
overflow: hidden;
}
#pa-tour-overlay .pa-tour-progress-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: linear-gradient(90deg, #B5A8D8 0%, #F0C040 100%);
transition: width 0.35s ease;
}
#pa-tour-overlay .pa-tour-progress-subfill {
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: rgba(240, 192, 64, 0.55);
mix-blend-mode: screen;
}
/* End (×) button — top-right corner above rod cap. */
#pa-tour-overlay .pa-tour-end {
position: absolute;
top: 8px;
right: 10px;
z-index: 2;
width: 24px;
height: 24px;
padding: 0;
background: transparent;
border: none;
color: rgba(245, 230, 192, 0.65);
font: inherit;
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: color 0.15s ease;
}
#pa-tour-overlay .pa-tour-end:hover { color: #F0C040; }
#pa-tour-overlay .pa-tour-rod-cap {
position: relative;
height: 12px;
background: linear-gradient(180deg, #1A2148 0%, #0A1228 100%);
border-bottom: 1px solid rgba(240, 192, 64, 0.5);
}
#pa-tour-overlay .pa-tour-rod-cap--bottom {
border-top: 1px solid rgba(240, 192, 64, 0.5);
border-bottom: 0;
}
#pa-tour-overlay .pa-tour-rosette {
position: absolute;
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
transform: translateY(-50%);
background: radial-gradient(circle at 35% 35%, #FFE8A4 0%, #F0C040 55%, #7A5A10 100%);
box-shadow: 0 0 3px rgba(240, 192, 64, 0.7);
}
#pa-tour-overlay .pa-tour-card-inner {
padding: 22px 26px 18px;
}
#pa-tour-overlay .pa-tour-step-counter {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #B5A8D8;
margin: 0 0 8px;
opacity: 0.7;
}
#pa-tour-overlay .pa-tour-title {
font-family: 'Cinzel', Georgia, serif;
font-size: 22px;
font-weight: 600;
color: #F0C040;
letter-spacing: 0.06em;
margin: 0 0 12px;
}
#pa-tour-overlay .pa-tour-body {
font-size: 16px;
line-height: 1.65;
color: #F4E6C0;
margin: 0 0 18px;
}
#pa-tour-overlay .pa-tour-body em {
color: #F0C040;
font-style: italic;
}
/* Control bar — three round icon buttons: Back · Pause/Resume · Skip. */
#pa-tour-overlay .pa-tour-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
}
#pa-tour-overlay .pa-tour-ctrl {
width: 44px;
height: 44px;
padding: 0;
background: rgba(18, 28, 60, 0.6);
border: 1px solid rgba(245, 230, 192, 0.35);
border-radius: 50%;
color: #F4E6C0;
font: inherit;
font-size: 18px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
#pa-tour-overlay .pa-tour-ctrl:hover:not(:disabled),
#pa-tour-overlay .pa-tour-ctrl:focus-visible:not(:disabled) {
background: rgba(240, 192, 64, 0.18);
border-color: #F0C040;
color: #F0C040;
outline: none;
}
#pa-tour-overlay .pa-tour-ctrl:active:not(:disabled) {
transform: scale(0.94);
}
#pa-tour-overlay .pa-tour-ctrl:disabled {
opacity: 0.35;
cursor: not-allowed;
}
/* Pause/Resume sits centre and is visually heavier (the primary control). */
#pa-tour-overlay .pa-tour-ctrl--pause {
background: rgba(240, 192, 64, 0.16);
border-color: #F0C040;
color: #F0C040;
width: 52px;
height: 52px;
font-size: 22px;
}
#pa-tour-overlay .pa-tour-ctrl--pause:hover:not(:disabled) {
background: #F0C040;
color: #03061A;
}
/* ── Settings modal (⚙ pill opens this) ──────────────────────────── */
#settings-app {
position: fixed;
inset: 0;
z-index: 9999;
font-family: 'Crimson Pro', Georgia, serif;
}
#settings-app[hidden] { display: none !important; }
#settings-app .settings-backdrop {
position: absolute;
inset: 0;
background: var(--chrome-backdrop, rgba(11, 8, 22, 0.78));
backdrop-filter: blur(2px);
}
#settings-app .settings-card {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: clamp(280px, 92vw, 480px);
max-height: 86vh;
overflow-y: auto;
background: var(--chrome-card-bg, linear-gradient(180deg, #142141 0%, #03061A 100%));
border: 1px solid var(--chrome-border, rgba(240, 192, 64, 0.55));
border-radius: 8px;
color: var(--color-fg, #F4E6C0);
box-shadow: 0 8px 32px rgba(0,0,0,0.7),
0 0 24px var(--chrome-glow, rgba(240,192,64,0.25));
}
#settings-app .settings-rod {
position: relative;
height: 14px;
background: var(--chrome-rod-bg, linear-gradient(180deg, #1A2148 0%, #0A1228 100%));
border-bottom: 1px solid var(--chrome-border, rgba(240,192,64,0.5));
}
#settings-app .settings-rod--bottom {
border-top: 1px solid var(--chrome-border, rgba(240,192,64,0.5));
border-bottom: 0;
}
#settings-app .settings-rosette {
position: absolute; top: 50%;
width: 10px; height: 10px;
border-radius: 50%;
transform: translateY(-50%);
background: radial-gradient(circle at 35% 35%,
var(--color-accent-2, #FFE8A4) 0%,
var(--color-accent, #F0C040) 55%,
var(--color-accent-soft, #7A5A10) 100%);
box-shadow: 0 0 3px var(--chrome-glow, rgba(240,192,64,0.7));
}
#settings-app .settings-close {
position: absolute;
top: 8px; right: 10px;
width: 28px; height: 28px;
padding: 0;
background: transparent;
border: 0;
color: var(--chrome-text-soft, rgba(245, 230, 192, 0.7));
font-size: 22px;
line-height: 1;
cursor: pointer;
}
#settings-app .settings-close:hover { color: var(--color-accent, #F0C040); }
#settings-app .settings-inner {
padding: 20px 28px;
}
#settings-app .settings-title {
font-family: 'Cinzel', Georgia, serif;
font-size: 24px;
color: var(--color-heading, #F0C040);
letter-spacing: 0.10em;
margin: 0 0 18px;
}
#settings-app .settings-section {
border-top: 1px solid var(--chrome-border-soft, rgba(240, 192, 64, 0.25));
padding: 16px 0 4px;
}
#settings-app .settings-section:first-of-type { border-top: 0; padding-top: 0; }
#settings-app .settings-section-h {
font-family: 'Cinzel', Georgia, serif;
font-size: 16px;
color: var(--color-heading, #F0C040);
letter-spacing: 0.08em;
margin: 0 0 6px;
}
#settings-app .settings-help {
font-size: 13px;
color: var(--chrome-text-soft, rgba(245, 230, 192, 0.72));
margin: 0 0 14px;
line-height: 1.5;
}
#settings-app .settings-toggle-row,
#settings-app .settings-time-row {
display: flex;
align-items: center;
gap: 12px;
margin: 8px 0;
font-size: 14px;
color: var(--color-fg, #F4E6C0);
}
#settings-app .settings-toggle-row input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: var(--color-accent, #F0C040);
}
#settings-app .settings-time-row input[type="time"] {
background: rgba(0,0,0,0.35);
color: var(--color-fg, #F4E6C0);
border: 1px solid var(--chrome-border, rgba(240, 192, 64, 0.45));
border-radius: 4px;
padding: 4px 8px;
font: inherit;
font-size: 14px;
}
#settings-app .settings-status {
font-size: 12px;
font-style: italic;
color: var(--chrome-text-soft, rgba(181, 168, 216, 0.78));
margin: 8px 0;
min-height: 16px;
}
/* FR-01 — the ONE free-text box in the reporter (Settings → Report a problem).
Matches the time input's chrome rather than inventing a field style. Typing in
it is optional: the button sends diagnostics either way, which is the whole
reason the box can afford to look this quiet. */
#settings-app .settings-note {
display: block;
width: 100%;
box-sizing: border-box;
background: rgba(0,0,0,0.35);
color: var(--color-fg, #F4E6C0);
border: 1px solid var(--chrome-border, rgba(240, 192, 64, 0.45));
border-radius: 4px;
padding: 8px 10px;
margin: 0 0 10px;
font: inherit;
font-size: 13px;
line-height: 1.45;
resize: vertical;
}
#settings-app .settings-note::placeholder {
color: var(--chrome-text-soft, rgba(245, 230, 192, 0.45));
font-style: italic;
}
#settings-app .settings-btn {
padding: 8px 16px;
background: transparent;
border: 1px solid var(--chrome-border, rgba(240, 192, 64, 0.55));
border-radius: 4px;
color: var(--color-accent, #F0C040);
font: inherit;
font-size: 13px;
letter-spacing: 0.10em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.18s, color 0.18s;
}
#settings-app .settings-btn:hover {
background: var(--chrome-pill-pressed-bg, rgba(240, 192, 64, 0.16));
color: var(--color-accent-2, #FFE8A4);
}
/* Danger variant — used for "Delete all my data". Same shape as
* .settings-btn but in a desaturated red so it reads as a guarded
* action without screaming. Hover deepens the red on the rim only;
* we don't want the button to feel "fun" to click. */
#settings-app .settings-btn--danger {
border-color: rgba(220, 96, 96, 0.55);
color: #f0a8a8;
}
#settings-app .settings-btn--danger:hover {
background: rgba(220, 96, 96, 0.16);
color: #ffd4d4;
border-color: rgba(240, 128, 128, 0.85);
}
#settings-app .settings-btn--danger:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* Status line below the danger button. Re-uses .settings-status but
* with an error tint when the delete fails (private-mode IndexedDB,
* permission failure, etc). */
#settings-app .settings-status.is-error {
color: #f4a8a8;
font-style: normal;
}
/* Legal links row inside Settings → About. Two anchors, tab-separated,
* subdued until hover. Matches the existing back-link visual weight in
* privacy-policy.html / terms-of-service.html. */
#settings-app .settings-links {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-top: 6px;
font-size: 13px;
}
#settings-app .settings-links a {
color: var(--color-accent, #F0C040);
text-decoration: underline;
opacity: 0.85;
transition: opacity 0.15s ease-out;
}
#settings-app .settings-links a:hover {
opacity: 1;
color: var(--color-accent-2, #FFE8A4);
}
/* ── Theme picker grid (Settings → Themes) ─────────────────────────
* 2-column responsive grid of palette cards. Each card shows a 4-stop
* colour-swatch strip above a label + subtitle. The currently-active
* theme is ringed in gold and bears a check after its label. Cards
* are