/*
 * Brand palette override for Material for MkDocs — the real GNOME/Adwaita
 * colors (see packages/core/src/tokens.css), not Material's stock "blue".
 * Material requires `primary: custom` / `accent: custom` in mkdocs.yml to
 * opt into these selectors instead of its own named palettes.
 */

/*
 * Body text font — the same self-hosted "Adwaita Sans" every gnome-ui
 * package already ships (see packages/core/src/tokens.css's own
 * @font-face + `--gnome-font-family`), copied into docs/assets/fonts/
 * since this site builds independently of that package's own asset
 * pipeline. Code blocks intentionally keep Material's default Roboto
 * Mono — only `--md-text-font` changes here, not `--md-code-font`.
 */
@font-face {
  font-family: "Adwaita Sans";
  src: url("../assets/fonts/AdwaitaSans-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Adwaita Sans";
  src: url("../assets/fonts/AdwaitaSans-Italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --md-text-font: "Adwaita Sans";
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #3584e4;
  --md-primary-fg-color--light: #62a0ea;
  --md-primary-fg-color--dark: #1c71d8;
  --md-primary-bg-color: #fff;
  --md-accent-fg-color: #1c71d8;
  --md-accent-fg-color--transparent: rgb(28 113 216 / 10%);
  --md-accent-bg-color: #fff;

  /* Syntax highlighting — GNOME/Adwaita palette, dark-on-light variants */
  --md-code-hl-keyword-color: #813d9c;
  --md-code-hl-operator-color: #986a44;
  --md-code-hl-punctuation-color: #5e5c64;
  --md-code-hl-name-color: #1c71d8;
  --md-code-hl-function-color: #1a5fb4;
  --md-code-hl-constant-color: #c64600;
  --md-code-hl-number-color: #e66100;
  --md-code-hl-string-color: #26a269;
  --md-code-hl-variable-color: #c01c28;
  --md-code-hl-comment-color: #77767b;
  --md-code-hl-generic-color: #a51d2d;
  --md-code-hl-special-color: #9141ac;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #3584e4;
  --md-primary-fg-color--light: #62a0ea;
  --md-primary-fg-color--dark: #1a5fb4;
  --md-accent-fg-color: #99c1f1;
  --md-accent-fg-color--transparent: rgb(153 193 241 / 10%);

  /* Syntax highlighting — GNOME/Adwaita palette, light-on-dark variants */
  --md-code-hl-keyword-color: #dc8add;
  --md-code-hl-operator-color: #cdab8f;
  --md-code-hl-punctuation-color: #c0bfbc;
  --md-code-hl-name-color: #99c1f1;
  --md-code-hl-function-color: #62a0ea;
  --md-code-hl-constant-color: #ffbe6f;
  --md-code-hl-number-color: #ffa348;
  --md-code-hl-string-color: #8ff0a4;
  --md-code-hl-variable-color: #f66151;
  --md-code-hl-comment-color: #9a9996;
  --md-code-hl-generic-color: #f66151;
  --md-code-hl-special-color: #dc8add;
}

/* GNOME accent-blue focus ring, matching every other gnome-ui package */
[data-md-color-scheme] a:focus-visible,
[data-md-color-scheme] button:focus-visible,
[data-md-color-scheme] .md-nav__link:focus-visible {
  outline: 2px solid #3584e4;
  outline-offset: 2px;
}

/*
 * Live component demo — an iframe onto the already-deployed Storybook
 * build (same origin, gnome-ui.org/<package>/), embedding one real story
 * in isolation via Storybook's own `iframe.html?id=...&viewMode=story`
 * route rather than the full manager UI with its sidebar/toolbar chrome.
 * Wrapped in a fake browser-window frame (traffic-light dots + a pseudo
 * address bar) so the embed reads as "a page", not a bare rectangle.
 */
.gnome-live-demo {
  margin: 1em 0;
  border: 1px solid rgb(0 0 0 / 12%);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

.gnome-live-demo__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: #ebebeb;
  border-bottom: 1px solid rgb(0 0 0 / 8%);
}

.gnome-live-demo__dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.gnome-live-demo__dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

/* GNOME/Adwaita reds/yellows/greens, not macOS's stock traffic-light hues */
.gnome-live-demo__dots span:nth-child(1) {
  background: #e01b24;
}

.gnome-live-demo__dots span:nth-child(2) {
  background: #f6d32d;
}

.gnome-live-demo__dots span:nth-child(3) {
  background: #33d17a;
}

.gnome-live-demo__url {
  flex: 1;
  min-width: 0;
  font-family: var(--md-code-font, "Roboto Mono", monospace);
  font-size: 0.7rem;
  color: #5e5c64;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 8%);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gnome-live-demo iframe {
  display: block;
  width: 100%;
  height: var(--gnome-demo-height, 160px);
  border: 0;
  background: #fff;
}

.gnome-live-demo--tall {
  --gnome-demo-height: 280px;
}

/*
 * Platform-availability badges — icon + label pairs shown per component.
 * React Native has no distinct brand mark in simple-icons (reactnative.dev
 * itself reuses the React atom logo), so the same glyph is intentionally
 * reused for both React and React Native badges here — the label text is
 * what actually disambiguates them, not the icon shape. Only the badges
 * for platforms the component actually ships on are rendered; there's no
 * "unavailable" placeholder state.
 */
.gnome-platform-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1.25rem;
}

.gnome-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgb(53 132 228 / 10%);
  border: 1px solid rgb(53 132 228 / 25%);
  font-size: 0.72rem;
  font-weight: 600;
  color: #1c71d8;
  white-space: nowrap;
}

/* Tabs are real `<button>`s (for keyboard/AT semantics) reset to look like
   the badge pill they already were as static `<span>`s, plus an active
   state and a pointer cursor. */
.gnome-platform-tab {
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 125ms,
    border-color 125ms;
}

/* `button.` (not just `.gnome-platform-tab`) so this specificity beats
   `[data-md-color-scheme="slate"] .gnome-platform-badge` below regardless
   of source order — a bare two-class selector only ties with that
   attribute-plus-class one, and the later-in-file rule would otherwise
   win the tie (confirmed via getComputedStyle before this fix: the tab's
   background was resolving to the dark-mode badge tint, never the active
   blue, on `[data-md-color-scheme="slate"]`). */
button.gnome-platform-tab.is-active {
  background: #3584e4;
  border-color: #3584e4;
  color: #fff;
}

.gnome-platform-tab:not(.is-active):hover {
  background: rgb(53 132 228 / 18%);
}

[data-md-color-scheme="slate"] .gnome-platform-tab:not(.is-active):hover {
  background: rgb(153 193 241 / 20%);
}

.gnome-platform-badge::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
}

/* React's official atom mark (simple-icons "react") — reactnative.dev
   reuses this same glyph for its own brand, so "react-native" below
   intentionally points at the identical path; only the badge label
   text distinguishes the two platforms. */
.gnome-platform-badge--react::before,
.gnome-platform-badge--react-native::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z'/%3E%3C/svg%3E");
}

/* webcomponents.org's puzzle-piece mark (simple-icons "webcomponentsdotorg")
   — the closest thing the Web Components standard has to an official logo. */
.gnome-platform-badge--web-components::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.731 2.225l-.01.016H5.618L0 11.979l5.618 9.736h12.8l.04.06 2.134-3.735.518-.893h-.008l.008-.014-.626-.75h.895l.006-.01.008.01L24 11.994l-2.607-4.39-.003.005-.011-.02h-.945l.63-.763-2.606-4.57-.006.01-.024-.04H11.73zM9.107 6.824h6.19l-.53.764h-.023l2.398 4.015h.875l-.277.328.357.435h-.956l-2.398 4.015h.027l.523.764H9.074l-2.99-5.168 3.022-5.155z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.731 2.225l-.01.016H5.618L0 11.979l5.618 9.736h12.8l.04.06 2.134-3.735.518-.893h-.008l.008-.014-.626-.75h.895l.006-.01.008.01L24 11.994l-2.607-4.39-.003.005-.011-.02h-.945l.63-.763-2.606-4.57-.006.01-.024-.04H11.73zM9.107 6.824h6.19l-.53.764h-.023l2.398 4.015h.875l-.277.328.357.435h-.956l-2.398 4.015h.027l.523.764H9.074l-2.99-5.168 3.022-5.155z'/%3E%3C/svg%3E");
}

[data-md-color-scheme="slate"] .gnome-platform-badge {
  background: rgb(153 193 241 / 12%);
  border-color: rgb(153 193 241 / 30%);
  color: #99c1f1;
}