/* ==========================================================================
   KERNPFAD — Main stylesheet
   Loads design tokens + components, adds page-level layout classes.
   ========================================================================== */

@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/effects.css";
@import "tokens/base.css";
@import "components.css";

/* ---- Generic layout ---- */
.page { min-height: 100vh; background: var(--surface-page); }
.header-sticky { position: sticky; top: 0; z-index: 50; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-6); }

/* ---- Hero ---- */
.hero {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-24) var(--space-6) var(--space-20);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--text-label-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-5);
}
.hero-eyebrow .prompt { color: var(--text-muted); font-family: var(--font-mono); }
.hero-title { font: var(--text-display-lg); color: var(--text-primary); letter-spacing: var(--tracking-tight); margin: 0; }
.hero-title .accent { color: var(--accent); }
.hero-lead { font: var(--text-body-lg); color: var(--text-secondary); max-width: 480px; margin-top: var(--space-5); }
.hero-actions { display: flex; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; }

/* ---- Services ---- */
.services { max-width: var(--container-max); margin: 0 auto; padding: var(--space-16) var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); scroll-margin-top: 80px; }
.service-card { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-8); }
.service-tag { font: var(--text-code-sm); color: var(--text-muted); margin-bottom: var(--space-3); }
.service-title { font: var(--text-h2); color: var(--text-primary); }
.service-desc { font: var(--text-body); color: var(--text-secondary); margin-top: var(--space-3); }
.service-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--space-5); }
.service-cta { margin-top: var(--space-6); }

/* ---- Generic content section ---- */
.section { max-width: var(--container-max); margin: 0 auto; padding: var(--space-16) var(--space-6); scroll-margin-top: 80px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-8); }
.section-tag { font: var(--text-code-sm); color: var(--text-muted); }
.section-title { font: var(--text-h2); color: var(--text-primary); margin: 0; }
.section-link { font: var(--text-label); color: var(--accent); text-decoration: none; font-family: var(--font-body); }
.section-link:hover { text-decoration: none; }
.section-center { text-align: center; margin-bottom: var(--space-10); }
.section-lead { font: var(--text-body); color: var(--text-secondary); margin-top: var(--space-3); max-width: 560px; margin-left: auto; margin-right: auto; }

.plugin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.plugin-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.section-compact { padding-top: var(--space-8); }

/* ---- CTA band ---- */
.cta-section { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--surface-raised); scroll-margin-top: 80px; }
.cta-inner { max-width: var(--container-narrow); margin: 0 auto; padding: var(--space-16) var(--space-6); text-align: center; }
.cta-inner .btn { margin-top: var(--space-6); }

/* ---- Page head (product/support/legal pages) ---- */
.page-head { max-width: var(--container-max); margin: 0 auto; padding: var(--space-20) var(--space-6) var(--space-12); }
.page-head-title { font: var(--text-display-md); color: var(--text-primary); letter-spacing: var(--tracking-tight); margin: var(--space-2) 0 0; max-width: 720px; }
.page-head-lead { font: var(--text-body-lg); color: var(--text-secondary); max-width: 560px; margin-top: var(--space-4); }
.page-head-links { display: flex; gap: var(--space-6); margin-top: var(--space-8); flex-wrap: wrap; }
.page-head-links a { font: var(--text-label); color: var(--accent); text-decoration: none; font-family: var(--font-body); }
.page-head-links a:hover { text-decoration: none; }

/* ---- Product detail blocks ---- */
.product-block { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); scroll-margin-top: 80px; }
.product-panel { border: 1px solid var(--border-default); border-radius: var(--radius-xl); overflow: hidden; }
.product-top { padding: var(--space-10); border-bottom: 1px solid var(--border-subtle); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.product-badges { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.product-badges .meta { font: var(--text-code-sm); color: var(--text-muted); }
.product-name { font: var(--text-h1); color: var(--text-primary); margin: 0; }
.product-name .sub { color: var(--text-muted); font: var(--text-h3); }
.product-lead { font: var(--text-body-lg); color: var(--text-secondary); margin-top: var(--space-4); }
.product-desc { font: var(--text-body); color: var(--text-secondary); margin-top: var(--space-4); }

.product-bottom { padding: var(--space-10); }
.product-bottom-label { font: var(--text-label-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-6); }
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.module-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); }
.module-num { font: var(--text-code-sm); color: var(--accent); margin-bottom: 6px; }
.module-name { font: var(--text-h4); color: var(--text-primary); }
.module-desc { font: var(--text-body-sm); color: var(--text-secondary); margin-top: 6px; }

.product-tiers { margin-top: var(--space-6); font: var(--text-body-sm); }
.product-tiers .k { color: var(--text-muted); }
.product-tiers .v { color: var(--text-secondary); }

.product-footrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.product-bottom .product-footrow { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.product-top:has(+ .product-footrow) { border-bottom: none; }
.product-panel > .product-footrow { padding: var(--space-8) var(--space-10); border-top: 1px solid var(--border-subtle); }
.product-price-label { font: var(--text-body-sm); color: var(--text-muted); }
.product-price { font: var(--text-h3); color: var(--text-primary); }
.product-price span { font: var(--text-body); color: var(--text-muted); }
.product-price-sub { font: var(--text-body-sm); color: var(--text-muted); margin-top: 4px; }
.product-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.status-note { max-width: var(--container-max); margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-8); }
.status-note-box { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: var(--space-5); display: flex; gap: 12px; align-items: flex-start; }
.status-note-box .prompt { font-family: var(--font-mono); color: var(--accent); font-size: 15px; }
.status-note-box p { font: var(--text-body-sm); color: var(--text-secondary); margin: 0; }

/* ---- Support page ---- */
.contact-cards { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6) var(--space-8); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.contact-card { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); }
.contact-card-tag { font: var(--text-label-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.contact-card-value { font: var(--text-h4); color: var(--text-primary); text-decoration: none; display: block; margin-top: 8px; }
.contact-card-value:hover { text-decoration: none; }
.contact-card-desc { font: var(--text-body-sm); color: var(--text-secondary); margin-top: 8px; }

.support-grid { max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.ticket-panel { border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-8); }
.ticket-tag { font: var(--text-code-sm); color: var(--text-muted); margin-bottom: var(--space-2); }
.ticket-title { font: var(--text-h2); color: var(--text-primary); margin: 0 0 var(--space-6); }
.ticket-form { display: flex; flex-direction: column; gap: var(--space-4); }
.ticket-row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.ticket-note { font: var(--text-body-sm); color: var(--text-muted); margin: 0; text-align: center; }
.ticket-success { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6); text-align: center; }
.ticket-success .ok { font: var(--text-code-sm); color: var(--accent); margin-bottom: var(--space-2); }
.ticket-success h3 { font: var(--text-h3); color: var(--text-primary); margin: 0; }
.ticket-success p { font: var(--text-body-sm); color: var(--text-secondary); margin-top: var(--space-3); }
.ticket-success .btn { margin-top: var(--space-5); }

.docs-side { scroll-margin-top: 80px; }
.docs-tag { font: var(--text-code-sm); color: var(--text-muted); margin-bottom: var(--space-2); }
.docs-title { font: var(--text-h3); color: var(--text-primary); margin: 0 0 var(--space-5); }
.doc-links { display: flex; flex-direction: column; gap: var(--space-3); }
.doc-link { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); text-decoration: none; display: block; }
.doc-link:hover { border-color: var(--border-strong); text-decoration: none; }
.doc-link-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc-link-title { font: var(--text-label); color: var(--text-primary); font-family: var(--font-body); }
.doc-link-arrow { color: var(--accent); font-family: var(--font-mono); }
.doc-link-desc { font: var(--text-body-sm); color: var(--text-secondary); margin-top: 4px; }

.pretix { margin-top: var(--space-8); border-top: 1px solid var(--border-subtle); padding-top: var(--space-6); }
.pretix-label { font: var(--text-label-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); }
.pretix ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.pretix li { font: var(--text-body-sm); color: var(--text-secondary); }

/* ---- Legal pages ---- */
.legal { max-width: var(--container-narrow); margin: 0 auto; padding: var(--space-20) var(--space-6) var(--space-16); }
.legal h1 { font: var(--text-display-md); color: var(--text-primary); letter-spacing: var(--tracking-tight); margin: var(--space-2) 0 var(--space-4); }
.legal > p.intro { max-width: 660px; }
.legal h2 { font: var(--text-h3); color: var(--text-primary); margin: var(--space-10) 0 var(--space-3); }
.legal h3 { font: var(--text-h4); color: var(--text-primary); margin: var(--space-6) 0 var(--space-2); }
.legal p { font: var(--text-body); color: var(--text-secondary); margin: 0 0 var(--space-3); max-width: 660px; }
.legal ul { margin: 0 0 var(--space-3); padding-left: 20px; max-width: 660px; }
.legal li { font: var(--text-body); color: var(--text-secondary); margin-bottom: 6px; }
.legal .row { font: var(--text-body); color: var(--text-primary); margin: 0 0 2px; }
.legal .muted { color: var(--text-muted); }
.legal .placeholder { color: var(--accent); }
.legal .callout { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); background: var(--surface-raised); margin: var(--space-6) 0; max-width: 660px; display: flex; gap: 12px; align-items: flex-start; }
.legal .callout .prompt { font-family: var(--font-mono); color: var(--accent); font-size: 15px; }
.legal .callout p { margin: 0; font: var(--text-body-sm); color: var(--text-secondary); }
.legal-footnote { margin-top: var(--space-12); border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); }
.legal-footnote p { font: var(--text-body-sm); }

/* ---- Docs pages ---- */
.docs-page { max-width: var(--container-narrow); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); }
.docs-page h2 { font: var(--text-h2); color: var(--text-primary); margin: var(--space-16) 0 var(--space-1); scroll-margin-top: calc(64px + var(--space-6)); }
.docs-page h3 { scroll-margin-top: calc(64px + var(--space-6)); }
.docs-page h2 .badge { vertical-align: middle; margin-left: var(--space-3); }
.docs-page .module-eyebrow { font: var(--text-code-sm); color: var(--text-muted); display: block; margin: 0 0 var(--space-2); }
.docs-page h3 { font: var(--text-h4); color: var(--text-primary); margin: var(--space-6) 0 var(--space-2); }
.docs-page p { font: var(--text-body); color: var(--text-secondary); margin: 0 0 var(--space-3); max-width: 660px; }
.docs-page > p.intro { max-width: 660px; }
.docs-page ul, .docs-page ol { margin: 0 0 var(--space-4); padding-left: 20px; max-width: 660px; }
.docs-page li { font: var(--text-body); color: var(--text-secondary); margin-bottom: 6px; }
.docs-page strong { color: var(--text-primary); }
.docs-page .module-divider { border-top: 1px solid var(--border-subtle); margin: var(--space-16) 0 0; }

.docs-page table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-6); }
.docs-page th, .docs-page td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); font: var(--text-body-sm); color: var(--text-secondary); vertical-align: top; }
.docs-page th { color: var(--text-primary); font: var(--text-label); font-family: var(--font-body); border-bottom: 1px solid var(--border-default); }

.docs-page pre { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); overflow-x: auto; margin: 0 0 var(--space-6); }
.docs-page pre code { font: var(--text-code-sm); color: var(--text-secondary); background: none; padding: 0; }
.docs-page code { font: var(--text-code-sm); color: var(--accent); background: var(--surface-raised); padding: 2px 6px; border-radius: var(--radius-sm); }

.docs-page .callout { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); background: var(--surface-raised); margin: var(--space-6) 0; max-width: 660px; display: flex; gap: 12px; align-items: flex-start; }
.docs-page .callout .prompt { font-family: var(--font-mono); color: var(--accent); font-size: 15px; }
.docs-page .callout p { margin: 0; font: var(--text-body-sm); color: var(--text-secondary); }

.docs-back-to-top { display: inline-block; margin-top: var(--space-8); font: var(--text-code-sm); color: var(--text-muted); text-decoration: none; }
.docs-back-to-top:hover { color: var(--accent); text-decoration: none; }

/* ---- Plugin-Dokumentation ---- */
.docs-head-row { display: flex; align-items: center; gap: var(--space-5); }
.docs-head-row .page-head-title { margin: 0; }
.docs-head-badges { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }

.docs-layout {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-16);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

.docs-toc {
  position: sticky;
  top: calc(64px + var(--space-4));
  z-index: 40;
  align-self: start;
}
.docs-toc-title { font: var(--text-code-sm); color: var(--text-muted); margin-bottom: var(--space-3); }
.docs-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-subtle); }
.docs-toc li { margin: 0; }
.docs-toc a {
  display: block;
  padding: 6px var(--space-4);
  margin-left: -1px;
  border-left: 1px solid transparent;
  font: var(--text-body-sm);
  color: var(--text-muted);
  text-decoration: none;
}
.docs-toc a:hover { color: var(--text-primary); border-left-color: var(--border-strong); text-decoration: none; }
.docs-toc a.is-active,
.docs-toc a:focus-visible { color: var(--accent); border-left-color: var(--accent); outline: none; text-decoration: none; }

/* Der Artikel bringt seine eigene Breite mit — nicht mittig wie eine
   eigenstaendige Doku-Seite, sondern linksbuendig neben dem Verzeichnis.
   Breiter als die Lesebreite: Fliesstext bleibt ueber `.docs-page p/ul/ol`
   bei 660px, Screenshots und Tabellen duerfen die volle Spalte nutzen —
   ein Control-Panel-Fenster auf 660px ist schlicht nicht mehr lesbar. */
.docs-page--article { max-width: 1000px; margin: 0; padding: 0; }
.docs-page--article > h2:first-child { margin-top: 0; }
.docs-page--article h2 a, .docs-page--article h3 a { color: inherit; text-decoration: none; }
.docs-page--article h2 a:hover, .docs-page--article h3 a:hover { color: var(--accent); text-decoration: none; }
.docs-page--article h2:target, .docs-page--article h3:target { color: var(--accent); outline: none; }
.docs-page--article h2:target a, .docs-page--article h3:target a { color: inherit; }
.docs-page--article h2:focus, .docs-page--article h3:focus,
.docs-page--article .header-anchor:focus { outline: none; }

/* Breite Tabellen duerfen scrollen, statt die Seite zu sprengen. */
.docs-page--article table { display: block; overflow-x: auto; max-width: 100%; }

/* Markdown verpackt ein alleinstehendes Bild in ein <p>, und das ist ueber
   `.docs-page p` auf Lesebreite begrenzt. Ohne diese Ausnahme bleibt jeder
   Screenshot auf 660px gestaucht, statt die volle Spalte zu nutzen. */
.docs-page--article p:has(> img) { max-width: none; }

/* Screenshots aus dem Craft Control Panel sind hell — auf der dunklen Seite
   brauchen sie einen eigenen Rahmen, sonst wirken sie wie ein Fremdkoerper. */
.docs-page--article img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-ink-0);
  box-shadow: var(--shadow-md);
  margin: var(--space-6) 0 var(--space-2);
  cursor: zoom-in;
  touch-action: manipulation;
}
.docs-page--article figure { margin: var(--space-8) 0; }
.docs-page--article figure img { margin-top: 0; }
.docs-page--article figcaption {
  font: var(--text-body-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.btn-lang-note { font-family: var(--font-mono); font-size: 0.85em; color: var(--text-muted); }
.callout-inline { margin-top: var(--space-6); max-width: 660px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); background: var(--surface-raised); display: flex; gap: 12px; align-items: flex-start; }
.callout-inline .prompt { font-family: var(--font-mono); color: var(--accent); }
.callout-inline p { font: var(--text-body-sm); color: var(--text-secondary); margin: 0; }

.docs-unavailable { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-6); text-align: center; }
.docs-unavailable-title { font: var(--text-h2); color: var(--text-primary); margin: 0 0 var(--space-4); }
.docs-unavailable-lead { font: var(--text-body); color: var(--text-secondary); max-width: 520px; margin: 0 auto var(--space-8); }
.docs-unavailable-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

.image-lightbox .image-lightbox-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(1200px, 96vw);
  max-height: 92vh;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.image-lightbox-close {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--text-primary);
  touch-action: manipulation;
}

/* Zoom toolbar — floats over the top-left corner, same treatment as the
   close button so it stays reachable regardless of image size/scroll.
   Buttons are 44px (not the 32px a mouse cursor would be fine with) --
   the platform-recommended minimum touch target; a mouse pointer doesn't
   care about the extra padding, a fingertip does.

   left is --space-6 (24px), not --space-4 (16px) -- Chrome on iOS reserves
   roughly the leftmost ~20px of the screen for its own edge-swipe
   back-navigation gesture, which swallows taps on anything placed inside
   that zone before they ever reach the button's click handler. Safari
   doesn't claim that zone the same way, which is why this only broke in
   Chrome. */
.image-lightbox-zoom {
  position: fixed;
  top: var(--space-4);
  left: var(--space-6);
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: 4px;
  box-shadow: var(--shadow-md);
}
.image-lightbox-zoom-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-primary);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.image-lightbox-zoom-btn:hover { background: var(--surface-sunken); }
.image-lightbox-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.image-lightbox-zoom-btn:disabled:hover { background: transparent; }
.image-lightbox-zoom-level {
  min-width: 52px;
  height: 44px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font: var(--text-body-sm);
  font-family: var(--font-mono);
  cursor: pointer;
  border-radius: var(--radius-full);
  touch-action: manipulation;
}
.image-lightbox-zoom-level:hover { background: var(--surface-sunken); color: var(--text-primary); }

/* Scrollable window around the image. At 100% zoom the image's own
   max-width/max-height already shrink it to fit here with nothing to
   scroll; zooming in via transform: scale() on the image paints it larger
   than this box, which is what gives the browser something to scroll to
   pan around. Matched max-height on both keeps the initial "fit whole
   screenshot on screen" behavior exactly as before zoom existed.

   touch-action: pan-x pan-y (not the "manipulation" default, which still
   permits pinch-zoom and double-tap-zoom) hands single-finger dragging to
   native scrolling but stops the browser from also pinch/double-tap
   zooming the image itself — without this, a touch device's own zoom
   gesture fights the custom +/-/double-tap controls below and neither
   ends up working reliably. */
.image-lightbox-viewport {
  max-width: 100%;
  max-height: 85vh;
  overflow: auto;
  touch-action: pan-x pan-y;
}
.image-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-ink-0);
  box-shadow: var(--shadow-lg);
  transform-origin: 0 0;
  transition: transform 150ms var(--ease-standard, ease);
  /* Matches the viewport, not "manipulation" -- the image is the element a
     finger actually touches for pinch/double-tap, so "manipulation" here
     would let the browser's native zoom gesture compete with the custom
     +/-/double-tap controls again, same fight the viewport rule above is
     meant to prevent. */
  touch-action: pan-x pan-y;
}
.image-lightbox-caption {
  margin: var(--space-3) 0 0;
  text-align: center;
  font: var(--text-body-sm);
  color: var(--text-secondary);
}
.image-lightbox-caption:empty { display: none; }

.docs-index-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.docs-index-list a {
  display: block;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  text-decoration: none;
}
.docs-index-list a:hover { border-color: var(--border-strong); text-decoration: none; }
.docs-index-name { display: block; font: var(--text-label); font-family: var(--font-body); color: var(--text-primary); margin-bottom: 4px; }
.docs-index-desc { display: block; font: var(--text-body-sm); color: var(--text-secondary); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-top: var(--space-2); }
  .docs-toc {
    top: 64px;
    margin: 0 calc(-1 * var(--space-6)) var(--space-2);
    padding: var(--space-2) var(--space-6);
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-subtle);
  }
  .docs-toc-title { display: none; }
  .docs-toc nav { margin: 0 calc(-1 * var(--space-6)); }
  .docs-toc ul {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
    border-left: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--space-6);
  }
  .docs-toc ul::-webkit-scrollbar { display: none; }
  .docs-toc li { flex: none; }
  .docs-toc a {
    border-left: 0;
    padding: 4px var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    margin-left: 0;
    font: var(--text-code-sm);
    white-space: nowrap;
  }
  .docs-toc a.is-active { color: var(--accent); border-color: var(--accent); }
  .docs-page--article h2,
  .docs-page--article h3 { scroll-margin-top: var(--docs-scroll-offset, calc(64px + 3rem)); }
  .docs-page--article > h2:first-child { margin-top: var(--space-4); }
  .docs-head-row { flex-wrap: wrap; }
  .product-panel > .product-footrow,
  .product-top { padding: var(--space-6); }
  .product-footrow { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .product-actions { flex-direction: column; align-items: stretch; }
  .product-actions .btn { width: 100%; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-16); }
  .services { grid-template-columns: minmax(0, 1fr); }
  .product-top { grid-template-columns: minmax(0, 1fr); }
  .support-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .plugin-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .ticket-row-2 { grid-template-columns: minmax(0, 1fr); }
  .hero-title { font-size: 2.5rem; }
}