/* ============================================================================
   isaac1804.com — skin engine
   Skins are opt-in identities layered ON TOP of the existing dark/light toggle.
   Attribute:  <html data-skin="sys7|crt|scholar">   (absent = Default)
   Injected at build time by ~/scripts/theme-inject.py — never edit in the bundle.
   ----------------------------------------------------------------------------
   Order matters: defaults → tokens → site-token remap → generic element pass →
   per-skin extras → switcher → print / reduced-motion.
   Generic rules use :where() (zero specificity) so a page's own rules win ties;
   everything inside the switcher is #id-prefixed so the generic pass can't
   repaint it.
   ========================================================================= */

/* ── 0. defaults (Default skin = the page's own dark/light look) ─────────── */
html {
  --sk-bg: var(--bg, #0d0e12);
  --sk-panel: var(--sf, #14151b);
  --sk-panel-2: rgba(127, 127, 127, 0.14);
  --sk-fg: var(--t2, #c8ccd6);
  --sk-head: var(--t1, #f0f0f5);
  --sk-muted: var(--t3, #6b7080);
  --sk-link: var(--ab, #818cf8);
  --sk-accent: var(--ac, #6366f1);
  --sk-accent-fg: #ffffff;
  --sk-line: var(--bd, rgba(255, 255, 255, 0.18));
  --sk-line-w: 1px;
  --sk-radius: 14px;
  --sk-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  --sk-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sk-head-font: var(--sk-font);
  --sk-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --sk-link-deco: underline;
}

/* ── 1. skin tokens ─────────────────────────────────────────────────────── */

/* System 7 — 1-bit, black on white, hard edges, no gradients, no blur */
html[data-skin="sys7"] {
  --sk-bg: #ffffff;
  --sk-panel: #ffffff;
  --sk-panel-2: #ebebeb;
  --sk-fg: #000000;
  --sk-head: #000000;
  --sk-muted: #4d4d4d;
  --sk-link: #0000cc;
  --sk-accent: #000000;
  --sk-accent-fg: #ffffff;
  --sk-line: #000000;
  --sk-line-w: 1px;
  --sk-radius: 0px;
  --sk-shadow: 2px 2px 0 #000000;
  --sk-font: "Geneva", "Chicago", "Monaco", "Helvetica Neue", system-ui, sans-serif;
  --sk-head-font: "Chicago", "Geneva", system-ui, sans-serif;
  --sk-mono: "Monaco", "Courier New", monospace;
  color-scheme: light;
}

/* CRT — phosphor terminal, scanlines, bloom, square corners */
html[data-skin="crt"] {
  --sk-bg: #04150c;
  --sk-panel: #071f12;
  --sk-panel-2: #0a2a18;
  --sk-fg: #8dffb9;
  --sk-head: #ccffdf;
  --sk-muted: #4fbf7d;
  --sk-link: #b6ffd0;
  --sk-accent: #2bff7d;
  --sk-accent-fg: #04150c;
  --sk-line: #1c6b3d;
  --sk-line-w: 1px;
  --sk-radius: 0px;
  --sk-shadow: 0 0 14px rgba(45, 255, 128, 0.3);
  --sk-font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sk-head-font: var(--sk-font);
  --sk-mono: var(--sk-font);
  color-scheme: dark;
}

/* Scholar — cream paper, serif, oxblood, quiet */
html[data-skin="scholar"] {
  --sk-bg: #f4ecdb;
  --sk-panel: #fbf5e8;
  --sk-panel-2: #ece1cb;
  --sk-fg: #241d15;
  --sk-head: #1b1510;
  --sk-muted: #5c4a37;
  --sk-link: #7b2d26;
  --sk-accent: #7b2d26;
  --sk-accent-fg: #fdf8ee;
  --sk-line: #c9b99c;
  --sk-line-w: 1px;
  --sk-radius: 2px;
  --sk-shadow: none;
  --sk-font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sk-head-font: var(--sk-font);
  --sk-mono: "SF Mono", Menlo, "Courier New", monospace;
  color-scheme: light;
}

/* ── 2. remap the site's own design tokens so native surfaces re-skin ────── */
html[data-skin] {
  --bg: var(--sk-bg);
  --bg-2: var(--sk-panel);
  --paper: var(--sk-bg);
  --sf: var(--sk-panel);
  --surface: var(--sk-panel);
  --card: var(--sk-panel);
  --panel: var(--sk-panel);
  --t1: var(--sk-head);
  --t2: var(--sk-fg);
  --t3: var(--sk-muted);
  --t4: var(--sk-muted);
  --fg: var(--sk-fg);
  --ink: var(--sk-head);
  --text: var(--sk-fg);
  --muted: var(--sk-muted);
  --ac: var(--sk-accent);
  --accent: var(--sk-accent);
  --accent-2: var(--sk-link);
  --ab: var(--sk-link);
  --ar: var(--sk-link);
  --ag: var(--sk-link);
  --bd: var(--sk-line);
  --border: var(--sk-line);
  --line: var(--sk-line);
  --bs: var(--sk-panel-2);
  --hbg: var(--sk-bg);
  --grad: linear-gradient(0deg, var(--sk-head), var(--sk-head));
  --sh: var(--sk-shadow);
  --shadow: var(--sk-shadow);
}

/* ── 3. generic pass — normalise palettes we don't own ──────────────────── */
html[data-skin] body {
  background-color: var(--sk-bg) !important;
  color: var(--sk-fg) !important;
  font-family: var(--sk-font) !important;
  scrollbar-color: var(--sk-line) transparent;
}

/* Text inherits the skin ink; boxes go flat. background-image:none also removes
   gradient hairlines and logos that would fight a 1-bit/monochrome surface. */
html[data-skin] :where(div, section, article, aside, main, header, footer, nav,
  ul, ol, li, dl, dt, dd, table, thead, tbody, tfoot, tr, td, th, figure,
  figcaption, blockquote, pre, code, kbd, samp, form, fieldset, legend,
  details, summary, p, span, strong, em, b, i, u, s, small, sub, sup, mark,
  label, h1, h2, h3, h4, h5, h6) {
  color: inherit !important;
  background-color: transparent !important;
  background-image: none !important;
  text-shadow: none !important;
}

/* Gradient-clipped text (portfolio hero, logo) turns invisible once its
   background is gone — force the skin ink back into the glyphs. */
html[data-skin] :where(h1, h2, h3, h4, span, a, b, strong) {
  -webkit-text-fill-color: currentColor !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

html[data-skin] :where(h1, h2, h3, h4, h5, h6) {
  color: var(--sk-head) !important;
  font-family: var(--sk-head-font) !important;
}

html[data-skin] :where(a) {
  color: var(--sk-link) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

html[data-skin] :where(img, video) {
  border-radius: var(--sk-radius);
}

html[data-skin] :where(hr) {
  border: 0 !important;
  border-top: var(--sk-line-w) solid var(--sk-line) !important;
}

html[data-skin] :where(table, td, th) {
  border-color: var(--sk-line) !important;
}

html[data-skin] :where(button, [role="button"], input[type="submit"],
  input[type="button"], input[type="reset"], select, textarea,
  input[type="text"], input[type="search"], input[type="email"],
  input[type="password"], input[type="number"], input[type="url"]) {
  background-color: var(--sk-panel) !important;
  background-image: none !important;
  color: var(--sk-fg) !important;
  border: var(--sk-line-w) solid var(--sk-line) !important;
  border-radius: var(--sk-radius) !important;
  font-family: var(--sk-font) !important;
}

html[data-skin] :where(input, textarea)::placeholder {
  color: var(--sk-muted) !important;
  opacity: 1;
}

html[data-skin] :where(.fbtn.active, .chip.active, .tab.active, .filter.active) {
  background-color: var(--sk-accent) !important;
  color: var(--sk-accent-fg) !important;
  border-color: var(--sk-accent) !important;
}

html[data-skin] ::selection {
  background: var(--sk-accent);
  color: var(--sk-accent-fg);
}

html[data-skin] :focus-visible {
  outline: 2px solid var(--sk-accent) !important;
  outline-offset: 2px !important;
}

/* ── 4. per-skin signature ──────────────────────────────────────────────── */

/* 4a. System 7 — 1-bit window frame + dithered desktop margins */
html[data-skin="sys7"] {
  background: repeating-conic-gradient(#ffffff 0% 25%, #000000 0% 50%) 0 0 / 2px 2px fixed;
}
html[data-skin="sys7"]::before {
  content: "";
  position: fixed;
  inset: 0;
  border: 2px solid #000;
  pointer-events: none;
  z-index: 2147483001;
}
html[data-skin="sys7"] :where(img, video) {
  filter: grayscale(1) contrast(1.15);
  border: 1px solid #000;
}
/* System 7 titles get a doubled bottom rule — the classic window-title treatment,
   with zero risk of painting over the glyphs. */
html[data-skin="sys7"] :where(h1) {
  padding-bottom: 6px;
  border-bottom: 3px double #000 !important;
  background-image: none !important;
  letter-spacing: 0 !important;
}
html[data-skin="sys7"] :where(h2, h3) {
  letter-spacing: 0 !important;
}
html[data-skin="sys7"] :where(button, [role="button"], input, select, textarea) {
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff !important;
  font-weight: 600;
}

/* 4b. CRT — scanlines, phosphor bloom, uppercase chrome */
html[data-skin="crt"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483001;
  background:
    repeating-linear-gradient(180deg,
      rgba(0, 0, 0, 0.18) 0 1px,
      rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(130% 110% at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
  opacity: 0.7;
}
html[data-skin="crt"] body {
  text-shadow: 0 0 6px rgba(45, 255, 128, 0.22);
}
html[data-skin="crt"] :where(h1, h2, h3, h4) {
  text-shadow: 0 0 10px rgba(45, 255, 128, 0.35);
  letter-spacing: 0.01em;
}
html[data-skin="crt"] :where(img, video) {
  filter: grayscale(0.4) sepia(0.35) hue-rotate(58deg) saturate(1.5) brightness(0.92);
}
/* uppercase chrome is the CRT signature — but only where there is room for it.
   At 390px it widened header button rows by 25–40px and caused h-scroll. */
@media (min-width: 620px) {
  html[data-skin="crt"] :where(button, [role="button"]) {
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
}
@media (max-width: 619px) {
  html[data-skin="crt"] :where(button, [role="button"]) {
    letter-spacing: 0.02em;
  }
}
html[data-skin="crt"] :where(pre, code, kbd) {
  border: 1px solid var(--sk-line) !important;
  padding: 2px 6px;
}

/* 4c. Scholar — small caps, hairline rules, no shadows */
html[data-skin="scholar"] :where(h1, h2) {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--sk-line);
  padding-bottom: 6px;
}
html[data-skin="scholar"] :where(h3, h4, h5) {
  letter-spacing: 0.02em;
  font-weight: 600 !important;
}
html[data-skin="scholar"] :where(img, video) {
  filter: sepia(0.14) contrast(1.02);
  border: 1px solid var(--sk-line);
  padding: 3px;
  background: var(--sk-panel) !important;
}
html[data-skin="scholar"] :where(blockquote) {
  border-left: 2px solid var(--sk-accent) !important;
  padding-left: 14px;
  font-style: italic;
}

/* ============================================================================
   5. the switcher — #iskin
   Self-contained typography: in CRT/Scholar the chrome is part of the identity.
   ========================================================================= */
#iskin,
#iskin * {
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  text-shadow: none !important;
  letter-spacing: normal;
  text-transform: none;
  -webkit-text-fill-color: currentColor;
}

#iskin {
  position: fixed;
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 2147483002;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  color: var(--sk-fg) !important;
}

#iskin-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--sk-panel) !important;
  color: var(--sk-fg) !important;
  border: var(--sk-line-w) solid var(--sk-line) !important;
  border-radius: var(--sk-radius) !important;
  box-shadow: var(--sk-shadow) !important;
  transition: transform 0.16s ease;
}

#iskin-btn:hover {
  transform: translateY(-1px);
}

#iskin-btn .iskin-dots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 20px;
  height: 20px;
}

#iskin-btn .iskin-dots i {
  display: block;
  border: 1px solid var(--sk-line) !important;
}
#iskin-btn .iskin-dots i:nth-child(1) { background-color: var(--sk-bg) !important; }
#iskin-btn .iskin-dots i:nth-child(2) { background-color: var(--sk-head) !important; }
#iskin-btn .iskin-dots i:nth-child(3) { background-color: var(--sk-accent) !important; }
#iskin-btn .iskin-dots i:nth-child(4) { background-color: var(--sk-panel-2) !important; }

#iskin-panel {
  width: 268px;
  max-width: calc(100vw - 28px);
  background: var(--sk-panel) !important;
  color: var(--sk-fg) !important;
  border: var(--sk-line-w) solid var(--sk-line) !important;
  border-radius: var(--sk-radius) !important;
  box-shadow: var(--sk-shadow) !important;
  overflow: hidden;
  transform-origin: bottom right;
  animation: iskin-in 0.16s ease both;
}

#iskin-panel[hidden] { display: none !important; }

@keyframes iskin-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

#iskin .iskin-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 8px;
  border-bottom: var(--sk-line-w) solid var(--sk-line);
}
#iskin .iskin-head b {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sk-head) !important;
}
#iskin .iskin-head span {
  font-size: 10px;
  color: var(--sk-muted) !important;
}

#iskin .iskin-opts {
  display: flex;
  flex-direction: column;
  padding: 6px;
}

#iskin .iskin-opt {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 9px;
  text-align: left;
  cursor: pointer;
  background: transparent !important;
  border: var(--sk-line-w) solid transparent !important;
  border-radius: var(--sk-radius) !important;
  color: var(--sk-fg) !important;
}
#iskin .iskin-opt:hover,
#iskin .iskin-opt:focus-visible {
  background: var(--sk-panel-2) !important;
  border-color: var(--sk-line) !important;
}
#iskin .iskin-opt[aria-checked="true"] {
  border-color: var(--sk-head) !important;
  background: var(--sk-panel-2) !important;
}

/* each row's swatch is painted with that skin's own palette */
#iskin .iskin-chip {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid var(--sk-line) !important;
  overflow: hidden;
}
#iskin .iskin-chip i { display: block; }

#iskin .iskin-chip[data-for="default"] i:nth-child(1) { background-color: #050508 !important; }
#iskin .iskin-chip[data-for="default"] i:nth-child(2) { background-color: #6366f1 !important; }
#iskin .iskin-chip[data-for="default"] i:nth-child(3) { background-color: #f0f0f5 !important; }
#iskin .iskin-chip[data-for="default"] i:nth-child(4) { background-color: #10b981 !important; }

#iskin .iskin-chip[data-for="sys7"] i:nth-child(1) { background-color: #ffffff !important; }
#iskin .iskin-chip[data-for="sys7"] i:nth-child(2) { background-color: #000000 !important; }
#iskin .iskin-chip[data-for="sys7"] i:nth-child(3) { background-color: #ffffff !important; }
#iskin .iskin-chip[data-for="sys7"] i:nth-child(4) {
  background-color: #ffffff !important;
  background-image: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) !important;
  background-size: 4px 4px;
}

#iskin .iskin-chip[data-for="crt"] i:nth-child(1) { background-color: #04150c !important; }
#iskin .iskin-chip[data-for="crt"] i:nth-child(2) { background-color: #2bff7d !important; }
#iskin .iskin-chip[data-for="crt"] i:nth-child(3) { background-color: #8dffb9 !important; }
#iskin .iskin-chip[data-for="crt"] i:nth-child(4) {
  background-color: #04150c !important;
  background-image: repeating-linear-gradient(180deg, #0a2a18 0 2px, #04150c 2px 4px) !important;
}

#iskin .iskin-chip[data-for="scholar"] i:nth-child(1) { background-color: #f4ecdb !important; }
#iskin .iskin-chip[data-for="scholar"] i:nth-child(2) { background-color: #7b2d26 !important; }
#iskin .iskin-chip[data-for="scholar"] i:nth-child(3) { background-color: #fbf5e8 !important; }
#iskin .iskin-chip[data-for="scholar"] i:nth-child(4) { background-color: #241d15 !important; }

#iskin .iskin-txt {
  flex: 1 1 auto;
  min-width: 0;
}
#iskin .iskin-txt b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sk-head) !important;
  line-height: 1.3;
}
#iskin .iskin-txt span {
  display: block;
  font-size: 11px;
  color: var(--sk-muted) !important;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#iskin .iskin-tick {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--sk-accent) !important;
  opacity: 0;
}
#iskin .iskin-opt[aria-checked="true"] .iskin-tick { opacity: 1; }

#iskin .iskin-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px 10px;
  border-top: var(--sk-line-w) solid var(--sk-line);
  font-size: 10px;
  color: var(--sk-muted) !important;
}
#iskin .iskin-foot kbd {
  font-family: ui-monospace, Menlo, monospace !important;
  font-size: 10px;
  padding: 1px 4px;
  border: 1px solid var(--sk-line) !important;
  border-radius: 2px;
  color: var(--sk-fg) !important;
  background: var(--sk-bg) !important;
}

/* In the default look the faint text inherits the site's --t3 (#6b7080), which
   measures 4.12:1 — under AA at 10px on the panel. Mix toward the ink instead so
   it stays quiet but legible in both the dark and the light default. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  html:not([data-skin]) #iskin .iskin-head span,
  html:not([data-skin]) #iskin .iskin-foot {
    color: color-mix(in srgb, var(--sk-fg) 72%, var(--sk-bg)) !important;
  }
}

.iskin-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* skin-specific chrome for the switcher itself */
html[data-skin="sys7"] #iskin-panel {
  border-width: 1px !important;
  box-shadow: 3px 3px 0 #000 !important;
}
html[data-skin="sys7"] #iskin .iskin-head {
  background-image: repeating-linear-gradient(180deg, #000 0 1px, #fff 1px 3px) !important;
}
html[data-skin="sys7"] #iskin .iskin-head b,
html[data-skin="sys7"] #iskin .iskin-head span {
  background: #fff !important;
  color: #000 !important;
  padding: 0 3px;
}
html[data-skin="sys7"] #iskin .iskin-opt[aria-checked="true"] .iskin-tick { color: #000 !important; }

html[data-skin="crt"] #iskin-panel { box-shadow: 0 0 20px rgba(45, 255, 128, 0.32) !important; }
html[data-skin="crt"] #iskin .iskin-head b::after {
  content: "▌";
  margin-left: 3px;
  animation: iskin-blink 1.1s steps(1) infinite;
}
@keyframes iskin-blink { 50% { opacity: 0; } }
html[data-skin="crt"] #iskin .iskin-opt {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html[data-skin="scholar"] #iskin-panel { border-width: 1px !important; }
html[data-skin="scholar"] #iskin .iskin-head { border-bottom: 3px double var(--sk-line); }
html[data-skin="scholar"] #iskin .iskin-head b {
  font-family: "Iowan Old Style", Palatino, Georgia, serif !important;
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
}
html[data-skin="scholar"] #iskin .iskin-opt {
  font-family: "Iowan Old Style", Palatino, Georgia, serif !important;
}

/* the site's own dark/light pill is inert once a skin owns the palette */
html[data-skin] #themeBtn,
html[data-skin] [data-theme-toggle],
html[data-skin] .theme-toggle {
  display: none !important;
}

/* ── 6. print / motion / small screens ──────────────────────────────────── */
/* Printing always goes to ink: black text on paper, whatever the screen look.
   Without this the site's dark default prints light-on-white (invisible), and
   a CRT print would be a green rectangle. */
@media print {
  #iskin,
  html[data-skin]::before,
  html[data-skin]::after {
    display: none !important;
  }
  html body,
  html body *,
  html[data-skin] body,
  html[data-skin] body * {
    color: #000 !important;
    background: transparent !important;
    text-shadow: none !important;
    filter: none !important;
    box-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #iskin-panel { animation: none !important; }
  #iskin-btn { transition: none !important; }
  html[data-skin="crt"] #iskin .iskin-head b::after { animation: none !important; }
}

@media (max-width: 420px) {
  #iskin { right: 10px; bottom: 10px; }
  #iskin-panel { width: calc(100vw - 20px); }
  #iskin .iskin-opt { min-height: 56px; }
}

/* ── 8. narrow screens: a skin must never widen the page ──────────────────
   Monospace (CRT) and the 1-bit font stack run wider than the site's own
   type, which pushed long tokens and filter rows past 390px. */
@media (max-width: 620px) {
  html[data-skin] :where(p, li, td, th, dd, dt, div, h1, h2, h3, h4, blockquote, figcaption, span, a) {
    overflow-wrap: anywhere;
  }
  html[data-skin] :where(header, nav, .filters, .search-bar, .toolbar, .controls, .fbtnrow) {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
  html[data-skin] :where(pre, code) {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
  }
}