/* Tessel colour themes: light / dark, and four accents. Loaded last on every page. */
:root[data-theme][data-accent]{
  --bg:var(--t-bg);--paper:var(--t-card);--ink:var(--t-ink);--muted:var(--t-muted);--line:var(--t-line);--soft:var(--t-alt);--hover:var(--t-alt);--pop:var(--t-card);
  --accent:var(--a);--accent-soft:var(--a-soft);--accent-deep:var(--a-deep);--accent-ink:var(--a-ink);
  --blue:var(--a);--deep:var(--a-deep);--sky:var(--a-soft);--slate:var(--t-muted);--cream:var(--t-band);--j1:var(--a);
  color-scheme:light}
:root[data-theme="light"]{--t-bg:#F5F7FB;--t-card:#FFFFFF;--t-alt:#EDF1F7;--t-band:#F0F4FA;--t-line:#E1E7F0;--t-ink:#161A22;--t-muted:#5B6472;--danger:#B42318;--danger-soft:#FDECEA;--ok:#1d7a46;--ok-soft:#E3F3E9}
:root[data-theme="dark"]{--t-bg:#0D1117;--t-card:#161B24;--t-alt:#1E2531;--t-band:#121823;--t-line:#2A3342;--t-ink:#EEF2F7;--t-muted:#9AA6B8;--danger:#FF8A80;--danger-soft:#3A1F22;--ok:#5fd394;--ok-soft:#14291F;color-scheme:dark}
:root[data-theme="dark"][data-accent]{color-scheme:dark}
:root[data-accent="blue"][data-theme="light"]{--a:#13549D;--a-soft:#E6EEF8;--a-deep:#0C3363;--a-ink:#fff}
:root[data-accent="teal"][data-theme="light"]{--a:#0F7C86;--a-soft:#DFF2F3;--a-deep:#0A555C;--a-ink:#fff}
:root[data-accent="violet"][data-theme="light"]{--a:#6D3FC0;--a-soft:#EEE8FA;--a-deep:#4B2A8C;--a-ink:#fff}
:root[data-accent="amber"][data-theme="light"]{--a:#C2570C;--a-soft:#FCEBDD;--a-deep:#8A3D07;--a-ink:#fff}
:root[data-accent="blue"][data-theme="dark"]{--a:#6EA8F0;--a-soft:#1B2A40;--a-deep:#A8CBF7;--a-ink:#0D1117}
:root[data-accent="teal"][data-theme="dark"]{--a:#4FC7D2;--a-soft:#13303A;--a-deep:#9EE3EA;--a-ink:#0D1117}
:root[data-accent="violet"][data-theme="dark"]{--a:#B79CF0;--a-soft:#2A2145;--a-deep:#D6C6F8;--a-ink:#0D1117}
:root[data-accent="amber"][data-theme="dark"]{--a:#F2A465;--a-soft:#3A2616;--a-deep:#F8CBA2;--a-ink:#0D1117}
/* page-level touches */
:root[data-theme="dark"] .t-top{background:color-mix(in srgb,var(--paper) 88%,transparent)}
:root[data-theme="dark"] .t-brand img,:root[data-theme="dark"] .t-foot img{filter:brightness(1.6)}
:root[data-theme="dark"] .t-sheet{box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.t-sheet{background:var(--accent-soft);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--accent) 40%,transparent)}
.t-hero h1 em{background:linear-gradient(100deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#E7BE43));-webkit-background-clip:text;background-clip:text;color:transparent}
.t-steps div::before{background:var(--gold)!important;color:#161A22!important}
.t-card,.t-feat,.t-plan,.lay-drop,.lay-saved{background:var(--paper)}
/* theme switch in the header */
.t-theme{position:relative;display:flex;gap:6px;align-items:center}
.t-ib{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.t-ib:hover{border-color:var(--accent);color:var(--accent)}
.t-ib svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-pal{position:absolute;right:0;top:46px;z-index:60;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 18px 40px -16px rgba(0,0,0,.35);display:grid;gap:10px;min-width:210px}
.t-pal[hidden]{display:none}.t-pal b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.t-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--alt,var(--t-alt));padding:3px;border-radius:10px}
.t-seg button{border:0;background:none;border-radius:8px;padding:7px 4px;font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
.t-seg button[aria-pressed="true"]{background:var(--paper);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.t-dots{display:flex;gap:10px}.t-dots button{width:30px;height:30px;border-radius:50%;border:3px solid var(--paper);box-shadow:0 0 0 1.5px var(--line);cursor:pointer;padding:0}
.t-dots button[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--accent)}
/* buttons follow the accent everywhere (the studio's own gold gradient is replaced) */
.btn.primary,.btn.primary:hover{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important;box-shadow:0 6px 16px -8px var(--accent)!important;background-image:none!important}
.btn.primary:hover{filter:brightness(1.08)}
/* the header stays above the studio so the theme switch and account are always reachable */
.t-top{z-index:230}
#imp{inset:auto!important;top:var(--hh,64px)!important;left:0!important;right:0!important;bottom:0!important}
.imp-box{height:calc(100dvh - var(--hh,64px))!important}