/* Theme Magic selected runtime surface: display settings. */
.display-settings.offcanvas {
  position: fixed;
  z-index: 110;
  inset-block: 0;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  inline-size: min(32rem, calc((100vw - min(1rem, 3vw)) / var(--tm-user-page-zoom, 1)));
  block-size: 100vh;
  block-size: var(--tm-user-viewport-block-size, 100dvh);
  max-block-size: var(--tm-user-viewport-block-size, 100dvh);
  margin: 0;
  color: var(--tm-color-on-surface);
  background: var(--tm-color-surface);
  line-height: 1.5;
  visibility: hidden;
  transition: transform 160ms ease, visibility 160ms linear;
}

.display-settings.offcanvas.start { inset-inline: 0 auto;
  border-inline-end: var(--tm-focus-width) solid var(--tm-color-boundary, var(--tm-color-border, currentcolor));
  transform: translateX(-100%);
  }

.display-settings.offcanvas.end { inset-inline: auto 0;
  border-inline-start: var(--tm-focus-width) solid var(--tm-color-boundary, var(--tm-color-border, currentcolor));
  transform: translateX(100%);
  }

:where([dir="rtl"]) .display-settings.offcanvas.start { transform: translateX(100%);
  }

:where([dir="rtl"]) .display-settings.offcanvas.end { transform: translateX(-100%);
  }

.display-settings.offcanvas.show { visibility: visible;
  transform: translateX(0);
  }

.display-settings.offcanvas:not(.show) { display: none;
  }

/* A scaled heading must not consume the entire scrolling workspace. Keep
 * both regions reachable when their intrinsic height exceeds the viewport. */
.offcanvas[data-ui-offcanvas-mode="overlay"],
.display-settings.offcanvas {
  overflow: auto;
  overscroll-behavior: contain;
}

.offcanvas[data-ui-offcanvas-mode="overlay"] > .offcanvas-header,
.display-settings.offcanvas > .offcanvas-header {
  flex: 0 0 auto;
}

.offcanvas[data-ui-offcanvas-mode="overlay"] > .offcanvas-body,
.display-settings.offcanvas > .offcanvas-body {
  flex: 1 0 min(12rem, 40dvh);
  min-block-size: min(12rem, 40dvh);
}

.offcanvas-header { display: flex;
  min-inline-size: 0;
  max-inline-size: 100%;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  padding: min(1rem, 3vw);
  overflow-wrap: anywhere;
  border-block-end: var(--tm-border-width-medium) solid var(--tm-color-border);
  }

.offcanvas-title { min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0;
  font-size: var(--tm-font-size-panel-title, 1.25rem);
  overflow-wrap: anywhere;
  }

.offcanvas-title:focus { outline: var(--tm-focus-width) solid var(--tm-color-focus);
  outline-offset: var(--tm-focus-offset);
  }

/* The shared drawer uses shell typography even when its host also loads
 * Foundation content typography. Heading tags retain their semantic level. */
.display-settings .offcanvas-title {
  font-weight: 700;
  line-height: inherit;
}

.offcanvas-body { flex: 1 1 auto;
  min-block-size: 0;
  overflow: auto;
  overscroll-behavior: contain;
  }

.offcanvas-close { appearance: none;
  color: inherit;
  background: transparent;
  border-color: currentcolor;
  }

.offcanvas-close svg, .action.icon > :is(svg, .icon) { display: block;
  inline-size: 1.25em;
  block-size: 1.25em;
  }

.offcanvas-backdrop { position: fixed;
  z-index: 109;
  inset: 0;
  background: rgb(0 0 0 / 70%);
  }

.offcanvas[popover]::backdrop {
  background: var(--tm-shell-offcanvas-backdrop, rgb(0 0 0 / 70%));
}

@media (inverted-colors: inverted) {
  .offcanvas-backdrop,
  .offcanvas[popover]::backdrop {
    background: rgb(255 255 255 / 70%);
    filter: none;
  }
}

:root:is([data-site-smart-invert="film"], [data-site-smart-invert="assist"]) .offcanvas-backdrop,
:root:is([data-site-smart-invert="film"], [data-site-smart-invert="assist"]) .offcanvas[popover]::backdrop {
  filter: var(--tm-smart-invert-filter, invert(1));
}

.display-settings-body { display: grid;
  align-content: start;
  gap: 1.5rem;
  padding: 1.5rem;
  }

.preference-panel { display: grid;
  align-content: start;
  gap: 1.5rem;
  }

.preference-panel > .help { margin: 0;
  }

.preference-accordion, .preference-section-body { display: grid;
  gap: .75rem;
  }

.preference-accordion, .preference-section, .preference-section-body { min-inline-size: 0;
  max-inline-size: 100%;
  }

.preference-accordion > *, .preference-section-body > *, .preference-adjuster > * { min-inline-size: 0;
  max-inline-size: 100%;
  }

.preference-accordion { gap: 0;
  overflow: hidden;
  border: var(--tm-border-width-medium) solid var(--tm-color-border);
  border-radius: var(--tm-radius-small, .25rem);
  }

.preference-section + .preference-section { border-block-start: var(--tm-border-width-medium) solid var(--tm-color-border);
  }

.preference-section-summary { display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-block-size: 2.75rem;
  padding: .75rem;
  font-weight: var(--tm-font-weight-heading);
  cursor: pointer;
  list-style: none;
  }

.preference-section-summary::-webkit-details-marker { display: none;
  }

.preference-section-summary::after { content: "";
  flex: 0 0 auto;
  inline-size: .5em;
  block-size: .5em;
  border-block-end: .125em solid currentcolor;
  border-inline-end: .125em solid currentcolor;
  transform: rotate(45deg);
  }

.preference-section[open] > .preference-section-summary::after { transform: rotate(225deg);
  }

.preference-section-summary:focus-visible { outline: var(--tm-focus-width) solid var(--tm-color-focus);
  outline-offset: calc(-1 * var(--tm-focus-offset));
  }

.preference-section[open] > .preference-section-summary { border-block-end: var(--tm-border-width-thin) solid var(--tm-color-border);
  }

.preference-section-body { padding: .75rem;
  }

.preference-grid { display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
  }

.choice-button { min-block-size: 2.75rem;
  padding: .5rem;
  color: var(--tm-color-on-surface);
  font: inherit;
  background: var(--tm-color-surface);
  border: var(--tm-border-width-medium) solid var(--tm-color-boundary);
  border-radius: var(--tm-radius-small, .25rem);
  }

.choice-button { display: grid;
  gap: .5rem;
  justify-items: stretch;
  text-align: center;
  }

/* A choice is one atomic button, with each piece of its content on its own row. */
.choice-button[data-theme-choice-stacked] {
  grid-template-columns: minmax(0, 1fr); grid-auto-flow: row;
  text-align: start;
}

.choice-button[data-theme-choice-stacked] > * {
  grid-column: 1; min-inline-size: 0; overflow-wrap: anywhere;
}

/* Keep a glyph and its label together in one start-aligned atomic choice. */
.choice-button[data-theme-choice-inline] {
  grid-template-columns: max-content minmax(0, 1fr);
  place-items: center start;
  text-align: start;
}

.choice-button[data-theme-choice-inline] > * {
  min-inline-size: 0;
}

[data-theme-font-weight="400"] { font-weight: 400; }
[data-theme-font-weight="600"] { font-weight: 600; }
[data-theme-font-weight="700"] { font-weight: 700; }
[data-theme-font-weight="800"] { font-weight: 800; }

.choice-button:is(.is-selected, [aria-pressed="true"], [aria-selected="true"]) { color: var(--tm-color-on-primary);
  background: var(--tm-color-primary);
  border-style: double;
  border-width: calc(2 * var(--tm-border-width-medium));
  }

.theme-preview-frame { overflow: hidden;
  border: var(--tm-border-width-thin) solid var(--tm-color-boundary);
  border-radius: var(--tm-radius-small, .25rem);
  }

.theme-preview { display: block;
  inline-size: 100%;
  max-block-size: 5.5rem;
  object-fit: contain;
  }

.theme-preview[data-preview-source="pending"] { visibility: hidden;
  }

.setting-row { display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  }

.preference-adjuster { display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: stretch;
  }

.preference-output { display: grid;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: .5rem;
  place-items: center;
  overflow-wrap: anywhere;
  border: var(--tm-border-width-medium) solid var(--tm-color-boundary);
  }

.display-settings-actions { display: flex;
  justify-content: flex-end;
  padding-block-start: 1rem;
  border-block-start: var(--tm-border-width-medium) solid var(--tm-color-boundary);
  }

.action.icon { box-sizing: border-box;
  inline-size: 2.75rem;
  min-inline-size: 2.75rem;
  block-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: .5rem;
  }

.status.polite { display: flex;
  gap: .75rem;
  align-items: baseline;
  padding: .5rem .75rem;
  border-inline-start: var(--tm-border-width-strong) solid var(--tm-color-boundary, var(--tm-color-border, currentcolor));
  }

[data-site-reduced-motion="true"] .display-settings.offcanvas { transition: none;
  }

[data-site-reduced-transparency="true"] :is(.display-settings.offcanvas, .theme-preview-frame) { background: var(--tm-color-surface, Canvas);
  backdrop-filter: none;
  }

@media (prefers-reduced-motion: reduce) { .display-settings.offcanvas { transition: none;
  } }

@media (forced-colors: active) {
  .offcanvas, .preference-section, .preference-section-summary, .choice-button, .theme-preview-frame, .preference-output { color: CanvasText;
  background: Canvas;
  border-color: CanvasText;
  forced-color-adjust: auto;
  }

  .choice-button:is(.is-selected, [aria-pressed="true"], [aria-selected="true"]) { color: HighlightText;
  background: Highlight;
  border-color: Highlight;
  }

  .offcanvas-backdrop, .offcanvas[popover]::backdrop { background: CanvasText;
  }
}

@supports (container-type: inline-size) {
  .display-settings { container-type: inline-size;
  container-name: theme-magic-display-settings;
  }

  @container theme-magic-display-settings (width >= 30rem) {
    .preference-grid { grid-template-columns: repeat(2, minmax(0, 1fr));
  }

    .preference-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr));
  }

    .preference-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr));
  }

    .setting-row { grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  }

    .switch-button { justify-self: end;
  }
  }
}

/* One atomic choice per row, independent of viewport width. */
.preference-grid[data-theme-choice-layout="stack"] {
  grid-template-columns: minmax(0, 1fr);
}

/* Preserve the existing semantic Braille channel under uniform print overrides. */
[data-theme-braille-font="dbsan-braille-normal"] {
  --tm-typography-dynamic-type-braille-family: "DBSAN Braille Normal", var(--ui-font-family, system-ui, sans-serif);

  font-family: var(--tm-typography-dynamic-type-braille-family);
}

[data-theme-braille-font="dbsan-braille-pinpoint-6"] {
  --tm-typography-dynamic-type-braille-family: "DBSAN Braille Pinpoint 6 Dot", var(--ui-font-family, system-ui, sans-serif);

  font-family: var(--tm-typography-dynamic-type-braille-family);
}

[data-theme-braille-font="dbsan-braille-outline-6"] {
  --tm-typography-dynamic-type-braille-family: "DBSAN Braille Outline 6 Dot", var(--ui-font-family, system-ui, sans-serif);

  font-family: var(--tm-typography-dynamic-type-braille-family);
}

[data-theme-braille-font="dbsan-braille-pinpoint-8"] {
  --tm-typography-dynamic-type-braille-family: "DBSAN Braille Pinpoint 8 Dot", var(--ui-font-family, system-ui, sans-serif);

  font-family: var(--tm-typography-dynamic-type-braille-family);
}

[data-theme-braille-font="dbsan-braille-outline-8"] {
  --tm-typography-dynamic-type-braille-family: "DBSAN Braille Outline 8 Dot", var(--ui-font-family, system-ui, sans-serif);

  font-family: var(--tm-typography-dynamic-type-braille-family);
}

/* Shared master/detail menu composition. It responds to its own available
 * space; the narrow baseline is the same native details accordion. */
.menu-items.preference-menu {
  inline-size: min(34rem, calc(100vw - 1rem));
  max-inline-size: min(34rem, calc(100vw - 1rem));
}

.preference-menu .flyout {
  position: relative;
  container-type: inline-size;
}

.preference-menu .preference-section-body {
  min-inline-size: 0;
  align-content: start;
  container: theme-magic-display-settings / inline-size;
}

/* Menu cards wrap from their complete content width, including translated
 * labels and larger text. Only a single card wider than the entire panel may
 * wrap internally. Explicit tabs and stacked choices retain their layouts. */
.preference-menu .preference-grid:not(.tabs, [data-theme-choice-layout="stack"]) {
  display: flex;
  flex-wrap: wrap;
}

.preference-menu .preference-grid:not(.tabs, [data-theme-choice-layout="stack"]) > .choice-button {
  flex: 1 1 max-content;
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Each wide submenu is its own bounded surface. Its content, rather than the
 * master list's height, determines its height and responsive card layout. */
@media (width >= 70rem) and (height >= 40rem) {
  .menu-items.preference-menu {
    inline-size: 18rem;
    max-inline-size: 18rem;
    overflow: visible;
    container-type: normal;
  }

  .preference-menu .flyout {
    overflow: visible;
    container-type: normal;
  }

  .flyout > .preference-section {
    position: relative;
    border: 0;
  }

  .flyout > .preference-section > summary {
    inline-size: 100%;
  }

  .flyout > .preference-section > .preference-section-summary::after {
    transform: rotate(135deg);
  }

  .flyout > .preference-section > .preference-section-body {
    position: absolute;
    inset: auto;
    inset-block-start: 0;
    inset-inline-start: calc(100% - 2px);
    inline-size: min(var(--preference-flyout-width, 24rem), var(--preference-flyout-available, 24rem));
    max-inline-size: none;
    max-block-size: min(calc(100dvh - 1rem), var(--preference-flyout-block-available, 100dvh));
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--tm-builder-shell-content, CanvasText);
    background: var(--tm-builder-shell-raised-surface, Canvas);
    border: var(--tm-border-width-medium) solid var(--tm-color-boundary);
    border-radius: var(--tm-radius-small, .25rem);
    box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 24%);
  }

  .flyout > .preference-section > .preference-section-body:has(.preference-grid.three) {
    --preference-flyout-width: 36rem;
  }

  .flyout > .preference-section > .preference-section-body:has(.preference-grid.four) {
    --preference-flyout-width: 44rem;
  }
}

/* Keep the painted part as the selector subject so nested surface resolution
 * also matches when the menu itself is the enclosing neutral surface. */
.preference-section-summary:is(:hover, :focus-visible):where(.preference-menu *),
.preference-section-summary:where(.preference-menu details[open] > *) {
  color: var(--tm-color-on-primary, Canvas);
  background: var(--tm-color-primary, Highlight);
}

.preference-grid.four {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

.preference-menu .preference-panel {
  min-block-size: 0;
}

/* Docked panes participate in ordinary layout, rather than the overlay drawer
 * stack. Menus may then paint over an adjacent docked pane without raising a
 * consumer-specific layer above real overlays. */
.offcanvas[data-ui-offcanvas-mode="docked"] {
  z-index: auto;
}

/* Equal tracks retain their width on incomplete rows. Content wraps within a
 * card; previews must not dictate the label's intrinsic width. */
.preference-grid.tiles {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  grid-auto-rows: 1fr;
}

.preference-grid.tiles > .choice-button {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.preference-grid.tiles .theme-preview-frame {
  contain: inline-size;
}

/* Equal-width tab choices remain a single justified row in any consumer. */
.preference-grid.tabs {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
}

.preference-grid.tabs > [role="tab"] {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}