/* ═════════════════════════════════════════════════════════════════════
   ANKLE OS THEME SYSTEM
   Loaded on every aleqth.com / ankle.website / ANKLE.app page.
   Activate a theme by setting `document.body.className = "theme-<name>"`.
   Overlay skins (wallpaper + grid) activate automatically when the
   corresponding CSS variables are defined on :root.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Base hooks — all themed pages should use these vars ──────────── */
:root {
  --bg: #c0c0c0;
  --fg: #000;
  --panel: #fff;
  --muted: #555;
  --line: #000;
  --link: #0000ee;
  --visited: #551a8b;
  --highlight: #ffffe0;
  --media-well: #000;
  --body-font: "Times New Roman", Times, serif;
  --mono-font: "Courier New", Courier, monospace;
  --radius: 0;
  --shadow: none;

  /* Skin overlay knobs — unset by default */
  --wallpaper-url: none;
  --wallpaper-opacity: 0.28;
  --wallpaper-size: cover;     /* cover | contain | <length> */
  --wallpaper-repeat: no-repeat; /* repeat | no-repeat */
  --grid-url: none;
  --grid-opacity: 0.3;
  --grid-blend: multiply;
}

/* ── Theme presets (body class based) ─────────────────────────────── */
body.theme-discmaster {
  --bg: #c0c0c0;
  --fg: #000;
  --panel: #cacaca;  /* Slight lift over --bg so panels read distinct without
                       breaking the Win95-gray ethos. White panels (the old
                       value) clashed with the chrome — they read as cards
                       from a different theme. */
  --muted: #555;
  --line: #000;
  --link: #0000ee;
  --visited: #551a8b;
  --highlight: #ffffe0;
  --media-well: #000;
  --body-font: "Times New Roman", Times, serif;
  --mono-font: "Courier New", Courier, monospace;
  --display-font: "Press Start 2P","Courier New",monospace;
  --digital-font: "VT323","Courier New",monospace;
  --radius: 0;
  --shadow: none;
}
/* Hard edges EVERYWHERE under discmaster — no rounded anything */
body.theme-discmaster *,
body.theme-discmaster *::before,
body.theme-discmaster *::after { border-radius: 0 !important; }
body.theme-discmaster input,
body.theme-discmaster textarea,
body.theme-discmaster select {
  border: 2px inset #fff !important;
  background: #fff !important;
  color: #000 !important;
  font-family: var(--mono-font) !important;
  border-radius: 0 !important;
}
body.theme-discmaster button:not(.theme-opt),
body.theme-discmaster .btn {
  border: 2px outset #fff !important;
  background: #c0c0c0 !important;
  color: #000 !important;
  font-family: var(--mono-font) !important;
  border-radius: 0 !important;
}
body.theme-discmaster button:not(.theme-opt):active,
body.theme-discmaster .btn:active { border-style: inset !important; }

body.theme-graphpaper {
  /* Augmented discmaster: grid background built in (engineering notebook) */
  --bg: #f6f4ea;
  --fg: #102030;
  --panel: #fdfbf2;
  --muted: #6b7a88;
  --line: #2a3a50;
  --link: #1a4dff;
  --visited: #6b35d4;
  --highlight: #fff4a6;
  --media-well: #1a1a1a;
  --body-font: "Times New Roman", Times, serif;
  --mono-font: "Courier New", Courier, monospace;
  --radius: 0;
  --shadow: none;
  --grid-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M32 0H0V32' fill='none' stroke='%232a3a50' stroke-width='0.4'/></svg>");
  --grid-opacity: 0.35;
  --grid-blend: multiply;
}

body.theme-phosphor {
  /* Dark phosphor terminal — CRT green-on-black */
  --bg: #0a0f08;
  --fg: #7fff6a;
  --panel: #0f170c;
  --muted: #4a8c3a;
  --line: #1f3316;
  --link: #c7ff00;
  --visited: #a8ff7e;
  --highlight: rgba(127,255,106,.18);
  --media-well: #000;
  --body-font: "Fragment Mono","Courier New",monospace;
  --mono-font: "Fragment Mono","Courier New",monospace;
  --radius: 0;
  --shadow: 0 0 40px rgba(127,255,106,.15);
  --grid-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><path d='M0 2H4' stroke='%23000' stroke-width='1' opacity='0.35'/></svg>");
  --grid-opacity: 1;
  --grid-blend: normal;
}

body.theme-paper {
  /* Warm white printout aesthetic */
  --bg: #f8f3e6;
  --fg: #1a1a1a;
  --panel: #fffbf0;
  --muted: #6a6458;
  --line: #1a1a1a;
  --link: #a42a00;
  --visited: #742000;
  --highlight: #fff2a8;
  --media-well: #1a1a1a;
  --body-font: "Times New Roman", Times, serif;
  --mono-font: "Courier New", Courier, monospace;
  --radius: 0;
  --shadow: 0 1px 2px rgba(0,0,0,.1);
}

body.theme-ankle96-next {
  /* NeXT / OpenStep workstation — warmer chrome, embossed panels, subtle shadows */
  --bg: #9896b4;          /* NeXT workspace purple-gray */
  --fg: #0a0a12;
  --panel: #d8d6cc;       /* warm ivory panel */
  --panel2: #c4c2b8;      /* sunken inner well */
  --chip: #b8b6ac;
  --muted: #4a4850;
  --faint: #666070;
  --line: #1a1a2a;
  --link: #2a3f77;        /* NeXT blue */
  --visited: #5a2878;
  --highlight: #f0e070;   /* warmer legal-pad */
  --media-well: #1a1a2a;
  --accent: #556688;
  --title-bar: #555063;   /* window title bar */
  --title-fg: #fff;
  --body-font: "Times New Roman", Times, serif;
  --mono-font: "Courier New", Courier, monospace;
  --radius: 0;
  --shadow: 3px 3px 0 rgba(0,0,0,0.35);
  --bevel-out: 2px solid #e8e6dc; /* top-left highlight */
  --bevel-in: 2px solid #5a5660;  /* bottom-right shadow */
}
/* NeXT-specific panel/button embossing */
body.theme-ankle96-next .panel,
body.theme-ankle96-next .card,
body.theme-ankle96-next section,
body.theme-ankle96-next [class*="-card"],
body.theme-ankle96-next [class*="-panel"],
body.theme-ankle96-next [class*="-section"] {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.35) !important;
  color: var(--fg) !important;
}
body.theme-ankle96-next button:not(.theme-opt):not(.help):not(.close-x),
body.theme-ankle96-next .btn {
  background: linear-gradient(180deg, #e8e6dc 0%, #c4c2b8 100%) !important;
  border-top: 1px solid #f4f2e8 !important;
  border-left: 1px solid #f4f2e8 !important;
  border-right: 1px solid #5a5660 !important;
  border-bottom: 1px solid #5a5660 !important;
  color: var(--fg) !important;
  border-radius: 0 !important;
  padding: 4px 12px !important;
}
body.theme-ankle96-next button:not(.theme-opt):active,
body.theme-ankle96-next .btn:active {
  background: linear-gradient(180deg, #c4c2b8 0%, #e8e6dc 100%) !important;
  border-top: 1px solid #5a5660 !important;
  border-left: 1px solid #5a5660 !important;
  border-right: 1px solid #f4f2e8 !important;
  border-bottom: 1px solid #f4f2e8 !important;
}
body.theme-ankle96-next input,
body.theme-ankle96-next textarea,
body.theme-ankle96-next select {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.15) !important;
  border-radius: 0 !important;
}
body.theme-ankle96-next table th {
  background: var(--title-bar) !important;
  color: var(--title-fg) !important;
  border: 1px solid var(--line) !important;
}
body.theme-ankle96-next .nav,
body.theme-ankle96-next #nav-bar {
  background: var(--title-bar) !important;
  color: var(--title-fg) !important;
  border-bottom: 2px solid var(--line) !important;
}
body.theme-ankle96-next .nav a,
body.theme-ankle96-next #nav-bar a {
  color: #e0e0f0 !important;
}
body.theme-ankle96-next .nav a:hover {
  color: var(--highlight) !important;
}

/* ── Defensive panel-readability rules (apply to ALL ankle96 variants) ── */
/* Pages that ship their own dark inline CSS (prompt_machine, etc.) get
   coerced to use theme panel colors for any element whose class name smells
   like "card" / "panel" / "section" — this is what prevents black-on-near-black
   text when the page's own CSS has hardcoded rgba fills. */
body.theme-discmaster [class*="panel"]:not(#ankle-theme-panel):not(.theme-opt),
body.theme-discmaster [class*="-card"],
body.theme-discmaster .card,
body.theme-discmaster [class*="-section"]:not(nav):not(header),
body.theme-ankle96-next [class*="panel"]:not(#ankle-theme-panel):not(.theme-opt),
body.theme-ankle96-next [class*="-card"],
body.theme-ankle96-next .card,
body.theme-ankle96-next [class*="-section"]:not(nav):not(header),
body.theme-paper [class*="panel"]:not(#ankle-theme-panel):not(.theme-opt),
body.theme-paper [class*="-card"],
body.theme-paper .card {
  background: var(--panel) !important;
  color: var(--fg) !important;
  border-color: var(--line) !important;
}

/* ── Global application of theme vars to body ─────────────────────── */
body[class*="theme-"] {
  background: var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--body-font) !important;
}
body[class*="theme-"] a { color: var(--link) !important; }
body[class*="theme-"] a:visited { color: var(--visited) !important; }

/* ── Skin overlays (wallpaper + grid) ─────────────────────────────── */
/* The wallpaper layer sits behind all content; the grid layer on top. */
body[class*="theme-"]::before,
body[class*="theme-"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
body[class*="theme-"]::before {
  /* Wallpaper layer — invisible until body.has-wallpaper is toggled on */
  background-image: var(--wallpaper-url, none);
  background-size: var(--wallpaper-size, cover);
  background-repeat: var(--wallpaper-repeat, no-repeat);
  background-position: center center;
  background-attachment: fixed;
  opacity: 0;
  transition: opacity .25s ease;
}
body.has-wallpaper::before {
  opacity: var(--wallpaper-opacity, 1);
}
body[class*="theme-"]::after {
  /* Grid / texture overlay layer */
  background-image: var(--grid-url, none);
  background-size: var(--grid-size, auto);
  background-repeat: repeat;
  opacity: 0;
  mix-blend-mode: var(--grid-blend, normal);
}
body.has-grid::after,
body.theme-graphpaper::after,
body.theme-phosphor::after {
  opacity: var(--grid-opacity, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════
   @⌘ terminal v2 (ankle_terminal_v2.js) — discmaster override
   "terminal by Ankle" panel: the ANKLE protocol v1.4 widget with
   ingest/collect/discover chips. Ships dark #0a0a0a bg by default; we
   repaint it in discmaster gray + Times serif + Win95 chips.
   ═══════════════════════════════════════════════════════════════════ */
body.theme-discmaster .ankle-fab{
  background:#c0c0c0 !important; color:#000 !important;
  border:2px outset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
  box-shadow:none !important;
}
body.theme-discmaster .ankle-fab.active{
  background:#ffffe0 !important; color:#000 !important; border:1px solid #000 !important;
}
body.theme-discmaster .ankle-fab:active{ border-style:inset !important; }
body.theme-discmaster .ankle-fab:hover{ transform:none !important; box-shadow:none !important; }

body.theme-discmaster .ankle-terminal{
  background:#c0c0c0 !important; color:#000 !important;
  border:1px solid #000 !important; border-radius:0 !important;
  box-shadow:none !important;
}
body.theme-discmaster .terminal-header{
  background:#eee !important; color:#000 !important;
  border-bottom:1px solid #000 !important;
}
body.theme-discmaster .terminal-header .label{
  font-family:"Courier New",Courier,monospace !important;
  color:#000 !important; letter-spacing:0 !important;
}
body.theme-discmaster .terminal-header .label span{ color:#0000ee !important; }

body.theme-discmaster .terminal-close,
body.theme-discmaster .terminal-reset,
body.theme-discmaster .terminal-copy,
body.theme-discmaster .terminal-expand,
body.theme-discmaster .terminal-popout{
  color:#0000ee !important;
  font-family:"Courier New",Courier,monospace !important;
  background:transparent !important; border:0 !important;
}
body.theme-discmaster .terminal-close:hover{ color:#000 !important; background:#ffffe0 !important; }
body.theme-discmaster .terminal-copy:hover,
body.theme-discmaster .terminal-expand:hover,
body.theme-discmaster .terminal-popout:hover,
body.theme-discmaster .terminal-reset:hover{ color:#000 !important; background:#ffffe0 !important; }

body.theme-discmaster .terminal-output{
  background:#c0c0c0 !important; color:#000 !important;
  font-family:"Courier New",Courier,monospace !important;
}
body.theme-discmaster .terminal-output .line.cmd{ color:#0000ee !important; }
body.theme-discmaster .terminal-output .line.cmd::before{ color:#555 !important; content:'> ' !important; }
body.theme-discmaster .terminal-output .line.result{ color:#000 !important; }
body.theme-discmaster .terminal-output .line.error{ color:#a42a00 !important; }
body.theme-discmaster .terminal-output .line.system{ color:#555 !important; }
body.theme-discmaster .terminal-output .line.hermes{ color:#000 !important; }
body.theme-discmaster .terminal-output .line.hermes::before{ color:#a42a00 !important; }

body.theme-discmaster .terminal-input-row{
  background:#eee !important; color:#000 !important;
  border-top:1px solid #000 !important;
}
body.theme-discmaster .terminal-prompt{
  color:#000 !important; font-weight:bold !important;
  font-family:"Courier New",Courier,monospace !important;
}
body.theme-discmaster .terminal-hermes-tag{ color:#a42a00 !important; }
body.theme-discmaster .terminal-input{
  background:#fff !important; color:#000 !important;
  border:2px inset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
  caret-color:#000 !important; padding:2px 4px !important;
}
body.theme-discmaster .terminal-input::placeholder{ color:#888 !important; }

/* Hermes response bubble */
body.theme-discmaster .hermes-bubble{
  background:#ffffe0 !important; border:1px solid #000 !important;
  border-left:2px solid #000 !important; border-radius:0 !important;
  margin:6px 0 10px 0 !important;
}
body.theme-discmaster .hermes-bubble .b-text{
  color:#000 !important; font-family:"Times New Roman",Times,serif !important;
  font-size:13px !important;
}
body.theme-discmaster .hermes-bubble .b-text strong{ color:#000 !important; }
body.theme-discmaster .hermes-bubble .b-text em{ color:#a42a00 !important; font-style:italic !important; }

/* The action chips: "◇ ingest page", "◇ collect imgs", "⇌ to /surf", "≋ refine", etc. */
body.theme-discmaster .cmd-chip{
  background:#c0c0c0 !important; color:#000 !important;
  border:2px outset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
}
body.theme-discmaster .cmd-chip:hover{ background:#ffffe0 !important; color:#000 !important; }
body.theme-discmaster .cmd-chip:active{ border-style:inset !important; }
body.theme-discmaster .cmd-chip.primary{
  background:#ffffe0 !important; border:1px solid #000 !important;
  color:#000 !important; font-weight:bold !important;
}
body.theme-discmaster .cmd-chip.muted{
  background:#c0c0c0 !important; color:#555 !important;
  border:2px outset #fff !important;
}
body.theme-discmaster .hermes-meta{ color:#555 !important; font-family:"Courier New",Courier,monospace !important; }

/* Bottom "quick actions" row (ingest page / collect imgs / to /surf / …) */
body.theme-discmaster .quick-actions{
  background:#c0c0c0 !important; border-top:1px solid #000 !important;
}
body.theme-discmaster .qa-btn{
  background:#c0c0c0 !important; color:#000 !important;
  border:2px outset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
}
body.theme-discmaster .qa-btn:hover{ background:#ffffe0 !important; color:#000 !important; }
body.theme-discmaster .qa-btn:active{ border-style:inset !important; }
body.theme-discmaster .qa-btn .g{ color:#0000ee !important; }

/* Slash-command menu popup ( / autocomplete ) */
body.theme-discmaster .slash-menu{
  background:#fff !important; border:1px solid #000 !important; border-radius:0 !important;
  box-shadow:none !important;
}
body.theme-discmaster .slash-item{
  color:#000 !important; font-family:"Courier New",Courier,monospace !important;
  border-bottom:1px dotted #999 !important;
}
body.theme-discmaster .slash-item .k{ color:#0000ee !important; font-weight:bold !important; }
body.theme-discmaster .slash-item .d{ color:#555 !important; }
body.theme-discmaster .slash-item:hover,
body.theme-discmaster .slash-item.sel{ background:#ffffe0 !important; color:#000 !important; }
body.theme-discmaster .slash-item:hover .k,
body.theme-discmaster .slash-item.sel .k{ color:#000 !important; }
body.theme-discmaster .slash-item:hover .d,
body.theme-discmaster .slash-item.sel .d{ color:#555 !important; }

body.theme-discmaster .ankle-notification{
  background:#ffffe0 !important; color:#000 !important;
  border:1px solid #000 !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
  box-shadow:none !important;
}
body.theme-discmaster .ankle-notification .notif-sigil{ color:#0000ee !important; }

/* ═══════════════════════════════════════════════════════════════════
   @⌘ legacy (#botta-panel) — discmaster override for the older widget
   Repaints the built-in #botta-panel / botta-* chrome in discmaster gray
   + Times serif + classic pills. atcmd.js ships its own dark palette, so
   we override with body.theme-discmaster + !important.
   ═══════════════════════════════════════════════════════════════════ */
body.theme-discmaster #botta-fab{
  background:#c0c0c0 !important; color:#000 !important;
  border:2px outset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
  box-shadow:none !important;
}
body.theme-discmaster #botta-fab:active{ border-style:inset !important; }
body.theme-discmaster #botta-panel,
body.theme-discmaster #botta-panel *{
  font-family:"Times New Roman",Times,serif !important;
  border-radius:0 !important;
}
body.theme-discmaster #botta-panel{
  background:#c0c0c0 !important; color:#000 !important;
  border:1px solid #000 !important;
  box-shadow:none !important;
}
body.theme-discmaster #botta-panel .botta-h{
  background:#eee !important; color:#000 !important;
  border-bottom:1px solid #000 !important;
  font-family:"Courier New",Courier,monospace !important;
  font-weight:bold !important;
  padding:4px 10px !important;
}
body.theme-discmaster #botta-panel #bottaClose{
  color:#0000ee !important; text-decoration:underline !important;
  font-family:"Courier New",Courier,monospace !important;
}
body.theme-discmaster #botta-panel .botta-body,
body.theme-discmaster #botta-panel .botta-log,
body.theme-discmaster #botta-panel .botta-site-status{
  background:#c0c0c0 !important; color:#000 !important;
}
body.theme-discmaster #botta-panel code,
body.theme-discmaster #botta-panel pre,
body.theme-discmaster #botta-panel .botta-cmd,
body.theme-discmaster #botta-panel .botta-log em{
  font-family:"Courier New",Courier,monospace !important;
  color:#000 !important; background:transparent !important;
}
/* All inputs inside the @⌘ panel: classic inset bevel */
body.theme-discmaster #botta-panel input,
body.theme-discmaster #botta-panel textarea,
body.theme-discmaster #botta-panel select{
  background:#fff !important; color:#000 !important;
  border:2px inset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
}
/* All buttons: Win95 outset pills with yellow highlight on primary */
body.theme-discmaster #botta-panel button{
  background:#c0c0c0 !important; color:#000 !important;
  border:2px outset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
  padding:3px 10px !important;
}
body.theme-discmaster #botta-panel button:active{ border-style:inset !important; }
body.theme-discmaster #botta-panel button.primary{
  background:#ffffe0 !important; border:1px solid #000 !important;
  font-weight:bold !important;
}
/* Orange/blue outline chips → yellow highlight pills */
body.theme-discmaster #botta-panel .chip,
body.theme-discmaster #botta-panel [class*="action"],
body.theme-discmaster #botta-panel [class*="suggest"],
body.theme-discmaster #botta-panel .botta-cta,
body.theme-discmaster #botta-panel .botta-quick,
body.theme-discmaster #botta-panel [style*="border:1px solid"]{
  background:#c0c0c0 !important; color:#000 !important;
  border:2px outset #fff !important; border-radius:0 !important;
}
body.theme-discmaster #botta-panel [style*="color:#"]{
  color:#000 !important;
}
body.theme-discmaster #botta-panel a{
  color:#0000ee !important; text-decoration:underline !important;
}
/* Top "@⌘ terminal by Ankle" title bar if styled differently */
body.theme-discmaster #botta-panel [class*="title"],
body.theme-discmaster #botta-panel [class*="header"]{
  background:#eee !important; color:#000 !important;
}
/* Prompt row "hermes > ask hermes…" */
body.theme-discmaster #botta-panel .botta-input{
  background:#c0c0c0 !important; border-top:1px solid #000 !important;
}

/* ── Global top-right toolbar — identity pill + ⚙ gear ──────────── */
#ankle-toolbar {
  position: fixed; top: 8px; right: 10px; z-index: 1200;
  display: flex; align-items: center; gap: 6px;
}
/* Hide the toolbar + panel when a modal/lightbox locks body scroll. */
body[style*="overflow: hidden"] #ankle-toolbar,
body[style*="overflow:hidden"] #ankle-toolbar,
body[style*="overflow: hidden"] #ankle-theme-panel,
body[style*="overflow:hidden"] #ankle-theme-panel { display: none !important; }

/* Identity pill */
#ankle-identity { font-family: var(--body-font, Verdana, sans-serif); font-size: 11px; position: relative; }
#ankle-identity .ankle-identity__signin {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border: 1px solid #999; background: var(--panel, #fff); color: var(--fg, #000);
  border-radius: var(--radius, 4px); text-decoration: none; font-size: 11px;
}
#ankle-identity .ankle-identity__btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px;
  border: 1px solid #999; background: var(--panel, #fff); color: var(--fg, #000);
  border-radius: var(--radius, 4px); cursor: pointer; font: inherit;
}
#ankle-identity .ankle-identity__av {
  width: 18px; height: 18px; border-radius: 50%; object-fit: cover;
  background: #ddd; flex-shrink: 0;
}
#ankle-identity .ankle-identity__av--ph { background: #ccc; display: inline-block; }
#ankle-identity .ankle-identity__name { font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ankle-identity .ankle-identity__caret { font-size: 9px; color: #666; }
#ankle-identity .ankle-identity__menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 200px; background: var(--panel, #fff); border: 1px solid #999;
  border-radius: var(--radius, 4px); box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 4px 0; z-index: 1202;
}
#ankle-identity .ankle-identity__menu.open { display: block; }
#ankle-identity .ankle-identity__sub { padding: 6px 12px; font-size: 9px; color: #999; font-family: var(--mono-font, monospace); }
#ankle-identity .ankle-identity__menu a {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  font-size: 11px; color: var(--fg, #000); text-decoration: none;
}
#ankle-identity .ankle-identity__menu a:hover { background: var(--highlight, #f0f0f0); }
#ankle-identity .ankle-identity__menu a .mi { font-family: monospace; color: #999; width: 14px; }
#ankle-identity .ankle-identity__sep { height: 1px; background: #e5e5e5; margin: 3px 0; }

/* Discmaster recolor — match the rest of the chrome (flat hairlines) */
body.theme-discmaster #ankle-identity .ankle-identity__signin,
body.theme-discmaster #ankle-identity .ankle-identity__btn,
body.theme-discmaster #ankle-identity .ankle-identity__menu { background: #c0c0c0; border: 1px solid #999; border-radius: 0; }
body.theme-discmaster #ankle-identity .ankle-identity__menu a:hover { background: #000080; color: #fff; }
body.theme-discmaster #ankle-identity .ankle-identity__menu a:hover .mi { color: #fff; }

/* Settings gear — flat single-border to match identity pill */
#ankle-theme-fab {
  position: relative; top: auto; right: auto;
  width: 32px; height: 28px;
  border: 1px solid #999; background: var(--panel); color: var(--fg);
  font-family: var(--mono-font); font-size: 14px;
  cursor: pointer; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
body.theme-discmaster #ankle-theme-fab{background:#c0c0c0;border:1px solid #999;border-radius:0;color:#000}
#ankle-theme-fab:hover { background: var(--highlight) }
#ankle-theme-fab:active{ background: var(--highlight); }

#ankle-theme-panel {
  position: fixed; top: 50px; right: 10px; z-index: 1201;
  width: 320px; max-width: calc(100vw - 20px); max-height: calc(100vh - 80px); overflow-y: auto;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--body-font); font-size: 13px;
  padding: 12px 14px; display: none;
  box-shadow: var(--shadow);
}
body.theme-discmaster #ankle-theme-panel{
  font-family:"Times New Roman",Times,serif !important;
  font-size:14px !important;
}
body.theme-discmaster #ankle-theme-panel h4{
  font-family:"Press Start 2P","Courier New",monospace !important;
  font-size:13px !important; font-weight:normal !important;
  letter-spacing:.06em !important;
}
body.theme-discmaster #ankle-theme-panel h5{
  font-family:"Times New Roman",Times,serif !important;
  font-size:14px !important; font-weight:bold !important;
  letter-spacing:0 !important; text-transform:none !important;
}
body.theme-discmaster #ankle-theme-panel label,
body.theme-discmaster #ankle-theme-panel .skin-field label{
  font-family:"Courier New",Courier,monospace !important;
  font-size:11px !important;
}
body.theme-discmaster #ankle-theme-panel .theme-opt{
  font-family:"Times New Roman",Times,serif !important;
  font-size:13px !important;
  border:2px outset #fff !important; background:#c0c0c0 !important;
  border-radius:0 !important;
}
body.theme-discmaster #ankle-theme-panel .theme-opt.active{
  border:1px solid #000 !important; background:#ffffe0 !important;
  font-weight:bold !important;
}

/* Vintage Win95 sliders under discmaster — beveled track + square thumb */
body.theme-discmaster #ankle-theme-panel input[type=range]{
  -webkit-appearance:none !important; appearance:none !important;
  height:18px !important; background:transparent !important;
  border:0 !important; padding:0 !important;
}
body.theme-discmaster #ankle-theme-panel input[type=range]::-webkit-slider-runnable-track{
  height:6px; background:#c0c0c0;
  border:2px inset #fff; border-radius:0;
}
body.theme-discmaster #ankle-theme-panel input[type=range]::-moz-range-track{
  height:6px; background:#c0c0c0;
  border:2px inset #fff; border-radius:0;
}
body.theme-discmaster #ankle-theme-panel input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:18px; background:#c0c0c0;
  border:2px outset #fff; border-radius:0;
  margin-top:-6px; cursor:pointer;
}
body.theme-discmaster #ankle-theme-panel input[type=range]::-moz-range-thumb{
  width:16px; height:18px; background:#c0c0c0;
  border:2px outset #fff; border-radius:0; cursor:pointer;
}
body.theme-discmaster #ankle-theme-panel input[type=file]{
  font-family:"Courier New",monospace !important;
  font-size:11px !important;
  border:2px inset #fff !important; background:#fff !important;
  padding:2px !important;
}
@media(max-width: 600px){
  #ankle-theme-panel{ width: calc(100vw - 20px); right: 10px; left: 10px }
  #ankle-theme-panel .theme-list{ grid-template-columns: 1fr 1fr !important }
}
#ankle-theme-panel.open { display: block }
#ankle-theme-panel h4 {
  font-family: var(--body-font); font-size: 16px; font-weight: bold;
  margin: 6px 0 8px; color: var(--fg);
}
#ankle-theme-panel h5 {
  font-family: var(--mono-font); font-size: 11px; font-weight: bold;
  margin: 14px 0 6px; color: var(--fg); letter-spacing: .06em;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
#ankle-theme-panel .theme-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
#ankle-theme-panel .theme-opt {
  padding: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg); cursor: pointer;
  font-family: var(--mono-font); font-size: 11px; text-align: left;
  border-radius: var(--radius); transition: background .15s;
}
#ankle-theme-panel .theme-opt:hover { background: var(--highlight) }
#ankle-theme-panel .theme-opt.active {
  background: var(--highlight); font-weight: bold; border-color: var(--fg);
}
#ankle-theme-panel .theme-opt .swatch {
  display: block; width: 100%; height: 28px; margin-bottom: 4px;
  border: 1px solid var(--line); border-radius: var(--radius);
}
#ankle-theme-panel .skin-field {
  margin-top: 6px; display: flex; flex-direction: column; gap: 4px;
}
#ankle-theme-panel .skin-field label {
  font-size: 10px; color: var(--muted); font-weight: bold;
}
#ankle-theme-panel button.btn {
  padding: 4px 10px; border: 2px outset #eee; background: var(--panel);
  color: var(--fg); font-family: var(--mono-font); font-size: 11px;
  cursor: pointer; border-radius: var(--radius);
}
#ankle-theme-panel button.btn:active { border-style: inset }
#ankle-theme-panel button.btn.primary {
  background: var(--highlight); font-weight: bold; border: 1px solid var(--fg);
}
#ankle-theme-panel input[type=range] { width: 100%; accent-color: var(--link) }
#ankle-theme-panel input[type=file] {
  font-family: var(--mono-font); font-size: 10px; color: var(--fg);
}
#ankle-theme-panel .swatch-preview {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
}
#ankle-theme-panel .swatch-preview img {
  width: 42px; height: 42px; object-fit: cover;
  border: 1px solid var(--line); cursor: pointer;
}
#ankle-theme-panel .swatch-preview img.selected { outline: 2px solid var(--link) }
#ankle-theme-panel .close-x {
  position: absolute; top: 8px; right: 10px; cursor: pointer;
  background: transparent; border: 0; color: var(--muted); font-size: 14px;
}

/* Palette editor */
#ankle-theme-panel .palette-editor {
  display: flex; flex-direction: column; gap: 4px; margin-top: 4px;
}
#ankle-theme-panel .palette-row {
  display: grid; grid-template-columns: 72px 32px 1fr 22px; gap: 6px;
  align-items: center; font-family: var(--mono-font); font-size: 10px;
}
#ankle-theme-panel .palette-row label {
  color: var(--fg); font-weight: bold; font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase;
}
#ankle-theme-panel .palette-row input[type="color"] {
  width: 32px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel);
  border-radius: var(--radius);
}
#ankle-theme-panel .palette-row input[type="text"] {
  width: 100%; padding: 2px 4px; font-family: var(--mono-font); font-size: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  border-radius: var(--radius);
}
#ankle-theme-panel .palette-clear {
  padding: 1px 4px !important; font-size: 11px !important;
  line-height: 1 !important; min-width: 22px;
}
#ankle-theme-panel .palette-group-label {
  font-family: var(--mono-font); font-size: 9px; color: var(--muted);
  letter-spacing: .12em; text-transform: uppercase;
  margin: 6px 0 2px; padding-bottom: 1px;
  border-bottom: 1px dotted var(--line);
}
#ankle-theme-panel .palette-group-label:first-child { margin-top: 0; }
#ankle-theme-panel .live-sw {
  width: 14px; height: 14px; display: inline-block;
  border: 1px solid var(--line); flex-shrink: 0;
}
#ankle-theme-panel button.btn.active {
  background: var(--highlight) !important;
  border-style: inset !important;
  font-weight: bold !important;
}