/* The page shell and the small component set every interior page is built from.
 *
 * Interior pages (Automation, Activity, Trading plan, Playbooks, Settings, Accounts) used to hand-roll their own header, tabs,
 * cards and tables, and drifted: one right-aligned its title, one overflowed a phone, one printed 11px column heads. This file
 * is the single place those decisions are made. daisyUI stays underneath (buttons, inputs, selects, toggles); this adds the
 * structure and the pieces it does not have.
 *
 * Rules the file keeps:
 *   - nothing under 12px (--cf-fs-xs), on any width;
 *   - one content width and one left edge (.cf-page);
 *   - a table never overflows the page: it scrolls inside its own wrapper, or becomes stacked cards under 640px;
 *   - tone is semantic and the same everywhere (pos/neg/warn/info/muted), never decorative.
 */

:root {
  /* Type scale. */
  --cf-fs-xs: 0.75rem;   /* 12 */
  --cf-fs-sm: 0.8125rem; /* 13 */
  --cf-fs-md: 0.875rem;  /* 14 */
  --cf-fs-lg: 1.125rem;  /* 18 */
  --cf-fs-xl: 1.5rem;    /* 24 */
  --cf-fs-2xl: 1.875rem; /* 30 */

  /* Space scale. */
  --cf-1: 0.25rem;
  --cf-2: 0.5rem;
  --cf-3: 0.75rem;
  --cf-4: 1rem;
  --cf-5: 1.5rem;
  --cf-6: 2rem;

  /* Tone. Green and red mean direction and result; amber means "look at this"; blue means information. */
  --cf-pos: var(--color-success);
  --cf-neg: var(--color-error);
  --cf-warn: var(--color-warning);
  --cf-info: var(--color-info);
  --cf-primary: var(--color-primary);
  --cf-muted: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  --cf-faint: color-mix(in oklab, var(--color-base-content) 42%, transparent);
  --cf-edge: var(--color-base-300);
  --cf-card: var(--color-base-100);
  --cf-ground: var(--color-base-200);
  --cf-measure: 75rem;
}

/* ---------- Page ---------- */

.cf-page {
  width: 100%;
  max-width: var(--cf-measure);
  margin-inline: auto;
  padding: var(--cf-4);
  display: flex;
  flex-direction: column;
  gap: var(--cf-4);
}
@media (min-width: 1024px) {
  .cf-page { padding: var(--cf-5); }
}

/* The title, a one-line status, and the page's actions. Title block on the left, actions on the right, and the actions drop under
   the title on a phone. (The old `.page-head` was a column flex, so `items-end` pushed the whole header to the right.) */
.cf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cf-3) var(--cf-5);
}
.cf-head__text { display: flex; flex-direction: column; gap: var(--cf-1); min-width: 0; flex: 1 1 18rem; }
.cf-head h1 {
  margin: 0;
  font-size: clamp(var(--cf-fs-xl), 3vw, var(--cf-fs-2xl));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.cf-head__status {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cf-1) var(--cf-3);
  font-size: var(--cf-fs-md);
  color: var(--cf-muted);
}
.cf-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-2); }
@media (max-width: 639px) {
  .cf-head__actions { width: 100%; }
  .cf-head__actions > .btn { flex: 1 1 auto; }
}

/* A row of filters that stays in view while the page scrolls under it. On a phone it sits below the mobile navbar. */
.cf-filters {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--cf-2) var(--cf-3);
  padding: var(--cf-2) 0;
  background: color-mix(in oklab, var(--cf-ground) 94%, transparent);
  backdrop-filter: blur(6px);
}
@media (max-width: 1023px) {
  .cf-filters { top: 4rem; }
}
.cf-filters > * { min-width: 0; max-width: 100%; }
.cf-field { display: flex; flex-direction: column; gap: var(--cf-1); font-size: var(--cf-fs-sm); color: var(--cf-muted); }
.cf-field > .select, .cf-field > .input { color: var(--color-base-content); }

/* ---------- Tabs ---------- */

.cf-tabs {
  display: flex;
  gap: var(--cf-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-bottom: 1px solid var(--cf-edge);
}
.cf-tabs::-webkit-scrollbar { display: none; }
/* A fade on the side that has more tabs behind it, so a cut-off tab reads as "scroll", not as the end. */
.cf-tabs.has-more-end { mask-image: linear-gradient(to right, #000 calc(100% - 2.25rem), transparent); }
.cf-tabs.has-more-start { mask-image: linear-gradient(to left, #000 calc(100% - 2.25rem), transparent); }
.cf-tabs.has-more-start.has-more-end { mask-image: linear-gradient(to right, transparent, #000 2.25rem, #000 calc(100% - 2.25rem), transparent); }

.cf-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--cf-2);
  min-height: 2.75rem;
  padding: 0 var(--cf-3);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--cf-muted);
  font: inherit;
  font-size: var(--cf-fs-md);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.cf-tab:hover { color: var(--color-base-content); }
.cf-tab[aria-selected="true"] { color: var(--color-base-content); border-bottom-color: var(--cf-primary); }
.cf-tab__count {
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-base-content) 12%, transparent);
  font-size: var(--cf-fs-xs);
  text-align: center;
  line-height: 1.4rem;
}

/* ---------- Card ---------- */

.cf-card {
  display: flex;
  flex-direction: column;
  gap: var(--cf-3);
  padding: var(--cf-4);
  background: var(--cf-card);
  border: 1px solid var(--cf-edge);
  border-radius: var(--radius-box);
}
.cf-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cf-2) var(--cf-3); }
.cf-card__title { margin: 0; font-size: var(--cf-fs-lg); font-weight: 700; letter-spacing: -0.01em; }
.cf-card__aside { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-2); }

/* ---------- Stat tiles ---------- */

.cf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--cf-3); }
.cf-stat {
  display: flex;
  flex-direction: column;
  gap: var(--cf-1);
  padding: var(--cf-3) var(--cf-4);
  background: var(--cf-card);
  border: 1px solid var(--cf-edge);
  border-radius: var(--radius-box);
  min-width: 0;
}
.cf-stat__label { font-size: var(--cf-fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cf-muted); }
.cf-stat__value { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--cf-fs-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.cf-stat--lead .cf-stat__value { font-size: var(--cf-fs-2xl); }
.cf-stat__delta { font-size: var(--cf-fs-xs); color: var(--cf-muted); }
.cf-stat.is-pos .cf-stat__value, .cf-stat__value.is-pos, .cf-pos { color: var(--cf-pos); }
.cf-stat.is-neg .cf-stat__value, .cf-stat__value.is-neg, .cf-neg { color: var(--cf-neg); }
.cf-stat.is-warn .cf-stat__value { color: var(--cf-warn); }

/* ---------- Chips and dots ---------- */

.cf-chip {
  --tone: var(--cf-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.125rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--tone) 40%, transparent);
  background: color-mix(in oklab, var(--tone) 14%, transparent);
  color: var(--tone);
  font-size: var(--cf-fs-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.cf-chip.is-pos { --tone: var(--cf-pos); }
.cf-chip.is-neg { --tone: var(--cf-neg); }
.cf-chip.is-warn { --tone: var(--cf-warn); }
.cf-chip.is-info { --tone: var(--cf-info); }
/* The small button inside a chip that takes a playbook off that one place (Playbooks page). */
.cf-chip__off { margin: 0 -0.25rem 0 0; padding: 0 0.25rem; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; line-height: 1; cursor: pointer; opacity: 0.75; }
.cf-chip__off:hover, .cf-chip__off:focus-visible { opacity: 1; }
.cf-chip__off:disabled { cursor: progress; opacity: 0.4; }
.cf-chip.is-primary { --tone: var(--cf-primary); }
.cf-chip.is-muted { --tone: var(--cf-muted); }
.cf-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cf-faint); flex: none; }
.cf-dot.is-pos { background: var(--cf-pos); }
.cf-dot.is-neg { background: var(--cf-neg); }
.cf-dot.is-warn { background: var(--cf-warn); }
.cf-dot.is-info { background: var(--cf-info); }

/* ---------- Segmented control (a choice of a few, always visible) ---------- */

.cf-seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: thin; padding: 2px; gap: 2px; background: var(--cf-ground); border: 1px solid var(--cf-edge); border-radius: var(--radius-field); }
.cf-seg > label { position: relative; display: block; }
.cf-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cf-seg span {
  display: block;
  padding: 0.3rem 0.8rem;
  border-radius: calc(var(--radius-field) - 2px);
  font-size: var(--cf-fs-sm);
  font-weight: 600;
  color: var(--cf-muted);
  white-space: nowrap;
}
.cf-seg input:checked + span { background: var(--color-base-300); color: var(--color-base-content); }
.cf-seg input:checked + span[data-tone="pos"] { background: color-mix(in oklab, var(--cf-pos) 22%, transparent); color: var(--cf-pos); }
.cf-seg input:checked + span[data-tone="info"] { background: color-mix(in oklab, var(--cf-info) 22%, transparent); color: var(--cf-info); }
.cf-seg input:checked + span[data-tone="neg"] { background: color-mix(in oklab, var(--cf-neg) 22%, transparent); color: var(--cf-neg); }
.cf-seg input:focus-visible + span { outline: 2px solid var(--cf-primary); outline-offset: 1px; }

/* ---------- A row that opens (a source, a playbook, a trade) ---------- */

.cf-row { border: 1px solid var(--cf-edge); border-radius: var(--radius-box); background: var(--cf-card); }
.cf-row > summary, .cf-row > .cf-row__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--cf-2) var(--cf-4);
  padding: var(--cf-3) var(--cf-4);
  list-style: none;
  cursor: pointer;
}
.cf-row > summary::-webkit-details-marker { display: none; }
.cf-row > .cf-row__head { cursor: default; }
.cf-row__main { display: flex; flex-direction: column; gap: var(--cf-1); min-width: 0; }
.cf-row__title { font-size: var(--cf-fs-md); font-weight: 700; overflow-wrap: anywhere; }
.cf-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-1) var(--cf-2); font-size: var(--cf-fs-sm); color: var(--cf-muted); }
.cf-row__side { display: flex; align-items: center; gap: var(--cf-2); }
.cf-row__chev { width: 1rem; height: 1rem; color: var(--cf-faint); transition: transform 140ms ease; }
.cf-row[open] > summary .cf-row__chev, .cf-row.is-open .cf-row__chev { transform: rotate(90deg); }
.cf-row__body { padding: var(--cf-4); border-top: 1px solid var(--cf-edge); display: flex; flex-direction: column; gap: var(--cf-3); }
.cf-row > summary:focus-visible { outline: 2px solid var(--cf-primary); outline-offset: 2px; border-radius: var(--radius-box); }
@media (max-width: 639px) {
  .cf-row > summary, .cf-row > .cf-row__head { grid-template-columns: minmax(0, 1fr); }
}

/* A list item that does not open: a title, a few lines under it, and the actions on the right. */
.cf-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cf-2) var(--cf-4);
  padding: var(--cf-3) var(--cf-4);
  border: 1px solid var(--cf-edge);
  border-radius: var(--radius-box);
  background: color-mix(in oklab, var(--cf-ground) 55%, var(--cf-card));
}
.cf-item__main { display: flex; flex-direction: column; gap: var(--cf-1); min-width: 0; flex: 1 1 18rem; }
.cf-item__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-2); margin: 0; font-size: var(--cf-fs-md); font-weight: 700; }
.cf-item__line { margin: 0; font-size: var(--cf-fs-md); color: var(--cf-muted); }
.cf-item__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-2); }

/* ---------- Key / value list ---------- */

.cf-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--cf-1) var(--cf-4); margin: 0; font-size: var(--cf-fs-md); }
.cf-kv dt { color: var(--cf-muted); }
.cf-kv dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Empty, loading, error ---------- */

.cf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cf-2);
  padding: var(--cf-6) var(--cf-4);
  text-align: center;
  border: 1px dashed var(--cf-edge);
  border-radius: var(--radius-box);
  color: var(--cf-muted);
}
.cf-empty__title { margin: 0; font-size: var(--cf-fs-md); font-weight: 700; color: var(--color-base-content); }
.cf-empty__hint { margin: 0; font-size: var(--cf-fs-md); max-width: 46ch; }
.cf-skel { position: relative; overflow: hidden; border-radius: var(--radius-field); background: color-mix(in oklab, var(--color-base-content) 8%, transparent); min-height: 1rem; }
.cf-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-base-content) 10%, transparent), transparent); animation: cf-sheen 1.4s infinite; }
@keyframes cf-sheen { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .cf-skel::after { animation: none; }
  .cf-row__chev { transition: none; }
}
.cf-error { padding: var(--cf-3) var(--cf-4); border: 1px solid color-mix(in oklab, var(--cf-neg) 45%, transparent); border-radius: var(--radius-box); background: color-mix(in oklab, var(--cf-neg) 10%, transparent); color: var(--color-base-content); font-size: var(--cf-fs-md); }

/* ---------- Tables ---------- */

.cf-table-wrap { overflow-x: auto; max-width: 100%; }
.cf-table { width: 100%; border-collapse: collapse; font-size: var(--cf-fs-md); }
.cf-table th {
  position: sticky;
  top: 0;
  padding: var(--cf-2) var(--cf-3);
  text-align: left;
  font-size: var(--cf-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cf-muted);
  background: var(--cf-card);
  border-bottom: 1px solid var(--cf-edge);
  white-space: nowrap;
}
.cf-table td { padding: var(--cf-2) var(--cf-3); border-bottom: 1px solid color-mix(in oklab, var(--cf-edge) 60%, transparent); vertical-align: top; }
.cf-table .is-num { text-align: right; font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.cf-table tbody tr:hover { background: color-mix(in oklab, var(--color-base-content) 4%, transparent); }
.cf-table th[aria-sort] { cursor: pointer; }
.cf-table th[aria-sort="ascending"]::after { content: " \2191"; }
.cf-table th[aria-sort="descending"]::after { content: " \2193"; }
/* Under 640px a table with data-label cells becomes a stack of cards, one per row: no sideways scrolling on a phone. */
@media (max-width: 639px) {
  .cf-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cf-table--cards, .cf-table--cards tbody, .cf-table--cards tr, .cf-table--cards td { display: block; width: 100%; }
  .cf-table--cards tr { padding: var(--cf-2) 0; border: 1px solid var(--cf-edge); border-radius: var(--radius-box); margin-bottom: var(--cf-2); background: var(--cf-card); }
  .cf-table--cards td { display: flex; justify-content: space-between; gap: var(--cf-3); padding: var(--cf-1) var(--cf-3); border: 0; text-align: right; }
  .cf-table--cards td::before { content: attr(data-label); flex: none; color: var(--cf-muted); font-size: var(--cf-fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: left; }
}

/* ---------- Text helpers ---------- */

.cf-muted { color: var(--cf-muted); }
.cf-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.cf-stack { display: flex; flex-direction: column; gap: var(--cf-3); }
.cf-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-2); }

/* The daisyUI table and badge sizes were set under 12px; interior pages hold the floor. */
:is(.cf-page, .cf-floor) .table th, :is(.cf-page, .cf-floor) .badge-xs, :is(.cf-page, .cf-floor) .label-text-alt { font-size: var(--cf-fs-xs); }
:is(.cf-page, .cf-floor) .btn-xs, :is(.cf-page, .cf-floor) .stat-label, :is(.cf-page, .cf-floor) .stat-note, :is(.cf-page, .cf-floor) .select-xs, :is(.cf-page, .cf-floor) .input-xs { font-size: var(--cf-fs-xs); }

/* ---------- Chart read-out (hover) ---------- */

.cf-chart-tip {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 7.5rem;
  padding: var(--cf-2) var(--cf-3);
  background: var(--color-base-300);
  border: 1px solid var(--cf-edge);
  border-radius: var(--radius-field);
  font-size: var(--cf-fs-xs);
  pointer-events: none;
  z-index: 2;
}
.cf-chart-tip strong { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--cf-fs-md); }

/* A modal that holds a short task (link Telegram, add a source, the terms). */
.cf-dialog .modal-box { display: flex; flex-direction: column; gap: var(--cf-3); max-width: 34rem; }
.cf-dialog__title { margin: 0; font-size: var(--cf-fs-lg); font-weight: 700; }
.cf-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--cf-2); }
.cf-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--cf-3); align-items: end; }
.cf-form > .is-wide { grid-column: 1 / -1; }
.cf-checks { display: flex; flex-wrap: wrap; gap: var(--cf-2) var(--cf-4); }
.cf-checks label { display: inline-flex; align-items: center; gap: var(--cf-2); font-size: var(--cf-fs-md); }

/* A switch with a title and a line under it (a rule that is on or off). */
.cf-switch { display: flex; align-items: flex-start; gap: var(--cf-3); cursor: pointer; }
.cf-switch > input { flex: none; margin-top: 0.125rem; }
.cf-switch > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-switch__title { font-size: var(--cf-fs-md); font-weight: 600; }
.cf-switch__note { font-size: var(--cf-fs-sm); color: var(--cf-muted); }

/* A limit written as a sentence: "Block [ a trade that risks more than ] [ 2 ] [ % of balance ]". */
.cf-rule { display: flex; flex-direction: column; gap: var(--cf-1); padding: var(--cf-2) 0; border-bottom: 1px solid color-mix(in oklab, var(--cf-edge) 60%, transparent); }
.cf-rule:last-child { border-bottom: 0; }
.cf-rule__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-2); font-size: var(--cf-fs-md); }
.cf-rule.is-off .cf-rule__line > span, .cf-rule.is-off .cf-rule__line > input, .cf-rule.is-off .cf-rule__line > select:not([data-f="action"]) { opacity: 0.55; }

/* The type floor for pages that are not on the shell yet (Settings, Accounts, Symbols) and for the sidebar: the stylesheet's
   max(var(--cf-min-fs), ...) sizes then stop at 12px. The Round page has its own density and does not opt in. */
.cf-page, .cf-floor, .nav-shell { --cf-min-fs: 12px; }
:is(.cf-page, .cf-floor) code { font-size: max(0.9em, var(--cf-fs-xs)); }

/* A class that sets `display` (cf-card, cf-field, cf-form…) would otherwise beat the hidden attribute. */
:is(.cf-page, .cf-floor, .cf-dialog) [hidden] { display: none !important; }

/* A short notice that tells the reader what they must know (not a result). */
.cf-notice { padding: var(--cf-3) var(--cf-4); border: 1px solid color-mix(in oklab, var(--cf-info) 40%, transparent); border-radius: var(--radius-box); background: color-mix(in oklab, var(--cf-info) 10%, transparent); font-size: var(--cf-fs-md); }
.cf-notice.is-warn { border-color: color-mix(in oklab, var(--cf-warn) 45%, transparent); background: color-mix(in oklab, var(--cf-warn) 10%, transparent); }

/* ---- SweetAlert2 ---------------------------------------------------------------------------
   Every confirm and alert is SweetAlert2, which ships a white box. These hand it the page's own
   tokens, so the dialogs are the theme's dark (or any theme that sets the same tokens) and nothing
   here names a colour. */
html .swal2-container,
html .swal2-popup {
  --swal2-background: var(--cf-card);
  --swal2-color: var(--color-base-content);
  --swal2-border: 1px solid var(--cf-edge);
  --swal2-border-radius: var(--radius-box);
  --swal2-backdrop: rgb(0 0 0 / 0.6);
  --swal2-confirm-button-background-color: var(--color-primary);
  --swal2-confirm-button-color: var(--color-primary-content);
  --swal2-confirm-button-border-radius: var(--radius-field);
  --swal2-cancel-button-background-color: var(--color-secondary);
  --swal2-cancel-button-color: var(--color-secondary-content);
  --swal2-cancel-button-border-radius: var(--radius-field);
  --swal2-deny-button-background-color: var(--color-error);
  --swal2-deny-button-color: var(--color-error-content);
  --swal2-input-background: var(--cf-ground);
  --swal2-input-border: 1px solid var(--cf-edge);
  --swal2-input-border-radius: var(--radius-field);
  --swal2-input-focus-border: 1px solid var(--color-primary);
  --swal2-validation-message-background: color-mix(in oklab, var(--color-error) 16%, var(--cf-card));
  --swal2-validation-message-color: var(--color-base-content);
  --swal2-footer-border-color: var(--cf-edge);
  --swal2-close-button-color: var(--cf-muted);
}
html .swal2-popup { font-family: inherit; color: var(--color-base-content); }
html .swal2-popup .swal2-html-container { color: var(--color-base-content); }
html .swal2-popup .swal2-checkbox { background: transparent; color: var(--color-base-content); }
html .swal2-popup .swal2-checkbox input { accent-color: var(--color-primary); }
html .swal2-popup .swal2-confirm.cf-swal-danger { background: var(--color-error); color: var(--color-error-content); }

/* The ℹ explanation (info_tip.js): a small round button after a term, and the one bubble it opens. */
.cf-info {
  display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-left: 0.35rem; padding: 0; vertical-align: middle;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 45%, transparent); border-radius: 999px; background: transparent;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent); font-size: var(--cf-fs-xs); font-style: italic; font-weight: 700; line-height: 1; cursor: pointer;
}
.cf-info:hover, .cf-info[aria-expanded="true"] { color: var(--color-base-content); border-color: var(--color-base-content); }
.cf-info:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cf-info-bubble {
  position: fixed; z-index: 1000; max-width: min(18rem, calc(100vw - 1rem)); padding: 0.5rem 0.65rem; border-radius: var(--radius-box, 0.5rem);
  background: var(--color-base-100); color: var(--color-base-content); border: 1px solid var(--color-base-300);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6); font-size: var(--cf-fs-sm); line-height: 1.35; font-weight: 400; font-style: normal; text-transform: none; letter-spacing: 0; text-align: left;
}
.cf-info-bubble[hidden] { display: none; }