/**
 * @file        styles.css
 * @description SynthTime styles: twilight theme, responsive layout, dial, cards, timeline
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         819e844b-f7ac-4cca-8636-6c6f641ed720
 * @version     0.1.0.3
 * @created     2026-11-02
 * @updated     2026-11-02
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */:root{color-scheme:dark;--sky-top: #0b1026;--sky-bottom: #1b2a6b;--panel: rgb(14 20 48 / .82);--panel-border: rgb(140 165 255 / .18);--text: #eef1ff;--muted: #b3bce6;--blue: #6f95ff;--blue-band: #2f55d4;--golden: #f2b544;--golden-band: #e89a2c;--night-band: #070a1c;--day-band: #8fb4ff;--danger: #ff9b8a;--radius: 16px;--gap: 16px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--text);background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 70%,#3a3170 100%) fixed;background-color:var(--sky-top)}a{color:var(--golden)}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip{position:absolute;left:16px;top:-48px;padding:8px 12px;background:var(--golden);color:#1a1206;border-radius:8px;z-index:10}.skip:focus{top:12px}:focus-visible{outline:3px solid var(--golden);outline-offset:2px}.top,main,.foot{max-width:1120px;margin:0 auto;padding:0 16px}.top{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding-top:24px;padding-bottom:16px}.brand{display:flex;align-items:center;gap:12px}.logo{border-radius:10px}.brand h1{margin:0;font-size:1.6rem;letter-spacing:.02em}.tagline{margin:0;color:var(--muted);font-size:.95rem}main{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:var(--gap);align-items:start}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:16px;backdrop-filter:blur(6px)}.controls{display:grid;gap:12px}.group{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}.group legend{font-weight:600;margin-bottom:4px;padding:0}.group+.group{border-top:1px solid var(--panel-border);padding-top:12px}label{display:grid;gap:4px;color:var(--muted);font-size:.9rem;min-width:0}.row{display:flex;gap:8px;align-items:end}.row>*{flex:1 1 0}.row>.button{flex:0 0 auto;width:auto}input,select,.button{font:inherit;color:var(--text);background:#ffffff0f;border:1px solid var(--panel-border);border-radius:10px;padding:8px 10px;min-height:40px;width:100%}select option{background:var(--sky-top)}input[type=range]{padding:0;accent-color:var(--golden)}.button{cursor:pointer;background:var(--golden);color:#1a1206;border-color:transparent;font-weight:600}.button.ghost{background:transparent;color:var(--text);border-color:var(--panel-border)}.button[aria-pressed=true]{background:var(--blue);color:#050a1f}.button:disabled{opacity:.6;cursor:progress}.lang select{width:auto}.message{margin:0;min-height:1.2em;color:var(--danger);font-size:.85rem}.message:empty{min-height:0}.hint{margin:0;color:var(--muted);font-size:.8rem}.dial{width:min(220px,100%);justify-self:center;touch-action:none;cursor:grab}.dial-ring{fill:#ffffff0a;stroke:var(--muted);stroke-width:2}.dial-tick{stroke:var(--muted);stroke-width:2}.dial-label{fill:var(--muted);font-size:15px;font-weight:600;text-anchor:middle;dominant-baseline:central}.dial-label.north{fill:var(--golden)}.dial-arrow{fill:var(--text)}.dial-hub{fill:var(--sky-top);stroke:var(--text);stroke-width:2}.sun-marker{stroke:var(--sky-top);stroke-width:2}.sun-marker.morning{fill:#ffd27a}.sun-marker.evening{fill:#ff8a4c}.readout{color:var(--text);font-variant-numeric:tabular-nums}.results{display:grid;gap:var(--gap);min-width:0}.zone-note,.polar-note{margin:0;color:var(--muted)}.polar-note{color:var(--golden)}.cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}.card h2{margin:0 0 8px;font-size:1.15rem}.events{list-style:none;margin:0;padding:0;display:grid;gap:8px}.event{border-radius:12px;padding:10px 12px;background:#ffffff0a;border-left:4px solid transparent}.event.blue{border-left-color:var(--blue)}.event.golden{border-left-color:var(--golden)}.event.sun{border-left-color:var(--muted)}.event.active{background:#f2b54424}.event-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.event-label{font-weight:600}.event-time{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.1rem}.event-detail{margin:4px 0 0;color:var(--muted);font-size:.85rem}.chip{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;border:1px solid var(--panel-border);font-size:.8rem;color:var(--muted)}.chip.live{background:var(--golden);border-color:transparent;color:#1a1206;font-weight:700;animation:pulse 2s ease-in-out infinite}@keyframes pulse{50%{opacity:.65}}.timeline{margin:0}.timeline figcaption{font-weight:600;margin-bottom:8px}.timeline svg{width:100%;height:48px;border-radius:8px;display:block}.band.night{fill:var(--night-band)}.band.blue{fill:var(--blue-band)}.band.golden{fill:var(--golden-band)}.band.day{fill:var(--day-band)}.now-marker{fill:#fff}.hours{display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums;margin-top:4px}.legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;margin:8px 0 0;padding:0;color:var(--muted);font-size:.85rem}.legend li{display:flex;align-items:center;gap:6px}.swatch{width:14px;height:14px;border-radius:4px;display:inline-block}.swatch.night{background:var(--night-band);border:1px solid var(--panel-border)}.swatch.blue{background:var(--blue-band)}.swatch.golden{background:var(--golden-band)}.swatch.day{background:var(--day-band)}.tips{grid-column:1 / -1}.tips h2{margin:0 0 8px}.tips h3{margin:0 0 4px;font-size:1rem;color:var(--golden)}.tips p,.tips ul{margin:0;color:var(--muted)}.tips ul{padding-left:18px}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap)}.foot{padding-top:24px;padding-bottom:32px;color:var(--muted);font-size:.85rem;text-align:center}.foot p{margin:4px 0}@media(max-width:860px){main{grid-template-columns:1fr}}@media(max-width:560px){.cards{grid-template-columns:1fr}.top{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.chip.live{animation:none}}