/* User Provided Stylesheet */

/* Qamomile Chamomile Theme
 *
 * The MyST theme uses Tailwind blue utility classes for links, hover states,
 * borders, search hits, and buttons. This file remaps those utilities to the
 * warm amber palette used by Qamomile circuit visualizations.
 */

:root {
  --qamomile-amber-50: #FDF8F0;
  --qamomile-amber-100: #F9EDD8;
  --qamomile-amber-200: #F0DCC0;
  --qamomile-amber-300: #E8C898;
  --qamomile-amber-400: #D4A05C;
  --qamomile-amber-500: #C08A40;
  --qamomile-amber-600: #A87430;
  --qamomile-amber-700: #8B5E25;
  --qamomile-amber-800: #6E4A1C;
  --qamomile-amber-900: #5A3A15;
  --qamomile-amber-50-80: rgba(253, 248, 240, 0.8);
  --qamomile-amber-300-30: rgba(232, 200, 152, 0.19);
  --qamomile-amber-500-60: rgba(192, 138, 64, 0.6);
  --qamomile-amber-600-60: rgba(168, 116, 48, 0.6);
  --qamomile-amber-800-45: rgba(110, 74, 28, 0.45);
  --qamomile-amber-900-30: rgba(90, 58, 21, 0.19);
  --qamomile-card-text: #4B5563;
  --qamomile-card-text-dark: #D1D5DB;
  --qamomile-card-header-text: #111827;
  --qamomile-card-header-text-dark: #F9FAFB;
  --qamomile-feature-card-bg: var(--qamomile-amber-600);
  --qamomile-feature-card-text: #FFFFFF;
  --qamomile-colab-hover: #E18435;
  --qamomile-white: #FFFFFF;
}

/* Tailwind blue utility remaps. Attribute selectors avoid escaping variant names. */
:is([class~="text-blue-50"], .dark [class~="dark:text-blue-50"]) { color: var(--qamomile-amber-50) !important; }
:is([class~="text-blue-200"], .dark [class~="dark:text-blue-200"]) { color: var(--qamomile-amber-200) !important; }
:is([class~="text-blue-400"], [class~="hover:text-blue-400"]:hover, .dark [class~="dark:text-blue-400"], .dark [class~="dark:hover:text-blue-400"]:hover) { color: var(--qamomile-amber-400) !important; }
:is([class~="text-blue-500"], [class~="hover:text-blue-500"]:hover, .dark [class~="dark:text-blue-500"]) { color: var(--qamomile-amber-500) !important; }
:is([class~="text-blue-600"], [class~="hover:text-blue-600"]:hover) { color: var(--qamomile-amber-600) !important; }
:is([class~="text-blue-700"], [class~="hover:text-blue-700"]:hover) { color: var(--qamomile-amber-700) !important; }
[class~="text-blue-800"] { color: var(--qamomile-amber-800) !important; }
[class~="text-blue-900"] { color: var(--qamomile-amber-900) !important; }

[class~="bg-blue-50"] { background-color: var(--qamomile-amber-50) !important; }
[class~="bg-blue-50/80"] { background-color: var(--qamomile-amber-50-80) !important; }
:is([class~="bg-blue-100"], [class~="hover:bg-blue-100"]:hover) { background-color: var(--qamomile-amber-100) !important; }
[class~="bg-blue-300/30"] { background-color: var(--qamomile-amber-300-30) !important; }
[class~="bg-blue-500"] { background-color: var(--qamomile-amber-500) !important; }
:is([class~="bg-blue-600"], .group[aria-selected="true"] [class~="group-aria-selected:bg-blue-600"]) { background-color: var(--qamomile-amber-600) !important; }
:is([class~="bg-blue-800"], [class~="hover:bg-blue-800"]:hover, .dark [class~="dark:hover:bg-blue-800"]:hover) { background-color: var(--qamomile-amber-800) !important; }
[class~="bg-blue-900"] { background-color: var(--qamomile-amber-900) !important; }
.dark [class~="dark:bg-blue-900/30"] { background-color: var(--qamomile-amber-900-30) !important; }

[class~="border-blue-200"] { border-color: var(--qamomile-amber-200) !important; }
:is([class~="border-blue-400"], .dark [class~="dark:hover:border-blue-400"]:hover) { border-color: var(--qamomile-amber-400) !important; }
:is([class~="border-blue-500"], [class~="hover:border-blue-500"]:hover, [class~="focus:border-blue-500"]:focus, .dark [class~="dark:hover:border-blue-500"]:hover, .dark [class~="dark:focus:border-blue-500"]:focus) { border-color: var(--qamomile-amber-500) !important; }
:is([class~="border-blue-500/60"], .dark [class~="dark:border-blue-500/60"]) { border-color: var(--qamomile-amber-500-60) !important; }
:is([class~="border-blue-600"], [class~="hover:border-blue-600"]:hover) { border-color: var(--qamomile-amber-600) !important; }
:is([class~="border-blue-800"], .dark [class~="dark:border-blue-800"]) { border-color: var(--qamomile-amber-800) !important; }
[class~="border-b-blue-600"] { border-bottom-color: var(--qamomile-amber-600) !important; }
:is([class~="border-l-blue-400"], .dark [class~="dark:border-l-blue-400"]) { border-left-color: var(--qamomile-amber-400) !important; }
:is([class~="border-l-blue-500"], [class~="hover:border-l-blue-500"]:hover) { border-left-color: var(--qamomile-amber-500) !important; }
:is([class~="ring-blue-500"], [class~="hover:ring-blue-500"]:hover, [class~="focus:ring-blue-500"]:focus, [class~="focus-visible:ring-blue-500"]:focus-visible, .dark [class~="dark:hover:ring-blue-500"]:hover, .dark [class~="dark:focus:ring-blue-500"]:focus) { --tw-ring-color: var(--qamomile-amber-500) !important; }
[class~="outline-blue-200"] { outline-color: var(--qamomile-amber-200) !important; }
[class~="fill-blue-900"] { fill: var(--qamomile-amber-900) !important; }

/* Search hits combine text-blue-* with group-aria-selected:text-white. */
.group[aria-selected="true"] [class~="group-aria-selected:text-white"] {
  color: var(--qamomile-amber-50) !important;
}

/* Admonitions. */
.dark .myst-admonition-note .myst-admonition-header {
  background-color: var(--qamomile-amber-600-60) !important;
}

/* Cards. */
.myst-card {
  color: var(--qamomile-card-text) !important;
  font-size: 0.92rem;
  line-height: 1.55;
}

.dark .myst-card {
  color: var(--qamomile-card-text-dark) !important;
}

.myst-card :is(a, code, li, p, strong) {
  color: inherit !important;
}

.myst-card-header {
  background-color: var(--qamomile-amber-100) !important;
  border-bottom-color: var(--qamomile-amber-200) !important;
  color: var(--qamomile-card-header-text) !important;
}

.dark .myst-card-header {
  background-color: var(--qamomile-amber-800-45) !important;
  border-bottom-color: var(--qamomile-amber-800) !important;
  color: var(--qamomile-card-header-text-dark) !important;
}

.myst-card-header a {
  color: inherit;
  text-decoration: none;
}

.myst-card-header a:hover {
  color: inherit;
  text-decoration: underline;
}

/* Front-page feature cards below the Qamomile introduction. */
:is(#what-is-qamomile, #qamomile) + p + .myst-grid .myst-card,
:is(#what-is-qamomile, #qamomile) + p + .myst-grid .myst-card-header {
  background-color: var(--qamomile-feature-card-bg) !important;
}

:is(#what-is-qamomile, #qamomile) + p + .myst-grid .myst-card {
  border-color: var(--qamomile-feature-card-bg) !important;
}

:is(#what-is-qamomile, #qamomile) + p + .myst-grid .myst-card,
:is(#what-is-qamomile, #qamomile) + p + .myst-grid .myst-card * {
  color: var(--qamomile-feature-card-text) !important;
}

:is(#what-is-qamomile, #qamomile) + p + .myst-grid .myst-card-header {
  border-bottom: 0 !important;
}

:is(#what-is-qamomile, #qamomile) + p + .myst-grid .myst-card-body > p:first-child {
  font-size: 1.06rem;
  line-height: 1.35;
}

/* Tag chips emitted by docs/scripts/build_doc_tags.py. */
a.tag-chip {
  display: inline-block;
  padding: 0.15em 0.75em;
  margin: 0.18em 0.12em;
  background-color: var(--qamomile-amber-100);
  color: var(--qamomile-amber-700);
  border-radius: 999px;
  font-size: 0.88em;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

a.tag-chip:hover {
  background-color: var(--qamomile-amber-200);
  color: var(--qamomile-amber-800);
  text-decoration: none;
}

a.tag-chip::before {
  content: "#";
  margin-right: 0.25em;
  opacity: 0.55;
}

.dark a.tag-chip {
  background-color: var(--qamomile-amber-800-45);
  color: var(--qamomile-amber-200);
}

.dark a.tag-chip:hover {
  background-color: var(--qamomile-amber-600-60);
  color: var(--qamomile-amber-50);
}

/* Section index cards. */
.qamomile-section-card-thumb-wrap {
  float: right;
  width: min(9rem, 38%);
  margin: 0 0 0.55rem 0.9rem;
}

.qamomile-section-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: var(--qamomile-white);
}

.qamomile-section-card-thumb-default {
  object-fit: contain;
  padding: 0.45rem;
}

.qamomile-section-card-tags {
  clear: both;
  padding-top: 0.35rem;
}

.dark .qamomile-section-card-thumb {
  background-color: var(--qamomile-white);
}

@media (max-width: 640px) {
  .qamomile-section-card-thumb-wrap {
    float: none;
    width: 100%;
    margin: 0 0 0.65rem;
  }
}

/* Google Colab launch button injected into build output. */
.qamomile-colab-button {
  display: inline-flex;
  width: 24px;
  height: 24px;
  margin-left: 0.5rem;
  color: inherit;
  opacity: 0.65;
  text-decoration: none;
  align-items: center;
  justify-content: center;
}

.qamomile-colab-button:hover {
  color: var(--qamomile-colab-hover);
  opacity: 1;
}

.qamomile-colab-icon {
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 9999px;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* Cell-output media thumbnails handled by docs/assets/lightbox.js. */
:is(
  [data-name="safe-output-image"],
  .jp-OutputArea,
  .jupyter-output,
  .thebe-output,
  .cell_output,
  .cell-output,
  .notebook-output,
  article figure
) :is(img, svg:not([data-slot="icon"])) {
  max-width: 100%;
  height: auto;
  cursor: zoom-in;
}