/* Interface roles use the published Orderly neutral palette. Brand example
   colors and the original renderer's asset color variables stay untouched. */
:root {
  --theme-background: #ffffff;
  --theme-panel: #ffffff;
  --theme-text: #000000;
  --theme-muted: #474d57;
  --theme-border: #caced3;
  --theme-hover: #e6e8ea;
  --theme-selected: #000000;
  --theme-selected-text: #ffffff;
  --theme-focus: #6700ce;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --theme-background: #14151a;
  --theme-panel: #1e2026;
  --theme-text: #e6e8ea;
  --theme-muted: #aeb4bc;
  --theme-border: #474d57;
  --theme-hover: #2b2f36;
  --theme-selected: #e6e8ea;
  --theme-selected-text: #14151a;
  --theme-focus: #9c75ff;
  --setting-background-document: var(--theme-background) !important;
  --setting-color-document-text-color: var(--theme-text) !important;
  color-scheme: dark;
}

html[data-theme="dark"] #page {
  --setting-color-document-text-color: var(--theme-text) !important;
}

/* Index declares its own white page color; the purple cover keeps its color. */
html[data-theme="dark"] [data-hover-id="8e860b26d7e"] #page {
  --setting-background-page: var(--theme-background) !important;
}

html[data-theme="dark"] [data-element-id="04d8b421249"] [data-toolbar-parent] {
  background-color: var(--theme-panel) !important;
  --nav-hover-bg: var(--theme-panel) !important;
}

html[data-theme="dark"] [data-element-id="04d8b421249"] :is(a, button) {
  color: var(--theme-text) !important;
  --hover-color: var(--theme-text) !important;
  --hover-bg: var(--theme-hover) !important;
  --icon-color: var(--theme-text) !important;
  --icon-color-hover: var(--theme-text) !important;
}

html[data-theme="dark"] [data-element-id="04d8b421249"] i {
  --color: var(--theme-text) !important;
  --hover-color: var(--theme-text) !important;
}

/* Approved white lockup from the original downloadable Orderly logo package. */
html[data-theme="dark"] [data-element-id="bc1090f8d36"] img {
  content: url("./orderly-white.svg");
  object-fit: contain !important;
  transform: scale(1.6);
}

html[data-theme="dark"] :is(#page, [data-element-id="04d8b421249"]) [style*="rgb(219, 219, 219)"] {
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] #page [style*="border-bottom-color: var(--a78225df6d9-rgba)"] {
  border-bottom-color: var(--theme-border) !important;
}

html[data-theme="dark"] #page .cuLhP [style*="color: var(--aa28b796b2e-rgba)"] {
  color: var(--theme-copy-color, var(--theme-text)) !important;
}

/* Incorrect contrast examples must retain the original white canvas. */
html[data-theme="dark"] :is([data-element-id="a559ffbbb04"], [data-element-id="bbb0422b1f5"]) {
  background: #ffffff;
  color-scheme: light;
}

html[data-theme="dark"] #page {
  scrollbar-color: var(--theme-border) var(--theme-background);
}

#theme-switcher {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  padding: 4px;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  background: var(--theme-panel);
  color: var(--theme-text);
  isolation: isolate;
}

#theme-switcher button {
  appearance: none;
  margin: 0;
  min-width: 64px;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--theme-muted);
  font-family: '6870ebda67a4a6b21b615183f1625b1f', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  font-feature-settings: 'ss02', 'ss03', 'ss05', 'ss06';
  cursor: pointer;
}

#theme-switcher button:hover { background: var(--theme-hover); color: var(--theme-text); }
#theme-switcher button[aria-pressed="true"] { background: var(--theme-selected); color: var(--theme-selected-text); }
#theme-switcher button:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 3px; }

@media (max-width: 600px) {
  #theme-switcher {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* Homepage header: original logo + foundation link + official website exit. */
[data-layout-grid="3de529974c0"] {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 24px !important;
  min-height: 72px;
  align-items: center;
}

[data-layout-grid="3de529974c0"] > :has(> [data-element-id="8c15bec5222"]) {
  grid-area: 1 / 1 !important;
  align-self: stretch;
}

[data-layout-grid="3de529974c0"] > :has(> [data-element-id="8e1e180261a"]) { display: none !important; }

[data-layout-grid="3de529974c0"] > :has(> [data-element-id="15bec522229"]) { grid-area: 1 / 2 !important; }

[data-element-id="15bec522229"] {
  min-height: 0 !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px 24px;
}

[data-element-id="15bec522229"] > div {
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  height: auto;
  min-height: 0;
}
[data-element-id="15bec522229"] > div > ._4Ai2 { padding: 0 !important; }
[data-element-id="5bec5222295"] > ._eJ9F > div { padding: 0 !important; }

[data-element-id="5bec5222295"] .cuLhP,
[data-element-id="a086db167e2"] .cuLhP {
  --text-line-height: 1.25 !important;
  --text-hover-line-height: 1.25 !important;
  --text-margin-top: 0px !important;
  --text-margin-bottom: 0px !important;
  text-align: left;
  white-space: normal;
  overflow-wrap: normal !important;
  text-wrap: wrap;
}

[data-element-id="5bec5222295"] a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.25;
}

[data-element-id="5bec5222295"] a:hover { text-decoration: underline; text-underline-offset: 4px; }
[data-element-id="5bec5222295"] a:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 4px; }

.visit-orderly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: transparent;
  color: var(--theme-text);
  font-family: '6870ebda67a4a6b21b615183f1625b1f', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  font-feature-settings: 'ss02', 'ss03', 'ss05', 'ss06';
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.visit-orderly:hover { background: var(--theme-hover); border-color: var(--theme-muted); }
.visit-orderly:active { background: var(--theme-selected); color: var(--theme-selected-text); }
.visit-orderly:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 4px; }

/* The downloads share the same source type style as the foundation link.
   Keep labels and links on separate, readable lines at every breakpoint. */
[data-element-id="a086db167e2"] { padding-bottom: 100px !important; }
[data-layout-grid="a086db167e2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  max-width: 560px;
}
[data-layout-grid="a086db167e2"] > div { grid-area: auto !important; }
[data-element-id="a086db167e2"] .cuLhP { font-size: 20px; }
[data-element-id="a086db167e2"] .cuLhP p { margin: 0 !important; }
[data-element-id="a086db167e2"] .cuLhP p + p { margin-top: 0 !important; }
[data-element-id="a086db167e2"] a {
  display: inline-flex;
  align-items: flex-start;
  min-height: 44px;
  line-height: 1.25;
  white-space: nowrap;
}
[data-element-id="a086db167e2"] a:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 4px; }

@media (max-width: 600px) {
  [data-element-id="3de529974c0"] { padding: 16px !important; }
  [data-layout-grid="3de529974c0"] {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  [data-element-id="15bec522229"] {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
  }
  [data-element-id="15bec522229"] > div {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  [data-element-id="5bec5222295"] .cuLhP { font-size: 16px; }
  .visit-orderly { gap: 6px; padding-inline: 10px; }
}

/* Preserve the source foreground within brand color examples. */
html[data-theme="dark"] [data-element-id="0102520d8fe"],
html[data-theme="dark"] [data-element-id="0d8fe240ff3"],
html[data-theme="dark"] [data-element-id="0dd7a559ffb"],
html[data-theme="dark"] [data-element-id="2520d8fe240"],
html[data-theme="dark"] [data-element-id="3819a944d24"],
html[data-theme="dark"] [data-element-id="40ff3df8a6c"],
html[data-theme="dark"] [data-element-id="4448c2d3562"],
html[data-theme="dark"] [data-element-id="4dff20c5fae"],
html[data-theme="dark"] [data-element-id="59ffbbb0422"],
html[data-theme="dark"] [data-element-id="6c4d32e92bf"],
html[data-theme="dark"] [data-element-id="6ca0102520d"],
html[data-theme="dark"] [data-element-id="7683819a944"],
html[data-theme="dark"] [data-element-id="98e15f89688"],
html[data-theme="dark"] [data-element-id="ae4b3cc387b"],
html[data-theme="dark"] [data-element-id="c5fae4b3cc3"],
html[data-theme="dark"] [data-element-id="d32e92bf7d7"],
html[data-theme="dark"] [data-element-id="d7a559ffbbb"],
html[data-theme="dark"] [data-element-id="e3a2c38a4e7"],
html[data-theme="dark"] [data-element-id="f20c5fae4b3"],
html[data-theme="dark"] [data-element-id="f3df8a6c4d3"],
html[data-theme="dark"] [data-element-id="f8a6c4d32e9"],
html[data-theme="dark"] [data-element-id="fe240ff3df8"],
html[data-theme="dark"] [data-element-id="ff998e15f89"],
html[data-theme="dark"] [data-element-id="ffbbb0422b1"] { --setting-color-document-text-color: #000000; --theme-copy-color: #000000; color: #000000; }