/* Appearance applies only to the guide. Brand swatches retain their source values. */
.guide-appearance { min-width: 0; margin: 1.5rem 0 0; padding: 0; border: 0; }
.guide-appearance[hidden] { display: none; }
.guide-appearance legend { width: auto; font-size: 1rem; font-weight: 600; margin-bottom: .6rem; }
.guide-appearance-choices {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  max-width: 100%;
  border: 2px solid var(--bloodwood);
  border-radius: 999px;
}
.guide-appearance label { position: relative; margin: 0; cursor: pointer; }
.guide-appearance input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.guide-appearance label span {
  display: block;
  padding: .5rem 1rem;
  border-radius: 999px;
  color: var(--rich-black);
  font-size: 1rem;
  line-height: 1.5;
}
.guide-appearance input:checked + span { background: var(--bloodwood); color: var(--peach-linen); }
.guide-appearance input:focus-visible + span { outline: 3px solid var(--golden-saffron); outline-offset: 2px; }
.guide-appearance label:hover span { box-shadow: inset 0 0 0 1px var(--bloodwood); }
.guide-appearance p { margin: .5rem 0 0; max-width: 42ch; }
@media screen {
  html[data-guide-theme="night"] { color-scheme: dark; }
  html[data-guide-theme="night"] body {
    --night-page: #010b13;
    --night-panel: #18232a;
    --night-field: #243239;
    --night-line: #76848a;
    color: var(--ivory-dust);
    background: var(--night-page);
    background-image: none;
  }
  html[data-guide-theme="night"] body::before { display: none; }
  [data-guide-theme="night"] .style-preview :is(p,li,dd,dt,label,legend,td,th,figcaption,caption,small),
  [data-guide-theme="night"] .style-preview :is(.preview-summary,.preview-label,.preview-caption,.preview-reading-meta,.preview-nav-label,.preview-edition,.highlight-value,.highlight-label) { color: var(--ivory-dust); }
  [data-guide-theme="night"] .style-preview :is(h1,h2,h3,h4,h5,h6,.preview-heading-one,.preview-disclosure-title,.preview-docs-label,.preview-eyebrow) { color: var(--peach-linen); }
  [data-guide-theme="night"] .style-preview a { color: var(--golden-saffron); }
  [data-guide-theme="night"] .style-preview a:hover { color: var(--peach-linen); }
  [data-guide-theme="night"] .style-preview :is(.preview-intro,.preview-specimen,.preview-surface,.preview-state-board,.preview-swatch,.preview-disclosure,.preview-disclosure > summary,.preview-disclosure-body,.case-highlights,.case-highlights-card,.highlight-item,.card-custom,.preview-implementation-map,.preview-voice-example,.preview-mark-scales figure,.identity-artwork-note,.preview-status) {
    background: var(--night-panel);
    border-color: var(--night-line);
    color: var(--ivory-dust);
  }
  [data-guide-theme="night"] .style-preview :is(.preview-section,.preview-workspace,.preview-coordinate,.preview-type,.preview-code-toolbar,.preview-color-values dt,.preview-color-values dd,figcaption) { border-color: var(--night-line); }
  [data-guide-theme="night"] .style-preview .insights-nav summary {
    background: var(--night-panel);
    color: var(--peach-linen);
  }
  [data-guide-theme="night"] .style-preview .insights-nav details[open] ul {
    background: var(--night-field);
  }
  [data-guide-theme="night"] .style-preview .insights-list li { border-color: var(--night-line); }
  [data-guide-theme="night"] .style-preview .insights-nav .insights-directory-link {
    background: var(--night-panel);
    color: var(--golden-saffron);
    border-color: var(--golden-saffron);
  }
  [data-guide-theme="night"] .style-preview .insights-nav a[aria-current] { color: var(--peach-linen); }
  [data-guide-theme="night"] .style-preview :is(.insights-directory-title,.insights-directory-arrow,.insights-directory-note) { color: inherit; }
  [data-guide-theme="night"] .style-preview .read-more-btn,
  [data-guide-theme="night"] .style-preview .btn-project-link,
  [data-guide-theme="night"] .style-preview .btn-outline-secondary { color: var(--golden-saffron); border-color: var(--golden-saffron); background: transparent; }
  [data-guide-theme="night"] .style-preview :is(.read-more-btn,.btn-project-link,.btn-outline-secondary):hover,
  [data-guide-theme="night"] .style-preview .preview-disclosure > summary:hover .preview-disclosure-action {
    color: var(--rich-black);
    background: var(--golden-saffron);
  }
  [data-guide-theme="night"] .style-preview :is(button,summary,a,input,select,textarea):focus-visible { outline-color: var(--golden-saffron); }
  [data-guide-theme="night"] .style-preview :is(.form-control,.gt-field-native,.gt-date-picker-panel,.preview-stepper-buttons button) {
    background-color: var(--night-field);
    color: var(--ivory-dust);
    border-color: var(--night-line);
  }
  [data-guide-theme="night"] .style-preview :is(input,select,textarea):focus {
    background-color: var(--night-field) !important;
    color: var(--ivory-dust);
  }
  [data-guide-theme="night"] .style-preview ::placeholder { color: #c1c9cb; opacity: 1; }
  [data-guide-theme="night"] .style-preview :is(.valid-feedback,.invalid-feedback) { color: var(--ivory-dust); }
  [data-guide-theme="night"] .style-preview .is-invalid { border-color: var(--golden-saffron) !important; }
  [data-guide-theme="night"] .style-preview .is-valid { border-color: var(--ivory-dust); }
  [data-guide-theme="night"] .style-preview .table { color: var(--ivory-dust); background: var(--night-panel); }
  [data-guide-theme="night"] .style-preview .table :is(th,td) { border-color: var(--night-line); }
  [data-guide-theme="night"] .style-preview .table tbody tr:nth-child(even) { background: var(--night-field); }
  [data-guide-theme="night"] .style-preview .table tbody tr:hover { background: var(--night-field); color: var(--ivory-dust); }
  [data-guide-theme="night"] .style-preview :is(.preview-pattern-badge,.preview-disclosure-action) { color: var(--peach-linen); }
  [data-guide-theme="night"] .style-preview code { background: var(--night-field); color: var(--peach-linen); }
  [data-guide-theme="night"] .style-preview .preview-reading-teaser { color: var(--ivory-dust); border-color: var(--night-line); }
  [data-guide-theme="night"] .style-preview .guide-appearance-choices { border-color: var(--golden-saffron); }
  [data-guide-theme="night"] .style-preview .guide-appearance label span { color: var(--ivory-dust); }
  [data-guide-theme="night"] .style-preview .guide-appearance input:checked + span { background: var(--golden-saffron); color: var(--rich-black); }
  [data-guide-theme="night"] .style-preview .guide-appearance label:hover span { box-shadow: inset 0 0 0 1px var(--golden-saffron); }
  /* Source artwork and stationery specimens keep their intended paper surface. */
  [data-guide-theme="night"] .style-preview :is(.identity-logo-specimen,.identity-monochrome,.identity-letter-example,.identity-envelope-example) { background: var(--peach-linen); color: var(--rich-black); }
  [data-guide-theme="night"] .style-preview :is(.identity-logo-specimen,.identity-monochrome,.identity-letter-example,.identity-envelope-example) :is(p,small,strong,div,figcaption) { color: var(--rich-black); }
  [data-guide-theme="night"] .style-preview :is(.identity-logo-specimen,.identity-monochrome) a { color: var(--bloodwood); }
  [data-guide-theme="night"] .style-preview .preview-brand > img,
  [data-guide-theme="night"] .style-preview .preview-mark-scales img,
  [data-guide-theme="night"] .style-preview .identity-artwork-note img { background: var(--peach-linen); border-radius: 4px; }
  [data-guide-theme="night"] .style-preview .quote-styled-block { background: var(--peach-linen); }
  [data-guide-theme="night"] .style-preview .quote-styled-block :is(p,footer) { color: var(--rich-black); }
  [data-guide-theme="night"] #site-footer { background: var(--night-page); border-top: 1px solid var(--night-line); }
  [data-guide-theme="night"] #site-footer :is(p,.text-muted) { color: var(--ivory-dust) !important; }
}
@media print {
  .guide-appearance { display: none !important; }
  html { color-scheme: light; }
}

@media screen {
  [data-guide-theme="night"] .style-preview textarea.form-control {
    background-color: var(--night-field) !important;
    border-color: var(--night-line);
    color: var(--ivory-dust);
  }
  [data-guide-theme="night"] .style-preview code {
    background: var(--night-field) !important;
    color: var(--peach-linen) !important;
  }
  [data-guide-theme="night"] .style-preview :is(.gt-date-picker > summary,.preview-stepper-buttons button)::after,
  [data-guide-theme="night"] .style-preview select.gt-picker::picker-icon {
    border-color: var(--golden-saffron);
  }
  [data-guide-theme="night"] .style-preview .alert {
    background: var(--night-panel);
    color: var(--ivory-dust);
    border-color: var(--night-line);
  }
  [data-guide-theme="night"] .style-preview :is(input[type="radio"],input[type="checkbox"]) {
    border-color: var(--golden-saffron);
    accent-color: var(--golden-saffron);
  }
  [data-guide-theme="night"] .style-preview input[type="radio"]:checked {
    background-color: var(--golden-saffron);
    box-shadow: inset 0 0 0 3px var(--night-field);
  }
  [data-guide-theme="night"] .style-preview #inventory-range { --priority-fill: var(--golden-saffron); }
  [data-guide-theme="night"] .style-preview #inventory-range:active { --priority-fill: var(--golden-saffron); }
  [data-guide-theme="night"] .style-preview #inventory-range::-webkit-slider-runnable-track {
    border-color: var(--night-line);
    background: linear-gradient(to right, var(--priority-fill) var(--priority-position, 50%), var(--night-field) var(--priority-position, 50%));
  }
  [data-guide-theme="night"] .style-preview #inventory-range::-moz-range-track {
    border-color: var(--night-line);
    background: linear-gradient(to right, var(--priority-fill) var(--priority-position, 50%), var(--night-field) var(--priority-position, 50%));
  }
  [data-guide-theme="night"] .style-preview #inventory-range::-webkit-slider-thumb { border-color: var(--golden-saffron); }
  [data-guide-theme="night"] .style-preview #inventory-range::-moz-range-thumb { border-color: var(--golden-saffron); }
}

@media screen {
  [data-guide-theme="night"] .style-preview select.gt-picker::picker(select) {
    background: var(--night-field);
    color: var(--ivory-dust);
    border-color: var(--night-line);
  }
  [data-guide-theme="night"] .style-preview select.gt-picker option:checked {
    background: var(--golden-saffron);
    color: var(--rich-black);
  }
  [data-guide-theme="night"] .style-preview select.gt-picker option:hover {
    background: var(--night-panel);
    color: var(--ivory-dust);
  }
  [data-guide-theme="night"] .style-preview .preview-stepper-buttons button:hover {
    background: var(--golden-saffron);
    color: var(--rich-black);
  }
  [data-guide-theme="night"] .style-preview .preview-stepper-buttons button:hover::after {
    border-color: var(--rich-black);
  }
}

@media screen {
  [data-guide-theme="night"] .style-preview strong { color: inherit; }
  [data-guide-theme="night"] .style-preview .preview-state-grid > div > span:first-child { color: var(--ivory-dust); }
  [data-guide-theme="night"] .style-preview .table tbody tr:nth-child(odd) { background: var(--night-panel); }
  [data-guide-theme="night"] .style-preview .table tfoot :is(th,td) { color: var(--rich-black); }
  [data-guide-theme="night"] .style-preview .preview-field-inventory fieldset { border-color: var(--night-line); }
  [data-guide-theme="night"] .style-preview :is(input[type="radio"],input[type="checkbox"]) {
    background-color: var(--night-field);
    box-shadow: none;
  }
  [data-guide-theme="night"] .style-preview :is(input[type="radio"],input[type="checkbox"]):checked::after {
    background-color: var(--golden-saffron);
  }
  [data-guide-theme="night"] .style-preview .preview-button-reference {
    color: var(--golden-saffron);
    background: transparent;
    border: 2px solid var(--golden-saffron);
    border-radius: 999px;
  }
  [data-guide-theme="night"] .style-preview .preview-reference-hover {
    color: var(--rich-black);
    background: var(--golden-saffron);
  }
  [data-guide-theme="night"] .style-preview .preview-reference-focus { outline-color: var(--golden-saffron); }
  [data-guide-theme="night"] .style-preview .preview-reference-active { background: var(--rich-black); }
}

@media screen {
  [data-guide-theme="night"] .style-preview .btn-custom,
  [data-guide-theme="night"] .style-preview .preview-loading-button {
    color: var(--ivory-dust);
  }
  [data-guide-theme="night"] .style-preview .btn-custom:hover,
  [data-guide-theme="night"] .style-preview .btn-custom:focus-visible {
    background: var(--golden-saffron);
    color: var(--rich-black);
  }
}


@media screen {
  /* Keep the FAQ answer on the same dark surface family as its controls. */
  [data-guide-theme="night"] .style-preview #section-faq .card .card-body {
    background-color: var(--night-panel);
    color: var(--ivory-dust) !important;
    border-color: var(--night-line);
  }
  [data-guide-theme="night"] .style-preview #section-faq .card .card-body::after {
    height: 1px;
    background-color: var(--night-line);
    border-radius: 0;
  }
  [data-guide-theme="night"] .style-preview #section-faq .card .card-header .faq-toggle[aria-expanded="true"] {
    border-radius: .5rem .5rem 0 0;
  }
  /* A framed recipe is distinguishable even while it is collapsed. */
  [data-guide-theme="night"] .style-preview details.preview-code {
    background: var(--night-panel);
    border: 1px solid var(--night-line) !important;
    border-radius: 8px;
  }
  [data-guide-theme="night"] .style-preview details.preview-code > summary {
    background: var(--night-panel);
    border-radius: 7px;
    color: var(--golden-saffron);
  }
  [data-guide-theme="night"] .style-preview details.preview-code[open] > summary {
    border-radius: 7px 7px 0 0;
  }
  [data-guide-theme="night"] .style-preview details.preview-code > summary:focus-visible {
    outline: 2px solid var(--golden-saffron) !important;
    outline-offset: -4px;
  }
  [data-guide-theme="night"] .style-preview .preview-code-toolbar {
    background: var(--night-field);
    border-top: 1px solid var(--night-line) !important;
  }
  [data-guide-theme="night"] .style-preview .preview-code pre,
  [data-guide-theme="night"] .style-preview .preview-code pre code {
    background: var(--night-panel) !important;
  }
  /* The stack has one frame. Its interior rows meet with square edges. */
  [data-guide-theme="night"] .style-preview .preview-topic-example {
    background: var(--night-panel);
    border-color: var(--night-line);
  }
  [data-guide-theme="night"] .style-preview .preview-topic-example > details,
  [data-guide-theme="night"] .style-preview .preview-topic-example > details > summary,
  [data-guide-theme="night"] .style-preview .preview-topic-example > details[open] > ul {
    border-radius: 0;
    background-color: var(--night-panel);
  }
  [data-guide-theme="night"] .style-preview .preview-topic-example > details + details {
    border-top-color: var(--night-line) !important;
  }
  [data-guide-theme="night"] .style-preview .preview-topic-example > details[open] > ul {
    background-color: var(--night-field);
  }
  [data-guide-theme="night"] .style-preview .insights-nav > details {
    background-color: var(--night-field);
  }
  [data-guide-theme="night"] .style-preview .insights-nav > details[open] > summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@media screen {
  [data-guide-theme="night"] .style-preview .gt-date-picker {
    background: transparent;
  }
  [data-guide-theme="night"] .style-preview .gt-date-picker > summary {
    border: 2px solid var(--night-line) !important;
    background-color: var(--night-field);
    color: var(--ivory-dust);
  }
  [data-guide-theme="night"] .style-preview .gt-date-picker > summary:focus-visible {
    outline: 2px solid var(--golden-saffron) !important;
    outline-offset: -5px;
  }
  [data-guide-theme="night"] .style-preview .gt-date-picker-panel {
    border: 2px solid var(--night-line) !important;
    background: var(--night-panel);
  }
  [data-guide-theme="night"] .style-preview .gt-date-picker-panel .btn {
    background: var(--golden-saffron);
    color: var(--rich-black);
    border-color: var(--golden-saffron);
  }
  [data-guide-theme="night"] .style-preview .gt-picker-error { color: var(--ivory-dust); }
  [data-guide-theme="night"] .style-preview input[type="file"]::file-selector-button {
    background: var(--night-panel);
    color: var(--golden-saffron);
    border: 1px solid var(--golden-saffron);
  }
  [data-guide-theme="night"] .style-preview input[type="file"]::file-selector-button:hover {
    background: var(--golden-saffron);
    color: var(--rich-black);
  }
}