/* ExNiLingo Options — FluentCommunity 2.12.0 */

/* ---------- Chameleon cursor ----------
   Only when <html> has .exno-cursor (member's choice), and only with a real
   mouse: phones and tablets have no cursor to replace.
   The 64 px image is used on sharp (retina) screens, shown at 32 px.
   Click point = snout tip (2, 2). */
@media (hover: hover) and (pointer: fine) {
  html.exno-cursor,
  html.exno-cursor body,
  html.exno-cursor body * {
    cursor: url("cursor/chameleon-32.png") 2 2, auto !important;
    cursor: -webkit-image-set(url("cursor/chameleon-32.png") 1x, url("cursor/chameleon-64.png") 2x) 2 2, auto !important;
    cursor: image-set(url("cursor/chameleon-32.png") 1x, url("cursor/chameleon-64.png") 2x) 2 2, auto !important;
  }

  /* Where you type, keep the usual text cursor so you can see where you click. */
  html.exno-cursor input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not([type="file"]):not([type="image"]),
  html.exno-cursor textarea,
  html.exno-cursor [contenteditable=""],
  html.exno-cursor [contenteditable="true"],
  html.exno-cursor [contenteditable=""] *,
  html.exno-cursor [contenteditable="true"] * {
    cursor: text !important;
  }
}

/* ---------- Options page ---------- */
.exno-panel {
  --exno-bg: var(--fcom-primary-bg, #fff);
  --exno-fg: var(--fcom-primary-text, #1d2327);
  --exno-muted: var(--fcom-secondary-text, #545b61);
  --exno-line: var(--fcom-primary-border, #e3e5e8);
  --exno-accent: var(--fcom-primary-button, #2b6cb0);
  color: var(--exno-fg);
  background: var(--exno-bg);
  border: 1px solid var(--exno-line);
  border-radius: 12px;
  padding: 24px;
  margin: 20px auto;
  max-width: 760px;
  box-sizing: border-box;
}
.exno-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.exno-panel h2 { margin: 0 0 6px; font-size: 22px; color: var(--exno-fg); }
.exno-intro, .exno-empty { margin: 0 0 20px; color: var(--exno-muted); }
.exno-status { color: var(--exno-muted); font-size: 14px; }
.exno-status.exno-error { color: #b32d2e; }
.dark .exno-status.exno-error { color: #ff8a8a; }

.exno-section { border-top: 1px solid var(--exno-line); padding: 16px 0 4px; }
.exno-section { scroll-margin-top: 80px; transition: background-color .6s; }
.exno-section.exno-section-target { background: color-mix(in srgb, var(--exno-accent) 7%, transparent); border-radius: 8px; }
.exno-section-title { margin: 0 0 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--exno-muted); }

.exno-row { display: flex; gap: 14px; align-items: flex-start; min-height: 44px; }
.exno-row label { flex: 1; cursor: pointer; }
.exno-label { display: block; font-weight: 600; font-size: 16px; }
.exno-help { display: block; color: var(--exno-muted); font-size: 14px; margin-top: 2px; }
.exno-preview { flex: 0 0 auto; width: 32px; height: 32px; margin-top: 2px; }

/* switch (same look as Focus mode) */
.exno-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 44px; height: 26px;
  margin: 2px 0 0;
  border-radius: 13px;
  background: #b9bec4;
  position: relative;
  transition: background .15s;
}
.exno-switch::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  transition: transform .15s;
}
.exno-switch:checked { background: var(--exno-accent); }
.exno-switch:checked::after { transform: translateX(18px); }
.exno-switch:focus-visible { outline: 2px solid var(--exno-accent); outline-offset: 2px; }

@media (max-width: 600px) {
  .exno-panel { padding: 18px 16px; margin: 12px 0; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .exno-switch, .exno-switch::after, .exno-section { transition: none; }
}