/* Atelier — the portal as an artist's exhibition catalogue.
   A near-black gallery wall under a moving film grain, warm bone-white Geist type, and almost no boxes: content sits
   on hairline rules like a catalogue spread. Tiny letter-spaced capitals label everything ("YEAR", "VENUE"), values
   sit opposite on the same rule, titles are set in quiet capitals, and every section is numbered ("01 — Live
   Data"). The menu spreads evenly across the top, the open item lit and the rest dimmed. Stardust — clouds of tiny
   coloured particles — drifts in the corners and scatters from the cursor (theme-atelier.js, one canvas). Pages
   come up out of the dark. Light mode hangs the same catalogue on a bone-white wall. Motion is transform/opacity
   only and stops under prefers-reduced-motion. */

/* ---------- Palette ---------- */
html[data-theme="atelier"] {
  color-scheme: dark;
  --at-wall: #0a0a0a; --at-bone: #f4eee8; --at-dim: #aaa39d; --at-hair: rgba(236, 228, 222, .24); --at-hair-2: rgba(236, 228, 222, .4);
  --at-ember: #ff7a45; --at-gold: #e9c27d;
  --tint: #ece4de; --accent: #ece4de; --accent-2: #ff7a45; --accent-3: #e9c27d;
  --font: "Geist", "Inter", system-ui, sans-serif;
  --at-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --bg: #0a0a0a; --panel: #0e0e0e; --panel-2: #141414; --border: rgba(236, 228, 222, .14);
  --text: #f4eee8; --muted: #aaa39d; --input-bg: #0e0e0e; --link: #ece4de;
  --green: #9fd39a; --red: #ff6b5b; --amber: #e9c27d; --orange: #ff7a45;
  --radius: 0px; --radius-btn: 999px; --radius-input: 0px;
  --surface: transparent; --surface-border-color: rgba(236, 228, 222, .14);
  --grad-brand: linear-gradient(90deg, #ece4de, #ece4de);
  --grad-primary: linear-gradient(#ece4de, #ece4de); --grad-primary-hover: linear-gradient(#ffffff, #ffffff);
  --grad-success: linear-gradient(#9fd39a, #9fd39a); --grad-danger: linear-gradient(#ff6b5b, #ff6b5b);
  --grad-warn: linear-gradient(#e9c27d, #e9c27d); --grad-info: linear-gradient(#8a8a8a, #8a8a8a);
  --btn-soft: transparent; --btn-soft-hover: rgba(236, 228, 222, .07);
  --app-bg: #0a0a0a;
  --elev: none; --shadow: none; --shadow-glow: none;
  --glow1: transparent; --glow2: transparent; --glow-blend: normal;
  --at-ease: cubic-bezier(.16, 1, .3, 1);
  --at-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html[data-theme="atelier"][data-mode="light"] {
  color-scheme: light;
  --at-wall: #ece4de; --at-bone: #0f0d0b; --at-dim: #57524e; --at-hair: rgba(20, 18, 16, .26); --at-hair-2: rgba(20, 18, 16, .42);
  --tint: #141210; --accent: #141210; --link: #141210;
  --bg: #ece4de; --panel: #efe8e2; --panel-2: #e4dbd4; --border: rgba(20, 18, 16, .16);
  --text: #141210; --muted: #6f6a66; --input-bg: #f3ede8;
  --green: #2f7a3a; --red: #c43a2b; --amber: #9a6a14; --orange: #c4521f;
  --surface-border-color: rgba(20, 18, 16, .16);
  --grad-primary: linear-gradient(#141210, #141210); --grad-primary-hover: linear-gradient(#000, #000);
  --btn-soft-hover: rgba(20, 18, 16, .06);
  --app-bg: #ece4de;
}

/* ---------- Motion vocabulary ---------- */
@keyframes at-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-42px, 28px); } 40% { transform: translate(36px, -54px); }
  60% { transform: translate(-24px, 62px); } 80% { transform: translate(58px, 14px); } 100% { transform: translate(0, 0); } }
@keyframes at-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes at-dawn { from { opacity: 0; } }

/* ---------- The wall: near-black, a moving grain over everything ---------- */
html[data-theme="atelier"][data-mode] body { background: var(--at-wall); color: var(--at-bone); font-family: var(--font); letter-spacing: -.005em; text-rendering: optimizeLegibility; }
html[data-theme="atelier"][data-mode] body::before { content: none; }
html[data-theme="atelier"][data-mode] body::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none; inset: -120px; opacity: .07;   /* under the content: it textures the wall, never the letters */
  background: var(--at-grain); mix-blend-mode: normal; will-change: transform;
  animation: at-grain .9s steps(5) infinite;
}
html[data-theme="atelier"][data-mode="light"] body::after { opacity: .12; filter: invert(1); }
html[data-theme="atelier"][data-mode] :is(#app-view, #login-view, #modal-root) { position: relative; z-index: 1; }
html[data-theme="atelier"][data-mode] ::selection { background: var(--at-bone); color: var(--at-wall); }
html[data-theme="atelier"][data-mode] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="atelier"][data-mode] ::-webkit-scrollbar-thumb { background: var(--at-hair-2); }
html[data-theme="atelier"][data-mode] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="atelier"][data-mode] #app-view { animation: at-dawn 1.1s var(--at-ease); }

/* ---------- Header: the name, then the menu spread evenly across the top ---------- */
html[data-theme="atelier"][data-mode] .topbar {
  background: color-mix(in srgb, var(--at-wall) 92%, transparent); border-bottom: 0; box-shadow: none;
  font: 500 16px var(--font); color: var(--at-bone);
}
html[data-theme="atelier"][data-mode] .brand { font: 500 16px var(--font); letter-spacing: -.01em; color: var(--at-bone); background: none; -webkit-text-fill-color: currentColor; }
html[data-theme="atelier"][data-mode] .brand::before { content: none; }
html[data-theme="atelier"][data-mode] .brand img, html[data-theme="atelier"][data-mode] .brand svg { display: none; }
html[data-theme="atelier"][data-mode] :is(.crumb, .crumb-back) { font: 500 16px var(--font); color: var(--at-dim); background: none; border: 0; border-radius: 0; padding: 0 2px; transition: color .3s; }
html[data-theme="atelier"][data-mode] :is(.crumb, .crumb-back):hover { color: var(--at-bone); }
html[data-theme="atelier"][data-mode] .crumb.current { color: var(--at-bone); background: none; }
html[data-theme="atelier"][data-mode] .topbar :is(button, .btn) { font: 500 16px var(--font) !important; color: var(--at-dim) !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html[data-theme="atelier"][data-mode] .topbar :is(button, .btn):hover { color: var(--at-bone) !important; }
html[data-theme="atelier"][data-mode] .at-clock { margin-left: auto; font: 400 11px var(--at-mono); letter-spacing: .25em; text-transform: uppercase; color: var(--at-dim); white-space: nowrap; }
@media (max-width: 760px) { html[data-theme="atelier"][data-mode] .at-clock { display: none; } }

/* ---------- Type: quiet capitals for titles, tiny spaced capitals for labels ---------- */
html[data-theme="atelier"][data-mode] :is(h1, h2, h3, h4) { font-family: var(--font); font-weight: 500; letter-spacing: -.01em; color: var(--at-bone); }
html[data-theme="atelier"][data-mode] .section-head h2 { font-size: clamp(24px, 2.2vw, 30px); text-transform: uppercase; letter-spacing: -.01em; font-weight: 500; }
/* every page title is numbered like a catalogue entry: "SECTION (01)" */
html[data-theme="atelier"][data-mode] #content { counter-reset: at-sec; }
html[data-theme="atelier"][data-mode] .section-head h2::before {
  counter-increment: at-sec; content: "Section (" counter(at-sec, decimal-leading-zero) ")"; display: block; margin-bottom: 8px;
  font: 500 11.5px var(--font); letter-spacing: .2em; color: var(--at-dim); text-transform: uppercase;
}
html[data-theme="atelier"][data-mode] :is(.stat .label, .sc-bal-label, table thead th, .ov-l, label, .label, .sc-flag-l) {
  font: 500 11.5px var(--font) !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--at-dim);
}
html[data-theme="atelier"][data-mode] :is(.muted, .small.muted) { color: var(--at-dim); }
html[data-theme="atelier"][data-mode] :is(.stat .value, .sc-bal-num, td, .num, .money) { font-variant-numeric: tabular-nums; }
html[data-theme="atelier"][data-mode] a { color: var(--at-bone); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--at-ease); }
html[data-theme="atelier"][data-mode] a:hover { background-size: 100% 1px; }

/* ---------- Surfaces: no boxes — content on hairline rules ---------- */
html[data-theme="atelier"][data-mode] .card {
  background: transparent; border: 0; border-top: 1px solid var(--at-hair); border-radius: 0; box-shadow: none;
  padding: 18px 0 22px; animation: at-rise .9s var(--at-ease) backwards;
}
html[data-theme="atelier"][data-mode] .card::before { content: none; }
html[data-theme="atelier"][data-mode] .card h3 { font-size: 13px; letter-spacing: .25em; text-transform: uppercase; font-weight: 400; color: var(--at-dim); margin-bottom: 14px; }
html[data-theme="atelier"][data-mode] .stats { gap: 0 !important; border-top: 1px solid var(--at-hair); }
html[data-theme="atelier"][data-mode] .stat {
  background: transparent; border: 0; border-bottom: 1px solid var(--at-hair); border-radius: 0; box-shadow: none; padding: 14px 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
html[data-theme="atelier"][data-mode] .stat .value { font: 500 16px var(--font); color: var(--at-bone); text-align: right; }

/* ---------- Controls: text-like buttons, the primary one a bone pill ---------- */
html[data-theme="atelier"][data-mode] .btn {
  font: 500 13px var(--font); letter-spacing: 0; border-radius: 999px; background: transparent; color: var(--at-bone);
  border: 1px solid var(--at-hair-2); box-shadow: none; padding: 7px 16px; transition: background-color .3s, color .3s, border-color .3s;
}
html[data-theme="atelier"][data-mode] .btn:hover { background: var(--at-bone); color: var(--at-wall); border-color: var(--at-bone); }
html[data-theme="atelier"][data-mode] .btn.primary { background: var(--at-bone); color: var(--at-wall); border-color: var(--at-bone); }
html[data-theme="atelier"][data-mode] .btn.primary:hover { background: transparent; color: var(--at-bone); }
html[data-theme="atelier"][data-mode] .btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); }
html[data-theme="atelier"][data-mode] .btn.danger:hover { background: var(--red); color: var(--at-wall); }
html[data-theme="atelier"][data-mode] :is(input, select, textarea) {
  background: transparent; border: 0; border-bottom: 1px solid var(--at-hair-2); border-radius: 0; color: var(--at-bone);
  font: 400 15px var(--font); box-shadow: none; transition: border-color .3s;
}
html[data-theme="atelier"][data-mode] :is(input, select, textarea):focus { outline: none; border-bottom-color: var(--at-bone); }
html[data-theme="atelier"][data-mode] :is(.chip, .badge, .sc-badge, .sc-owed, .sc-flag, .gp) {
  border-radius: 999px; background: transparent; border: 1px solid var(--at-hair-2); color: var(--at-bone); box-shadow: none;
  font: 500 11.5px var(--font); letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- Tables: catalogue rows ---------- */
html[data-theme="atelier"][data-mode] table { border-collapse: collapse; }
html[data-theme="atelier"][data-mode] table thead th { border-bottom: 1px solid var(--at-hair-2); background: transparent; padding: 10px 12px 10px 0; }
html[data-theme="atelier"][data-mode] table tbody td { border-bottom: 1px solid var(--at-hair); background: transparent; padding: 12px 12px 12px 0; font-size: 14.5px; color: var(--at-bone); }
html[data-theme="atelier"][data-mode] table tbody tr { transition: opacity .3s; }
html[data-theme="atelier"][data-mode] table tbody:hover tr { opacity: .72; }
html[data-theme="atelier"][data-mode] table tbody tr:hover { opacity: 1; }

/* ---------- Dashboard: each station is an exhibition entry ---------- */
html[data-theme="atelier"][data-mode] .station-grid { counter-reset: at-st; gap: 0 48px !important; }
html[data-theme="atelier"][data-mode] .station-grid > .station-card { counter-increment: at-st; padding: 22px 0 26px; }
html[data-theme="atelier"][data-mode] .station-grid > .station-card:nth-child(2) { animation-delay: .1s; }
html[data-theme="atelier"][data-mode] .station-grid > .station-card:nth-child(n+3) { animation-delay: .2s; }
html[data-theme="atelier"][data-mode] .station-card .sc-head { display: block; position: relative; }
html[data-theme="atelier"][data-mode] .station-card .sc-head::before {
  content: "Station (" counter(at-st, decimal-leading-zero) ")"; display: block; margin-bottom: 8px;
  font: 500 11.5px var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--at-dim);
}
html[data-theme="atelier"][data-mode] .station-card h3 { font: 500 clamp(24px, 2.4vw, 30px) var(--font); letter-spacing: -.01em; text-transform: uppercase; color: var(--at-bone); margin: 0 0 4px; }
html[data-theme="atelier"][data-mode] .station-card .meta { font: 400 14.5px var(--font); color: var(--at-dim); }
html[data-theme="atelier"][data-mode] .station-card .sc-tags { display: flex; gap: 8px; margin-top: 12px; }
html[data-theme="atelier"][data-mode] .station-card .sc-balance.sc-live { background: transparent; border: 0; padding: 0; margin-top: 18px; display: flex; flex-direction: column; }
/* figures as catalogue rows: label left, value right, on hairlines */
html[data-theme="atelier"][data-mode] .station-card :is(.sc-stat, .sc-cash-box) {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; padding: 12px 0; margin: 0;
  border: 0; border-top: 1px solid var(--at-hair); border-radius: 0; background: transparent !important; box-shadow: none;
}
html[data-theme="atelier"][data-mode] .station-card .sc-stat .sc-bal-label { grid-column: 1; grid-row: 1; margin: 0; }
html[data-theme="atelier"][data-mode] .station-card .sc-stat .sc-bal-num { grid-column: 2; grid-row: 1; font: 500 16px var(--font) !important; color: var(--at-bone); text-align: right; }
html[data-theme="atelier"][data-mode] .station-card .sc-bal-suffix { font: 400 13px var(--font); color: var(--at-dim); margin-left: 4px; }
html[data-theme="atelier"][data-mode] .station-card .sc-stat .sc-spark { grid-column: 1 / -1; width: 100%; height: 18px; margin-top: 4px; }
html[data-theme="atelier"][data-mode] .station-card .sc-spark rect { fill: var(--at-hair-2); }
html[data-theme="atelier"][data-mode] .station-card .sc-spark rect.now { fill: var(--at-ember); }
html[data-theme="atelier"][data-mode] .station-card .sc-cash { display: contents; }
html[data-theme="atelier"][data-mode] .station-card .sc-cash-box .sc-cash-l { grid-column: 1; grid-row: 1; margin: 0; }
html[data-theme="atelier"][data-mode] .station-card .sc-cash-box .sc-cash-v { grid-column: 2; grid-row: 1; font: 500 16px var(--font) !important; color: var(--at-bone) !important; text-align: right; }
html[data-theme="atelier"][data-mode] .station-card .sc-cash-box .sc-cash-s { grid-column: 1 / -1; font: 400 13px var(--font) !important; letter-spacing: 0 !important; text-transform: none; color: var(--at-dim); }
html[data-theme="atelier"][data-mode] .station-card .sc-cash-box.now .sc-cash-l::after { content: " ●"; color: var(--at-ember); letter-spacing: 0; }
html[data-theme="atelier"][data-mode] .station-card .sc-flags { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0; border-top: 1px solid var(--at-hair); }
html[data-theme="atelier"][data-mode] .station-card .sc-flag .sc-bal-label { font: inherit !important; letter-spacing: inherit !important; color: inherit; }
html[data-theme="atelier"][data-mode] .station-card .sc-flag.hot { background: var(--at-ember); border-color: var(--at-ember); color: #0a0a0a; }
html[data-theme="atelier"][data-mode] .station-card .sc-day { padding-top: 12px; border-top: 1px solid var(--at-hair); font: 400 13px var(--font); color: var(--at-dim); }
html[data-theme="atelier"][data-mode] .station-card .sc-prices { margin-top: 12px; }
html[data-theme="atelier"][data-mode] .station-card .ov-row { border-color: var(--at-hair); }
html[data-theme="atelier"][data-mode] .sc-live .sc-bal-num.sc-tick { animation: at-dawn .9s var(--at-ease); }

/* ---------- Station cards come alive under the cursor ----------
   At rest the entry is quiet (rows a little dimmed). Pointing at it: a bone rule draws across its top, a warm
   spotlight follows the cursor (--at-mx/--at-my, theme-atelier.js), the title slides over and an "Open" cue
   appears, the number warms to ember, the rows light up and the hour bars rise one after another. Stardust
   sparks around its edges as the cursor enters (theme-atelier.js). */
@keyframes at-bar { from { transform: scaleY(.15); } }
html[data-theme="atelier"][data-mode] .station-grid > .station-card { position: relative; overflow: hidden; cursor: pointer; isolation: isolate; }
html[data-theme="atelier"][data-mode] .station-grid > .station-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--at-bone);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--at-ease); pointer-events: none;
}
html[data-theme="atelier"][data-mode] .station-grid > .station-card::before {
  content: ""; display: block; position: absolute; left: -180px; top: -180px; width: 360px; height: 360px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 150, 90, .13), rgba(255, 122, 69, .04) 55%, transparent); pointer-events: none;
  opacity: 0; transform: translate(var(--at-mx, 50%), var(--at-my, 50%)); transition: opacity .6s;
}
html[data-theme="atelier"][data-mode="light"] .station-grid > .station-card::before { background: radial-gradient(closest-side, rgba(196, 82, 31, .12), transparent); }
html[data-theme="atelier"][data-mode] .station-grid > .station-card:hover::after { transform: scaleX(1); }
html[data-theme="atelier"][data-mode] .station-grid > .station-card:hover::before { opacity: 1; }
html[data-theme="atelier"][data-mode] .station-card .sc-head::before { transition: color .5s; }
html[data-theme="atelier"][data-mode] .station-card:hover .sc-head::before { color: var(--at-ember); }
html[data-theme="atelier"][data-mode] .station-card h3 { display: inline-block; transition: transform .8s var(--at-ease); }
html[data-theme="atelier"][data-mode] .station-card:hover h3 { transform: translateX(10px); }
html[data-theme="atelier"][data-mode] .station-card .sc-head > div::after {
  content: "Open →"; position: absolute; right: 0; top: 0; font: 400 11px var(--font); letter-spacing: .25em; text-transform: uppercase; color: var(--at-bone);
  opacity: 0; transform: translateX(-12px); transition: opacity .5s, transform .8s var(--at-ease);
}
html[data-theme="atelier"][data-mode] .station-card:hover .sc-head > div::after { opacity: 1; transform: none; }
html[data-theme="atelier"][data-mode] .station-card :is(.sc-stat, .sc-cash-box, .sc-flags, .sc-day, .sc-prices, .sc-rows) { transition: border-color .5s; }
html[data-theme="atelier"][data-mode] .station-card:hover :is(.sc-stat, .sc-cash-box, .sc-flags, .sc-day, .sc-prices, .sc-rows) { border-top-color: var(--at-hair-2); }
html[data-theme="atelier"][data-mode] .station-card .sc-spark rect { transform-box: fill-box; transform-origin: 50% 100%; }
html[data-theme="atelier"][data-mode] .station-card:hover .sc-spark rect { animation: at-bar .7s var(--at-ease) backwards; fill: color-mix(in srgb, var(--at-bone) 45%, transparent); }
html[data-theme="atelier"][data-mode] .station-card:hover .sc-spark rect.now { fill: var(--at-ember); }
html[data-theme="atelier"][data-mode] .station-card:hover .sc-spark rect:nth-child(2n) { animation-delay: .04s; }
html[data-theme="atelier"][data-mode] .station-card:hover .sc-spark rect:nth-child(3n) { animation-delay: .08s; }
html[data-theme="atelier"][data-mode] .station-card:hover .sc-spark rect:nth-child(4n) { animation-delay: .12s; }
html[data-theme="atelier"][data-mode] .station-card:active { opacity: .85; }

/* ---------- Calendar ---------- */
html[data-theme="atelier"][data-mode] .cal .day { background: transparent; border: 0; border-top: 1px solid var(--at-hair); border-radius: 0; box-shadow: none; transition: border-color .3s; }
html[data-theme="atelier"][data-mode] .cal .day:hover { border-top-color: var(--at-bone); }
html[data-theme="atelier"][data-mode] .cal .day .num { font: 400 12px var(--at-mono); color: var(--at-dim); }
html[data-theme="atelier"][data-mode] .cal .day.today { border-top: 2px solid var(--at-ember); }
html[data-theme="atelier"][data-mode] .cal .day.today .num { color: var(--at-ember); }

/* ---------- Pop-ups and sign-in: catalogue sheets out of the dark ---------- */
html[data-theme="atelier"][data-mode] .modal { background: var(--at-wall); border: 1px solid var(--at-hair-2); border-radius: 0; box-shadow: 0 40px 80px -30px #000; transition: opacity .5s var(--at-ease), transform .7s var(--at-ease); }
@starting-style { html[data-theme="atelier"][data-mode] .modal { opacity: 0; transform: translateY(16px); } }
html[data-theme="atelier"][data-mode] .modal-backdrop { background: rgba(10, 10, 10, .72); }
html[data-theme="atelier"][data-mode] .login-card { background: transparent; border: 0; border-top: 1px solid var(--at-hair-2); border-radius: 0; box-shadow: none; animation: at-rise 1.2s var(--at-ease); }

/* ---------- Page entrance: content rises out of the dark, one block after another ---------- */
html[data-theme="atelier"][data-mode] .station-main > * { animation: at-rise .9s var(--at-ease) backwards; }
html[data-theme="atelier"][data-mode] .station-main > :nth-child(2) { animation-delay: .08s; }
html[data-theme="atelier"][data-mode] .station-main > :nth-child(n+3) { animation-delay: .16s; }

/* ---------- Stardust canvas (theme-atelier.js) ---------- */
.at-dust { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }

/* ---------- Own surfaces, not the shared "sculpted forms" layer (see styles.css) ---------- */
html[data-theme="atelier"][data-mode]:root { --form-shadow: none; --form-lit: transparent; --form-shade: transparent; --form-cast: transparent; }
html[data-theme="atelier"][data-mode]:root :is(.card, .stat, .station-card, .add-card, .cal .day:not(.empty)) { transition: border-color .3s, opacity .3s !important; }
html[data-theme="atelier"][data-mode]:root :is(.card, .station-card, .add-card):hover { transform: none !important; }
html[data-theme="atelier"][data-mode]:root .cal .day:not(.empty):hover { transform: none !important; }
html[data-theme="atelier"][data-mode]:root :is(.btn, .tab, .seg button) { box-shadow: none !important; transition: background-color .3s, color .3s, border-color .3s !important; }
html[data-theme="atelier"][data-mode]:root .btn:active { transform: none !important; opacity: .8; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  html[data-theme="atelier"][data-mode] .station-card h3 { font-size: 24px; }
}

/* ---------- Stillness ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="atelier"] *, html[data-theme="atelier"] *::before, html[data-theme="atelier"] *::after { animation: none !important; transition: none !important; }
}


/* ---------- Pointers: this theme's own arrow, and a ring for anything you can press (the shared rule in
   styles.css reads --cur-hand everywhere and keeps the I-beam in text fields) ---------- */
html[data-theme="atelier"] { --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 3 L4 24 L9.6 18.6 L13.6 27 L17.4 25.4 L13.6 17.2 L21 17.2 Z' fill='%23ece4de' stroke='%230a0a0a' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3; }
html[data-theme="atelier"] :is(a, button, .btn, [role="button"], .tab, select, summary, label, .station-card, .add-card, .cal .day:not(.empty), .chip, input[type="checkbox"], input[type="radio"], input[type="range"]) { --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='9' fill='rgba(10,10,10,.35)' stroke='%23ece4de' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='16' r='2.6' fill='%23ff7a45'/%3E%3C/svg%3E") 16 16; }


/* ---------- Selected segment / tab / pill: the theme's pill colour with text that reads on it, in light and dark
   (the shared style puts white text on --grad-primary, which vanishes on a light pill) ---------- */
html[data-theme="atelier"][data-mode] :is(.seg button.active, .tab.active, .pill.active) { background: var(--at-bone); color: var(--at-wall); text-shadow: none; }