/* Craft Planner theme: Gilded Frame.
   Generated by tools/gen_themes.py. A layer on top of extra.css, scoped to html[data-cp-theme="gilded-frame"].
   Gilded manuscript: midnight navy, gold frames with corner brackets, Cinzel capitals, a gold signet on black stone.
   Source of the values: design/design-selections/stitch-2026-10-16, design system "Gilded Frame (Thaumaturgical Matrix)".
   Dark scheme is native. The picture stays fixed behind the page while it scrolls (gold signet on the anvil).
   No figure, price or count of the design pictures is copied. Numbers come from our own server only. */

html[data-cp-theme="gilded-frame"] {
  --cp-font-serif: "Cinzel", "Cambria", "Georgia", "Times New Roman", serif;
  --cp-font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cp-font-mono: "JetBrains Mono", "Cascadia Mono", "Consolas", "Courier New", monospace;
  --cp-font: var(--cp-font-sans);
  --cp-font-display: var(--cp-font-serif);
  --cp-radius: 0;
  --cp-radius-sm: 0;
  background-color: #0d131f;
}
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="slate"] {
  --cp-amber: #f59e0b;
  --cp-amber-hi: #ffc174;
  --cp-amber-lo: #c77c0a;
  --cp-amber-ink: #1a1000;
  --cp-night: #080c15;
  --cp-night-2: #141b2b;
  --cp-night-3: #1d2538;
  --cp-snow: #dde2f3;
  --md-default-bg-color: #0d131f;
  --md-default-fg-color: #dde2f3;
  --md-default-fg-color--light: rgba(221, 226, 243, 0.78);
  --md-default-fg-color--lighter: rgba(221, 226, 243, 0.5);
  --md-default-fg-color--lightest: rgba(221, 226, 243, 0.12);
  --md-code-bg-color: #1d2538;
  --md-primary-fg-color: #080c15;
  --md-primary-fg-color--light: #141b2b;
  --md-primary-fg-color--dark: #080c15;
  --md-footer-bg-color: #080c15;
  --md-footer-bg-color--dark: #080c15;
  --md-accent-fg-color: #ffc174;
  --md-accent-fg-color--transparent: rgba(245, 158, 11, 0.14);
  --md-typeset-a-color: #ffc174;
  --cp-surface: #141b2b;
  --cp-surface-2: #1d2538;
  --cp-line: rgba(160, 142, 122, 0.55);
  --cp-line-strong: rgba(245, 158, 11, 0.7);
  --cp-text-soft: rgba(221, 226, 243, 0.76);
  --cp-accent-text: #ffc174;
  --cp-accent-tint: rgba(245, 158, 11, 0.1);
  --cp-accent-line: rgba(245, 158, 11, 0.6);
  --cp-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.9);
  --cp-shadow-sm: 0 8px 24px -4px rgba(0, 0, 0, 0.75);
  --cp-focus: #f59e0b;
}
/* The light scheme keeps the theme accent and radius, on the common light surfaces. */
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] {
  --cp-amber: #c77c0a;
  --cp-amber-hi: #f59e0b;
  --cp-amber-lo: #c77c0a;
  --md-accent-fg-color: #c77c0a;
  --md-typeset-a-color: #c77c0a;
  --cp-accent-text: #c77c0a;
  --cp-focus: #c77c0a;
}

/* ---------- Type ---------- */

html[data-cp-theme="gilded-frame"] .md-typeset h1,
html[data-cp-theme="gilded-frame"] .md-typeset h2,
html[data-cp-theme="gilded-frame"] .md-typeset h3,
html[data-cp-theme="gilded-frame"] .md-header__title,
html[data-cp-theme="gilded-frame"] .cp-hero h1 {
  font-family: var(--cp-font-serif);
  letter-spacing: 0.08em;
}
html[data-cp-theme="gilded-frame"] .md-typeset h1,
html[data-cp-theme="gilded-frame"] .md-typeset h2,
html[data-cp-theme="gilded-frame"] .cp-hero h1 {
  text-transform: uppercase;
}
html[data-cp-theme="gilded-frame"] .md-typeset h1,
html[data-cp-theme="gilded-frame"] .md-typeset h2 {
  text-align: center;
}
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="slate"] .md-typeset h1,
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #ffe9c9;
}
html[data-cp-theme="gilded-frame"] .md-typeset h2 { padding-bottom: 1.1rem; position: relative; }
html[data-cp-theme="gilded-frame"] .md-typeset h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  width: min(14rem, 60%);
  height: 9px;
  transform: translateX(-50%);
  background:
    linear-gradient(#c77c0a, #c77c0a) left center / calc(50% - 10px) 1px no-repeat,
    linear-gradient(#c77c0a, #c77c0a) right center / calc(50% - 10px) 1px no-repeat,
    linear-gradient(45deg, transparent 38%, #f59e0b 38% 62%, transparent 62%) center / 9px 9px no-repeat;
}
html[data-cp-theme="gilded-frame"] .md-typeset h2::before { content: none; }
html[data-cp-theme="gilded-frame"] .cp-hero h1 {
  font-weight: 700;
  line-height: 1.12;
  color: #ffe9c9;
  text-shadow: 0 0 28px rgba(245, 158, 11, 0.3), 0 2px 14px rgba(0, 0, 0, 0.9);
}
html[data-cp-theme="gilded-frame"] .md-typeset .cp-kicker,
html[data-cp-theme="gilded-frame"] .md-typeset .cp-tag,
html[data-cp-theme="gilded-frame"] .cp-hero__eyebrow,
html[data-cp-theme="gilded-frame"] .cp-stage__label,
html[data-cp-theme="gilded-frame"] .md-typeset .md-button,
html[data-cp-theme="gilded-frame"] .cp-hero .md-button,
html[data-cp-theme="gilded-frame"] .md-typeset table:not([class]) th {
  font-family: var(--cp-font-serif);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Header and tabs ---------- */

html[data-cp-theme="gilded-frame"] .md-header {
  background: rgba(8, 12, 21, 0.95);
  box-shadow: 0 1px 0 #c77c0a, 0 2px 0 rgba(8, 12, 21, 1);
}
html[data-cp-theme="gilded-frame"] .md-header__button.md-logo { color: #f59e0b; }
html[data-cp-theme="gilded-frame"] .md-header__title { color: #ffe9c9; letter-spacing: 0.1em; }
html[data-cp-theme="gilded-frame"] .md-tabs { background: #080c15; box-shadow: 0 1px 0 rgba(160, 142, 122, 0.6); }
html[data-cp-theme="gilded-frame"] .md-tabs__link {
  font-family: var(--cp-font-serif);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html[data-cp-theme="gilded-frame"] .md-tabs__link::after { height: 2px; border-radius: 0; background: #f59e0b; }
html[data-cp-theme="gilded-frame"] .md-tabs__item--active .md-tabs__link { color: #ffc174; }
html[data-cp-theme="gilded-frame"] .md-header a:focus-visible,
html[data-cp-theme="gilded-frame"] .md-header button:focus-visible,
html[data-cp-theme="gilded-frame"] .md-header label:focus-visible,
html[data-cp-theme="gilded-frame"] .md-tabs a:focus-visible,
html[data-cp-theme="gilded-frame"] .md-footer a:focus-visible,
html[data-cp-theme="gilded-frame"] .cp-hero a:focus-visible { outline-color: #f59e0b; }

/* ---------- Buttons ---------- */

html[data-cp-theme="gilded-frame"] .md-typeset .md-button,
html[data-cp-theme="gilded-frame"] .cp-hero .md-button {
  font-size: 0.7rem;
  padding: 0.9em 1.9em;
  border-width: 1px;
  border-radius: 0;
  clip-path: polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px));
}
html[data-cp-theme="gilded-frame"] .md-typeset .md-button--primary,
html[data-cp-theme="gilded-frame"] .cp-hero .md-button--primary {
  background: #f59e0b;
  border-color: #ffc174;
  color: #1a1000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
html[data-cp-theme="gilded-frame"] .md-typeset .md-button--primary:hover,
html[data-cp-theme="gilded-frame"] .md-typeset .md-button--primary:focus,
html[data-cp-theme="gilded-frame"] .cp-hero .md-button--primary:hover,
html[data-cp-theme="gilded-frame"] .cp-hero .md-button--primary:focus {
  background: #ffc174;
  border-color: #ffc174;
  color: #1a1000;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.5);
}
html[data-cp-theme="gilded-frame"] .cp-hero .md-button:not(.md-button--primary),
html[data-cp-theme="gilded-frame"] .md-typeset .md-button:not(.md-button--primary) {
  background: rgba(29, 37, 56, 0.85);
  border-color: rgba(160, 142, 122, 0.9);
  color: #dde2f3;
}
html[data-cp-theme="gilded-frame"] .cp-hero .md-button:not(.md-button--primary):hover,
html[data-cp-theme="gilded-frame"] .md-typeset .md-button:not(.md-button--primary):hover {
  border-color: #f59e0b;
  color: #ffe9c9;
}

/* ---------- Hero ---------- */

html[data-cp-theme="gilded-frame"] .cp-hero {
  background:
    radial-gradient(40rem 24rem at 50% -10%, rgba(245, 158, 11, 0.14), transparent 66%),
    linear-gradient(90deg, rgba(8, 12, 21, 0.5) 0%, rgba(8, 12, 21, 0.12) 55%, transparent 85%);
  --cp-accent-tint: rgba(245, 158, 11, 0.12);
  --cp-accent-line: rgba(245, 158, 11, 0.55);
}
html[data-cp-theme="gilded-frame"] .cp-hero::before {
  background-image:
    linear-gradient(rgba(160, 142, 122, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 142, 122, 0.16) 1px, transparent 1px);
}
html[data-cp-theme="gilded-frame"] .cp-hero::after {
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.85) 30%, rgba(245, 158, 11, 1) 50%, rgba(245, 158, 11, 0.85) 70%, transparent);
}
html[data-cp-theme="gilded-frame"] .cp-route { stroke: #ffc174; }
html[data-cp-theme="gilded-frame"] .cp-route--branch { stroke: #c77c0a; }
html[data-cp-theme="gilded-frame"] .cp-node { fill: #080c15; stroke: #f59e0b; }
html[data-cp-theme="gilded-frame"] .cp-node--miss { stroke: #ef4444; }
html[data-cp-theme="gilded-frame"] .cp-node--goal { fill: #ffc174; }
html[data-cp-theme="gilded-frame"] .cp-hero__eyebrow {
  border-radius: 0;
  border-color: rgba(160, 142, 122, 0.8);
  background: rgba(20, 27, 43, 0.85);
  color: #ffc174;
}
html[data-cp-theme="gilded-frame"] .cp-hero__eyebrow::before { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.22); }
html[data-cp-theme="gilded-frame"] .cp-hero__safe {
  border-radius: 0;
  border-left-color: #f59e0b;
  background: rgba(20, 27, 43, 0.8);
}
html[data-cp-theme="gilded-frame"] .cp-hero__safe svg { color: #ffc174; }
html[data-cp-theme="gilded-frame"] .cp-hero__copy,
html[data-cp-theme="gilded-frame"] .cp-hero p { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9); }

/* ---------- Cards, tables, frames ---------- */

html[data-cp-theme="gilded-frame"] .md-typeset .cp-card,
html[data-cp-theme="gilded-frame"] .md-typeset .cp-ringcard {
  border-radius: 0;
  background-color: var(--cp-surface);
  background-image:
    linear-gradient(#c77c0a, #c77c0a), linear-gradient(#c77c0a, #c77c0a), linear-gradient(#c77c0a, #c77c0a), linear-gradient(#c77c0a, #c77c0a),
    linear-gradient(#c77c0a, #c77c0a), linear-gradient(#c77c0a, #c77c0a), linear-gradient(#c77c0a, #c77c0a), linear-gradient(#c77c0a, #c77c0a);
  background-repeat: no-repeat;
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  border: 1px solid var(--cp-line);
  outline: 1px solid rgba(160, 142, 122, 0.35);
  outline-offset: 3px;
}
html[data-cp-theme="gilded-frame"] .md-typeset .cp-card:hover,
html[data-cp-theme="gilded-frame"] .md-typeset .cp-card:focus-within {
  border-color: #f59e0b;
  box-shadow: inset 0 0 12px rgba(245, 158, 11, 0.15), 0 16px 48px -8px rgba(0, 0, 0, 0.9);
}
html[data-cp-theme="gilded-frame"] .md-typeset .cp-card__icon {
  border-radius: 0;
  color: #ffc174;
  background: #080c15;
  border: 1px solid rgba(160, 142, 122, 0.8);
}
html[data-cp-theme="gilded-frame"] .md-typeset .cp-tag { border-radius: 0; }
html[data-cp-theme="gilded-frame"] .md-typeset .cp-kicker { color: #f59e0b; }
html[data-cp-theme="gilded-frame"] .md-typeset table:not([class]) { border-radius: 0; }
html[data-cp-theme="gilded-frame"] .md-typeset table:not([class]) th { color: #ffc174; font-size: 0.62rem; }
html[data-cp-theme="gilded-frame"] .md-typeset .cp-frame,
html[data-cp-theme="gilded-frame"] .cp-frame,
html[data-cp-theme="gilded-frame"] .md-typeset figure.screen a { border-radius: 0; }
html[data-cp-theme="gilded-frame"] .md-typeset .cp-cta {
  border-radius: 0;
  border-color: rgba(245, 158, 11, 0.5);
  background:
    radial-gradient(30rem 14rem at 50% 0, rgba(245, 158, 11, 0.14), transparent 70%),
    rgba(20, 27, 43, 0.84);
}

/* ---------- Footer, selection ---------- */

html[data-cp-theme="gilded-frame"] .md-footer,
html[data-cp-theme="gilded-frame"] .md-footer-meta { background: #080c15; border-top: 1px solid #c77c0a; }
html[data-cp-theme="gilded-frame"] .cp-footer-links a {
  font-family: var(--cp-font-serif);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html[data-cp-theme="gilded-frame"] ::selection { background: rgba(245, 158, 11, 0.4); color: #fff; }

/* ---------- Count strip under the hero (value from mkdocs.yml, extra.counters) ---------- */

html[data-cp-theme="gilded-frame"] .cp-stats {
  background: rgba(8, 12, 21, 0.78);
  border-top: 1px solid #c77c0a;
  border-bottom: 1px solid rgba(160, 142, 122, 0.6);
}
html[data-cp-theme="gilded-frame"] .cp-stats__inner { padding: 1.6rem 1.2rem; }
html[data-cp-theme="gilded-frame"] .cp-stats__item { display: grid; justify-items: center; gap: 0.35rem; margin: 0; text-align: center; }
html[data-cp-theme="gilded-frame"] .cp-stats__label,
html[data-cp-theme="gilded-frame"] .cp-stats__note {
  font-family: var(--cp-font-serif);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(221, 226, 243, 0.78);
}
html[data-cp-theme="gilded-frame"] .cp-stats__note { font-family: var(--cp-font-sans); text-transform: none; letter-spacing: 0.02em; }
html[data-cp-theme="gilded-frame"] .cp-stats__value {
  font-family: var(--cp-font-mono);
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  color: #ffc174;
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.35);
}
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .cp-stats { background: rgba(20, 27, 43, 0.9); }

/* ---------- Fixed picture layer: stays while the page scrolls over it ---------- */

html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="slate"] { background: transparent; }
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="slate"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 12, 21, 0.15) 0%, rgba(8, 12, 21, 0.55) 100%),
    url("themes/gilded-frame/gilded-ring-anvil.jpg") center 45% / cover no-repeat;
}
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="slate"] .md-typeset .cp-card,
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="slate"] .md-typeset .cp-ringcard { background-color: rgba(20, 27, 43, 0.86); }

/* ---------- Light scheme: the picture stays fixed here too, under a pale veil, so it never disappears on scroll ---------- */

html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] { background: transparent; }
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(247, 244, 239, 0.58) 0%, rgba(247, 244, 239, 0.78) 100%),
    url("themes/gilded-frame/gilded-ring-anvil.jpg") center 45% / cover no-repeat;
}
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .cp-hero {
  background: linear-gradient(90deg, rgba(247, 244, 239, 0.7) 0%, rgba(247, 244, 239, 0.25) 55%, transparent 85%);
}
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .cp-hero h1,
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .cp-hero p,
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .cp-hero__copy {
  color: #1c1917;
  text-shadow: 0 0 14px rgba(247, 244, 239, 0.95);
}
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .cp-stats { background: rgba(247, 244, 239, 0.85); }
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .cp-stats__label,
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .cp-stats__note { color: rgba(28, 25, 23, 0.82); }
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .cp-stats__value { color: #c77c0a; text-shadow: none; }
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .md-typeset .cp-card,
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .md-typeset .cp-ringcard { background-color: rgba(255, 253, 250, 0.9); }
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .md-typeset .cp-cta { background: rgba(255, 253, 250, 0.88); }
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .cp-hero__eyebrow {
  background: rgba(255, 253, 250, 0.92);
  border-color: rgba(28, 25, 23, 0.35);
  color: #c77c0a;
}
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .cp-hero__safe {
  background: rgba(255, 253, 250, 0.9);
  color: #1c1917;
  text-shadow: none;
}
html[data-cp-theme="gilded-frame"] body[data-md-color-scheme="default"] .cp-hero__safe svg { color: #c77c0a; }