/* Craft Planner theme: Tile Hub.
   Generated by tools/gen_themes.py. A layer on top of extra.css, scoped to html[data-cp-theme="tile-hub"].
   Bento tiles: grid of dark tiles on navy, amber accent bar on every card, grotesk type. No picture, a fixed tile grid instead.
   Source of the values: design/design-selections/stitch-2026-10-16, design system "Obsidian Nexus Hub".
   Dark scheme is native. The picture stays fixed behind the page while it scrolls (fixed tile grid).
   No figure, price or count of the design pictures is copied. Numbers come from our own server only. */

html[data-cp-theme="tile-hub"] {
  --cp-font-serif: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --cp-font-sans: "Hanken Grotesk", "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: 4px;
  --cp-radius-sm: 2px;
  background-color: #0f131f;
}
html[data-cp-theme="tile-hub"] body[data-md-color-scheme="slate"] {
  --cp-amber: #ffc174;
  --cp-amber-hi: #ffd9a3;
  --cp-amber-lo: #d99033;
  --cp-amber-ink: #2b1700;
  --cp-night: #0a0d16;
  --cp-night-2: #171c2b;
  --cp-night-3: #212737;
  --cp-snow: #dfe2f3;
  --md-default-bg-color: #0f131f;
  --md-default-fg-color: #dfe2f3;
  --md-default-fg-color--light: rgba(223, 226, 243, 0.78);
  --md-default-fg-color--lighter: rgba(223, 226, 243, 0.5);
  --md-default-fg-color--lightest: rgba(223, 226, 243, 0.12);
  --md-code-bg-color: #212737;
  --md-primary-fg-color: #0a0d16;
  --md-primary-fg-color--light: #171c2b;
  --md-primary-fg-color--dark: #0a0d16;
  --md-footer-bg-color: #0a0d16;
  --md-footer-bg-color--dark: #0a0d16;
  --md-accent-fg-color: #ffd9a3;
  --md-accent-fg-color--transparent: rgba(255, 193, 116, 0.14);
  --md-typeset-a-color: #4cd7f6;
  --cp-surface: #171c2b;
  --cp-surface-2: #212737;
  --cp-line: rgba(160, 142, 122, 0.55);
  --cp-line-strong: rgba(255, 193, 116, 0.7);
  --cp-text-soft: rgba(223, 226, 243, 0.76);
  --cp-accent-text: #ffd9a3;
  --cp-accent-tint: rgba(255, 193, 116, 0.1);
  --cp-accent-line: rgba(255, 193, 116, 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: #ffc174;
}
/* The light scheme keeps the theme accent and radius, on the common light surfaces. */
html[data-cp-theme="tile-hub"] body[data-md-color-scheme="default"] {
  --cp-amber: #d99033;
  --cp-amber-hi: #ffc174;
  --cp-amber-lo: #d99033;
  --md-accent-fg-color: #d99033;
  --md-typeset-a-color: #d99033;
  --cp-accent-text: #d99033;
  --cp-focus: #d99033;
}

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

html[data-cp-theme="tile-hub"] .md-typeset h1,
html[data-cp-theme="tile-hub"] .md-typeset h2,
html[data-cp-theme="tile-hub"] .md-typeset h3,
html[data-cp-theme="tile-hub"] .md-header__title,
html[data-cp-theme="tile-hub"] .cp-hero h1 {
  font-family: var(--cp-font-serif);
  letter-spacing: -0.01em;
}
html[data-cp-theme="tile-hub"] .md-typeset h1,
html[data-cp-theme="tile-hub"] .md-typeset h2,
html[data-cp-theme="tile-hub"] .cp-hero h1 {
  text-transform: none;
}
html[data-cp-theme="tile-hub"] .md-typeset h1,
html[data-cp-theme="tile-hub"] .md-typeset h2 {
  text-align: left;
}
html[data-cp-theme="tile-hub"] body[data-md-color-scheme="slate"] .md-typeset h1,
html[data-cp-theme="tile-hub"] body[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #f4f6ff;
}
html[data-cp-theme="tile-hub"] .md-typeset h2 { padding-left: 0.8rem; border-left: 4px solid #ffc174; }
html[data-cp-theme="tile-hub"] .md-typeset h2::before,
html[data-cp-theme="tile-hub"] .md-typeset h2::after { content: none; }
html[data-cp-theme="tile-hub"] .cp-hero h1 {
  font-weight: 700;
  line-height: 1.12;
  color: #f4f6ff;
  text-shadow: 0 0 28px rgba(255, 193, 116, 0.3), 0 2px 14px rgba(0, 0, 0, 0.9);
}
html[data-cp-theme="tile-hub"] .md-typeset .cp-kicker,
html[data-cp-theme="tile-hub"] .md-typeset .cp-tag,
html[data-cp-theme="tile-hub"] .cp-hero__eyebrow,
html[data-cp-theme="tile-hub"] .cp-stage__label,
html[data-cp-theme="tile-hub"] .md-typeset .md-button,
html[data-cp-theme="tile-hub"] .cp-hero .md-button,
html[data-cp-theme="tile-hub"] .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="tile-hub"] .md-header {
  background: rgba(10, 13, 22, 0.95);
  box-shadow: 0 1px 0 #d99033, 0 2px 0 rgba(10, 13, 22, 1);
}
html[data-cp-theme="tile-hub"] .md-header__button.md-logo { color: #ffc174; }
html[data-cp-theme="tile-hub"] .md-header__title { color: #f4f6ff; letter-spacing: 0.1em; }
html[data-cp-theme="tile-hub"] .md-tabs { background: #0a0d16; box-shadow: 0 1px 0 rgba(160, 142, 122, 0.6); }
html[data-cp-theme="tile-hub"] .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="tile-hub"] .md-tabs__link::after { height: 2px; border-radius: 0; background: #ffc174; }
html[data-cp-theme="tile-hub"] .md-tabs__item--active .md-tabs__link { color: #ffd9a3; }
html[data-cp-theme="tile-hub"] .md-header a:focus-visible,
html[data-cp-theme="tile-hub"] .md-header button:focus-visible,
html[data-cp-theme="tile-hub"] .md-header label:focus-visible,
html[data-cp-theme="tile-hub"] .md-tabs a:focus-visible,
html[data-cp-theme="tile-hub"] .md-footer a:focus-visible,
html[data-cp-theme="tile-hub"] .cp-hero a:focus-visible { outline-color: #ffc174; }

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

html[data-cp-theme="tile-hub"] .md-typeset .md-button,
html[data-cp-theme="tile-hub"] .cp-hero .md-button {
  font-size: 0.7rem;
  padding: 0.9em 1.9em;
  border-width: 1px;
  border-radius: 4px;
  
}
html[data-cp-theme="tile-hub"] .md-typeset .md-button--primary,
html[data-cp-theme="tile-hub"] .cp-hero .md-button--primary {
  background: #ffc174;
  border-color: #ffd9a3;
  color: #2b1700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
html[data-cp-theme="tile-hub"] .md-typeset .md-button--primary:hover,
html[data-cp-theme="tile-hub"] .md-typeset .md-button--primary:focus,
html[data-cp-theme="tile-hub"] .cp-hero .md-button--primary:hover,
html[data-cp-theme="tile-hub"] .cp-hero .md-button--primary:focus {
  background: #ffd9a3;
  border-color: #ffd9a3;
  color: #2b1700;
  box-shadow: 0 0 18px rgba(255, 193, 116, 0.5);
}
html[data-cp-theme="tile-hub"] .cp-hero .md-button:not(.md-button--primary),
html[data-cp-theme="tile-hub"] .md-typeset .md-button:not(.md-button--primary) {
  background: rgba(33, 39, 55, 0.85);
  border-color: rgba(160, 142, 122, 0.9);
  color: #dfe2f3;
}
html[data-cp-theme="tile-hub"] .cp-hero .md-button:not(.md-button--primary):hover,
html[data-cp-theme="tile-hub"] .md-typeset .md-button:not(.md-button--primary):hover {
  border-color: #ffc174;
  color: #f4f6ff;
}

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

html[data-cp-theme="tile-hub"] .cp-hero {
  background:
    radial-gradient(40rem 24rem at 50% -10%, rgba(255, 193, 116, 0.14), transparent 66%),
    linear-gradient(90deg, rgba(10, 13, 22, 0.5) 0%, rgba(10, 13, 22, 0.12) 55%, transparent 85%);
  --cp-accent-tint: rgba(255, 193, 116, 0.12);
  --cp-accent-line: rgba(255, 193, 116, 0.55);
}
html[data-cp-theme="tile-hub"] .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="tile-hub"] .cp-hero::after {
  background: linear-gradient(90deg, transparent, rgba(255, 193, 116, 0.85) 30%, rgba(255, 193, 116, 1) 50%, rgba(255, 193, 116, 0.85) 70%, transparent);
}
html[data-cp-theme="tile-hub"] .cp-route { stroke: #ffd9a3; }
html[data-cp-theme="tile-hub"] .cp-route--branch { stroke: #d99033; }
html[data-cp-theme="tile-hub"] .cp-node { fill: #0a0d16; stroke: #ffc174; }
html[data-cp-theme="tile-hub"] .cp-node--miss { stroke: #ef4444; }
html[data-cp-theme="tile-hub"] .cp-node--goal { fill: #ffd9a3; }
html[data-cp-theme="tile-hub"] .cp-hero__eyebrow {
  border-radius: 2px;
  border-color: rgba(160, 142, 122, 0.8);
  background: rgba(23, 28, 43, 0.85);
  color: #ffd9a3;
}
html[data-cp-theme="tile-hub"] .cp-hero__eyebrow::before { background: #ffc174; box-shadow: 0 0 0 4px rgba(255, 193, 116, 0.22); }
html[data-cp-theme="tile-hub"] .cp-hero__safe {
  border-radius: 2px;
  border-left-color: #ffc174;
  background: rgba(23, 28, 43, 0.8);
}
html[data-cp-theme="tile-hub"] .cp-hero__safe svg { color: #ffd9a3; }
html[data-cp-theme="tile-hub"] .cp-hero__copy,
html[data-cp-theme="tile-hub"] .cp-hero p { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9); }

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

html[data-cp-theme="tile-hub"] .md-typeset .cp-card,
html[data-cp-theme="tile-hub"] .md-typeset .cp-ringcard {
  border-radius: 4px;
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-line);
  box-shadow: inset 4px 0 0 #ffc174;
}
html[data-cp-theme="tile-hub"] .md-typeset .cp-card:hover,
html[data-cp-theme="tile-hub"] .md-typeset .cp-card:focus-within {
  border-color: #ffc174;
  transform: translateY(-3px);
  box-shadow: inset 4px 0 0 #ffc174, 0 14px 32px -8px rgba(0, 0, 0, 0.9);
}
html[data-cp-theme="tile-hub"] .md-typeset .cp-card__icon {
  border-radius: 2px;
  color: #ffd9a3;
  background: #0a0d16;
  border: 1px solid rgba(160, 142, 122, 0.8);
}
html[data-cp-theme="tile-hub"] .md-typeset .cp-tag { border-radius: 2px; }
html[data-cp-theme="tile-hub"] .md-typeset .cp-kicker { color: #ffc174; }
html[data-cp-theme="tile-hub"] .md-typeset table:not([class]) { border-radius: 2px; }
html[data-cp-theme="tile-hub"] .md-typeset table:not([class]) th { color: #ffd9a3; font-size: 0.62rem; }
html[data-cp-theme="tile-hub"] .md-typeset .cp-frame,
html[data-cp-theme="tile-hub"] .cp-frame,
html[data-cp-theme="tile-hub"] .md-typeset figure.screen a { border-radius: 4px; }
html[data-cp-theme="tile-hub"] .md-typeset .cp-cta {
  border-radius: 4px;
  border-color: rgba(255, 193, 116, 0.5);
  background:
    radial-gradient(30rem 14rem at 50% 0, rgba(255, 193, 116, 0.14), transparent 70%),
    rgba(23, 28, 43, 0.84);
}

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

html[data-cp-theme="tile-hub"] .md-footer,
html[data-cp-theme="tile-hub"] .md-footer-meta { background: #0a0d16; border-top: 1px solid #d99033; }
html[data-cp-theme="tile-hub"] .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="tile-hub"] ::selection { background: rgba(255, 193, 116, 0.4); color: #fff; }

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

html[data-cp-theme="tile-hub"] .cp-stats {
  background: rgba(10, 13, 22, 0.78);
  border-top: 1px solid #d99033;
  border-bottom: 1px solid rgba(160, 142, 122, 0.6);
}
html[data-cp-theme="tile-hub"] .cp-stats__inner { padding: 1.6rem 1.2rem; }
html[data-cp-theme="tile-hub"] .cp-stats__item { display: grid; justify-items: center; gap: 0.35rem; margin: 0; text-align: center; }
html[data-cp-theme="tile-hub"] .cp-stats__label,
html[data-cp-theme="tile-hub"] .cp-stats__note {
  font-family: var(--cp-font-serif);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(223, 226, 243, 0.78);
}
html[data-cp-theme="tile-hub"] .cp-stats__note { font-family: var(--cp-font-sans); text-transform: none; letter-spacing: 0.02em; }
html[data-cp-theme="tile-hub"] .cp-stats__value {
  font-family: var(--cp-font-mono);
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  color: #ffd9a3;
  text-shadow: 0 0 20px rgba(255, 193, 116, 0.35);
}
html[data-cp-theme="tile-hub"] body[data-md-color-scheme="default"] .cp-stats { background: rgba(23, 28, 43, 0.9); }

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

html[data-cp-theme="tile-hub"] body[data-md-color-scheme="slate"] { background: transparent; }
html[data-cp-theme="tile-hub"] body[data-md-color-scheme="slate"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 193, 116, 0.07) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, rgba(255, 193, 116, 0.07) 1px, transparent 1px) 0 0 / 72px 72px,
    radial-gradient(60rem 36rem at 80% 0, rgba(255, 193, 116, 0.1), transparent 70%),
    #0f131f;
}
html[data-cp-theme="tile-hub"] body[data-md-color-scheme="slate"] .md-typeset .cp-card,
html[data-cp-theme="tile-hub"] body[data-md-color-scheme="slate"] .md-typeset .cp-ringcard { background-color: rgba(23, 28, 43, 0.86); }