/* Cybercore universal theme chooser: styles.
 *
 * Every visual decision is a token, so each site can make the chooser look
 * native without touching this file. Defaults read the standard Cybercore
 * variables (--panel, --white, --line, --pink, --cyan, --mono…), so a site
 * that already uses them needs nothing. Override on the element, e.g.:
 *
 *   cybercore-theme-chooser {
 *     --ccx-font: var(--font-body);  --ccx-case: none;
 *     --ccx-bg: var(--surface-2);    --ccx-accent: var(--brand);
 *   }

 *
 * Corners are always square on every site; there is no radius token.
 *
 * Sizes are in --ccx-rem (1rem by default). chooser.js sets it to 16px on
 * pages whose root font is shrunk, such as mdBook (html { font-size: 62.5% }),
 * so the chooser is the same size there as everywhere else.
 */
cybercore-theme-chooser {
  --ccx-font: var(--mono, ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace);
  --ccx-size: calc(.75 * var(--ccx-rem, 1rem));
  --ccx-weight: 600;
  --ccx-case: uppercase;
  --ccx-tracking: .1em;
  --ccx-fg: var(--white, #f0f0f2);
  --ccx-muted: var(--muted, #807f8b);
  --ccx-bg: var(--panel, #16151f);
  --ccx-field: var(--bg, #09080f);
  --ccx-line: var(--line, #32303e);
  --ccx-accent: var(--pink, #ff147f);
  --ccx-focus: var(--cyan, #00e5ff);
  --ccx-clip: none;
  --ccx-button-bg: color-mix(in srgb, var(--ccx-bg) 82%, transparent);
  --ccx-button-fg: var(--ccx-fg);
  --ccx-button-border: var(--ccx-accent);
  --ccx-button-width: calc(13.5 * var(--ccx-rem, 1rem));
  --ccx-height: calc(2.4 * var(--ccx-rem, 1rem));
  --ccx-menu-width: calc(19 * var(--ccx-rem, 1rem));
  --ccx-shadow: 0 calc(1.5 * var(--ccx-rem, 1rem)) calc(4 * var(--ccx-rem, 1rem)) rgb(0 0 0 / .55);
  --ccx-blur: 18px;
  --ccx-glow: 1;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(.5 * var(--ccx-rem, 1rem));
  min-width: 0;
  max-width: 100%;
  font-family: var(--ccx-font);
  font-size: var(--ccx-size);
  line-height: 1.2;
  color: var(--ccx-fg);
  vertical-align: middle;
}
cybercore-theme-chooser:not(:defined) { min-width: var(--ccx-button-width); min-height: var(--ccx-height); }

/* Reset: sites style bare buttons and inputs in many ways. */
cybercore-theme-chooser button,
cybercore-theme-chooser input {
  all: unset;
  box-sizing: border-box;
  font-family: var(--ccx-font);
  font-size: var(--ccx-size);
  -webkit-tap-highlight-color: transparent;
}
cybercore-theme-chooser *, cybercore-theme-chooser *::before, cybercore-theme-chooser *::after { box-sizing: border-box; }
cybercore-theme-chooser [hidden] { display: none !important; }

cybercore-theme-chooser .ccx-picker { position: relative; min-width: 0; }

cybercore-theme-chooser .ccx-button {
  display: flex; align-items: center; gap: calc(.55 * var(--ccx-rem, 1rem));
  width: var(--ccx-button-width); max-width: min(100%, var(--ccx-button-max, calc(18 * var(--ccx-rem, 1rem)))); min-height: var(--ccx-height);
  padding: 0 calc(.8 * var(--ccx-rem, 1rem));
  font-weight: var(--ccx-weight); letter-spacing: var(--ccx-tracking); text-transform: var(--ccx-case);
  color: var(--ccx-button-fg); background: var(--ccx-button-bg);
  border: 1px solid var(--ccx-button-border); border-radius: 0; clip-path: var(--ccx-clip);
  cursor: pointer; transition: background .2s, box-shadow .2s;
}
cybercore-theme-chooser .ccx-button:hover,
cybercore-theme-chooser .ccx-button[aria-expanded="true"] {
  background: color-mix(in srgb, var(--ccx-accent) 14%, var(--ccx-bg));
  box-shadow: inset 0 0 calc(18px * var(--ccx-glow)) color-mix(in srgb, var(--ccx-accent) 30%, transparent);
}
cybercore-theme-chooser .ccx-button:focus-visible,
cybercore-theme-chooser .ccx-shuffle:focus-visible { outline: 2px solid var(--ccx-focus); outline-offset: 2px; }
cybercore-theme-chooser .ccx-button:disabled { cursor: default; opacity: .7; }
cybercore-theme-chooser .ccx-label { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
cybercore-theme-chooser .ccx-swatch {
  flex: none; width: calc(.8 * var(--ccx-rem, 1rem)); height: calc(.8 * var(--ccx-rem, 1rem)); border-radius: 0;
  background: conic-gradient(var(--ccx-s1, var(--ccx-accent)) 0 25%, var(--ccx-s2, var(--ccx-focus)) 0 50%, var(--ccx-s3, var(--ccx-fg)) 0 75%, var(--ccx-s4, var(--ccx-muted)) 0);
  box-shadow: 0 0 calc(8px * var(--ccx-glow)) var(--ccx-s2, var(--ccx-accent));
}
cybercore-theme-chooser .ccx-chev { flex: none; width: calc(1 * var(--ccx-rem, 1rem)); text-align: center; transition: transform .2s; }
cybercore-theme-chooser .ccx-button[aria-expanded="true"] .ccx-chev { transform: rotate(180deg); }

cybercore-theme-chooser .ccx-shuffle {
  display: grid; place-items: center; flex: none;
  width: var(--ccx-height); height: var(--ccx-height);
  color: var(--ccx-focus); background: var(--ccx-button-bg);
  border: 1px solid var(--ccx-focus); border-radius: 0; clip-path: var(--ccx-clip);
  cursor: pointer; transition: background .2s, color .2s;
}
cybercore-theme-chooser .ccx-shuffle svg { width: calc(1.15 * var(--ccx-rem, 1rem)); height: calc(1.15 * var(--ccx-rem, 1rem)); }
cybercore-theme-chooser .ccx-shuffle:hover { color: var(--ccx-field); background: var(--ccx-focus); }

/* Menu */
cybercore-theme-chooser .ccx-menu {
  position: absolute; right: 0; top: calc(100% + calc(.5 * var(--ccx-rem, 1rem))); z-index: 1000;
  width: var(--ccx-menu-width); max-width: calc(100vw - calc(2 * var(--ccx-rem, 1rem)));
  text-transform: none;
  background: color-mix(in srgb, var(--ccx-bg) 96%, transparent);
  border: 1px solid var(--ccx-line); border-radius: 0;
  -webkit-backdrop-filter: blur(var(--ccx-blur)); backdrop-filter: blur(var(--ccx-blur));
  box-shadow: var(--ccx-shadow), 0 0 0 1px color-mix(in srgb, var(--ccx-accent) 20%, transparent);
  overflow: hidden;
  animation: ccx-in .2s cubic-bezier(.2, .8, .2, 1) both;
}
cybercore-theme-chooser .ccx-menu.ccx-left { right: auto; left: 0; }
cybercore-theme-chooser .ccx-menu.ccx-up { top: auto; bottom: calc(100% + calc(.5 * var(--ccx-rem, 1rem))); }
cybercore-theme-chooser .ccx-menu.ccx-sheet { position: fixed; right: auto; max-width: none; }
/* Top-layer menu (Popover API): undo the UA popover box, place by JS. */
cybercore-theme-chooser .ccx-menu.ccx-layer { position: fixed; inset: auto; margin: 0; padding: 0; color: inherit; }
cybercore-theme-chooser .ccx-menu.ccx-layer:not(:popover-open) { display: none; }
@keyframes ccx-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

cybercore-theme-chooser .ccx-search { padding: calc(.5 * var(--ccx-rem, 1rem)); border-bottom: 1px solid var(--ccx-line); }
cybercore-theme-chooser .ccx-search input {
  display: block; width: 100%; padding: calc(.6 * var(--ccx-rem, 1rem)) calc(.65 * var(--ccx-rem, 1rem));
  letter-spacing: .06em; color: var(--ccx-fg);
  background: var(--ccx-field); border: 1px solid var(--ccx-line); border-radius: 0;
  cursor: text;
}
cybercore-theme-chooser .ccx-search input::placeholder { color: var(--ccx-muted); opacity: 1; text-transform: var(--ccx-case); }
cybercore-theme-chooser .ccx-search input:focus { outline: none; border-color: var(--ccx-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ccx-focus) 22%, transparent); }

cybercore-theme-chooser .ccx-list {
  max-height: min(60vh, calc(26 * var(--ccx-rem, 1rem))); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(.3 * var(--ccx-rem, 1rem)); scrollbar-width: thin; scrollbar-color: var(--ccx-accent) transparent;
}
cybercore-theme-chooser .ccx-list::-webkit-scrollbar { width: 8px; }
cybercore-theme-chooser .ccx-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ccx-accent) 70%, transparent); border-radius: 0; }

cybercore-theme-chooser .ccx-group {
  position: sticky; top: calc(-.3 * var(--ccx-rem, 1rem)); z-index: 1;
  display: flex; align-items: center; gap: calc(.45 * var(--ccx-rem, 1rem));
  margin: calc(.35 * var(--ccx-rem, 1rem)) 0 calc(.15 * var(--ccx-rem, 1rem)); padding: calc(.55 * var(--ccx-rem, 1rem)) calc(.6 * var(--ccx-rem, 1rem)) calc(.45 * var(--ccx-rem, 1rem));
  font-weight: 700; letter-spacing: .14em; text-transform: var(--ccx-case);
  color: var(--fa); border-left: 2px solid var(--fa);
  border-bottom: 1px solid color-mix(in srgb, var(--fa) 35%, transparent);
  background: color-mix(in srgb, var(--fa) 10%, var(--ccx-bg));
}
cybercore-theme-chooser .ccx-group span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
cybercore-theme-chooser .ccx-group em { flex: none; font-style: normal; opacity: .7; }

cybercore-theme-chooser .ccx-option {
  display: flex; align-items: center; gap: calc(.5 * var(--ccx-rem, 1rem)); width: 100%; min-height: calc(2.25 * var(--ccx-rem, 1rem));
  padding: calc(.45 * var(--ccx-rem, 1rem)) calc(.6 * var(--ccx-rem, 1rem));
  font-weight: 500; letter-spacing: .06em; text-transform: var(--ccx-case);
  color: var(--ccx-fg); border-radius: 0;
  cursor: pointer; transition: color .12s, background .12s, box-shadow .12s;
}
cybercore-theme-chooser .ccx-option .ccx-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
cybercore-theme-chooser .ccx-option:hover,
cybercore-theme-chooser .ccx-option:focus-visible,
cybercore-theme-chooser .ccx-option[aria-selected="true"] {
  color: var(--fa); background: color-mix(in srgb, var(--fa) 15%, var(--ccx-bg));
  box-shadow: inset 2px 0 var(--fa);
}
cybercore-theme-chooser .ccx-option:focus-visible { outline: 1px solid var(--fa); outline-offset: -1px; }
cybercore-theme-chooser .ccx-option[aria-selected="true"]::before { content: "▸"; flex: none; }
cybercore-theme-chooser .ccx-option[data-family="site"] { margin-bottom: calc(.2 * var(--ccx-rem, 1rem)); border: 1px dashed var(--ccx-line); --fa: var(--ccx-focus); }
cybercore-theme-chooser .ccx-dots { display: flex; gap: 2px; flex: none; }
cybercore-theme-chooser .ccx-dots i { width: calc(.55 * var(--ccx-rem, 1rem)); height: calc(.55 * var(--ccx-rem, 1rem)); border-radius: 0; }
cybercore-theme-chooser .ccx-empty { margin: 0; padding: calc(1 * var(--ccx-rem, 1rem)) calc(.8 * var(--ccx-rem, 1rem)); color: var(--ccx-muted); text-align: center; }

@media (max-width: 480px) {
  cybercore-theme-chooser { --ccx-button-width: min(calc(11 * var(--ccx-rem, 1rem)), 52vw); }
}
/* `compact`: on phones the button shrinks to its swatch (the accessible
   name still says "Theme: <name>"). */
@media (max-width: 560px) {
  cybercore-theme-chooser[compact] .ccx-label,
  cybercore-theme-chooser[compact] .ccx-chev { display: none; }
  cybercore-theme-chooser[compact] .ccx-button { width: var(--ccx-height); min-width: var(--ccx-height); padding: 0; justify-content: center; }
}
/* Set by the chooser itself when the full button would not fit on screen. */
cybercore-theme-chooser.ccx-fit .ccx-label,
cybercore-theme-chooser.ccx-fit .ccx-chev { display: none; }
cybercore-theme-chooser.ccx-fit .ccx-button { width: var(--ccx-height); min-width: var(--ccx-height); padding: 0; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  cybercore-theme-chooser .ccx-menu { animation: none; }
  cybercore-theme-chooser * { transition: none !important; }
}
@media (hover: none) {
  cybercore-theme-chooser .ccx-option { min-height: calc(2.75 * var(--ccx-rem, 1rem)); }
}