/* EXSA v1.0 — Copyright (c) 2026 Saif. See LICENSE.
   5 @layers: tokens → reset → layout → elements → components
   Themes & user CSS are unlayered — always win. Cheatsheet: docs/README.md */

/* ── Layer order ── */
@layer exsa.tokens, exsa.reset, exsa.layout, exsa.elements, exsa.components;

@layer exsa.tokens {

:root {
  color-scheme:light dark;
  --color-bg:#fff;--color-bg-secondary:#e9e9e9;--color-text:#000;--color-text-secondary:#757575;
  --color-link:#118bee;--color-secondary:#920de9;--color-secondary-accent:#920de90b;
  --color-accent:#118bee15;--color-shadow:#f4f4f4;--color-scrollbar:#cacae8;--color-table:#118bee;
  --color-success:#16a34a;--color-success-hover:#15803d;--color-danger:#dc2626;
  --color-danger-hover:#b91c1c;--color-warning:#d97706;--color-warning-hover:#b45309;
  --font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  --line-height:1.5;--border-radius:5px;--box-shadow:2px 2px 10px;
  --hover-brightness:1.2;--active-brightness:0.85;
  --justify-important:center;--justify-normal:start;
  --width-card:285px;--width-card-medium:460px;--width-card-wide:800px;--width-content:1080px;
  --gap-xs:0.25rem;--gap-sm:0.5rem;--gap-md:0.75rem;--gap:1rem;--gap-lg:1.5rem;--gap-xl:2rem;--gap-2xl:3rem;
}

@media (prefers-color-scheme:dark){
:root {
  --color-bg:#333;--color-bg-secondary:#555;--color-text:#f7f7f7;--color-text-secondary:#aaa;
  --color-link:#0097fc;--color-secondary:#e20de9;--color-secondary-accent:#e20de94f;
  --color-accent:#0097fc4f;--color-scrollbar:#555;--color-shadow:#bbbbbb20;--color-table:#0097fc;
  --color-success:#22c55e;--color-success-hover:#16a34a;--color-danger:#ef4444;
  --color-danger-hover:#dc2626;--color-warning:#f59e0b;--color-warning-hover:#d97706;
}}

} /* tokens */

@layer exsa.reset {

*,*::before,*::after{box-sizing:border-box}
:focus-visible{outline:2px solid var(--color-link);outline-offset:2px;border-radius:2px}
:focus:not(:focus-visible){outline:none}
/* Windows High Contrast Mode — use system colors for visibility */
@media(forced-colors:active){
  :focus-visible{outline:2px solid Highlight;outline-offset:2px}
  .sr-only{clip:auto;clip-path:none;position:static!important;width:auto;height:auto}
}
/* High contrast preference — boost borders and text weight */
@media(prefers-contrast:high){
  body{text-shadow:none}
  :where(.exsa a){text-decoration-thickness:2px}
  *,*::before,*::after{border-color:currentColor}
}
@media(prefers-contrast:low){
  /* Low contrast = softer borders, not thinner text */
  *,*::before,*::after{border-color:color-mix(in srgb,currentColor 40%,transparent)}
}
*{scrollbar-width:thin;scrollbar-color:var(--color-scrollbar) transparent}
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background-color:var(--color-scrollbar);border-radius:10px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}:target{animation:none}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
[dir=rtl]{direction:rtl;unicode-bidi:isolate}
[dir=rtl] .slideshow__track{direction:ltr}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-family);line-height:var(--line-height);margin:0;overflow-x:hidden;padding:0}
h1,h2,h3,h4,h5,h6{line-height:var(--line-height);text-wrap:balance;margin:0 0 var(--gap-md)}
img,svg,video{max-width:100%}
figure{margin:0;padding:0}
figure img{max-width:100%}
figure figcaption{color:var(--color-text-secondary)}
[hidden]{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Skip link — hidden until focused, then visible for keyboard users */
.skip-link{position:absolute;top:-100px;left:0;background:var(--color-link);color:#fff;padding:var(--gap-sm) var(--gap);z-index:10000;font-weight:700;border-radius:0 0 var(--border-radius) 0;text-decoration:none;transition:top .15s}
.skip-link:focus{top:0}
/* Anchor target highlight — brief flash when jumping to a section */
:target{scroll-margin-top:80px;animation:exsa-target-flash 1.2s ease-out}
@keyframes exsa-target-flash{0%{background:var(--color-accent)}100%{background:transparent}}

} /* reset */

@layer exsa.layout {

.container{max-width:var(--width-content);margin:0 auto;padding:0 var(--gap)}
.container-sm{max-width:var(--width-card-wide);margin:0 auto;padding:0 var(--gap-sm)}
.container-full{width:100%}
.flex{display:flex}.flex-inline{display:inline-flex}
.flex-col{flex-direction:column}.flex-col-rev{flex-direction:column-reverse}.flex-row-rev{flex-direction:row-reverse}
.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}
.flex-1{flex:1}.flex-auto{flex:0 1 auto}.flex-none{flex:none}
.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}
.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}
.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}
.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}
.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-stretch{align-self:stretch}
.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-center{align-content:center}
.content-between{align-content:space-between}.content-around{align-content:space-around}
.gap-0{gap:0}.gap-xs{gap:var(--gap-xs)}.gap-sm{gap:var(--gap-sm)}.gap-md{gap:var(--gap-md)}.gap{gap:var(--gap)}
.gap-lg{gap:var(--gap-lg)}.gap-xl{gap:var(--gap-xl)}.gap-2xl{gap:var(--gap-2xl)}
.col-1{flex:0 0 100%}.col-2{flex:0 0 calc(50% - var(--gap-sm))}.col-3{flex:0 0 calc(33.333% - var(--gap))}
.col-4{flex:0 0 calc(25% - var(--gap))}.col-5{flex:0 0 calc(20% - var(--gap-sm))}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,1fr)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}
.grid-cols-5{grid-template-columns:repeat(5,1fr)}.grid-cols-6{grid-template-columns:repeat(6,1fr)}
.grid-auto-fit{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid-auto-fill{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
/* Position */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{inset:0}
/* Sizing */
.w-full{width:100%}.h-full{height:100%}
/* Text alignment */
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}
/* Overflow */
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}
/* Order (flex/grid children) */
.order-first{order:-1}.order-last{order:999}
@media(max-width:575px){.col-2,.col-3,.col-4,.col-5{flex:0 0 100%}.sm\:flex-col{flex-direction:column}.sm\:flex-wrap{flex-wrap:wrap}.sm\:grid-cols-1{grid-template-columns:repeat(1,1fr)}.sm\:text-center{text-align:center}}
@media(min-width:768px){.md\:col-2{flex:0 0 calc(50% - var(--gap-sm))}.md\:col-3{flex:0 0 calc(33.333% - var(--gap))}.md\:col-4{flex:0 0 calc(25% - var(--gap))}.md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.md\:grid-cols-4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.lg\:col-2{flex:0 0 calc(50% - var(--gap-sm))}.lg\:col-3{flex:0 0 calc(33.333% - var(--gap))}.lg\:col-4{flex:0 0 calc(25% - var(--gap))}.lg\:col-5{flex:0 0 calc(20% - var(--gap-sm))}.lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.lg\:grid-cols-4{grid-template-columns:repeat(4,1fr)}.lg\:grid-cols-5{grid-template-columns:repeat(5,1fr)}.lg\:grid-cols-6{grid-template-columns:repeat(6,1fr)}}

} /* layout */

@layer exsa.elements {

:where(.exsa p){margin:var(--gap-md) 0;padding:0}
:where(.exsa a){color:var(--color-link);font-weight:bold;text-decoration:underline}
:where(.exsa a:visited),:where(.exsa area:visited){color:var(--color-secondary)}
:where(.exsa a:hover){filter:brightness(var(--hover-brightness))}
:where(.exsa a:active){filter:brightness(var(--active-brightness))}
:where(.exsa small){color:var(--color-text-secondary)}
:where(.exsa mark){padding:.1rem}
:where(.exsa sup){background-color:var(--color-secondary);border-radius:var(--border-radius);color:var(--color-bg);font-size:xx-small;font-weight:bold;margin:.2rem;padding:.2rem .3rem;position:relative;top:-2px}
:where(.exsa code),:where(.exsa samp){background-color:var(--color-accent);border-radius:var(--border-radius);color:var(--color-text);display:inline-block;margin:0 .1rem;padding:0 var(--gap-sm)}
:where(.exsa pre){margin:var(--gap) 0;max-width:var(--width-card-wide);padding:var(--gap);overflow:auto}
:where(.exsa pre code),:where(.exsa pre samp){display:block;max-width:var(--width-card-wide);padding:var(--gap-sm) var(--gap-xl);white-space:pre-wrap}
:where(.exsa ol li),:where(.exsa ul li){padding:0}
:where(.exsa hr){background-color:var(--color-bg-secondary);border:none;height:1px;margin:var(--gap-2xl) 0;width:100%}
:where(.exsa details){margin:var(--gap) 0}
:where(.exsa details summary){font-weight:bold;cursor:pointer}
/* Structural containers — guarded so classed elements are left alone */
:where(.exsa header:not([class])),:where(.exsa main:not([class])),:where(.exsa footer:not([class])){margin:0 auto;max-width:var(--width-content);padding:var(--gap-2xl) var(--gap)}
:where(.exsa article header),:where(.exsa div header),:where(.exsa main header){padding-top:0}
:where(.exsa header:not([class])){text-align:var(--justify-important)}
:where(.exsa header:not([class]) nav img){margin:var(--gap) 0}
/* Section layout — container queries work on ANY section (classed or not) */
:where(.exsa section){container-type:inline-size}
:where(.exsa section:not([class])){display:flex;flex-wrap:wrap;justify-content:var(--justify-important)}
:where(.exsa section header){padding-top:0;width:100%}
:where(.exsa section img),:where(.exsa article img){max-width:100%}
:where(.exsa section pre){overflow:auto}
:where(.exsa section aside){border:1px solid var(--color-bg-secondary);border-radius:var(--border-radius);box-shadow:var(--box-shadow) var(--color-shadow);margin:var(--gap);padding:var(--gap-lg);width:var(--width-card)}
:where(.exsa section aside:hover){box-shadow:var(--box-shadow) var(--color-bg-secondary)}
@container(max-width:320px){:where(.exsa section aside){margin:var(--gap-sm);padding:var(--gap-md);width:auto}}
@container(min-width:500px){:where(.exsa section aside){padding:var(--gap-lg)}}
:where(.exsa article>aside){background:var(--color-secondary-accent);border-inline-start:4px solid var(--color-secondary);padding:0 var(--gap-sm)}
:where(.exsa article>aside a){color:var(--color-secondary)}
:where(.exsa nav){align-items:center;display:flex;font-weight:bold;justify-content:space-between;margin-bottom:var(--gap-xl)}
:where(.exsa nav ul){list-style:none;padding:0}
:where(.exsa nav ul li){display:inline-block;margin:0 var(--gap-sm);position:relative;text-align:start}
:where(.exsa nav ul li:hover ul),:where(.exsa nav ul li:focus-within ul){display:block}
:where(.exsa nav ul li ul){background:var(--color-bg);border:1px solid var(--color-bg-secondary);border-radius:var(--border-radius);box-shadow:var(--box-shadow) var(--color-shadow);display:none;height:auto;inset-inline-start:-2px;padding:var(--gap-sm) var(--gap);position:absolute;top:1.7rem;white-space:nowrap;width:auto;z-index:1}
:where(.exsa nav ul li ul::before){content:"";position:absolute;inset-inline:0;top:calc(var(--gap-sm) * -1);height:var(--gap-sm)}
:where(.exsa nav ul li ul li),:where(.exsa nav ul li ul li a){display:block}
@media(max-width:768px){:where(.exsa nav){flex-wrap:wrap}:where(.exsa nav ul li){width:calc(100% - 1em)}:where(.exsa nav ul li ul){border:none;box-shadow:none;display:none;position:static}:where(.exsa nav ul li:focus-within>ul){display:block}}

} /* elements */

/* ── Component blueprints: link components/form-base.css for form/table/blockquote/dialog classless styles ── */