/* Styles (js/theme.js STYLES): a look on top of the colour theme. Each one only changes surfaces, shapes and type, and
   keeps the colour you picked, so any style works with any colour, in light and dark. Classic is app.css as designed.
   Readability first: wherever text sits, the surface under it stays solid enough to read in full sun. */

/* ---------- Glass: see-through, blurred cards over a soft glow of your colour ---------- */
:root[data-style="glass"] { --surface-2: color-mix(in srgb, var(--text) 6%, transparent); --r: 26px; --r-sm: 16px; --glass: color-mix(in srgb, var(--surface) 74%, transparent); --glass-edge: rgba(255, 255, 255, .55); --shadow: 0 8px 32px rgba(0, 0, 0, .08); }
:root[data-style="glass"][data-theme="dark"] { --glass: color-mix(in srgb, var(--surface) 68%, transparent); --glass-edge: rgba(255, 255, 255, .10); --shadow: 0 8px 32px rgba(0, 0, 0, .35); }
:root[data-style="glass"] body, :root[data-style="glass"] .overlay {
  background: radial-gradient(70% 50% at 8% 6%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 72%),
    radial-gradient(60% 45% at 100% 38%, color-mix(in srgb, #3FA7FF 50%, transparent), transparent 72%),
    radial-gradient(80% 55% at 30% 100%, color-mix(in srgb, #B06CFF 42%, transparent), transparent 72%), var(--bg);
  background-attachment: fixed;
}
:root[data-style="glass"] :is(.card, .list, .chip, .searchbar, .fab, .sheet, .nav) {
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
}
:root[data-style="glass"] .nav { border-width: 1px 0 0; }
:root[data-style="glass"] .nav .ind::before { background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 22px; }
:root[data-style="glass"] .btn:not(.primary) { background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
:root[data-style="glass"] .btn { border-radius: 18px; }
:root[data-style="glass"] body::before { background: transparent; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
/* the phone asked for less see-through (iPhone: Reduce Transparency): nearly solid, the glow stays */
@media (prefers-reduced-transparency: reduce) { :root[data-style="glass"] { --glass: color-mix(in srgb, var(--surface) 94%, transparent); } }

/* ---------- Aero: glossy, bubbly, sky and water (the 2000s look that's back) ---------- */
:root[data-style="aero"] { --surface-2: #E6F4FB; --r: 18px; --r-sm: 12px; --gloss: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .80) 52%, rgba(240, 250, 255, .86)); --aero-edge: rgba(255, 255, 255, .95); --shadow: 0 2px 4px rgba(20, 90, 140, .10), 0 10px 26px rgba(20, 110, 170, .16); }
:root[data-style="aero"][data-theme="dark"] { --surface-2: rgba(120, 200, 240, .10); --gloss: linear-gradient(180deg, rgba(40, 70, 95, .92), rgba(16, 34, 52, .88) 52%, rgba(14, 40, 58, .9)); --aero-edge: rgba(150, 220, 255, .22); --shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 40, 70, .45); }
:root[data-style="aero"] body, :root[data-style="aero"] .overlay {
  background: radial-gradient(14px 14px at 18% 22%, rgba(255, 255, 255, .7), transparent), radial-gradient(22px 22px at 82% 14%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(10px 10px at 70% 48%, rgba(255, 255, 255, .6), transparent), radial-gradient(30px 30px at 12% 78%, rgba(255, 255, 255, .35), transparent),
    linear-gradient(170deg, #BFE9FF 0%, #E4F7FF 38%, #D5F5E3 72%, #A8E6C1 100%);
  background-attachment: fixed;
}
:root[data-style="aero"][data-theme="dark"] body, :root[data-style="aero"][data-theme="dark"] .overlay {
  background: radial-gradient(18px 18px at 18% 22%, rgba(140, 220, 255, .18), transparent), radial-gradient(26px 26px at 82% 14%, rgba(140, 220, 255, .12), transparent),
    linear-gradient(170deg, #06263D 0%, #0A3550 45%, #0B3B36 100%);
  background-attachment: fixed;
}
:root[data-style="aero"] :is(.card, .list, .chip, .searchbar, .fab, .sheet, .nav) { background: var(--gloss); border: 1px solid var(--aero-edge); box-shadow: var(--shadow), inset 0 1px 0 var(--aero-edge); }
:root[data-style="aero"] .nav { border-width: 1px 0 0; }
:root[data-style="aero"] body::before { background: transparent; }
:root[data-style="aero"] .btn { border-radius: 999px; }
:root[data-style="aero"] .btn:not(.primary) { background: var(--gloss); border: 1px solid var(--aero-edge); box-shadow: 0 2px 6px rgba(20, 90, 140, .12); }
/* the glossy "gel" button: a highlight across the top half */
:root[data-style="aero"] .btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff) 0%, var(--accent) 50%, color-mix(in srgb, var(--accent) 85%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
:root[data-style="aero"] .nav .ind::before { border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, #fff), color-mix(in srgb, var(--accent) 30%, transparent)); }
:root[data-style="aero"][data-theme="dark"] .nav .ind::before { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, #0A3550), color-mix(in srgb, var(--accent) 18%, #06263D)); }
:root[data-style="aero"] .toggle[aria-checked="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 65%, #fff), var(--accent)); }

/* ---------- Bold: neo-brutalist, thick outlines, hard shadows, loud ---------- */
:root[data-style="bold"] { --r: 12px; --r-sm: 8px; --ink: var(--text); --shadow: 4px 4px 0 var(--ink); --bg: color-mix(in srgb, var(--accent) 10%, #FFF8E7); }
:root[data-style="bold"][data-theme="dark"] { --ink: #000; --bg: color-mix(in srgb, var(--accent) 12%, #121212); --shadow: 4px 4px 0 color-mix(in srgb, var(--accent) 70%, #000); }
:root[data-style="bold"] :is(.card, .list, .chip, .searchbar, .fab, .sheet, .walkcard, .note) { border: 2.5px solid var(--text); box-shadow: var(--shadow); }
:root[data-style="bold"] .list > * + * { border-top: 2px solid var(--text); }
:root[data-style="bold"] .nav { border-top: 3px solid var(--text); box-shadow: none; }
:root[data-style="bold"] .nav .ind::before { border: 2.5px solid var(--text); border-radius: 10px; }
:root[data-style="bold"] .btn { border: 2.5px solid var(--text); border-radius: 10px; box-shadow: 3px 3px 0 var(--text); font-weight: 800; }
:root[data-style="bold"] .btn:active { transform: translate(3px, 3px); box-shadow: none; }
:root[data-style="bold"] .section h2 { text-transform: uppercase; letter-spacing: .04em; font-weight: 900; }
:root[data-style="bold"] h1 { font-weight: 900; letter-spacing: -.03em; }
:root[data-style="bold"] .badge { border: 2px solid var(--text); border-radius: 6px; }
:root[data-style="bold"] .toggle { border: 2px solid var(--text); } :root[data-style="bold"] .toggle::after { top: 2px; left: 2px; box-shadow: none; border: 2px solid var(--text); }
:root[data-style="bold"] .seg { border: 2.5px solid var(--text); } :root[data-style="bold"] .seg button[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--text); }

/* ---------- Midnight: pure black, your colour glowing (always dark: theme.js) ---------- */
:root[data-style="midnight"] { --r: 18px; --shadow: none; --glow: color-mix(in srgb, var(--accent) 55%, transparent); }
:root[data-style="midnight"] :is(.card, .list, .chip, .searchbar, .fab, .sheet, .nav) { border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
:root[data-style="midnight"] .nav { border-width: 1px 0 0; }
:root[data-style="midnight"] .btn.primary { box-shadow: 0 0 22px var(--glow); }
:root[data-style="midnight"] .nav .ind::before { box-shadow: 0 0 18px var(--glow); }
:root[data-style="midnight"] .badge { box-shadow: 0 0 12px color-mix(in srgb, currentColor 35%, transparent); }
:root[data-style="midnight"] h1, :root[data-style="midnight"] .dep .mins { text-shadow: 0 0 18px var(--glow); }
:root[data-style="midnight"] .toggle[aria-checked="true"] { box-shadow: 0 0 14px var(--glow); }

/* ---------- Clear: extra contrast and bigger text (free for good) ---------- */
:root[data-style="clear"] { --muted: #37302D; --line: rgba(0, 0, 0, .38); --shadow: none; }
:root[data-style="clear"][data-theme="dark"] { --muted: #E2DAD5; --line: rgba(255, 255, 255, .42); }
:root[data-style="clear"] body { font-size: var(--fs-row); }
:root[data-style="clear"] :is(.card, .list, .chip, .searchbar, .fab, .sheet) { border: 2px solid var(--line); }
:root[data-style="clear"] :is(.item, .dep) b { font-size: var(--fs-row); font-weight: 700; }
:root[data-style="clear"] :is(.item, .dep) small, :root[data-style="clear"] .note { font-size: var(--fs-body); }
:root[data-style="clear"] .btn { font-size: var(--fs-row); min-height: 54px; }
:root[data-style="clear"] :is(a, .link) { text-decoration: underline; text-underline-offset: 3px; }
:root[data-style="clear"] :focus-visible { outline-width: 4px; }

/* ---------- the picker (Me → Appearance) ---------- */
.style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.style-pick { display: grid; gap: 6px; justify-items: center; font-size: var(--fs-foot); font-weight: 600; }
.style-pick .sp { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.style-pick[aria-checked="true"] .sp { box-shadow: 0 0 0 2.5px var(--accent); }
.style-pick[aria-checked="true"] { color: var(--accent); }
.style-pick .sp i { position: absolute; left: 10%; right: 10%; height: 18%; border-radius: 6px; }
.style-pick .sp i:nth-child(1) { top: 12%; } .style-pick .sp i:nth-child(2) { top: 36%; } .style-pick .sp i:nth-child(3) { top: 62%; height: 14%; left: 22%; right: 22%; border-radius: 99px; }
.style-pick .pro-badge { margin-left: 4px; }