/* tylersowards.com · aesthetic styles
   The default look (sysop: graphite grounds, bright-sky accent) lives in style.css.
   Each style here is a full token swap keyed off data-style on <html>, with a light
   and a dark set keyed off data-theme. Structural tokens (--r*, --shadow-*) reshape
   geometry; a short list of component overrides carries what tokens cannot.
   Loaded after style.css on purpose: equal-specificity token blocks here win. */

/* ── the picker itself ── */
.stylesel{
  cursor:pointer; -webkit-appearance:none; appearance:none;
  border:1px solid var(--line); background:var(--bg); color:var(--ink-soft);
  border-radius:var(--r1); font-size:11px; font-family:var(--mono); padding:3px 8px;
}
.stylesel:hover{border-color:var(--accent); color:var(--accent);}
@media (max-width:700px){
  .stylesel{max-width:96px}
  /* the picker widens the strip; let it break to a second row on phones */
  .strip .row{height:auto; min-height:40px; flex-wrap:wrap; padding-block:6px; row-gap:2px}
  .strip nav{flex-wrap:wrap}
}

/* ════════════════════════════════════════════════════════════════
   clay · chunky soft pop
   Big radii, 2px outlines, hard offset shadows, Rubik pushed heavy.
   ════════════════════════════════════════════════════════════════ */
:root[data-style="clay"]{
  --bg:#F3F1FB; --bg-soft:#EBE8F8; --panel:#FFFFFF; --well:#E6E2F5;
  --ink:#3A366E; --ink-soft:#635F94; --ink-faint:#918EBD;
  --line:#D8D3F0; --line-strong:#3A366E;
  --accent:#F25C4A; --accent-hi:#FF7C63; --accent-tint:rgba(242,92,74,.12);
  --ok:#1FA97C; --warn:#DB8B15; --crit:#D63964; --violet:#7C5CE0;
  --head:#28245C; --chrome:#F3F0FE;
  --r1:9px; --r2:14px; --r3:12px; --r3l:16px; --r4:12px; --r4l:16px; --r5:20px; --rp:999px;
  --shadow-win:0 2px 0 rgba(40,36,92,.06),0 16px 32px -16px rgba(40,36,92,.30);
  --shadow-card:0 3px 0 rgba(40,36,92,.10);
}
:root[data-style="clay"][data-theme="dark"]{
  --bg:#211D3E; --bg-soft:#282350; --panel:#2D2856; --well:#181430;
  --ink:#DEDAF7; --ink-soft:#A9A5D6; --ink-faint:#7B77AC;
  --line:#3D3870; --line-strong:#6560A5;
  --accent:#FF7C63; --accent-hi:#FF9B85; --accent-tint:rgba(255,124,99,.16);
  --ok:#3ED9A4; --warn:#FFB84D; --crit:#FF6B93; --violet:#B49BFF;
  --head:#F4F2FF; --chrome:#332E62;
  --shadow-win:0 16px 32px -16px rgba(0,0,0,.55);
  --shadow-card:0 3px 0 rgba(0,0,0,.30);
}
[data-style="clay"] .win,
[data-style="clay"] .mini{border:2px solid var(--line-strong);}
[data-style="clay"] .win .bar{border-bottom:2px solid var(--line-strong); font-weight:600; height:38px;}
[data-style="clay"] .win .bar .st{border-radius:50%; width:10px; height:10px;}
[data-style="clay"] h1,
[data-style="clay"] .case h3,
[data-style="clay"] footer .big{font-weight:800; letter-spacing:-.022em;}
[data-style="clay"] .mini h4,
[data-style="clay"] .mdbody h4,
[data-style="clay"] #basement h3{font-weight:800;}
[data-style="clay"] .btn{border:2px solid var(--line-strong); font-weight:700; color:var(--head);}
[data-style="clay"] .btn:hover{border-color:var(--accent); color:var(--accent);}
[data-style="clay"] .btn.primary{
  border-color:var(--accent); color:#FFF6F3;
  box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 55%,var(--head));
}
[data-style="clay"] .btn.primary:hover{filter:none; background:var(--accent-hi); border-color:var(--accent-hi); color:#FFF6F3;}
[data-style="clay"] .btn.primary:active{transform:translateY(3px); box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 55%,var(--head));}
[data-style="clay"] .chip{border-width:1.5px; font-weight:600;}
[data-style="clay"] .tbtn,
[data-style="clay"] .stylesel,
[data-style="clay"] .palbtn,
[data-style="clay"] .m-btn{border-width:1.5px; font-weight:600;}
[data-style="clay"] .kc{border-width:2px; box-shadow:var(--shadow-card);}
[data-style="clay"] .m-jcard,
[data-style="clay"] .m-kpi,
[data-style="clay"] .m-gauge{box-shadow:var(--shadow-card);}
[data-style="clay"] .seclabel{font-weight:700;}
[data-style="clay"] .seclabel::after{height:3px; border-radius:3px; background:var(--line);}
[data-style="clay"] .gate{border-left-width:5px;}
[data-style="clay"] .strip{border-bottom-width:2px;}

/* ════════════════════════════════════════════════════════════════
   neub · neubrutalism
   Flat saturated fills, thick black outlines, hard offset shadows
   that never blur, square-ish corners, headings pushed to black.
   ════════════════════════════════════════════════════════════════ */
:root[data-style="neub"]{
  --bg:#FFF9EC; --bg-soft:#FFF3D6; --panel:#FFFFFF; --well:#FFEDC2;
  --ink:#111111; --ink-soft:#333333; --ink-faint:#6B6B6B;
  --line:#111111; --line-strong:#111111;
  --accent:#FF5D8F; --accent-hi:#FFD23F; --accent-tint:rgba(255,93,143,.14);
  --ok:#00A878; --warn:#E88D00; --crit:#E63946; --violet:#7B4DFF;
  --head:#111111; --chrome:#B9E8FF;
  --r1:4px; --r2:6px; --r3:6px; --r3l:8px; --r4:6px; --r4l:8px; --r5:8px; --rp:6px;
  --shadow-win:6px 6px 0 #111111;
  --shadow-card:4px 4px 0 #111111;
}
:root[data-style="neub"][data-theme="dark"]{
  --bg:#17141F; --bg-soft:#1F1B2B; --panel:#241F33; --well:#100D18;
  --ink:#F4F1FF; --ink-soft:#C9C3E0; --ink-faint:#8B84A8;
  --line:#F4F1FF; --line-strong:#F4F1FF;
  --accent:#FF5D8F; --accent-hi:#FFD23F; --accent-tint:rgba(255,93,143,.18);
  --ok:#2FE6A8; --warn:#FFB627; --crit:#FF5C57; --violet:#A98BFF;
  --head:#FFFFFF; --chrome:#2E2843;
  --shadow-win:6px 6px 0 #000000;
  --shadow-card:4px 4px 0 #000000;
}
[data-style="neub"] .win,
[data-style="neub"] .mini{border:3px solid var(--line-strong); box-shadow:var(--shadow-win);}
[data-style="neub"] .mini{box-shadow:var(--shadow-card);}
[data-style="neub"] .win .bar{border-bottom:3px solid var(--line-strong); background:var(--chrome); font-weight:700;}
[data-style="neub"] .win .bar .st{border:2px solid var(--line-strong); border-radius:50%; width:11px; height:11px;}
[data-style="neub"] h1,
[data-style="neub"] .case h3,
[data-style="neub"] .mini h4,
[data-style="neub"] .mdbody h4,
[data-style="neub"] footer .big,
[data-style="neub"] #basement h3{font-weight:900; letter-spacing:-.02em;}
[data-style="neub"] h1 em,
[data-style="neub"] footer .big em{
  font-style:normal; background:var(--accent-hi); color:#111111;
  padding:0 .12em; box-shadow:3px 3px 0 var(--line-strong);
}
[data-style="neub"] .btn{
  border:3px solid var(--line-strong); font-weight:800; color:var(--head);
  background:var(--panel); box-shadow:4px 4px 0 var(--line-strong);
}
[data-style="neub"] .btn:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--line-strong);}
[data-style="neub"] .btn:active{transform:translate(3px,3px); box-shadow:1px 1px 0 var(--line-strong);}
[data-style="neub"] .btn.primary{background:var(--accent); border-color:var(--line-strong); color:#111111;}
[data-style="neub"] .btn.primary:hover{filter:none; background:var(--accent-hi); color:#111111;}
[data-style="neub"] .chip{border:2px solid var(--line-strong); font-weight:700; background:var(--panel);}
[data-style="neub"] .tbtn,
[data-style="neub"] .stylesel,
[data-style="neub"] .palbtn,
[data-style="neub"] .m-btn{border:2px solid var(--line-strong); font-weight:700; box-shadow:2px 2px 0 var(--line-strong);}
[data-style="neub"] .kc{border:3px solid var(--line-strong); box-shadow:var(--shadow-card);}
[data-style="neub"] .m-jcard,
[data-style="neub"] .m-kpi,
[data-style="neub"] .m-gauge{border:2px solid var(--line-strong); box-shadow:var(--shadow-card);}
[data-style="neub"] .seclabel{font-weight:800;}
[data-style="neub"] .seclabel::after{height:4px; background:var(--line-strong);}
[data-style="neub"] .gate{border:3px solid var(--line-strong); border-left-width:8px; box-shadow:var(--shadow-card);}
[data-style="neub"] .strip{border-bottom:3px solid var(--line-strong);}

/* ════════════════════════════════════════════════════════════════
   terminal · retro terminal
   Mono everything, uppercase labels, phosphor glow. Light is amber
   phosphor warmed to paper; dark is green glass with scanlines and
   a blinking block cursor on the h1.
   ════════════════════════════════════════════════════════════════ */
:root[data-style="terminal"]{
  /* dark-only aesthetic: green CRT regardless of the light/dark toggle */
  color-scheme:dark;
  --bg:#020703; --bg-soft:#051007; --panel:#030B05; --well:#010402;
  --ink:#33FF66; --ink-soft:#22B84A; --ink-faint:#157A31;
  --line:#0E3A1C; --line-strong:#1E6B36;
  --accent:#33FF66; --accent-hi:#7DFF9F; --accent-tint:rgba(51,255,102,.10);
  --ok:#33FF66; --warn:#FFB000; --crit:#FF4444; --violet:#C792EA;
  --head:#B9FFCC; --chrome:#04170A;
  --sans:var(--mono);
  --r1:0; --r2:0; --r3:0; --r3l:0; --r4:0; --r4l:0; --r5:0; --rp:0;
  --shadow-win:0 0 0 1px var(--line-strong),0 0 24px rgba(51,255,102,.08);
  --shadow-card:none;
}
[data-style="terminal"] body{font-size:15px; line-height:1.7; letter-spacing:.01em;}
[data-style="terminal"] h1{font-size:clamp(23px,3.9vw,40px); font-weight:700; letter-spacing:0; text-transform:uppercase;}
[data-style="terminal"] h1::before{content:"> ";}
[data-style="terminal"] h1::after{
  content:"█"; margin-left:.15em; color:var(--accent);
  animation:tcur 1.1s steps(1) infinite;
}
@keyframes tcur{50%{opacity:0}}
[data-style="terminal"] h1 em,
[data-style="terminal"] footer .big em{font-style:normal; text-decoration:underline; text-underline-offset:5px;}
[data-style="terminal"] .case h3,
[data-style="terminal"] .mini h4,
[data-style="terminal"] .mdbody h4,
[data-style="terminal"] #basement h3{letter-spacing:.02em; text-transform:uppercase;}
[data-style="terminal"] footer .big{font-size:clamp(19px,3.2vw,32px); letter-spacing:0;}
[data-style="terminal"] .seclabel{text-transform:uppercase; letter-spacing:.08em;}
[data-style="terminal"] .seclabel::after{
  height:1px;
  background:repeating-linear-gradient(90deg,var(--line-strong) 0 4px,transparent 4px 8px);
}
[data-style="terminal"] .win{border:1px solid var(--line-strong);}
[data-style="terminal"] .win .bar{background:var(--chrome); border-bottom:1px solid var(--line-strong); text-transform:uppercase; letter-spacing:.04em;}
[data-style="terminal"] .win .bar .st{border-radius:0; width:8px; height:8px;}
[data-style="terminal"] .chip{background:transparent; border-radius:0;}
[data-style="terminal"] .btn{background:transparent; border:1px solid var(--line-strong); text-transform:uppercase; letter-spacing:.05em;}
[data-style="terminal"] .btn::before{content:"[ ";}
[data-style="terminal"] .btn::after{content:" ]";}
[data-style="terminal"] .btn.primary{background:var(--accent); border-color:var(--accent); color:var(--bg);}
[data-style="terminal"] body{
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);
}
[data-style="terminal"] h1,
[data-style="terminal"] .case h3,
[data-style="terminal"] footer .big{
  text-shadow:0 0 10px color-mix(in srgb,var(--accent) 55%,transparent),0 0 26px color-mix(in srgb,var(--accent) 25%,transparent);
}
[data-style="terminal"] .win{box-shadow:var(--shadow-win);}

/* ════════════════════════════════════════════════════════════════
   vapor · vaporwave
   Miami sunset gradients, cyan/magenta neon, chrome-dream pastels.
   Light is pastel mall-tile; dark is the neon grid at midnight with
   glow on everything that matters.
   ════════════════════════════════════════════════════════════════ */
:root[data-style="vapor"]{
  --bg:#FDEFF6; --bg-soft:#F6E4F3; --panel:#FFFFFF; --well:#F0DCEE;
  --ink:#4B2A63; --ink-soft:#7A5493; --ink-faint:#A98BBE;
  --line:#E8CCE4; --line-strong:#B87FC9;
  --accent:#E840B5; --accent-hi:#FF6AD5; --accent-tint:rgba(232,64,181,.11);
  --ok:#0FB5A6; --warn:#E8973B; --crit:#E33E6F; --violet:#8A5CF5;
  --head:#3B1D52; --chrome:#F9E3F4;
  --r1:8px; --r2:12px; --r3:10px; --r3l:14px; --r4:10px; --r4l:14px; --r5:16px; --rp:999px;
  --shadow-win:0 14px 34px -14px rgba(140,60,170,.35);
  --shadow-card:0 6px 18px -8px rgba(140,60,170,.25);
  --vgrid:rgba(232,64,181,.05);
}
:root[data-style="vapor"][data-theme="dark"]{
  --bg:#170A2E; --bg-soft:#1E0F3B; --panel:#1F1140; --well:#0F0621;
  --ink:#E6D9FF; --ink-soft:#B49BE0; --ink-faint:#7E68AC;
  --line:#372264; --line-strong:#6A3FA8;
  --accent:#FF6AD5; --accent-hi:#FF9DE6; --accent-tint:rgba(255,106,213,.14);
  --ok:#01F9C6; --warn:#FFC15E; --crit:#FF5C8A; --violet:#B794FF;
  --head:#FDEBFF; --chrome:#2A1752;
  --shadow-win:0 0 0 1px rgba(255,106,213,.22),0 18px 40px -16px rgba(0,0,0,.6);
  --shadow-card:0 0 18px -6px rgba(255,106,213,.30);
  --vgrid:rgba(1,249,198,.06);
}
[data-style="vapor"] body{
  background-image:linear-gradient(var(--vgrid) 1px,transparent 1px),
    linear-gradient(90deg,var(--vgrid) 1px,transparent 1px);
  background-size:44px 44px;
}
[data-style="vapor"] h1,
[data-style="vapor"] footer .big{
  font-weight:800; letter-spacing:-.015em; font-style:italic;
  background:linear-gradient(100deg,#FF6AD5 5%,#C774E8 35%,#AD8CFF 60%,#01F9C6 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
[data-style="vapor"] h1 em,
[data-style="vapor"] footer .big em{font-style:italic; color:inherit;}
[data-style="vapor"][data-theme="dark"] h1,
[data-style="vapor"][data-theme="dark"] footer .big{
  filter:drop-shadow(0 0 14px rgba(255,106,213,.35));
}
[data-style="vapor"] .case h3,
[data-style="vapor"] .mini h4,
[data-style="vapor"] .mdbody h4,
[data-style="vapor"] #basement h3{font-weight:800; letter-spacing:.01em;}
[data-style="vapor"] .win .bar{
  background:linear-gradient(90deg,var(--chrome),color-mix(in srgb,var(--accent-tint) 60%,var(--chrome)));
}
[data-style="vapor"] .win .bar .st{border-radius:50%;}
[data-style="vapor"] .seclabel{letter-spacing:.14em; text-transform:uppercase;}
[data-style="vapor"] .seclabel::after{
  height:2px; border-radius:2px;
  background:linear-gradient(90deg,#FF6AD5,#AD8CFF,#01F9C6);
}
[data-style="vapor"] .btn{border-radius:999px; font-weight:700;}
[data-style="vapor"] .btn.primary{
  background:linear-gradient(100deg,#FF6AD5,#AD8CFF); border-color:transparent; color:#FFFFFF;
}
[data-style="vapor"] .btn.primary:hover{filter:saturate(1.25) brightness(1.06);}
[data-style="vapor"][data-theme="dark"] .btn.primary{box-shadow:0 0 16px -2px rgba(255,106,213,.45);}
[data-style="vapor"] .chip{border-radius:999px; font-weight:600;}
[data-style="vapor"][data-theme="dark"] .win{border-color:var(--line-strong);}
[data-style="vapor"][data-theme="dark"] .chip{box-shadow:0 0 10px -4px rgba(1,249,198,.35);}

/* ════════════════════════════════════════════════════════════════
   sketch · hand-drawn
   Paper grounds, ink outlines that wobble via lopsided radii, a
   marker-yellow highlighter, and a handwriting-leaning font stack.
   Light is a notebook page; dark is chalk on a blackboard.
   ════════════════════════════════════════════════════════════════ */
:root[data-style="sketch"]{
  --bg:#FBF8F1; --bg-soft:#F4EFE2; --panel:#FFFEF9; --well:#F0EAD9;
  --ink:#2B2B33; --ink-soft:#55555F; --ink-faint:#8F8F98;
  --line:#C9C4B4; --line-strong:#2B2B33;
  --accent:#2E6FE0; --accent-hi:#4C88EE; --accent-tint:rgba(46,111,224,.10);
  --ok:#3E8E4E; --warn:#C98A1B; --crit:#CC4B3D; --violet:#6A4C9C;
  --head:#1F1F26; --chrome:#F6F1E4;
  --sans:'Segoe Print','Bradley Hand','Comic Sans MS','Chalkboard SE','Comic Neue',cursive;
  --r1:255px 8px 225px 8px/8px 225px 8px 255px;
  --r2:255px 12px 225px 12px/12px 225px 12px 255px;
  --r3:225px 10px 255px 10px/10px 255px 10px 225px;
  --r3l:255px 14px 225px 14px/14px 225px 14px 255px;
  --r4:225px 10px 255px 10px/10px 255px 10px 225px;
  --r4l:255px 14px 225px 14px/14px 225px 14px 255px;
  --r5:255px 16px 225px 16px/16px 225px 16px 255px;
  --rp:255px 10px 225px 10px/10px 225px 10px 255px;
  --shadow-win:3px 4px 0 rgba(43,43,51,.14);
  --shadow-card:2px 3px 0 rgba(43,43,51,.12);
}
:root[data-style="sketch"][data-theme="dark"]{
  --bg:#23262B; --bg-soft:#2A2E34; --panel:#282C31; --well:#1B1E22;
  --ink:#E8E6DD; --ink-soft:#B9B7AC; --ink-faint:#84837B;
  --line:#43474E; --line-strong:#E8E6DD;
  --accent:#7FB4FF; --accent-hi:#A5CBFF; --accent-tint:rgba(127,180,255,.13);
  --ok:#8FD08F; --warn:#E9C46A; --crit:#F08A7E; --violet:#B9A3E3;
  --head:#F6F5EE; --chrome:#2E3238;
  --shadow-win:3px 4px 0 rgba(0,0,0,.35);
  --shadow-card:2px 3px 0 rgba(0,0,0,.30);
}
[data-style="sketch"] .win,
[data-style="sketch"] .mini,
[data-style="sketch"] .kc{border:2px solid var(--line-strong);}
[data-style="sketch"] .win .bar{border-bottom:2px dashed var(--line-strong);}
[data-style="sketch"] .win .bar .st{border-radius:50%;}
[data-style="sketch"] h1,
[data-style="sketch"] .case h3,
[data-style="sketch"] .mini h4,
[data-style="sketch"] .mdbody h4,
[data-style="sketch"] footer .big,
[data-style="sketch"] #basement h3{font-weight:700; letter-spacing:0;}
[data-style="sketch"] h1{font-size:clamp(25px,4vw,44px);}
[data-style="sketch"] h1 em,
[data-style="sketch"] footer .big em{
  font-style:normal;
  background:linear-gradient(180deg,transparent 55%,rgba(255,214,0,.55) 55% 92%,transparent 92%);
}
[data-style="sketch"][data-theme="dark"] h1 em,
[data-style="sketch"][data-theme="dark"] footer .big em{
  background:linear-gradient(180deg,transparent 55%,rgba(255,214,0,.28) 55% 92%,transparent 92%);
}
[data-style="sketch"] .seclabel::after{
  height:2px; border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--line-strong) 0 9px,transparent 9px 14px);
}
[data-style="sketch"] .btn{
  border:2px solid var(--line-strong); font-weight:700; background:var(--panel);
  box-shadow:var(--shadow-card); transform:rotate(-.4deg);
}
[data-style="sketch"] .btn:nth-child(2n){transform:rotate(.4deg);}
[data-style="sketch"] .btn:hover{transform:rotate(0) translateY(-1px);}
[data-style="sketch"] .btn.primary{background:var(--accent); border-color:var(--line-strong); color:var(--bg);}
[data-style="sketch"] .chip{border:1.5px solid var(--line-strong); background:transparent; transform:rotate(-.5deg);}
[data-style="sketch"] .chip:nth-child(2n){transform:rotate(.5deg);}
[data-style="sketch"] .chip:nth-child(3n){transform:rotate(0);}
[data-style="sketch"] a{text-decoration-style:wavy; text-decoration-thickness:1px; text-underline-offset:3px;}
[data-style="sketch"] .strip{border-bottom:2px dashed var(--line-strong);}
[data-style="sketch"] .gate{border-left:4px solid var(--line-strong);}