/* ═════════════════════════════════════════════════════════════════════
   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 ─────────────────────── */
/* Use background-color (not shorthand) so wallpaper background-image can coexist. */
body[class*="theme-"] {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--body-font) !important;
}
/* Owner/world wallpaper: paint on body itself (known-good path).
   ::before with z-index:-1 sits BEHIND opaque body bg and was invisible
   under discmaster gray — Supreme tile regression 2026-07-09. */
/* Owner-world only — do NOT apply to profile/viewer has-wallpaper (cover-img path). */
body.has-wallpaper[data-owner-wallpaper="1"] {
  /* Known-good tile path: scroll + auto + repeat (NOT fixed — fixed cuts at viewport). */
  background-color: transparent !important;
  background-image: var(--wallpaper-url) !important;
  background-repeat: var(--wallpaper-repeat, repeat) !important;
  background-size: var(--wallpaper-size, auto) !important;
  background-position: 0 0 !important;
  background-attachment: scroll !important;
}
body.has-wallpaper[data-owner-wallpaper="1"].a96 {
  background-color: transparent !important;
}
/* Neutralize the dual ::before layer when body itself carries the wallpaper. */
body.has-wallpaper[data-owner-wallpaper="1"]::before {
  opacity: 0 !important;
  background-image: none !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;
}

@media (max-width: 640px) {
  #ankle-toolbar {
    top: 6px;
    right: 6px;
    gap: 4px;
  }

  #ankle-identity {
    font-size: 12px;
  }

  #ankle-identity .ankle-identity__signin,
  #ankle-identity .ankle-identity__btn {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
  }

  #ankle-identity .ankle-identity__btn {
    gap: 6px;
  }

  #ankle-identity .ankle-identity__av {
    width: 20px;
    height: 20px;
  }

  #ankle-theme-fab {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  #ankle-theme-panel {
    top: 52px;
    right: 6px;
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 68px);
  }
}
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;
}

/* ── ALEQTH LOADER — verification-badge spinner ───────────────────────────
   Reusable loader matching the /web boot animation. Drop class `aleqth-loader`
   on any element to render the blue verification badge doing the 3D-spin
   used on /web. Verification is aleqth.com's core theme; surfacing it during
   loading reinforces "authenticated activity in progress". Size: --aleqth-loader-size
   (default 44px). */
@keyframes webBootSpin3d {
  0%   { transform: perspective(700px) rotateY(0deg)   rotateX(8deg) }
  50%  { transform: perspective(700px) rotateY(180deg) rotateX(-8deg) }
  100% { transform: perspective(700px) rotateY(360deg) rotateX(8deg) }
}
.aleqth-loader {
  --aleqth-loader-size: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
}
.aleqth-loader__badge {
  width: var(--aleqth-loader-size);
  height: var(--aleqth-loader-size);
  background: url('/static/verified-sm.png') center/contain no-repeat;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: webBootSpin3d 3.4s linear infinite;
}
.aleqth-loader__label {
  font-family: var(--mono, 'Fragment Mono', monospace);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim, #888);
}
.aleqth-loader--sm { --aleqth-loader-size: 22px }
.aleqth-loader--lg { --aleqth-loader-size: 64px }
.aleqth-loader--row { flex-direction: row; gap: 10px }

/* ════════════════════════════════════════════════════════════════════
   UNIVERSAL LOADER SWEEP — every spinner across the system inherits
   the verification badge animation. Maps the common loader class
   names (.spinner, .loader, .loading-spinner, .ankle-spinner) to the
   same webBootSpin3d on a verified-badge background. No additive
   chrome — pure motion conveys "loading", the badge itself conveys
   "this is aleqth". Uses !important to override per-page inline
   styles that would otherwise win the cascade against /theme.css.

   Opt-out: any loader that legitimately wants a different look can
   add data-keep-default attr, e.g.
       <div class="spinner" data-keep-default></div>
   ══════════════════════════════════════════════════════════════════ */
.spinner:not([data-keep-default]),
.loader:not([data-keep-default]),
.loading-spinner:not([data-keep-default]),
.ankle-spinner:not([data-keep-default]),
.ankle-loader:not([data-keep-default]),
[role="progressbar"]:not([data-keep-default]):not(progress):not(meter) {
  /* Reset whatever the page set so we can paint cleanly. */
  background: url('/static/verified-sm.png') center/contain no-repeat !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Sensible default size if the page didn't specify one. */
  min-width: 28px !important;
  min-height: 28px !important;
  /* The animation. perspective + 3D rotation = weighted feel. */
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  animation: webBootSpin3d 3.4s linear infinite !important;
  /* Some loaders wrap a child <div> that drew the actual ring — hide
     any descendants so we don't get the badge AND the old ring. */
  color: transparent !important;
  font-size: 0 !important;
}
/* Hide internal scaffolding of common loader patterns (e.g. SVG circles,
   pseudo-elements that drew the old animated ring). */
.spinner:not([data-keep-default])::before,
.spinner:not([data-keep-default])::after,
.loader:not([data-keep-default])::before,
.loader:not([data-keep-default])::after,
.loading-spinner:not([data-keep-default])::before,
.loading-spinner:not([data-keep-default])::after,
.ankle-spinner:not([data-keep-default])::before,
.ankle-spinner:not([data-keep-default])::after {
  display: none !important;
}
.spinner:not([data-keep-default]) > *,
.loader:not([data-keep-default]) > *,
.loading-spinner:not([data-keep-default]) > *,
.ankle-spinner:not([data-keep-default]) > * {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .spinner:not([data-keep-default]),
  .loader:not([data-keep-default]),
  .loading-spinner:not([data-keep-default]),
  .ankle-spinner:not([data-keep-default]),
  .ankle-loader:not([data-keep-default]) {
    animation: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────────
   ankle96 form-control overrides — appended 2026-05-20
   Global so every page injected with /theme.css gets ankle96-consistent
   buttons, sliders, checkboxes, color pickers. Targeting native form
   surfaces only — pages with custom styled controls still win because
   their selectors have higher specificity.
   ────────────────────────────────────────────────────────────────── */

/* 1. Kill the Chrome blue tint on every native indicator (slider thumb,
   checkbox, radio, progress). Cheap one-line global vibe fix. */
:root { accent-color: #000 }

/* 2. Range sliders — silver track with hard 1px black bevels and a
   chunky Win95 outset thumb. Reset webkit/moz appearance first. */
input[type="range"]:not([data-keep-default]) {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
input[type="range"]:not([data-keep-default])::-webkit-slider-runnable-track {
  height: 6px;
  background: #c0c0c0;
  border: 1px inset #fff;
  border-radius: 0;
}
input[type="range"]:not([data-keep-default])::-moz-range-track {
  height: 6px;
  background: #c0c0c0;
  border: 1px inset #fff;
  border-radius: 0;
}
input[type="range"]:not([data-keep-default])::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 18px;
  margin-top: -6px;
  background: #c0c0c0;
  border: 2px outset #fff;
  border-radius: 0;
  cursor: pointer;
}
input[type="range"]:not([data-keep-default])::-moz-range-thumb {
  width: 14px;
  height: 18px;
  background: #c0c0c0;
  border: 2px outset #fff;
  border-radius: 0;
  cursor: pointer;
}
input[type="range"]:not([data-keep-default])::-moz-range-progress {
  height: 6px;
  background: #808080;
}

/* 3. Native color pickers — bevel the swatch frame so it reads as a
   Win95 control. The inner color preview is owned by the browser, but
   the outer box can be themed. */
input[type="color"]:not([data-keep-default]) {
  width: 36px;
  height: 22px;
  padding: 1px;
  background: #c0c0c0;
  border: 2px inset #fff;
  border-radius: 0;
  cursor: pointer;
}

/* 4. Checkboxes + radios — leave size native (touch targets are fine)
   but kill the rounded radio with a square mask, and force the accent
   to black. Pages that want round/colored checkboxes can opt out with
   [data-keep-default]. */
input[type="checkbox"]:not([data-keep-default]),
input[type="radio"]:not([data-keep-default]) {
  accent-color: #000;
}

/* 5. Native <button> baseline — silver outset bevel, mono caps, no
   radius. Class-styled buttons (e.g. .btn, .a96-btn, .ankle-btn) keep
   their own look because element selectors have lower specificity.
   Skip buttons that explicitly want default chrome via data attr. */
button:not([data-keep-default]):not([class*="btn"]):not([class*="-button"]):not([class*="Button"]) {
  background: #c0c0c0;
  color: #000;
  border: 2px outset #fff;
  border-radius: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  padding: 3px 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
}
button:not([data-keep-default]):not([class*="btn"]):not([class*="-button"]):not([class*="Button"]):hover {
  background: #d4d4d4;
}
button:not([data-keep-default]):not([class*="btn"]):not([class*="-button"]):not([class*="Button"]):active {
  border-style: inset;
}

/* 6. <progress> and <meter> — silver track, dark gray fill, no glow. */
progress:not([data-keep-default]),
meter:not([data-keep-default]) {
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  background: #c0c0c0;
  border: 1px inset #fff;
  border-radius: 0;
}
progress:not([data-keep-default])::-webkit-progress-bar,
meter:not([data-keep-default])::-webkit-meter-bar {
  background: #c0c0c0;
  border-radius: 0;
}
progress:not([data-keep-default])::-webkit-progress-value,
meter:not([data-keep-default])::-webkit-meter-optimum-value {
  background: #404040;
  border-radius: 0;
}
progress:not([data-keep-default])::-moz-progress-bar {
  background: #404040;
  border-radius: 0;
}

/* ── content sections opaque over theme wallpaper (root fix for .section bleed when ankle96-chrome.css is absent) ── */
.a96 .section{background:var(--panel);border:1px solid var(--line);padding:12px 14px;margin:22px 0}
.a96 .hero{background:var(--panel)}


/* ── Wallpaper file picker + SURF mini search (theme v2.8) ───────── */
#ankle-theme-panel .ankle-wp-upload-row{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  position:relative; z-index:2;
  pointer-events:auto !important;
}
#ankle-theme-panel #ankle-wallpaper-browse,
#ankle-theme-panel #ankle-surf-wp-go,
#ankle-theme-panel #ankle-surf-wp-rand{
  pointer-events:auto !important;
  cursor:pointer !important;
  position:relative; z-index:3;
}
#ankle-theme-panel #ankle-wallpaper-input{
  /* visually replaced by Choose File button; still present for a11y/label */
  position:absolute !important; left:-9999px !important;
  width:1px !important; height:1px !important; opacity:0 !important;
  pointer-events:none !important;
}
#ankle-theme-panel .ankle-wp-fname{
  font-family:var(--mono-font, monospace); font-size:10px; color:var(--muted);
  max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#ankle-theme-panel #ankle-surf-wp-q{
  flex:1; min-width:120px;
  font-family:var(--mono-font, monospace); font-size:11px;
  border:2px inset #fff; background:#fff; color:var(--fg,#000);
  padding:4px 6px; pointer-events:auto !important;
}
#ankle-theme-panel .ankle-surf-wp-results{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:4px;
  margin-top:6px; max-height:180px; overflow-y:auto;
  pointer-events:auto !important;
}
#ankle-theme-panel .ankle-surf-wp-tile{
  display:flex; flex-direction:column; gap:2px;
  padding:2px; border:2px outset #eee; background:var(--panel,#c0c0c0);
  cursor:pointer; text-align:left; min-width:0;
  pointer-events:auto !important;
}
#ankle-theme-panel .ankle-surf-wp-tile:hover{ background:var(--highlight,#ffffe0); }
#ankle-theme-panel .ankle-surf-wp-tile.active{
  border-style:inset; background:#ffffe0; font-weight:bold;
}
#ankle-theme-panel .ankle-surf-wp-tile img{
  width:100%; height:52px; object-fit:cover; display:block;
  border:1px solid var(--line,#999); background:#ddd;
  pointer-events:none;
}
#ankle-theme-panel .ankle-surf-wp-tile span{
  font-family:var(--mono-font, monospace); font-size:9px; color:var(--muted,#666);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  pointer-events:none;
}

#ankle-theme-panel .ankle-surf-wp-results{
  min-height: 72px;
  border: 1px dashed var(--line, #999);
  padding: 4px;
  background: rgba(255,255,255,0.35);
}
#ankle-theme-panel .ankle-surf-wp-results[aria-busy="true"]{
  opacity: 0.75;
}
#ankle-theme-panel .ankle-surf-wp-empty{
  grid-column: 1 / -1;
  font-family: var(--mono-font, monospace);
  font-size: 10px;
  color: var(--muted, #666);
  padding: 10px 6px;
  text-align: center;
}

#ankle-theme-panel .ankle-surf-wp-skel{
  min-height:70px;
  background: linear-gradient(90deg, #b8b8b8 25%, #d0d0d0 50%, #b8b8b8 75%);
  background-size: 200% 100%;
  animation: ankle-surf-wp-shimmer 1.1s infinite linear;
  border:2px inset #eee;
  pointer-events:none;
}
@keyframes ankle-surf-wp-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
#ankle-theme-panel .ankle-surf-wp-tile.broken img{
  opacity:0.25;
}
#ankle-theme-panel .ankle-surf-wp-empty{
  grid-column: 1 / -1;
  font-family: var(--mono-font, monospace);
  font-size: 10px;
  color: var(--muted, #666);
  padding: 8px 4px;
}


/* ── Global toolbar vs OS-shell top chips ─────────────────────────────
   The identity pill + gear are fixed at top:8px. When the shell's top
   chips bar is open it occupies that band, so the toolbar clipped into
   it (and into page-local topbars) on every shell page. Drop the toolbar
   and the theme panel below the chips row whenever chips are visible. */
/* Dock the identity pill + gear INSIDE the chips row (right end), always —
   floating below it covered page content (rails, panel headers). */
body.aos-has-shell.aos-top-open:not(.aos-shell-disabled) #ankle-toolbar {
  top: 1px; right: 40px; gap: 4px; z-index: 10010;
}
body.aos-has-shell.aos-top-open:not(.aos-shell-disabled) #ankle-toolbar #ankle-theme-fab {
  width: 26px; height: 22px; font-size: 12px;
}
body.aos-has-shell.aos-top-open:not(.aos-shell-disabled) #ankle-identity .ankle-identity__btn,
body.aos-has-shell.aos-top-open:not(.aos-shell-disabled) #ankle-identity .ankle-identity__signin {
  padding: 2px 8px; min-height: 0; font-size: 11px;
}
body.aos-has-shell.aos-top-open:not(.aos-shell-disabled) #ankle-identity .ankle-identity__av {
  width: 16px; height: 16px;
}
/* chips row reserves the right end so ＋post / edit chips never underlap */
body.aos-has-shell.aos-top-open:not(.aos-shell-disabled) #aos-topchips { padding-right: 200px; }
body.aos-has-shell.aos-top-open:not(.aos-shell-disabled) #ankle-theme-panel { top: 32px; }


/* ── Never let text flow off a surface ────────────────────────────────
   Long unbreakable strings (urls, uids, filenames) must wrap instead of
   escaping their container — global doctrine across all pages. break-word
   only kicks in at overflow, so normal layout is untouched. */
body p, body span, body div, body a, body td, body li, body dd, body figcaption {
  overflow-wrap: break-word;
}


/* ── Mobile dock (≤700px): compact pill, small chips reserve ────────── */
@media (max-width: 700px) {
  body.aos-has-shell.aos-top-open:not(.aos-shell-disabled) #ankle-toolbar { right: 4px; gap: 3px; }
  body.aos-has-shell.aos-top-open:not(.aos-shell-disabled) #ankle-identity .ankle-identity__name,
  body.aos-has-shell.aos-top-open:not(.aos-shell-disabled) #ankle-identity .ankle-identity__caret { display: none; }
  body.aos-has-shell.aos-top-open:not(.aos-shell-disabled) #ankle-identity .ankle-identity__btn,
  body.aos-has-shell.aos-top-open:not(.aos-shell-disabled) #ankle-identity .ankle-identity__signin { padding: 2px 5px; }
  body.aos-has-shell.aos-top-open:not(.aos-shell-disabled) #aos-topchips { padding-right: 84px; }
  #ankle-theme-panel { max-width: calc(100vw - 8px); right: 4px; }
}