/* ===========================================================================
   DesignOS — Checkbox, Radio, Toggle, Content Divider, Pagination, Loader
   ---------------------------------------------------------------------------
   Checkbox         1067:74    2 types x 2 states x checked x disabled = 12
   Radio Button     1067:1206  2 types x active x disabled            =  8
   Toggle           1067:1425  2 types x checked x 2 sizes x disabled = 12
   Content Divider  630:2995   5 types                                =  5
   Pagination       1097:3241  4 types                                =  4
   Loader           1323:783   the spinner the Button loading state uses

   Requires tokens.css.
   =========================================================================== */

/* The checkbox tick, as a mask so it inherits the control's content colour
   instead of baking a fill the way the raw export does. */
:root {
  --dos-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M8.75 2.5L3.75 7.5L1.25 5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ===========================================================================
   Checkbox and Radio — one control, two silhouettes
   =========================================================================== */

.dos-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  width: 298px;
  max-width: 100%;
  font-family: var(--family-text);
  font-size: var(--font-size-paragraph-sm);
  line-height: var(--line-height-paragraph-sm);
  cursor: pointer;
}

/* The control sits on a 2px top pad so it optically aligns with the first
   line of the title rather than the top of its box. */
.dos-choice__frame { display: flex; align-items: center; padding-top: var(--spacing-2); flex: none; }

.dos-choice__box {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xs);
  background: var(--bg-primary);
  color: var(--icon-alt);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--motion-state) var(--motion-ease),
              border-color var(--motion-state) var(--motion-ease);
}

.dos-choice__box--radio { border-radius: var(--radius-full); }

.dos-choice__box:checked {
  background: var(--bg-brand-solid);
  border-color: var(--border-brand);
}

/* Checkbox tick, drawn only when checked. */
.dos-choice__box:not(.dos-choice__box--radio):checked::after {
  content: "";
  width: 10px; height: 10px;
  background: currentColor;
  -webkit-mask: var(--dos-tick) center / contain no-repeat;
  mask: var(--dos-tick) center / contain no-repeat;
}

/* State=Immediate is Figma's name for the indeterminate state. */
.dos-choice__box:indeterminate,
.dos-choice__box.is-immediate {
  background: var(--bg-brand-solid);
  border-color: var(--border-brand);
}
.dos-choice__box:indeterminate::after,
.dos-choice__box.is-immediate::after {
  content: "";
  width: 8px; height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  -webkit-mask: none; mask: none;
}

/* Radio dot. */
.dos-choice__box--radio:checked::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.dos-choice__box:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); }

.dos-choice__body { display: flex; flex-direction: column; gap: var(--spacing-2); min-width: 0; flex: 1 0 0; }
.dos-choice__title { font-weight: var(--weight-medium); color: var(--text-primary); }
.dos-choice__subtext { font-weight: var(--weight-regular); color: var(--text-quarternary); }

.dos-choice:has(:disabled),
.dos-choice.is-disabled { cursor: not-allowed; }
.dos-choice:has(:disabled) .dos-choice__title,
.dos-choice:has(:disabled) .dos-choice__subtext { color: var(--text-disabled); }
.dos-choice__box:disabled {
  background: var(--bg-disabled);
  border-color: var(--border-disabled);
  color: var(--icon-disabled);
  cursor: not-allowed;
}
.dos-choice__box:disabled:checked { background: var(--bg-disabled); color: var(--icon-disabled); }

/* ===========================================================================
   Toggle
   Every dimension derives from the track height: width 1.8x, knob 0.8x,
   inset 0.1x — which is exactly how the two source sizes relate.
   =========================================================================== */

.dos-toggle {
  --tg-h: 24px;
  position: relative;
  flex: none;
  width: calc(var(--tg-h) * 1.8);
  height: var(--tg-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--motion-state) var(--motion-ease);
}

.dos-toggle--sm { --tg-h: 18px; }

.dos-toggle::after {
  content: "";
  position: absolute;
  top: calc(var(--tg-h) * 0.1);
  left: calc(var(--tg-h) * 0.1);
  width: calc(var(--tg-h) * 0.8);
  height: calc(var(--tg-h) * 0.8);
  border-radius: var(--radius-full);
  background: var(--bg-primary);
  transition: transform var(--motion-state) var(--motion-ease);
}

.dos-toggle:checked { background: var(--bg-brand-solid); }
.dos-toggle:checked::after { transform: translateX(calc(var(--tg-h) * 0.8)); }

.dos-toggle:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); }
.dos-toggle:disabled { background: var(--bg-disabled); cursor: not-allowed; }
/* The knob is the control's content, so it takes the disabled *content* token,
   not a surface. bg-tertiary sat almost exactly on the disabled track in Dark
   (#262626 on #1f1f1f) and vanished. */
.dos-toggle:disabled::after { background: var(--icon-disabled); }

@media (prefers-reduced-motion: reduce) {
  .dos-toggle, .dos-toggle::after, .dos-choice__box { transition: none; }
}

/* ===========================================================================
   Content Divider
   =========================================================================== */

.dos-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  width: 100%;
  font-family: var(--family-caption);
  font-size: var(--font-size-caption-md);
  line-height: var(--line-height-caption-md);
  color: var(--text-tertiary);
}

/* Type=Line — a single hairline, no height of its own. */
.dos-divider::before,
.dos-divider::after {
  content: "";
  flex: 1 0 0;
  min-width: 0;
  height: 1px;
  background: var(--border-secondary);
}

/* Type=Line Spacing — the same rule with breathing room around it. */
.dos-divider--spacing { margin-block: var(--spacing-2); }

/* Types with no centre content collapse to one continuous rule. */
.dos-divider--line { gap: 0; }
.dos-divider--line::after { display: none; }

.dos-divider__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  flex: none;
  height: 32px;
  padding: 0 var(--spacing-12);
  border: 1px solid var(--border-secondary);
  border-radius: var(--button);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--family-text);
  font-size: var(--font-size-paragraph-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.dos-divider__button--icon { width: 32px; padding: 0; }
.dos-divider__button:hover { background: var(--bg-brand-primary_hover); }
.dos-divider__button:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); }
.dos-divider__button svg { width: 16px; height: 16px; }

/* ===========================================================================
   Pagination — 1097:3241
   ---------------------------------------------------------------------------
   All four types share one filled track (bg-secondary, 2px padding, 2px gap,
   --pagination radius) and one 40px page cell. What changes is the prev/next
   treatment:

     Type=1  text buttons "Prev" / "Next"
     Type=2  icon buttons, same bordered treatment
     Type=3  ghost icon buttons — no border when enabled
     Type=4  no page numbers; a bordered pill split by a single hairline

   Two details worth keeping: the pages group has NO gap (cells sit flush), and
   the active page is a WHITE cell with a border — not an inverted dark chip.
   =========================================================================== */

.dos-pagination {
  display: inline-flex;
  align-items: center;
  /* Hug the content — as a flex item the nav would otherwise stretch. */
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  border: 1px solid transparent;
  border-radius: var(--pagination);
  background: var(--bg-secondary);
  font-family: var(--family-text);
  font-size: var(--font-size-paragraph-sm);
  line-height: var(--line-height-paragraph-sm);
}

/* Page cells sit flush against each other. */
.dos-pagination__pages { display: flex; align-items: center; gap: var(--spacing-0); }

.dos-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: var(--spacing-2);
  border: 1px solid transparent;
  border-radius: var(--button);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-weight: var(--weight-regular);
  cursor: pointer;
}
.dos-pagination__page:hover { background: var(--bg-primary_hover); }
.dos-pagination__page[aria-current="page"] {
  background: var(--bg-primary);
  border-color: var(--border-primary);
}
.dos-pagination__page:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus-ring); }

/* Prev / next. Text by default; --icon squares it. */
.dos-pagination__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--spacing-4);
  height: 40px;
  padding: 10px var(--spacing-12);
  border: 1px solid var(--border-brand-secondary);
  border-radius: var(--button);
  background: var(--bg-primary);
  color: var(--text-brand);
  font: inherit;
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.dos-pagination__nav span { padding-inline: var(--spacing-4); }
.dos-pagination__nav svg { width: 16px; height: 16px; }
.dos-pagination__nav--icon { width: 40px; padding: var(--spacing-12); }
.dos-pagination__nav:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus-ring); }

.dos-pagination__nav:disabled {
  background: var(--bg-disabled);
  border-color: var(--border-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Type=3 — ghost: no border or fill until disabled. */
.dos-pagination__nav--ghost { background: transparent; border-color: transparent; color: var(--icon-primary); }
.dos-pagination__nav--ghost:hover:not(:disabled) { background: var(--bg-primary_hover); }

/* Type=4 — a bordered pill with no page numbers, split by one hairline. */
.dos-pagination--split {
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: var(--bg-primary);
  border-color: var(--border-primary);
}
.dos-pagination--split .dos-pagination__nav { border: 0; border-radius: 0; }
.dos-pagination--split .dos-pagination__nav:first-child { border-right: 1px solid var(--border-primary); }

/* ===========================================================================
   Loader — 24px by default; the Button loading state uses this exact spinner
   =========================================================================== */

.dos-loader {
  display: block;
  flex: none;
  width: var(--dos-loader-size, 24px);
  height: var(--dos-loader-size, 24px);
  transform-origin: 50% 50%;
  animation: dos-spin 800ms linear infinite;
}
.dos-loader--sm { --dos-loader-size: 16px; }
.dos-loader--lg { --dos-loader-size: 32px; }
.dos-loader__track { fill: var(--bg-tertiary); }
.dos-loader__arc   { fill: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  .dos-loader { animation-duration: 2400ms; }
}