/* The reader Settings control: the trigger and its <dialog>.
 *
 * Shared by every book (symlinked into books/<id>/docs/assets by the scaffold)
 * and by the landing page (copied into site/ by textbook.portal). It declares no
 * colour of its own: every value is a --tb-* token from the active theme bundle,
 * or a --md-* variable that extra.css maps onto those tokens. The --tb-* name is
 * the fallback, because the landing page loads the bundles without extra.css and
 * so has no --md-* mapping of its own.
 */

/* The trigger is inert without JavaScript; its own file reveals it. */
.tb-settings__trigger[hidden] {
  display: none !important;
}

/* Material's palette inputs are still the mechanism that swaps the scheme, but
 * their header form has no visible control now that its toggle is gone. Hide it
 * so it adds no invisible tab stops. The dialog drives the inputs instead. */
.md-header__option[data-md-component="palette"] {
  display: none;
}

.tb-settings {
  width: min(40rem, calc(100vw - 2rem));
  max-width: 100%;
  max-height: min(85vh, 44rem);
  padding: 0;
  border: 1px solid var(--md-default-fg-color--lightest, var(--tb-rule));
  border-radius: var(--tb-radius);
  background: var(--md-default-bg-color, var(--tb-paper));
  color: var(--md-default-fg-color, var(--tb-ink));
  box-shadow: 0 18px 50px color-mix(in srgb, var(--md-default-fg-color, var(--tb-ink)) 30%, transparent);
}

.tb-settings::backdrop {
  background: color-mix(in srgb, var(--md-default-fg-color, var(--tb-ink)) 42%, transparent);
}

.tb-settings__form {
  margin: 0;
  padding: 1.1rem 1.2rem 1.3rem;
  overflow: auto;
  max-height: inherit;
}

.tb-settings__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.tb-settings__title {
  flex: 1;
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: 1.05rem;
}

.tb-settings__close {
  border: 0;
  padding: 0.3rem;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  line-height: 0;
  cursor: pointer;
}
.tb-settings__close:hover {
  background: color-mix(in srgb, var(--md-default-fg-color, var(--tb-ink)) 8%, transparent);
}
.tb-settings__close svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

.tb-settings__group {
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
}
.tb-settings__legend {
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light, var(--tb-ink-soft));
}
.tb-settings__hint {
  margin: 0.15rem 0 0.5rem;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light, var(--tb-ink-soft));
}

.tb-settings__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
}

.tb-settings__option {
  position: relative;
  display: block;
}
.tb-settings__radio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.tb-settings__card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  height: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--md-default-fg-color--lightest, var(--tb-rule));
  border-radius: 6px;
  background: color-mix(in srgb, var(--md-default-bg-color, var(--tb-paper)) 94%, var(--md-default-fg-color, var(--tb-ink)) 6%);
  cursor: pointer;
}
.tb-settings__radio:checked + .tb-settings__card {
  border-color: var(--md-primary-fg-color, var(--tb-accent));
  box-shadow: inset 0 0 0 1px var(--md-primary-fg-color, var(--tb-accent));
}
.tb-settings__radio:focus-visible + .tb-settings__card {
  outline: 2px solid var(--md-accent-fg-color, var(--tb-accent));
  outline-offset: 2px;
}
.tb-settings__option-title {
  font-size: 0.9rem;
  font-weight: 600;
}
.tb-settings__option-desc {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--md-default-fg-color--light, var(--tb-ink-soft));
}

@media (max-width: 480px) {
  .tb-settings__options {
    grid-template-columns: 1fr;
  }
}

@media print {
  .tb-settings,
  .tb-settings__trigger {
    display: none !important;
  }
}