/* Format hub landing pages (/ubl, /peppol, /xrechnung, /facturx, /zugferd, /cii).
   Shared components are reused from style.css and Tailwind, not redefined:
   .section-container (container), .btn/.btn-hero/.btn-lg (buttons),
   .glass-card (cards), .eyebrow-badge (section kickers), Tailwind utilities
   for spacing/typography/colors, and <i data-lucide class="w-* h-*"> for icon
   sizing. Colors reuse the global tokens in style.css (--bg-0, --mint, --sub,
   --badge-ink, --gradient-hero, etc.).
   The rules below cover only the components the hub pages introduce that have
   no existing equivalent: the dark bands, the code panels with header chrome,
   the profile matrix table, the schedule card, and the FAQ accordion.
   Everything is scoped under .hub-page so it cannot leak into the rest of the
   site. */

/* ---- Dark bands (hero + autopilot) ---- */
.hub-dark { position: relative; overflow: hidden; background: var(--gradient-hero); color: #e9f1ec; }
.hub-gridtex {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(1000px 560px at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(1000px 560px at 50% 0%, #000 30%, transparent 78%);
}
.hub-glow {
  position: absolute; pointer-events: none;
  width: 560px; height: 420px; top: -80px; right: -120px;
  background: radial-gradient(circle, rgba(159,224,168,.14), transparent 60%);
}

/* ---- Ghost button on dark bands (no shared variant targets dark surfaces) ---- */
.hub-page .btn-ghost-dark { color: #eaf3ee; border-color: rgba(255,255,255,.16); }
.hub-page .btn-ghost-dark:hover { background: rgba(159,224,168,.10); border-color: rgba(159,224,168,.45); }

/* ---- Hero badge (translucent pill on dark) ---- */
.hub-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  color: var(--badge-ink); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 7px 14px;
}
.hub-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px 1px rgba(159,224,168,.7); }

/* ---- Code panels (dark surface + header chrome + syntax tokens) ---- */
.hub-code { background: var(--bg-0); border: 1px solid rgba(255,255,255,.08); border-radius: .875rem; box-shadow: 0 30px 60px -34px rgba(0,0,0,.7); overflow: hidden; }
.hub-code-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.018); }
.hub-code-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--mint); }
.hub-code-tag--err { color: hsl(var(--destructive)); }
.hub-code-dots { display: flex; gap: 6px; margin-left: auto; }
.hub-code-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.13); display: block; }
.hub-code-pre { margin: 0; padding: 16px 18px; font-family: var(--font-mono); font-size: 12.6px; line-height: 1.62; color: #cdd9d2; overflow-x: auto; white-space: pre; }
.hub-code-pre::-webkit-scrollbar { height: 7px; }
.hub-code-pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
.hub-code-pre .t-key { color: #8fb3a6; }
.hub-code-pre .t-str { color: #9fe0a8; }
.hub-code-pre .t-num { color: #e0c97f; }
.hub-code-pre .t-bool { color: #7fc4e0; }
.hub-code-pre .t-punct { color: #6f8a82; }
.hub-code-pre .t-cmd { color: #cfe9dd; }
.hub-code-pre .t-flag { color: #8fb3a6; }

/* ---- Profile matrix table ---- */
.hub-matrix table { width: 100%; border-collapse: collapse; }
.hub-matrix thead th { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); padding: 15px 22px; background: hsl(var(--muted)); border-bottom: 1px solid hsl(var(--border)); }
.hub-matrix thead th:nth-child(1) { width: 23%; }
.hub-matrix thead th:nth-child(2) { width: 16%; }
.hub-matrix thead th:nth-child(3) { width: 28%; }
.hub-matrix thead th:nth-child(4) { width: 33%; }
.hub-matrix tbody td { padding: 19px 22px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; font-size: .9375rem; line-height: 1.5; }
.hub-matrix tbody tr:last-child td { border-bottom: 0; }
.hub-matrix tbody tr { transition: background .14s; }
.hub-matrix tbody tr:hover { background: hsl(var(--muted) / .5); }
.hub-matrix__foot { padding: 18px 22px; background: hsl(var(--muted) / .55); font-size: .8125rem; color: hsl(var(--muted-foreground)); line-height: 1.55; }
.hub-pname { font-family: var(--font-display); font-weight: 600; color: hsl(var(--foreground)); }
.hub-pname:hover { color: hsl(var(--accent-strong)); }
.hub-pname svg { display: inline-block; vertical-align: middle; margin-left: 5px; }
@media (max-width: 980px) { .hub-matrix table { min-width: 720px; } }

/* ---- Autopilot schedule card (translucent on dark) ---- */
.hub-sched { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: .875rem; padding: 24px; }
.hub-sched-pill { font-family: var(--font-mono); font-size: 11.5px; color: var(--mint); background: rgba(159,224,168,.1); border: 1px solid rgba(159,224,168,.25); padding: 4px 10px; border-radius: 999px; }
.hub-sched-blip { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px 1px rgba(159,224,168,.7); }

/* ---- Card hover micro-interactions (cards themselves use .glass-card) ---- */
.hub-card-hover { transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s, border-color .16s; }
.hub-card-hover:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -28px hsl(201 29% 15% / .25); border-color: hsl(var(--accent-strong) / .4); }
.hub-tool-arrow { transition: transform .16s; }
.hub-tool:hover .hub-tool-arrow { transform: translateX(3px); }

/* ---- Dev resource rows ---- */
.hub-res { transition: padding-left .14s; }
.hub-res:hover { padding-left: 10px; }
.hub-res-arrow { transition: transform .14s, color .14s; }
.hub-res:hover .hub-res-arrow { transform: translateX(3px); color: hsl(var(--accent-strong)); }

/* ---- FAQ accordion ---- */
.hub-q { border-bottom: 1px solid hsl(var(--border)); }
.hub-q summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; align-items: center; gap: 18px; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: hsl(var(--foreground)); }
.hub-q summary::-webkit-details-marker { display: none; }
.hub-q-chev { margin-left: auto; flex: 0 0 auto; color: hsl(var(--accent-strong)); transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.hub-q[open] .hub-q-chev { transform: rotate(180deg); }
.hub-q-ans { padding: 0 0 24px; max-width: 72ch; color: hsl(var(--muted-foreground)); line-height: 1.65; }

/* ---- Inline code chips (matches the site's warm inline-code token) ---- */
.hub-page code { font-family: var(--font-mono); font-size: .9em; background: hsl(var(--inline-code-bg)); padding: 1px 6px; border-radius: 5px; color: hsl(var(--foreground)); }

/* ---- Focus ring parity on this page's custom controls ---- */
.hub-page a:focus-visible, .hub-page summary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(64,156,120,.18); border-radius: 4px; }