/* Study Spot styles. theme.js sets the colour tokens and these attributes on <html>:
   data-style (library | board | bold | stellenbosch | arcade | custom), data-mode (light | dark),
   data-corners, data-venue, data-status, data-barstyle, data-texture, data-bars, data-motion, data-accents.
   Selectors start with html[...] so they win over each page's own base rules without !important. */

/* ---------- shared: corners, borders, type ---------- */
html { --radius: 0px; --radius-sm: 0px; --bw: 1px; --shadow: none; }
html[data-corners="slight"] { --radius: 6px; --radius-sm: 4px; }
html[data-corners="round"] { --radius: 14px; --radius-sm: 10px; }
html[data-style] body { font-family: var(--font-body); }
html[data-style] h1, html[data-style] h2, html[data-style] h3 { font-family: var(--font-display); }
html[data-style] .card, html[data-style] .panel, html[data-style] .dialog, html[data-style] .empty, html[data-style] .ad,
html[data-style] .banner, html[data-style] .notice, html[data-style] .nosensor, html[data-style] .opt, html[data-style] .theme-opt,
html[data-style] .loc, html[data-style] .hero, html[data-style] .toast { border-radius: var(--radius); }
html[data-style] .btn, html[data-style] .chip-btn, html[data-style] .chip, html[data-style] .pill, html[data-style] .tag,
html[data-style] .badge, html[data-style] select, html[data-style] input, html[data-style] textarea { border-radius: var(--radius-sm); }
html[data-style] .brand { border-radius: var(--radius-sm); font-family: var(--font-display); }
html[data-style] .m-val, html[data-style] .mono, html[data-style] .pill.score, html[data-style] .hours td { font-family: var(--font-data); }
html[data-style] .m-label, html[data-style] .field > label, html[data-style] .flabel, html[data-style] .banner .eyebrow { text-transform: none; letter-spacing: 0.02em; }

/* buttons sitting on the banner colour (best pick, running study session) use the banner's own ink */
html[data-style] .banner .btn, html[data-style] .study-bar .btn { background: transparent; color: var(--banner-ink); border: 1px solid var(--banner-dim); box-shadow: none; }

/* ---------- venues ---------- */
/* ruled: entries separated by rules instead of boxes */
html[data-venue="ruled"] .grid { gap: 0 28px; }
html[data-venue="ruled"] .card:not(.ad-card) { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0; }
html[data-venue="ruled"] .card:not(.ad-card):hover { border-top-color: var(--accent); }
html[data-venue="ruled"] .panel { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0; }
/* a highlighted panel (partner page "How it works") always keeps its banner colours */
html[data-style] .panel.hero { background: var(--banner); color: var(--banner-ink); border: 0; box-shadow: none; padding: 18px 20px; }
/* forms nested inside a panel never get a second frame or shadow */
html[data-style] .panel .panel { box-shadow: none; background: transparent; border: 0; }
/* tiles: filled panels with a soft outline, like a console menu */
html[data-venue="tiles"] .card:not(.ad-card), html[data-venue="tiles"] .panel { background: var(--surface); border: 2px solid var(--line); }
html[data-venue="tiles"] .card:not(.ad-card):hover { border-color: var(--accent); }
/* outlined: no fill, just an outline */
html[data-venue="outlined"] .card:not(.ad-card), html[data-venue="outlined"] .panel { background: transparent; border: 1.5px solid var(--ink-2); }
/* boxed: flat blocks with a firm border */
html[data-venue="boxed"] .card:not(.ad-card), html[data-venue="boxed"] .panel { border: 3px solid var(--ink); box-shadow: none; }
/* pixel: thick border with a hard offset shadow */
html[data-venue="pixel"] .card:not(.ad-card), html[data-venue="pixel"] .panel, html[data-venue="pixel"] .dialog {
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--accent); border-radius: 0; }
html[data-venue="pixel"] .grid { gap: 20px; }

/* ---------- metrics: label, word, bar and value sit on shared rows, so the bars always line up ---------- */
html[data-style] .metrics { grid-template-rows: repeat(4, auto); row-gap: 0; align-items: end; }
html[data-style] .metric { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 4px; }
html[data-style] .metric .track, html[data-style] .metric .track-gap { margin-top: 2px; align-self: start; }
html[data-style] .m-word { white-space: nowrap; }
html[data-style="board"] .metrics .m-word { font-size: 15px; letter-spacing: 0; }
/* Silkscreen is wide: smaller words that may wrap (the shared rows keep the bars level) */
html[data-style="arcade"] .metrics .m-word { font-size: 12px; white-space: normal; }
html[data-style="arcade"] .metrics { gap: 10px; }
html[data-style="arcade"] .metric .m-label, html[data-style="arcade"] .metric .m-num, html[data-style="arcade"] .metric .m-tword { font-size: 10px; letter-spacing: -0.02em; }
html[data-style="arcade"] .metric .m-val:not(.m-word) { font-size: 16px; }

/* ---------- status words (inline --lv is the colour from the person's preferences) ---------- */
html[data-style] .m-word { color: var(--lv, var(--ink)); }
html[data-status="block"] .m-word { display: inline-block; color: var(--ink); background: color-mix(in srgb, var(--lv, var(--ink-2)) 22%, var(--surface));
  border: 2px solid var(--lv, var(--ink-2)); padding: 0 8px; border-radius: var(--radius-sm); }
html[data-status="dot"] .m-word { color: var(--ink); }
html[data-status="dot"] .m-word::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%;
  background: var(--lv, var(--ink-2)); margin-right: 0.35em; vertical-align: 0.12em; }
html[data-style] .m-tword { color: var(--lv, var(--ink-2)); font-weight: 600; }

/* ---------- bars: label and value always sit next to them (see .m-num) ---------- */
html[data-style] .track i { background: var(--lv, var(--accent)); }
html[data-bars="off"] .track { display: none; }
html[data-barstyle="line"] .track { height: 2px; border-radius: 0; background: var(--line); }
html[data-barstyle="line"] .track i { border-radius: 0; }
html[data-barstyle="rounded"] .track { height: 7px; border-radius: 4px; background: var(--surface-2); }
html[data-barstyle="rounded"] .track i { border-radius: 4px; }
html[data-barstyle="thick"] .track { height: 14px; border-radius: 0; background: var(--surface); border: 2px solid var(--ink); }
html[data-barstyle="thick"] .track i { border-radius: 0; }
/* LED and pixel bars are drawn as separate segments */
html[data-barstyle="led"] .track { height: 9px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--surface-2) 0 8px, transparent 8px 10px); }
html[data-barstyle="led"] .track i { border-radius: 0; background: repeating-linear-gradient(90deg, var(--lv, var(--accent)) 0 8px, transparent 8px 10px); }
html[data-barstyle="pixel"] .track { height: 12px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--surface-2) 0 12px, transparent 12px 15px); }
html[data-barstyle="pixel"] .track i { border-radius: 0; background: repeating-linear-gradient(90deg, var(--lv, var(--accent)) 0 12px, transparent 12px 15px); }

/* ---------- textures (Design your own) ---------- */
html[data-texture="grain"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-texture="lines"] body { background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 4px); }

/* ---------- signature touches (switch: Accent touches) ---------- */
.sig { display: none; }
html[data-accents="off"] .sig { display: none !important; }
html[data-style="library"] .sig-masthead, html[data-style="board"] .sig-clock,
html[data-style="stellenbosch"] .sig-leaf, html[data-style="arcade"] .sig-cursor { display: inline-block; }
html[data-style="board"] .sig-flap { display: inline-flex; }
/* the flap letters replace the name on screen; the plain name stays for screen readers */
html[data-style="board"][data-accents="on"] .banner h2 .plain-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Library: calm catalogue ---------- */
html[data-style="library"] .top { border-bottom: 3px double var(--ink); padding-bottom: 10px; }
html[data-style="library"] .card:not(.ad-card) { border-top-style: dotted; border-top-color: var(--ink-2); }
html[data-style="library"] .grid { border-top: 3px double var(--ink); }
html[data-style="library"] .m-word { font-style: italic; font-weight: 500; }
html[data-style="library"] .banner { background: transparent; color: var(--ink); border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 18px 0; }
html[data-style="library"] .banner .eyebrow { font-style: italic; color: var(--ink-2); }
html[data-style="library"] .banner p, html[data-style="library"] .banner .big span { color: var(--ink-2); }
html[data-style="library"] .banner h2 { font-size: 30px; font-weight: 500; }
html[data-style="library"] .banner .btn { color: var(--ink); border-color: var(--ink); }
html[data-style="library"] .chip-btn, html[data-style="library"] .chip { border: 0; border-bottom: 1px solid transparent; background: none; padding: 4px 2px; border-radius: 0; }
html[data-style="library"] .chip-btn[aria-pressed="true"], html[data-style="library"] .chip[aria-pressed="true"] { background: none; color: var(--ink); border-bottom-color: var(--ink); font-style: italic; }
html[data-style="library"] .pill.score { background: none; color: var(--accent); font-size: 15px; padding: 0; }
html[data-style="library"] .tag { background: none; padding: 0; font-style: italic; }
html[data-style="library"] .tags { gap: 4px 12px; }
.sig-masthead { font-size: 12px; letter-spacing: 0.08em; color: var(--ink-2); }

/* ---------- Departure board: live and glanceable ---------- */
html[data-style="board"] body { font-size: 13.5px; }
html[data-style="board"] .card:not(.ad-card) { border-top-color: var(--line); }
html[data-style="board"] .card-head h2 { font-size: 16px; font-weight: 500; }
html[data-style="board"] .m-word { font: 700 17px/1.25 var(--font-data); letter-spacing: 0.04em; }
html[data-style="board"] .banner { border-radius: 0; }
html[data-style="board"] .chip-btn, html[data-style="board"] .chip { border-radius: 0; }
html[data-style="board"] .chip-btn[aria-pressed="true"], html[data-style="board"] .chip[aria-pressed="true"], html[data-style="board"] .chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html[data-style="board"] .pill { border-radius: 0; }
html[data-style="board"] .tag { border-radius: 0; }
.sig-clock { font: 500 13px/1 var(--font-data); color: var(--banner-dim); letter-spacing: 0.06em; }
.sig-flap { gap: 4px 12px; flex-wrap: wrap; }
.sig-flap .w { display: inline-flex; gap: 2px; white-space: nowrap; }
.sig-flap .w span { display: inline-block; min-width: 0.85em; text-align: center; padding: 3px 2px; background: color-mix(in srgb, var(--banner-ink) 14%, var(--banner)); }
html[data-style="board"][data-motion="on"] .sig-flap.flip .w span { animation: ssf-flap 0.5s steps(3) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes ssf-flap { 0% { transform: scaleY(0.1); } 100% { transform: none; } }

/* ---------- Bold: a console menu. Rounded tiles, the best pick shown as the selected tile, one bold colour ---------- */
html[data-style="bold"] body { font-size: 14.5px; }
html[data-style="bold"] h1, html[data-style="bold"] h2, html[data-style="bold"] h3 { font-weight: 800; letter-spacing: -0.01em; }
html[data-style="bold"] .btn { border: 2px solid var(--line); background: var(--surface); font-weight: 600; }
html[data-style="bold"] .btn:hover { border-color: var(--accent); }
html[data-style="bold"] .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html[data-style="bold"] .chip-btn, html[data-style="bold"] .chip { border: 2px solid var(--line); background: var(--surface); font-weight: 600; }
html[data-style="bold"] .chip-btn[aria-pressed="true"], html[data-style="bold"] .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
html[data-style="bold"] .banner { border: 0; padding: 20px 22px; }
html[data-style="bold"] .banner h2 { font-size: 28px; }
html[data-style="bold"] .banner .btn { background: transparent; border-color: var(--banner-dim); color: var(--banner-ink); }
html[data-style="bold"] .card-head h2 { font-size: 18px; }
html[data-style="bold"] .m-word { font: 800 17px/1.25 var(--font-body); }
html[data-style="bold"] .pill { border-radius: 8px; font-weight: 700; }
html[data-style="bold"] .tag { border-radius: 8px; }

/* ---------- Stellenbosch: warm and local ---------- */
html[data-style="stellenbosch"] .card:not(.ad-card) { border-top: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
html[data-style="stellenbosch"] .banner h2 { font-weight: 600; }
html[data-style="stellenbosch"] .m-word { font-family: var(--font-display); font-weight: 600; }
html[data-style="stellenbosch"] .chip-btn[aria-pressed="true"], html[data-style="stellenbosch"] .chip[aria-pressed="true"] { background: var(--accent); }
.sig-leaf { width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; fill: currentColor; color: var(--banner-dim); }

/* ---------- Arcade: an 8-bit cabinet. Black screen, white pixel borders, one blue, yellow for the best pick ---------- */
html[data-style="arcade"] body { font-size: 14px; line-height: 1.45; }
html[data-style="arcade"] .top h1 { font-size: 17px; line-height: 1.5; }
html[data-style="arcade"] h2, html[data-style="arcade"] .card-head h2 { font-size: 12px; line-height: 1.6; }
html[data-style="arcade"] .detail-head h2 { font-size: 16px; }
html[data-style="arcade"] h3 { font-size: 11px; line-height: 1.6; }
html[data-style="arcade"] .btn, html[data-style="arcade"] .chip-btn, html[data-style="arcade"] .chip { border: 2px solid var(--ink); background: var(--bg); box-shadow: 3px 3px 0 var(--accent); }
/* the main action keeps its fill so its text stays readable */
html[data-style="arcade"] .btn.primary { background: var(--accent); color: var(--accent-ink); }
html[data-style="arcade"] .btn:active, html[data-style="arcade"] .chip-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--accent); }
html[data-style="arcade"] .chip-btn[aria-pressed="true"], html[data-style="arcade"] .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
html[data-style="arcade"] .banner { background: var(--banner); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--accent); }
html[data-style="arcade"] .banner h2 { font-size: 14px; line-height: 1.7; color: var(--banner-ink); }
html[data-style="arcade"] .banner p, html[data-style="arcade"] .banner .eyebrow, html[data-style="arcade"] .banner .big span { color: var(--banner-dim); }
html[data-style="arcade"] .banner .big b { color: var(--banner-ink); }
html[data-style="arcade"] .banner .btn { color: var(--ink); }
html[data-style="arcade"] .m-word { font-weight: 700; line-height: 1.3; font-family: var(--font-body); }
html[data-style="arcade"] .pill, html[data-style="arcade"] .tag { border: 2px solid currentColor; background: transparent; }
.sig-cursor { width: 0.6em; height: 1em; margin-left: 6px; vertical-align: -0.1em; background: currentColor; }
html[data-style="arcade"][data-motion="on"] .sig-cursor { animation: ssf-blink 1.1s steps(1) infinite; }
@keyframes ssf-blink { 50% { opacity: 0; } }

/* ---------- Minimal: white cards with thin outlines, soft corners, black buttons, no decoration ---------- */
html[data-style="minimal"] { --radius: 12px; --radius-sm: 8px; }
html[data-style="minimal"] h1, html[data-style="minimal"] h2, html[data-style="minimal"] h3 { font-weight: 600; letter-spacing: -0.02em; }
html[data-style="minimal"] .card:not(.ad-card), html[data-style="minimal"] .panel { border-width: 1px; }
html[data-style="minimal"] .top { padding-bottom: 6px; }
html[data-style="minimal"] .btn { background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink-2) 72%, var(--surface)); font-weight: 500; }
html[data-style="minimal"] .btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html[data-style="minimal"] .chip-btn, html[data-style="minimal"] .chip, html[data-style="minimal"] input, html[data-style="minimal"] select { background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink-2) 72%, var(--surface)); }
html[data-style="minimal"] .chip-btn[aria-pressed="true"], html[data-style="minimal"] .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html[data-style="minimal"] .banner { border-radius: 16px; }
html[data-style="minimal"] .pill.score { background: var(--surface-2); color: var(--ink); }
html[data-style="minimal"] .m-word { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
html[data-style="minimal"][data-barstyle="rounded"] .track { height: 6px; }

/* ---------- motion off: nothing moves (also when the device asks for less motion) ---------- */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Appearance dialog (also shown inside the Settings page) ---------- */
.ssf-inline .ssf-title, .ssf-inline [data-ssf-done] { display: none; }
.ssf-inline .ssf-hint:first-of-type { margin-top: 0; }
.ssf-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; padding: 20px; border: var(--bw) solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink); font-family: var(--font-body); }
html[data-venue="pixel"] .ssf-dialog, html[data-venue="boxed"] .ssf-dialog { border: 3px solid var(--ink); }
.ssf-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.ssf-title { font: 600 20px/1.2 var(--font-display); margin: 0; }
.ssf-hint { margin: 4px 0 0; color: var(--ink-2); font-size: 13px; }
.ssf-sec { margin-top: 18px; }
.ssf-h { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.ssf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ssf-row, .ssf-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ssf-actions { justify-content: flex-end; margin-top: 20px; }
.ssf-opt { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; }
/* the wide pixel font of 8-bit needs smaller text and wider cards in the menu */
html[data-style="arcade"] .ssf-dialog { font-size: 11px; }
html[data-style="arcade"] .ssf-grid, html[data-style="arcade"] .ssf-checks { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ssf-opt span { min-width: 0; }
.ssf-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.ssf-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ssf-sw { position: relative; flex: none; display: inline-flex; align-items: flex-end; gap: 2px; padding: 3px; width: 34px; height: 24px; border: 1px solid; }
.ssf-sw b { display: block; flex: 1; height: 8px; }
.ssf-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ssf-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ssf-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.ssf-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ssf-colors { display: flex; gap: 14px; margin-top: 10px; }
.ssf-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.ssf-field select { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; }
.ssf-field input[type="color"] { width: 48px; height: 34px; padding: 0; border: 1px solid var(--line); background: none; }

/* small icons drawn in the text colour: a line version, and a pixel version for 8-bit and the board */
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; }
.ico[data-kind="line"] path[stroke] { stroke-width: 1.5; }
html[data-style="library"] .ico[data-kind="line"] path[stroke] { stroke-width: 1.2; }
html[data-style="bold"] .ico[data-kind="line"] path[stroke] { stroke-width: 2.2; }
.ico[data-kind="pixel"] { display: none; width: 0.85em; height: 0.85em; vertical-align: -0.08em; }
html[data-style="arcade"] .ico[data-kind="pixel"], html[data-style="board"] .ico[data-kind="pixel"] { display: inline-block; }
html[data-style="arcade"] .ico[data-kind="line"], html[data-style="board"] .ico[data-kind="line"] { display: none; }

/* Text fields and dropdowns: a line to write on, in the page's own font (every page and every style). The line turns
 to the accent colour while typing. Checkboxes and colour pickers keep their own look. */
html[data-style] :is(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input:not([type]), textarea, select) {
  font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-2); border-radius: 0;
  padding: 8px 2px; box-shadow: none; width: 100%;
}
html[data-style] :is(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input:not([type]), textarea, select):focus {
  outline: none; border-bottom: 2px solid var(--accent); padding-bottom: 7px;
}
html[data-style] textarea { resize: vertical; }
html[data-style] select { cursor: pointer; padding-right: 22px; }
/* the open list of a dropdown is drawn by the phone: give it the page's colours so the text stays readable */
html[data-style] select option { background: var(--surface); color: var(--ink); }